Embed Size (px)
Citation preview
1. The UMD CS Homepage
2. Webpage of your choice
Jon Froehlich Webpage: Overview Screenshotshttp://www.cs.umd.edu/~jonf/
Jon Froehlich Webpagehttp://www.cs.umd.edu/~jonf/
DescriptionAn academic website for an HCI professor at UMD
Target UsersResearchers, CS folks, students, other academics, general technical audience
CritiquePositives:• Clean, minimalistic look• Well-organized• Easy-to-find important information like contact, address, pubs
Negatives:• Lots of text, a bit overwhelming• Some of the news/travel out-of-date• Not super exciting/compelling UI• Fonts are a bit small
Jon Froehlich Webpage: Layout Critiquehttp://www.cs.umd.edu/~jonf/
Layout DescriptionA 3-column layout: columns 1 and 3 are sidebars sandwiching main content in column 2
CritiquePositives: simple, flows well, easy-to-understandNegatives: columns are not responsive (e.g., page does not scale to higher resolution, more space)
Jon Froehlich Webpage: Color Palettehttp://www.cs.umd.edu/~jonf/
Link Highlight173, 71, 79
Menu Highlight173, 71, 79
Content Text0,0,0
Sidebar Text68,68,68
Menu Unselected Text153,153,153
Past Travel Text191,191,191
Background255,255,255
You can provide Color Palette examples in
two ways (choose one):
1. Color Example 1: shows color swatch with example UI
2. Color Example 2: shows interface with color swatch
Jon Froehlich Webpage: Color Example 1http://www.cs.umd.edu/~jonf/
Link Highlight173, 71, 79
Menu Highlight173, 71, 79
Content Text0,0,0
Sidebar Text68,68,68
Past Travel Text191,191,191
Background255,255,255
Menu Unselected Text153,153,153
Jon Froehlich Webpage: Color Example 2http://www.cs.umd.edu/~jonf/
Menu Highlight173, 71, 79
Content Text0,0,0
Background255,255,255
Menu Unselected Text153,153,153
Sidebar Text68,68,68
Link Highlight173, 71, 79
Past Travel Text191,191,191
Jon Froehlich Webpage: Color Critiquehttp://www.cs.umd.edu/~jonf/
Link Highlight173, 71, 79
Menu Highlight173, 71, 79
Content Text0,0,0
Sidebar Text68,68,68
Menu Unselected Text153,153,153
Past Travel Text191,191,191
Background191,191,191
Color DescriptionUses one primary hue (a maroonish pink) + black, white, and 3 grayscale shades
CritiquePositives: • Color palette between image of Jon and webpage is consistent, creating a nice, clean unifying look• Uses gray effectively to de-emphasize less important content• The palette feels professional
Negatives:• The colors are a bit on the bland side
Jon Froehlich Webpage: Typographyhttp://www.cs.umd.edu/~jonf/
Segoe UI Semibold
Segoe UI Light
You can provide Typography examples in two
ways (choose one):
1. Typography Example 1: shows UI snippets with description
2. Typography Example 2: shows interface with font descriptions
Note: Some apps/pages use many (many!) different kinds of fonts, weights, and sizes. Please just analyze the top N (where N is selected based on importance, frequency of use, etc).
Jon Froehlich Webpage: Typography Example 1http://www.cs.umd.edu/~jonf/
Page HeaderSegoe UI Light44pxStyle: Regular
Content HeaderSegoe UI Light14pxStyle: All Caps, larger
Content TextSegoe UI Light14pxStyle: Regular
Sidebar HeaderSegoe UI Light12pxStyle: All Caps, larger
Sidebar TextSegoe UI Light12pxStyle: Regular
News Item HeaderSegoe UI Semibold11pxStyle: Regular
Jon Froehlich Webpage: Typography Example 2http://www.cs.umd.edu/~jonf/
Page HeaderSegoe UI Light
44px, Style: Regular
Content HeaderSegoe UI Light
14px, Style: All Caps, larger
Content TextSegoe UI Light
14px, Style: Regular
Sidebar HeaderSegoe UI Light12px, Style: All Caps, larger
Sidebar TextSegoe UI Light12px, Style: Regular
News Item HeaderSegoe UI Semibold11px, Style: Regular
Jon Froehlich Webpage: Typography Critiquehttp://www.cs.umd.edu/~jonf/
Segoe UI Semibold
Segoe UI Light
Typography DescriptionUses the Segoe UI family. Most text is thin-weight (Light).
CritiquePositives: • The thin-weight font provides a clean aesthetic• The Segoe UI font family is modern looking and used, for example, in Windows 10 and Windows Phone
Negatives• Thin-weight fonts are harder to read• Generally, there is simply too much text on the frontpage
Jon Froehlich Webpage: Iconographyhttp://www.cs.umd.edu/~jonf/
N/AMy webpage lacks icons, so nothing to report here. For an application that uses icons, extract them and line them up similar to the Color Palette (Slide 7)
Jon Froehlich Webpage: Iconography Critiquehttp://www.cs.umd.edu/~jonf/
N/AIconography DescriptionNone
CritiqueN/A
Other Things
Though not required, feel free to also critique:
• The use of imagery
• Animation
• Cross-page consistency
• On Web: responsive design
3. Mobile app of your choice
4. Physical artifact of your choice
