color & typography
DESCRIPTION
TRANSCRIPT
COLOR
TYPOGRAPHYand
Thursday, December 15, 11
Goals for today•Review
•Colors & color palettes
•Accessibility
•Image formatting
•Typefaces
•Typography site review
Thursday, December 15, 11
What is progressive enhancement?
Thursday, December 15, 11
A layered approach to Web Design,
focused on content, accessibility & the
user.
Thursday, December 15, 11
HTML - StructureCSS - Presentation
JS - Behavior
ProgressiveEnhancement
Thursday, December 15, 11
Review: The Design Process
Thursday, December 15, 11
The Design Process•Define
•Structure
•Design
•Build & Test
•Launch
Thursday, December 15, 11
Colors & Color Pallets
Thursday, December 15, 11
The Color Wheel
Thursday, December 15, 11
RGB vs CMYK
Thursday, December 15, 11
cool/passive
warm/active
1
1 1
2
2 2
3
3
3 3
3
3
Thursday, December 15, 11
Thursday, December 15, 11
Thursday, December 15, 11
Thursday, December 15, 11
Color Types
Thursday, December 15, 11
RED
Thursday, December 15, 11
Thursday, December 15, 11
PURPLE
Thursday, December 15, 11
Thursday, December 15, 11
BLUE
Thursday, December 15, 11
Thursday, December 15, 11
GREEN
Thursday, December 15, 11
Thursday, December 15, 11
Thursday, December 15, 11
ORANGE
Thursday, December 15, 11
Thursday, December 15, 11
YELLOW
Thursday, December 15, 11
Thursday, December 15, 11
http://wearepandr.com/labs/colour_bookmark
Thursday, December 15, 11
Accessibility
Thursday, December 15, 11
Color Blindness
•Total
•Red-Green
•Blue-Yellow
Thursday, December 15, 11
Color Blindness
Thursday, December 15, 11
Color Blindness
Click the red button to continue
continue continue
Thursday, December 15, 11
Image formatting
Thursday, December 15, 11
Thursday, December 15, 11
Image formatting•GIF
•JPEG
•PNG 8
•PNG 24
•PNG 32
•Vector
Thursday, December 15, 11
Typography
Thursday, December 15, 11
Typography•font face (font-family)
•size (font-size)
•line length (max-width)
•leading (line-height)
•tracking (word-spacing)
•kerning (letter-spacing)
•color (color)
Thursday, December 15, 11
Anatomy of a Font
Special font, the letter y.
Cap height
Ascender
Meanline
Descender
Baseline
Thursday, December 15, 11
Anatomy of a Font
Special font x x-height
Thursday, December 15, 11
Anatomy of a Font
Special fontSerif
Thursday, December 15, 11
Font Face•Serif
•Sans-serif
•Monospace
•Slab Serif
•Handwritten
•Decorative
•Ornamental
Thursday, December 15, 11
Serif
Thursday, December 15, 11
Sans-Serif
Thursday, December 15, 11
Monospace
Thursday, December 15, 11
Slab-Serif
Thursday, December 15, 11
Handwritten
Thursday, December 15, 11
decorative
Thursday, December 15, 11
Thursday, December 15, 11
Size & weight•Emphasis like this
•hierarchy...
•...shows order
•general readability
http://www.bostonglobe.com/todayspaper
Thursday, December 15, 11
Line LengthIn typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods.
In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods.
Thursday, December 15, 11
Line HeightIn typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods.
In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods.
Thursday, December 15, 11
Line Height/Length
In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods.
Thursday, December 15, 11
Word Spacing
In typography, color is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins.[18] Text layout, tone or color of set matter, and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter. With printed media typographers are also concerned with binding margins, paper selection and printing methods.
Thursday, December 15, 11
Letter Spacing I n t y p o g r a p h y , c o l o r i s t h e o v e r a l l d e n s i t y o f t h e i n k o n t h e p a g e , d e t e r m i n e d ma i n l y b y t h e t y p e f a c e , b u t a l s o b y t h e w o r d s p a c i n g , l e a d i n g a n d d e p t h o f t h e m a r g i n s . [ 1 8 ] T e x t l a y o u t , t o n e o r c o l o r o f s e t m a t t e r , a n d t h e i n t e r p l a y o f t e x t w i t h w h i t e s p a c e o f t h e p a g e a n d o t h e r g r a p h i c e l e m e n t s c o m b i n e t o i m p a r t a " f e e l " o r " r e s o n a n c e " t o t h e s u b j e c t m a t t e r . W i t h p r i n t e d m e d i a t y p o g r a p h e r s a r e a l s o c o n c e r n e d w i t h b i n d i n g m a r g i n s , p a p e r s e l e c t i o n a n d p r i n t i n g m e t h o d s .
Thursday, December 15, 11
Color
Thursday, December 15, 11
What movie is it?Font as a logo
Thursday, December 15, 11
0123456789ABCDEFGHIJKLMNOP
QRSTUVWXYZ
Thursday, December 15, 11
Harry Potter
Thursday, December 15, 11
0 123456789A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z
Thursday, December 15, 11
The God f a t h e r
Thursday, December 15, 11
0123456789ABCDEFGHIJKLMNOP
QRSTUVWXYZ
Thursday, December 15, 11
Back to the future
Thursday, December 15, 11
0123456789
ABCDEFGHIJKLMNOP
QRSTUVWXYZ
Thursday, December 15, 11
007 GOLDENEYE
Thursday, December 15, 11
Great Typography
Thursday, December 15, 11
Thursday, December 15, 11
Thursday, December 15, 11
Thursday, December 15, 11
Thursday, December 15, 11
Thursday, December 15, 11
Thursday, December 15, 11
Typography on the Web
Thursday, December 15, 11
http://ruth.realityla.com/
Thursday, December 15, 11
http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
Thursday, December 15, 11
Thursday, December 15, 11
Thursday, December 15, 11
http://bostonglobe.com/arts/2011/12/15/unfinished-spaces-look-plan-from-castro-revolution/
K723H16LY24PR9zfqtROsN/story.html
Thursday, December 15, 11
Thursday, December 15, 11
Great Sites to Read•I Love Typography
•We Love Typography
•Typography Daily
•Fonts.com
•The Noun Project
•Colour Lovers
Thursday, December 15, 11
Today is in the past•Review
•Colors & color palettes
•Accessibility
•Image formatting
•Typefaces
•Typography site review
•http://wearepandr.com/labs/colour_bookmark
Thursday, December 15, 11
Next Class
•Navigation
•Information Architecture
•Accessing Information
•Site mapping
•Wireframing
Thursday, December 15, 11
Slide Color Pallet
Thursday, December 15, 11