I AM DESIGNER
(and so can you!)
JUSTINE ARRECHE
I WORK I TWEET I SPEAK
@THE ELEFANTA CODE MASH 2013
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
Why is a well designed
website so important?
YOU LOOK Professional.
YOU EARN Respect.
YOU GET Results.
First off...
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
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 15
Slide 15 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 16
Slide 16 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 17
Slide 17 text
White & gray aren’t bad
Color theory
Slide 18
Slide 18 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 19
Slide 19 text
Picking a color scheme
Color theory
IF YOU’RE FEELING MORE DARING, THINK ABOUT
USING CONTRASTING COLORS.
CONTRASTING COLORS COLOR IN BETWEEN
Slide 20
Slide 20 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 21
Slide 21 text
Typography
Forget the hype on type.
First and foremost, let the
type work for you.
Slide 22
Slide 22 text
Typography
Let’s go over some
typography basics.
Serif
Sans–Serif
Slide 23
Slide 23 text
Typography
Serifs
Traditional
Easier to read
Great for blocks of copy
Slide 24
Slide 24 text
Typography
Sans–Serifs
Modern
Makes a bold statement
Great for headlines
Slide 25
Slide 25 text
Typography
Keep it in the family.
Type families were
meant to be together.
Slide 26
Slide 26 text
Typography
Din. A type family.
Din Bold Condensed
Din Regular
Slide 27
Slide 27 text
Typography
By choosing a typeface
that has a variety of
options you can create a
diverse look that’s cohesive.
Slide 28
Slide 28 text
Typography
But when you’re
feeling daring...
Choose typefaces that
have things in common.
Slide 29
Slide 29 text
Typography
Choose the same
typeface that comes in
both serif and sans serif.
LUCIDA TYPE FAMILY
Slide 30
Slide 30 text
Typography
Choose typefaces that
have elements in common.
ADELLE AND GOTHAM
HAVE SIMILAR WIDTHS
AND X-HEIGHTS
Slide 31
Slide 31 text
Typography
Go for polar opposites to
create contrast
CHOOSE A FUN DISPLAY
TYPEFACE FOR HEADLINES
AND GO SIMPLE FOR
THE REST
Slide 32
Slide 32 text
Typography
Looking for great webfonts?
Check out these bomb-ass sites:
MYFONTS.COM TYPEKIT.COM
FONTSQUIRREL.COM
Slide 33
Slide 33 text
THANKS
(you’re the bomb diggity)
JUSTINE ARRECHE
I WORK I TWEET I SPEAK
@THE ELEFANTA CODE MASH 2013