CS 160 User Interface Design
Graphic Design Section 09・November 7, 2014
Elizabeth Lin・OH Mondays 1-2pm・[email protected] How did the midterm go? Administrivia Upcoming
Contextual Inquiry Nov. 07, 11:59pm Programming Assignment 03 Nov. 10, 11:59pm Interactive Prototype Nov. 18, before class
All assignments are on bCourses! Typography What is typography? “the study of how letterforms interact on a surface, directly relating to how the type will be set” Good typography is invisible, bad typography is everywhere. Font v. Typeface Font v. Typeface A font is the file or the physical representation of collection of letters while a typeface is the visual appearance of the collection of letters. The font is what you use, the typeface is what you see. ASCENDER HEIGHT CAP HEIGHT ASCENDER EAR X-HEIGHT
STEM
BRACKET LINK
BASELINE BOWL SPUR DESCENDER LOOP DESCENDER LINE
APEX ARM COUNTER
SPINE CROSSBAR How to Pick a Typeface 1. Variety of Weights
Archer Hairline Archer Light Archer Semibold Archer Hairline Italic Archer Light Italic Archer Semibold Italic
Archer Thin Archer Book Archer Bold Archer Thin Italic Archer Book Italic Archer Bold Italic
Archer Extra Light Archer Medium Archer Extra Light Italic Archer Medium Italic 2. Tall x-height Gotham Medium 3. Does it have a true italic?
Georgia vs. Georgia 4. 1|I v. 0|O Rule 5. Diferentiating Characters ag vs. ag 6. Large Counters ag vs. ag Serif v. Sans-serif Serif Typefaces Sans-Serif Typefaces Combining Typefaces Main Rule Create Contrast! Weight
Create contrast by varying the weight of the type. Weights generally include Light, Regular, Bold, Black, etc. Try to make the fonts noticeably different without being too extreme. Here are a few examples. ChunkFive Archer Book with Helvetica Neue with Maven Pro 100 Lato Black Leitura Display with Lato Light with Times New Roman Style/Decoration
Create contrast by varying the style of the same type. Font Styles include Italic, Underline, Strikethrough, etc. You can also add text decorations including drop shadow, colors, or outline. Century Gothic Archer Book with Century Gothic with Archer Thin Italic Lato Light Italic with Lato Hairline Regular with Nevis Bold without outline Classification
In general, when combining typefaces, you want to combine typefaces that are of different classification. This rule is commonly seen in magazine/newspaper design where the headline is a sans-serif and the body text is a serif typeface. GOVERNOR Didot Regular with Adobe Garamond Pro with Archer Thin Regular Helvetica Bold St. Marie Thin with Adobe Caslon Pro with Lato Light Regular
DON’T pair typefaces together that are too similar to each other. Helvetica Regular with Arial Regular withAdobe Adobe Caslon Garamond Pro Pro Structure
Another general rule is to choose fonts that are different, but have the same structure. Judging the strucutre of a typeface is a little harder, but if their x-height (lowercase letters) are the same, that’s generally a good start. Century Gothic Futura Medium with Times New Roman with Cambria Regular Starting Point Choose one typeface (Open Sans, Droid Serif, Times New Roman, etc) and only use that typeface with a variety of weights and sizes to create a typographic hierarchy. THIS IS A HEADLINE This is a subheading This is where the author’s name goes
Here’s a paragraph. Bacon ipsum dolor amet andouille turducken corned beef, brisket doner kielbasa frankfurter leberkas chicken shankle pork loin venison. Typography Resources http://jessicahische.is/talkingtype http://www.thinkingwithtype.com/ http://practicaltypography.com/ http://webtypography.net/toc/ https://www.google.com/fonts Color Theory If one says “Red” (the name of a color) and there are 50 people listening, it can be expected that there will be 50 reds in their minds. And one can be sure that all these reds will be very diferent
Albers’ Interaction of Color
Color Meanings Red
Orange
Yellow
Green
Blue
Violet
Gray/Black
White Color Modes RGB CMYK Color Terminology Color Wheel
Color Relationships Monochromatic Complementary Split Complementary Double Complementary Analagous Triad Color Resources https://color.adobe.com/ http://colorschemedesigner.com/ http://kadavy.net/blog/posts/d4h-color-theory/ Iconography You don’t have to draw your own! Check out these free resources http://fortawesome.github.io/Font-Awesome/ thenounproject.com http://iconmonstr.com/ If you want to create your own, here are some guidelines… 1. Design for the Size the Icon will be Used At 2. Keep icons simple. Make sure they’re recognizable at a glance. 3. Make sure your icons are consistent with each other. Contextual Inquiry Nov. 07, 11:59pm Programming Assignment 03 Nov. 10, 11:59pm Interactive Prototype Nov. 18, before class
Elizabeth Lin・OH Mondays 1-2pm・[email protected]