Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Justine
May 11, 2012

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

Design workshop for the QCMerge in Cincinnati, Ohio.

Justine

May 11, 2012
Tweet

More Decks by Justine

Other Decks in Design

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