1. The UMD CS Homepage

2. Webpage of your choice

Jon Froehlich Webpage: Overview Screenshots http://www.cs.umd.edu/~jonf/

Jon Froehlich Webpage Description http://www.cs.umd.edu/~jonf/ Description An academic website for an HCI professor at UMD Target Users Researchers, CS folks, students, other academics, general technical audience Critique Positives: 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 http://www.cs.umd.edu/~jonf/

Jon Froehlich Webpage: Layout Critique http://www.cs.umd.edu/~jonf/ Layout Description A 3-column layout: columns 1 and 3 are sidebars sandwiching main content in column 2 Critique Positives: simple, flows well, easy-to-understand Negatives: columns are not responsive (e.g., page does not scale to higher resolution, more space)

Jon Froehlich Webpage: Color Palette http://www.cs.umd.edu/~jonf/ Link Highlight 173, 71, 79 Menu Highlight 173, 71, 79 Content Text 0,0,0 Sidebar Text 68,68,68 Menu Unselected Text 153,153,153 Past Travel Text 191,191,191 Background 255,255,255

You can provide Color Palette examples in two ways (choose one): Color Example 1: shows color swatch with example UI Color Example 2: shows interface with color swatch

Jon Froehlich Webpage: Color Example 1 http://www.cs.umd.edu/~jonf/ Link Highlight 173, 71, 79 Menu Highlight 173, 71, 79 Content Text 0,0,0 Sidebar Text 68,68,68 Menu Unselected Text 153,153,153 Past Travel Text 191,191,191 Background 255,255,255

Jon Froehlich Webpage: Color Example 2 http://www.cs.umd.edu/~jonf/ Menu Highlight 173, 71, 79 Menu Unselected Text 153,153,153 Content Text 0,0,0 Sidebar Text 68,68,68 Link Highlight 173, 71, 79 Background 255,255,255 Past Travel Text 191,191,191

Jon Froehlich Webpage: Color Critique http://www.cs.umd.edu/~jonf/ Link Highlight 173, 71, 79 Menu Highlight Content Text 0,0,0 Sidebar Text 68,68,68 Menu Unselected Text 153,153,153 Past Travel Text 191,191,191 Background Color Description Uses one primary hue (a maroonish pink) + black, white, and 3 grayscale shades Critique Positives: 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: Typography http://www.cs.umd.edu/~jonf/ Segoe UI Semibold Segoe UI Light

You can provide Typography examples in two ways (choose one): Typography Example 1: shows UI snippets with description 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 1 http://www.cs.umd.edu/~jonf/ Page Header Segoe UI Light 44px Style: Regular Content Header Segoe UI Light 14px Style: All Caps, larger Content Text Segoe UI Light 14px Style: Regular Sidebar Header Segoe UI Light 12px Style: All Caps, larger Sidebar Text Segoe UI Light 12px Style: Regular News Item Header Segoe UI Semibold 11px Style: Regular

Jon Froehlich Webpage: Typography Example 2 http://www.cs.umd.edu/~jonf/ Page Header Segoe UI Light 44px, Style: Regular Sidebar Header Segoe UI Light 12px, Style: All Caps, larger Sidebar Text Segoe UI Light 12px, Style: Regular Content Text Segoe UI Light 14px, Style: Regular News Item Header Segoe UI Semibold 11px, Style: Regular Content Header Segoe UI Light 14px, Style: All Caps, larger

Jon Froehlich Webpage: Typography Critique http://www.cs.umd.edu/~jonf/ Segoe UI Semibold Segoe UI Light Typography Description Uses the Segoe UI family. Most text is thin-weight (Light). Critique Positives: 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: Iconography http://www.cs.umd.edu/~jonf/ N/A My 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 Critique http://www.cs.umd.edu/~jonf/ N/A Iconography Description None Critique N/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