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. Focus on designing for an effortless, engaging entry of personal information; and friendly, frictionless client-side tests and alerts for malformed, missing, or incomplete information. 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 at all an easy task.
- 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 and place in a directory called
_sketchesin your repository.
- A video presentation of your work in progress, hosted on YouTube, Vimeo, or another similar service and posted to Basecamp. Your Basecamp post should 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 1, 11:59pm).
- Substantive comments critiquing at least three other student projects (by Febraury 11, 11:59pm CT).
An email to the instructor containing the projects two final deliverables (by February
18, 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
- All source files in UTF-8/Unicode character encoding with Unix-style line endings (LF), entabbed with spaces (two spaces per tab)
Semantically structured text-based content to accompany all media elements (image,
audio, video). Make use of the
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. Use an
<body>and leverage that in a CSS descendant selector if you need a special style on a particular page.
The opening lines of your
screen.cssfile should be the Eric Meyer reset CSS styles
Use of only relative units (
%) in your CSS; no
pt, or other absolute units are permitted in your CSS
- Use at least three min-width media queries to enhance your mobile-first styles for larger screens
- A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
- Your GitHub repository must contain ONLY the files and commits from this project