QCMerge 2012 - I am Designer (and so can you!)

Design workshop for the QCMerge in Cincinnati, Ohio.

Transcript

1. I am Designer
   (and so can you!)
   Justine Arreche
   I work I tweet I speak
   @The Elefanta QC MERGE
   

   View Slide

2. Introduction
   Today we’re going
   to talk about
   Grids and
   content structure
   Color theory
   Typography
   

   View Slide

3. First off...
   Why is a well designed
   website so important?
   

   View Slide

4. First off...
   Why is a well designed
   website so important?
   You look Professional.
   You earn Respect.
   You get Results.
   

   View Slide

5. Grid and content structure
   Creating a grid keeps
   your content organized
   and easy to view.
   

   View Slide

6. Grid and content structure
   Even this presentation
   was made with a grid.
   

   View Slide

7. Grid and content structure
   12 Column Grid
   

   View Slide

8. Grid and content structure
   12 Column Grid
   

   View Slide

9. Grid and content structure
   12 Column Grid
   

   View Slide

10. Grid and content structure
    12 Column Grid
    

    View Slide

11. Grid and content structure
    12 Column Grid
    

    View Slide

12. Grid and content structure
    12 Column Grid
    

    View Slide

13. Grid and content structure
    12 Column Grid
    LOGO
    IMAGE
    COPY COPY
    FEATURES FEATURES
    NAVIGATION
    FOOTER
    

    View Slide

14. Grid and content structure
    PhoenixCoffee.com
    What to include:
    Logo Navigation Search bar
    Company info Newsletter Wholesale special
    paragraph subscription form advertisement
    Social Network Contact info
    Information
    

    View Slide

15. Color theory
    The colors you design with
    are more than just
    “I like blue.”
    It’s about what’s relevant
    to your overall message.
    

    View Slide

16. Color theory
    PURITY
    CLEANLINESS
    LOVE, ENERGY
    SERENITY, LOYALTY
    TRUTH, FOCUSED
    Gentile, Romance
    WARMTH, WEALTH
    HAPPINESS, HUNGER Sophistication, Exotic
    Natural, Money
    STRENGTH
    INTELLIGENCE
    Organic
    STABILITY
    NEUTRAL
    Practical
    

    View Slide

17. Contrasting Colors
    help draw attention
    Color theory
    COLORS CLOSE TOGETHER ON
    THE COLOR WHEEL blend in
    with one another.
    Colors on opposite sides
    of the color wheel create
    contrast together.
    

    View Slide

18. White & gray aren’t bad
    Color theory
    

    View Slide

19. Picking a color scheme
    Color theory
    The easiest way to pick colors for your
    website is by picking one color and
    choosing tints
    100% 50% 30% 0%
    

    View Slide

20. Picking a color scheme
    Color theory
    If you’re feeling more daring, think about
    using contrasting colors.
    CONTRASTING COLORS COLOR IN BETWEEN
    

    View Slide

21. Picking a color scheme
    Color theory
    When you have color wiggle room on
    a website, do something different
    from your competitors
    HOME DEPOT
    ORANGE
    Lowe’s
    Blue
    

    View Slide

22. Color theory
    PhoenixCoffee.com
    What to think about:
    What colors do YOU Think of What colors do competitors use?
    WHEN you think about coffee?
    What kind of atmosphere What psychological triggers
    do you want to convey? Do you want to use?
    

    View Slide

23. Typography
    Forget the hype on type.
    First and foremost, let the
    type work for you.
    

    View Slide

24. Typography
    Let’s go over some
    typography basics.
    Serif
    Sans–Serif
    

    View Slide

25. Typography
    Serifs
    Traditional
    Easier to read
    Great for blocks of copy
    

    View Slide

26. Typography
    Sans–Serifs
    Modern
    Makes a bold statement
    Great for headlines
    

    View Slide

27. Typography
    Keep it in the family.
    Type families were
    meant to be together.
    

    View Slide

28. Typography
    Din. A type family.
    Din Bold Condensed
    Din Regular
    

    View Slide

29. Typography
    By choosing a typeface
    that has a variety of
    options you can create a
    diverse look that’s cohesive.
    

    View Slide

30. Typography
    But when you’re
    feeling daring...
    Choose typefaces that
    have things in common.
    

    View Slide

31. Typography
    Choose the same
    typeface that comes in
    both serif and sans serif.
    LUCIDA TYPE FAMILY
    

    View Slide

32. Typography
    Choose typefaces that
    have elements in common.
    ADelle and Gotham
    have SIMILAR WIDTHS
    and x-heights
    

    View Slide

33. Typography
    Go for polar opposites to
    create contrast
    Choose a fun display
    typeface for headlines
    and go simple for
    the rest
    

    View Slide

34. Typography
    PhoenixCoffee.com
    What to think about:
    Serif or Sans-serif    Let’s think about display fonts?
    What kind of message do you want
    to convey with the typefaces?
    

    View Slide

35. Typography
    Looking for great webfonts?
    Check out these bomb-ass sites:
    myfonts.com    typekit.com
    Fontsquirrel.com
    

    View Slide

36. Thanks
    (you’re the bomb diggity)
    Justine Arreche
    I work I tweet I Design
    @The Elefanta The Elefanta.com
    

    View Slide