Design is in the Details

(This is an older presentation, given back at the 2008 edition of WebVisions.)

Design is in the Details is a presentation that is dedicated to showing you that the small things really do matter in design. My colleague Dan Rubin and I compare CNN and Fox News, showing how subtleties in padding, spacing and even contrast can make any site look more professional. We end with tips and tricks that we use on a daily basis and a reveal of a quick redesign of Fox News done especially for the presentation.

Transcript

1. DESIGN IS IN THE DETAILS Bryan Veloso & Dan Rubin S01
2. HI! I’M BRYAN O_o; Introduction S02
3. Introduction S03
4. AND I’M DAN ¬_¬; Introduction S04
5. Introduction S05
6. WHY ARE WE HERE? Introduction S06
7. SMALL THINGS MATTER Introduction S07
8. WHAT THIS IS NOT: Introduction S08
9. WHAT YOU’LL LEARN: Introduction S09
10. LAYOUT, TYPE & PIXELS Introduction S10
11. LET YOUR LAYOUT BREATHE Demonstration S11
12. Demonstration S12
13. Demonstration S13
14. Demonstration S14
15. Demonstration S15
16. Demonstration S16
17. Demonstration S17
18. Demonstration S18
19. Demonstration S19
20. NOW LET’S COMPARE Demonstration S20
21. Demonstration S21
22. Demonstration S22
23. Demonstration S23
24. USE RANGE KERNING Demonstration S24
25. Demonstration S25
26. Demonstration S26
27. SIGNAL AND NOISE Demonstration S27
28. SIGNAL AND NOISE Demonstration S28
29. Demonstration S29
30. WHEN BLACK ISN’T Demonstration S30
31. USE YOUR EYES Demonstration S31
32. SRSLY , USE UR EYES Demonstration S32
33. Demonstration S33
34. FLAT IS BORING Demonstration S34
35. DEPTH HAPPENS Demonstration S35
36. LIGHT VS. DARK Demonstration S36
37. MINT SCREEN Demonstration S37
38. MINT SCREEN Demonstration S38
39. MINT SCREEN Demonstration S39
40. Demonstration S40
41. PIXEL **CKING Demonstration S41
42. PIXEL HACKING Demonstration S42
43. MOAR SCREENS Demonstration S43
44. Demonstration S44
45. Demonstration S45
46. Demonstration S46
47. MOAR SCREENS Demonstration S47
48. MOAR SCREENS Demonstration S48
49. MOAR SCREENS Demonstration S49
50. KNOW WHEN TO QUIT Demonstration S50
51. SPACING, SPACING Education S51
52. BORDER PATROL Education S52
53. SIMPLE CONTENT SPACING Education S53
54. THE RULE OF TEN Education S54
55. SUPER- FLUOUS DETAILS Education S55
56. TIPS & SHORT - CUTS Education S56
57. Education S57
58. SHIFT+ ARROW (←↑→↓) Education S58
59. LAYER BLENDING MODES Education S59
60. MOAR LAYER HACKING Education S60
61. ⌘+⇧+C= COPY MERGED Education S61
62. THE REVEAL Education S62
63. Education S63
64. Education S64
65. THE REVEAL Education S65
66. THE REVEAL Education S66
67. DESIGN. ISINTHE DETAILS.com Education S67
68. THANKS! ^_^v Education S68