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
2. Introduction Today we’re going to talk about Grids and content structure Color theory Typography
3. First off... Why is a well designed website so important?
4. First off... Why is a well designed website so important? You look Professional. You earn Respect. You get Results.
5. Grid and content structure Creating a grid keeps your content organized and easy to view.
6. Grid and content structure Even this presentation was made with a grid.
7. Grid and content structure 12 Column Grid
8. Grid and content structure 12 Column Grid
9. Grid and content structure 12 Column Grid
10. Grid and content structure 12 Column Grid
11. Grid and content structure 12 Column Grid
12. Grid and content structure 12 Column Grid
13. Grid and content structure 12 Column Grid LOGO IMAGE COPY COPY FEATURES FEATURES NAVIGATION FOOTER
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
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.
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
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.
18. White & gray aren’t bad Color theory
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%
20. Picking a color scheme Color theory If you’re feeling more daring, think about using contrasting colors. CONTRASTING COLORS COLOR IN BETWEEN
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
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?
23. Typography Forget the hype on type. First and foremost, let the type work for you.
24. Typography Let’s go over some typography basics. Serif Sans–Serif
25. Typography Serifs Traditional Easier to read Great for blocks of copy
26. Typography Sans–Serifs Modern Makes a bold statement Great for headlines
27. Typography Keep it in the family. Type families were meant to be together.
28. Typography Din. A type family. Din Bold Condensed Din Regular
29. Typography By choosing a typeface that has a variety of options you can create a diverse look that’s cohesive.
30. Typography But when you’re feeling daring... Choose typefaces that have things in common.
31. Typography Choose the same typeface that comes in both serif and sans serif. LUCIDA TYPE FAMILY
32. Typography Choose typefaces that have elements in common. ADelle and Gotham have SIMILAR WIDTHS and x-heights
33. Typography Go for polar opposites to create contrast Choose a fun display typeface for headlines and go simple for the rest
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?
35. Typography Looking for great webfonts? Check out these bomb-ass sites: myfonts.com    typekit.com Fontsquirrel.com
36. Thanks (you’re the bomb diggity) Justine Arreche I work I tweet I Design @The Elefanta The Elefanta.com