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

Design is in the Details

Bryan Veloso
May 22, 2008
Design
18
1.2k

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

See All by Bryan Veloso
Hybrids Rule Everything Around Me (BlendConf)
bryan
3
470
Hybrids Rule Everything Around Me (A Web Afternoon)
bryan
5
210
Designing Your Open Source Project (DjangoCon)
bryan
14
1.4k
Design Your Own Open Source Project (PyCon Philippines)
bryan
19
2.3k
Recruiting Designers for your Open Source Project
bryan
14
2k
Hub
bryan
11
740
Super Hybrid Robots
bryan
106
12k
Music & Morning Musume
bryan
38
5.2k

Other Decks in Design

See All in Design
Figmaにおけるバージョン管理について
littlebusters
1
1.8k
リリース1ヶ月後で機能をなくした話
hinofu
0
130
ノベルティの勘所 / Communication DesignNight vol.01
transit_kix
0
610
アイキャッチはFigmaで簡単に作れる！
kubosaya
0
470
2023年度 尾道市立大学 特別講義「デザインと編集」
ikuhotamura
0
260
不可分の民藝から可分の工業産業へ
creatorqsf
1
210
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
350
デザイン組織成長における負債解消の取り組みを赤裸々に語る
sugiyama_sukedachi
0
490
Chicken House - Part One
tapidokes
0
170
Spindle UIのつくりかた / Spindle UI: From Concept to Creation
spindle
3
1.5k
ゼロから学ぶWebアクセシビリティ～導入編～
magi1125
4
960
UXA2023 Emily Underwood and Eilish Out-O'Reilly - Designing for the overlooked user we will all become
uxevents
PRO
0
170

Featured

See All Featured
Ruby is Unlike a Banana
tanoku
93
10k
KATA
mclloyd
13
11k
Designing for Performance
lara
601
66k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
239
1.2M
Done Done
chrislema
178
15k
A designer walks into a library…
pauljervisheath
199
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
5
740
Optimising Largest Contentful Paint
csswizardry
6
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
1
290
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
10
1.3k
Bootstrapping a Software Product
garrettdimon
PRO
299
110k

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