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! 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. v. 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. HEIGHT CAP HEIGHT ASCENDER EAR X-HEIGHT

STEM

BRACKET LINK

BASELINE BOWL SPUR LOOP DESCENDER LINE

APEX ARM

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 v. Sans-serif Serif 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 noticeably different without being too extreme. Here are a few examples. ChunkFive Archer Book with 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, , 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 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 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 . 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]