Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Grid and content structure 12 Column Grid

Slide 8

Slide 8 text

Grid and content structure 12 Column Grid

Slide 9

Slide 9 text

Grid and content structure 12 Column Grid

Slide 10

Slide 10 text

Grid and content structure 12 Column Grid

Slide 11

Slide 11 text

Grid and content structure 12 Column Grid

Slide 12

Slide 12 text

Grid and content structure 12 Column Grid

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

White & gray aren’t bad Color theory

Slide 19

Slide 19 text

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%

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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?

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Typography Serifs Traditional Easier to read Great for blocks of copy

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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?

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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