Fall 2015
Advanced Interaction Design
COGS 160
A6: Responsive
Create a mock-up for the home page and one other page of your site for three form factors:
- phone: 480 px (4") w × 720 px (6") h
- tablet: 768 px (6") w × 1024 px (8") h
- desktop: 1200 px (10") w × 800 px (7") h
This is a total of six pages. (Pages whose primary function is just to log in don't count; show something with more substantive interaction.f) Each should show the intended actual layout, with typefaces & colors. Please bring in print copies.
There should be
- A clear and consistent grid top to bottom
- All the text large enough & sufficient contrast to be legible
- Elements have a good aspect ratio for the content they contain
- A consistent visual style, consistent with the 'voice' and usage of the site.
- Information that helps people accomplish their task.
- Large blocks should contain the infrmation most valuable to a user's task.
- Familiarity with one form factor should transfer to the others.
- Variation in type size that reflects variation in content. As a general heuristic, repeated content can be smaller. Content content should be larger.
- Headers that add a lot of information should be large. Headers that add little information (where the header is mostly implied by the content) should be small. headers that add no information (where the header is completely implied by the content) should be omitted.
- A wise use of vertical space.
- Whitespace should give elements room to breathe. Whitespace should not be so large that connected elements get lost.
- Dashboards and other data graphics should help users answer questions they really have, not just give the patina of data.
- As a rule of thumb, multi-line text and headers that repeat down the page should be left-justified. Lone lines can be centered. With tabular data and forms, the left column can be right-justified.
There should not be
- Extraneous lines & 'chartjunk'
- Elements unnecessarily repeated on the same page
- Inconsistent color & layout choices.
- Information of minimal relevance to common tasks.