1. 1. The UMD CS Homepage

2. 2. Webpage of your choice

3. Jon Froehlich Webpage: Overview Screenshots

4. Jon Froehlich Webpage Description
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

5. Jon Froehlich Webpage: Layout

6. Jon Froehlich Webpage: Layout Critique
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)

7. Jon Froehlich Webpage: Color Palette
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

8. 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

9. Jon Froehlich Webpage: Color Example 1
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

10. Jon Froehlich Webpage: Color Example 2
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

11. Jon Froehlich Webpage: Color Critique
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

12. Jon Froehlich Webpage: Typography
Segoe UI Semibold
Segoe UI Light

13. 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).

14. Jon Froehlich Webpage: Typography Example 1
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

15. Jon Froehlich Webpage: Typography Example 2
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

16. Jon Froehlich Webpage: Typography Critique
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

17. Jon Froehlich Webpage: Iconography
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)

18. Jon Froehlich Webpage: Iconography Critique
N/A
Iconography Description
None
Critique
N/A

19. Other Things Though not required, feel free to also critique:
The use of imagery
Animation
Cross-page consistency
On Web: responsive design

20. 3. Mobile app of your choice

21. 4. Physical artifact of your choice