You will create a compelling single-page site that features a sign-up process to get new users to join some type of project, such as an email list, a software beta test, or an open-source community. The goal of this project is to experiment with patterns of interaction that persuade someone to sign up for whatever it is you’re offering, which is not an easy task. Design for effortless, engaging entry of personal information. Include friendly, frictionless client-side tests and alerts for malformed, missing, or incomplete information.
- Create a touch-friendly, mobile-first responsive web design
- Experiment with design and interaction patterns for pleasing user experience
- Design and execute a progressively enhanced page focused on system users and tasks
- Apply design principles including typography, layout, color, and material design
- Engage in agile, iterative web design and development, supported by version control
Deliverables & Milestones
Sketches of your design. These can either be natively digital sketches, or paper
sketches that you photograph. Whatever method you choose, save your sketches in a web
friendly format (JPEG, PNG) and place them in a directory called
_sketchesin your repository.
- A video presentation of your work in progress. Host the video on YouTube, Vimeo, or another similar service and post the link to Basecamp. Your Basecamp post should also include the URL to your GitHub repository and representative sketches that you made in designing your interface. Include in the text of your post one or two specific things you would like feedback or help on from the instructor and other students in the class (due no later than February 10, 11:59pm).
- Substantive comments critiquing at least three other student projects (by Febraury 14, 11:59pm CT).
An email to the instructor containing the project’s two final deliverables (by February
28, 11:59pm CT):
- A 4-5 sentence self-critique memo of your project and your progress in class to this point
The https:// link to your project’s GitHub repository, which should include your
sketches in a
- Encode source files in UTF-8/Unicode with Unix-style line endings (LF); entab with spaces, not tab characters
- HTML requirements:
Use the default-served
index.htmlfile name in directory-based URLs, so that you can point to, for example,
- Write well-formed, valid semantic HTML. Projects whose HTML does not validate with the W3C HTML validator will receive a zero-point, failing grade. In the unlikely event that you discover a validation error or warning that is a genuine bug in the validator, you must acknowledge that bug in the memo that accompanies your project, and point to the relevant documentation, such as specifications or an existing reputable bug report, that your source is in fact correct. Get in the habit of validating and linting your HTML before you commit to Git.
- Use only structural, semantic HTML elements and attributes. Absolutely no table markup, break tags, or any other use of HTML to achieve a particular page layout. All layout and design should be handled via CSS.
Write valid HTML form elements in conjunction with
<label>tags and the
Present semantically structured text-based content to accompany all media elements
(image, audio, video). Make use of the
- Use the default-served
- CSS requirements:
Write one single valid, linted, error-free CSS file called
screen.css. Do not create more than one CSS file for your project; all styles should be in the same file.
screen.csswith the minified Eric Meyer reset CSS styles
Use only relative units (
%) in your CSS; no
pt, or other absolute units are permitted in your CSS
min-widthmedia queries to enhance your mobile-first styles for larger screens
- Write one single valid, linted, error-free CSS file called
Use an immedately invoked function expression (IIFE), function closures, and other
techniques to avoid polluting the global
- Git requirements:
- Build a Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
- Include only the files and commits from this project in your repository
- Use only the command-line Git program on your computer; no commits made through the GitHub web interface