Type & Image & Grid

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

Transcript

1. Type &
   Image &
   Grid
   

   View Slide

2. Type
   95% of Design is Typography
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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/
   

   View Slide

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

   View Slide

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
   

   View Slide

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
    

    View Slide

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

    View Slide

12. Image
    worth 1,000 words
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

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

    View Slide

18. Image Rule of Thirds
    

    View Slide

19. Image Balance
    

    View Slide

20. Image Leading Lines
    

    View Slide

21. Image Symmetry
    

    View Slide

22. Image Viewpoint
    

    View Slide

23. Image Background
    

    View Slide

24. Image Framing
    

    View Slide

25. Image Cropping
    

    View Slide

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.
    

    View Slide

27. Grids
    Design is mostly about
    making things line up.
    

    View Slide

28. Grids Golden Section
    

    View Slide

29. Grids Spreads
    

    View Slide

30. Grids Multi Column
    

    View Slide

31. Grids Modular
    

    View Slide

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

    View Slide

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
    

    View Slide

34. Thank You
    

    View Slide