Design is in the Details

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.

A60068bce2e73de3a37ca9d2dbe36092?s=128

Bryan Veloso

May 22, 2008
Tweet

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