i am-designer
TRANSCRIPT
I AM DESIGNER(and so can you!)
JUSTINE ARRECHE
I WORK I TWEET I SPEAK
@SALTINEJUSTINE DEVOBJECTIVE 2015
Introduction
Today we’re going to talk about
Grids and content structureColor theoryTypography
First off...
Why is design so important?
Why is design so important?
YOU LOOK Professional. YOU EARN Respect. YOU GET Results.
First off...
Grid and content structure
Always lay out your grid first.
Grid and content structure
Creating a grid keepsyour content organized
and easy to view.
Grid and content structure
Even this presentation was made with a grid.
Grid and content structure
12 COLUMN GRID
Grid and content structure
12 COLUMN GRID
Grid and content structure
4 GROUPS OF 3
Grid and content structure
3 GROUPS OF 4
Grid and content structure
2 GROUPS OF 6
Grid and content structure
LAYOUT
Grid and content structure
LAYOUT
LOGO
IMAGE
COPY COPY
FEATURES FEATURES
NAVIGATION
FOOTER
Color theory
The colors you design with are more than just
“I like blue.”
It’s about what’s relevantto your overall message.
Color theory
PURITYCLEANLINESS
LOVE, ENERGY
SERENITY, LOYALTY
TRUTH, FOCUSED
GENTILE, ROMANCEWARMTH, WEALTH
HAPPINESS, HUNGER SOPHISTICATION, EXOTIC
NATURAL, MONEY
STRENGTHINTELLIGENCE
ORGANICSTABILITY
NEUTRALPRACTICAL
Contrasting Colorshelp 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.
White & gray aren’t bad
Color theory
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%
Picking a color scheme
Color theory
IF YOU’RE FEELING MORE DARING, THINK ABOUT USING CONTRASTING COLORS.
CONTRASTING COLORS COLOR IN BETWEEN
Picking a color scheme
Color theory
WHEN YOU HAVE COLOR WIGGLE ROOM ONA WEBSITE, DO SOMETHING DIFFERENT
FROM YOUR COMPETITORS
HOME DEPOTORANGE
LOWE’SBLUE
Typography
Forget the hype on type.First and foremost, let the
type work for you.
Typography
Let’s go over sometypography basics.
Serif
Sans–Serif
Typography
Serifs
TraditionalEasier to readGreat for blocks of copy
Typography
Sans–Serifs
ModernMakes a bold statement
Great for headlines
Typography
Keep it in the family.Type families were
meant to be together.
Typography
Din. A type family.
Din Bold CondensedDin Regular
Typography
By choosing a typeface that has a variety of
options you can create a diverse look that’s cohesive.
Typography
But when you’re feeling daring...
Choose typefaces that have things in common.
Typography
Choose the same typeface that comes in
both serif and sans serif.
LUCIDA TYPE FAMILY
Typography
Choose typefaces that have elements in common.
ADELLE AND GOTHAMHAVE SIMILAR WIDTHS
AND X-HEIGHTS
Typography
Go for polar opposites to create contrast
CHOOSE A FUN DISPLAYTYPEFACE FOR HEADLINES
AND GO SIMPLE FORTHE REST
Typography
Looking for great webfonts?
Check out these bomb-ass sites:MYFONTS.COM TYPEKIT.COM
FONTSQUIRREL.COM
THANKS!
JUSTINE ARRECHE
I WORK I TWEET I SPEAK
@SALTINEJUSTINE DEVOBJECTIVE 2015