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