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