Type & Image & Grid

Introduction to design for the june meeting of Tech and Social Change Baltimore Group

Transcript

1. Type & Image & Grid
2. Type 95% of Design is Typography
3. 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
4. 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
5. 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.
6. 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
7. 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/
8. Type Choices Lots of other things to consider: • Legibility/Readability • Design Intent • Aesthetics • Mood • History/Context
9. 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
10. 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
11. Type Sources Google Webfonts Font Squirrel Lost Type Co-Op League of Moveable Type Smashing Magazine’s “Best of List”
12. Image worth 1,000 words
17. Image Composition When shooting or choosing photography, consider these guidelines:
18. Image Rule of Thirds
19. Image Balance
20. Image Leading Lines
21. Image Symmetry
22. Image Viewpoint
23. Image Background
24. Image Framing
25. Image Cropping
26. 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.
27. Grids Design is mostly about making things line up.
28. Grids Golden Section
29. Grids Spreads
30. Grids Multi Column
31. Grids Modular
32. Grid Math 1:1:2:3 8.5" x 11" Left: 1" Top: 1" Right: 2" Bottom: 3"
33. 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
34. Thank You