Tweet
Tweet

Slide 1

Slide 1 text

Type & Image & Grid

Slide 2

Slide 2 text

Type 95% of Design is Typography

Slide 3

Slide 3 text

Type Measure Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo

Slide 4

Slide 4 text

Type Measure Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo 52 - 78 Characters

Slide 5

Slide 5 text

Type Measure Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo 52 - 78 Characters ~ 24 Characters Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.

Slide 6

Slide 6 text

Type Hierarchy Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo Aenean lacinia bibendum Nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus Magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo Praesent commodo cursus Magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo

Slide 7

Slide 7 text

Type Choices Classifications Properties Situations sans-serif serif slab serif script blackletter mono hand decorative weight width x-height Contrast standard or small-caps upper or lower # Headlines Paragraphs Types of Type http://typekit.com/fonts http://typedia.com/learn/only/typeface-classifications/

Slide 8

Slide 8 text

Type Choices Lots of other things to consider: ● Legibility/Readability ● Design Intent ● Aesthetics ● Mood ● History/Context

Slide 9

Slide 9 text

Type Choices Who has time for all that… cheat ● Find “Super Families” - one typeface, lots of variation ● Fonts in Use - What others have used & done ● TypeDNA - Does a lot of that classification & property matching for you! ● Beautiful Web Type - Google web-fonts that are good looking

Slide 10

Slide 10 text

Type Nitpicks ' " ’ ” Hatch marks are to indicate inches and feet. Right: 5'10" Wrong: He said, "That's what she said." Apostrophes indicate contraction or possession. Quotations for dialogue. Single Quotes: Mac: Option + ] and Shift + Option + ] PC: ALT + 0145 and ALT + 0146 Double Quotes Mac: Option + [ & Shift + Option + [ PC: ALT + 0147 and ALT + 0148

Slide 11

Slide 11 text

Type Sources Google Webfonts Font Squirrel Lost Type Co-Op League of Moveable Type Smashing Magazine’s “Best of List”

Slide 12

Slide 12 text

Image worth 1,000 words

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Image Composition When shooting or choosing photography, consider these guidelines:

Slide 18

Slide 18 text

Image Rule of Thirds

Slide 19

Slide 19 text

Image Balance

Slide 20

Slide 20 text

Image Leading Lines

Slide 21

Slide 21 text

Image Symmetry

Slide 22

Slide 22 text

Image Viewpoint

Slide 23

Slide 23 text

Image Background

Slide 24

Slide 24 text

Image Framing

Slide 25

Slide 25 text

Image Cropping

Slide 26

Slide 26 text

Image Notes Images for print should be at least 150 dpi. A 4" x 6" image would be 600 x 900 pixels. Do not scale up.

Slide 27

Slide 27 text

Grids Design is mostly about making things line up.

Slide 28

Slide 28 text

Grids Golden Section

Slide 29

Slide 29 text

Grids Spreads

Slide 30

Slide 30 text

Grids Multi Column

Slide 31

Slide 31 text

Grids Modular

Slide 32

Slide 32 text

Grid Math 1:1:2:3 8.5" x 11" Left: 1" Top: 1" Right: 2" Bottom: 3"

Slide 33

Slide 33 text

Links and Stuff Type ● Design is Typography ● Five Simple Steps ● Thinking With Type ● Elements of Typographic Style ● Modular Scale ● On Choosing Type ● Best Practices for Combining Typefaces ● FreeDNA ● Google Webfonts ● Font Squirrel ● Smashing Magazine Free Type Roundup Image ● CompFight image search ● IconFinder clip art ● Pixlr online image editor Grid ● The Grid System ● Thinking With Type ● Wikipedia on Grids

Slide 34

Slide 34 text

Thank You