This document is a presentation about design fundamentals given by Justine Arreche. It covers grids and content structure, color theory, and typography. For grids, it emphasizes laying out a grid first to keep content organized. For color theory, it discusses using relevant colors based on message, contrasting colors, and color schemes. For typography, it outlines basic differences between serif and sans-serif fonts and keeping fonts within the same family or with similar traits while allowing some daring choices.

1. I AM DESIGNER
(and so can you!)
JUSTINE ARRECHE
I WORK I TWEET I SPEAK
@SALTINEJUSTINE DEVOBJECTIVE 2015

2. Introduction
Today we’re going
to talk about
Grids and
content structure
Color theory
Typography

3. First off...
Why is design
so important?

4. Why is design
so important?
YOU LOOK
Professional.
YOU EARN
Respect.
YOU GET Results.
First off...

5. Grid and content structure
Always lay out
your grid first.

6. Grid and content structure
Creating a grid keeps
your content organized
and easy to view.

7. Grid and content structure
Even this presentation
was made with a grid.

8. Grid and content structure
12 COLUMN GRID

9. Grid and content structure
12 COLUMN GRID

10. Grid and content structure
4 GROUPS OF 3

11. Grid and content structure
3 GROUPS OF 4

12. Grid and content structure
2 GROUPS OF 6

13. Grid and content structure
LAYOUT

14. Grid and content structure
LAYOUT
LOGO
IMAGE
COPY COPY
FEATURES FEATURES
NAVIGATION
FOOTER

15. Color theory
The colors you design with
are more than just
“I like blue.”
It’s about what’s relevant
to your overall message.

16. Color theory
PURITY
CLEANLINESS
LOVE, ENERGY
SERENITY, LOYALTY
TRUTH, FOCUSED
GENTILE, ROMANCEWARMTH, WEALTH
HAPPINESS, HUNGER SOPHISTICATION, EXOTIC
NATURAL, MONEY
STRENGTH
INTELLIGENCE
ORGANIC
STABILITY
NEUTRAL
PRACTICAL

17. 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.

18. White & gray aren’t bad
Color theory

19. 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%

20. Picking a color scheme
Color theory
IF YOU’RE FEELING MORE DARING, THINK ABOUT
USING CONTRASTING COLORS.
CONTRASTING COLORS COLOR IN BETWEEN

21. 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

22. Typography
Forget the hype on type.
First and foremost, let the
type work for you.

23. Typography
Let’s go over some
typography basics.
Serif
Sans–Serif

24. Typography
Serifs
Traditional
Easier to read
Great for blocks of copy

25. Typography
Sans–Serifs
Modern
Makes a bold statement
Great for headlines

26. Typography
Keep it in the family.
Type families were
meant to be together.

27. Typography
Din. A type family.
Din Bold Condensed
Din Regular

28. Typography
By choosing a typeface
that has a variety of
options you can create a
diverse look that’s cohesive.

29. Typography
But when you’re
feeling daring...
Choose typefaces that
have things in common.

30. Typography
Choose the same
typeface that comes in
both serif and sans serif.
LUCIDA TYPE FAMILY

31. Typography
Choose typefaces that
have elements in common.
ADELLE AND GOTHAM
HAVE SIMILAR WIDTHS
AND X-HEIGHTS

32. Typography
Go for polar opposites to
create contrast
CHOOSE A FUN DISPLAY
TYPEFACE FOR HEADLINES
AND GO SIMPLE FOR
THE REST

33. Typography
Looking for great webfonts?
Check out these bomb-ass sites:
MYFONTS.COM TYPEKIT.COM
FONTSQUIRREL.COM

34. THANKS!
JUSTINE ARRECHE
I WORK I TWEET I SPEAK
@SALTINEJUSTINE DEVOBJECTIVE 2015