$30 off During Our Annual Pro Sale. View Details »

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.

Bryan Veloso

May 22, 2008
Tweet

More Decks by Bryan Veloso

Other Decks in Design

Transcript

  1. DESIGN
    IS IN THE
    DETAILS
    Bryan Veloso & Dan Rubin
    S01

    View Slide

  2. HI! I’M
    BRYAN
    O_o;
    Introduction
    S02

    View Slide

  3. Introduction
    S03

    View Slide

  4. AND I’M
    DAN
    ¬_¬;
    Introduction
    S04

    View Slide

  5. Introduction
    S05

    View Slide

  6. WHY ARE
    WE HERE?
    Introduction
    S06

    View Slide

  7. SMALL
    THINGS
    MATTER
    Introduction
    S07

    View Slide

  8. WHAT
    THIS
    IS NOT:
    Introduction
    S08

    View Slide

  9. WHAT
    YOU’LL
    LEARN:
    Introduction
    S09

    View Slide

  10. LAYOUT,
    TYPE &
    PIXELS
    Introduction
    S10

    View Slide

  11. LET YOUR
    LAYOUT
    BREATHE
    Demonstration
    S11

    View Slide

  12. Demonstration
    S12

    View Slide

  13. Demonstration
    S13

    View Slide

  14. Demonstration
    S14

    View Slide

  15. Demonstration
    S15

    View Slide

  16. Demonstration
    S16

    View Slide

  17. Demonstration
    S17

    View Slide

  18. Demonstration
    S18

    View Slide

  19. Demonstration
    S19

    View Slide

  20. NOW
    LET’S
    COMPARE
    Demonstration
    S20

    View Slide

  21. Demonstration
    S21

    View Slide

  22. Demonstration
    S22

    View Slide

  23. Demonstration
    S23

    View Slide

  24. USE
    RANGE
    KERNING
    Demonstration
    S24

    View Slide

  25. Demonstration
    S25

    View Slide

  26. Demonstration
    S26

    View Slide

  27. SIGNAL
    AND
    NOISE
    Demonstration
    S27

    View Slide

  28. SIGNAL
    AND
    NOISE
    Demonstration
    S28

    View Slide

  29. Demonstration
    S29

    View Slide

  30. WHEN
    BLACK
    ISN’T
    Demonstration
    S30

    View Slide

  31. USE
    YOUR
    EYES
    Demonstration
    S31

    View Slide

  32. SRSLY
    ,
    USE UR
    EYES
    Demonstration
    S32

    View Slide

  33. Demonstration
    S33

    View Slide

  34. FLAT IS
    BORING
    Demonstration
    S34

    View Slide

  35. DEPTH
    HAPPENS
    Demonstration
    S35

    View Slide

  36. LIGHT
    VS.
    DARK
    Demonstration
    S36

    View Slide

  37. MINT
    SCREEN
    Demonstration
    S37

    View Slide

  38. MINT
    SCREEN
    Demonstration
    S38

    View Slide

  39. MINT
    SCREEN
    Demonstration
    S39

    View Slide

  40. Demonstration
    S40

    View Slide

  41. PIXEL
    **CKING
    Demonstration
    S41

    View Slide

  42. PIXEL
    HACKING
    Demonstration
    S42

    View Slide

  43. MOAR
    SCREENS
    Demonstration
    S43

    View Slide

  44. Demonstration
    S44

    View Slide

  45. Demonstration
    S45

    View Slide

  46. Demonstration
    S46

    View Slide

  47. MOAR
    SCREENS
    Demonstration
    S47

    View Slide

  48. MOAR
    SCREENS
    Demonstration
    S48

    View Slide

  49. MOAR
    SCREENS
    Demonstration
    S49

    View Slide

  50. KNOW
    WHEN TO
    QUIT
    Demonstration
    S50

    View Slide

  51. SPACING,
    SPACING
    Education
    S51

    View Slide

  52. BORDER
    PATROL
    Education
    S52

    View Slide

  53. SIMPLE
    CONTENT
    SPACING
    Education
    S53

    View Slide

  54. THE RULE
    OF TEN
    Education
    S54

    View Slide

  55. SUPER-
    FLUOUS
    DETAILS
    Education
    S55

    View Slide

  56. TIPS &
    SHORT
    -
    CUTS
    Education
    S56

    View Slide

  57. Education
    S57

    View Slide

  58. SHIFT+
    ARROW
    (←↑→↓)
    Education
    S58

    View Slide

  59. LAYER
    BLENDING
    MODES
    Education
    S59

    View Slide

  60. MOAR
    LAYER
    HACKING
    Education
    S60

    View Slide

  61. ⌘+⇧+C=
    COPY
    MERGED
    Education
    S61

    View Slide

  62. THE
    REVEAL
    Education
    S62

    View Slide

  63. Education
    S63

    View Slide

  64. Education
    S64

    View Slide

  65. THE
    REVEAL
    Education
    S65

    View Slide

  66. THE
    REVEAL
    Education
    S66

    View Slide

  67. DESIGN.
    ISINTHE
    DETAILS.com
    Education
    S67

    View Slide

  68. THANKS!
    ^_^v
    Education
    S68

    View Slide