CodeMash 13 - I am Designer and so can you!

9c269c09f119cce083b4968890d4f189?s=47 Justine
January 10, 2013
Design
5
240

CodeMash 13 - I am Designer and so can you!

Talk deck from my 2013 Presentation of design for developers

9c269c09f119cce083b4968890d4f189?s=128

Justine

January 10, 2013
Tweet

More Decks by Justine

See All by Justine
9c269c09f119cce083b4968890d4f189?s=48 ctrlaltjustine
2
140
9c269c09f119cce083b4968890d4f189?s=48 ctrlaltjustine
0
100
9c269c09f119cce083b4968890d4f189?s=48 ctrlaltjustine
1
350
9c269c09f119cce083b4968890d4f189?s=48 ctrlaltjustine
2
110
9c269c09f119cce083b4968890d4f189?s=48 ctrlaltjustine
6
260
9c269c09f119cce083b4968890d4f189?s=48 ctrlaltjustine
11
330
9c269c09f119cce083b4968890d4f189?s=48 ctrlaltjustine
1
160
9c269c09f119cce083b4968890d4f189?s=48 ctrlaltjustine
13
660
9c269c09f119cce083b4968890d4f189?s=48 ctrlaltjustine
9
310

Other Decks in Design

See All in Design
32b869eccead66531b4749ea9f146aed?s=48 yuinamiki
0
440
Bfc42a2fb137897db919bac632c83085?s=48 teruhisafukumoto
1
180
Db4b4f2b80639dfa21296832bae16935?s=48 cotolier_risa
1
180
11ec9eb1e359f8eaf5146af81c9bf418?s=48 sinapinc
2
110
947acd65c5eaeecc96e6fa39073a0c68?s=48 murata_s
0
620
6715312320f3bd88463ad96db1f13866?s=48 ryusukekogetsu
1
1.1k
65c16661c6df5b6ee9383a8d4589673d?s=48 mirandacfs
1
150
7e0c7d1a8943ab11891a7e304eb384cd?s=48 tthhmmss
0
110
981ed7f53e9d180eebe70263745410d5?s=48 sekisatoko
0
2.2k
6f9c90981748adfbe77022cfb228d386?s=48 michalis_art
0
170
Abaa70cc6ac599bb503184eb2ae03ab4?s=48 tenjuu99
3
290
Ee67564a1a0e290cccf3c4a415e51c48?s=48 eto
1
150

Featured

See All Featured
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
6
640
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
175
7.2k
245cee81a9c424266e5e401d844ea881?s=48 lara
589
60k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.7k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
399
20k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
340
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
582
200k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
55
5.2k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
356
62k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
164
18k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
448
35k

Transcript

  1. I AM DESIGNER (and so can you!) JUSTINE ARRECHE I

    WORK I TWEET I SPEAK @THE ELEFANTA CODE MASH 2013

  2. Introduction Today we’re going to talk about Grids and content

    structure Color theory Typography

  3. First off... Why is a well designed website so important?

  4. Why is a well designed website so important? YOU LOOK

    Professional. YOU EARN Respect. YOU GET Results. First off...

  5. Grid and content structure Creating a grid keeps your content

    organized and easy to view.

  6. Grid and content structure Even this presentation was made with

    a grid.

  7. Grid and content structure 12 COLUMN GRID

  8. Grid and content structure 12 COLUMN GRID

  9. Grid and content structure 12 COLUMN GRID

  10. Grid and content structure 12 COLUMN GRID

  11. Grid and content structure 12 COLUMN GRID

  12. Grid and content structure 12 COLUMN GRID

  13. Grid and content structure 12 COLUMN GRID LOGO IMAGE COPY

    COPY FEATURES FEATURES NAVIGATION FOOTER

  14. Color theory The colors you design with are more than

    just “I like blue.” It’s about what’s relevant to your overall message.

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

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

  17. White & gray aren’t bad Color theory

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

  19. Picking a color scheme Color theory IF YOU’RE FEELING MORE

    DARING, THINK ABOUT USING CONTRASTING COLORS. CONTRASTING COLORS COLOR IN BETWEEN

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

  21. Typography Forget the hype on type. First and foremost, let

    the type work for you.

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

  23. Typography Serifs Traditional Easier to read Great for blocks of

    copy

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

  25. Typography Keep it in the family. Type families were meant

    to be together.

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

  27. Typography By choosing a typeface that has a variety of

    options you can create a diverse look that’s cohesive.

  28. Typography But when you’re feeling daring... Choose typefaces that have

    things in common.

  29. Typography Choose the same typeface that comes in both serif

    and sans serif. LUCIDA TYPE FAMILY

  30. Typography Choose typefaces that have elements in common. ADELLE AND

    GOTHAM HAVE SIMILAR WIDTHS AND X-HEIGHTS

  31. Typography Go for polar opposites to create contrast CHOOSE A

    FUN DISPLAY TYPEFACE FOR HEADLINES AND GO SIMPLE FOR THE REST

  32. Typography Looking for great webfonts? Check out these bomb-ass sites:

    MYFONTS.COM    TYPEKIT.COM FONTSQUIRREL.COM

  33. THANKS (you’re the bomb diggity) JUSTINE ARRECHE I WORK I

    TWEET I SPEAK @THE ELEFANTA CODE MASH 2013