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