Rough Notes from Johan Ronsse’s Design for Developers Slides

Clearing my desk and buried at the bottom of the pile was some notes I took a while ago while running through this slideshow. My notes are just capturing a few points to remind myself later and don’t do the slides a speck of justice. So check out the slideshow instead, which Johan went through after his talk and optimised for reading.

Design for developers
View more presentations from Johan Ronsse

Fonts and Layout

Avoid font-face for performance reasons. A good font is Verdana or Lucid Grande, fallback Lucida Sans Unicode.

Android: Droid Sans, WP7: Segoe UI

All text at least 14px Consider 16px default For Lucidea Grande or Verdana: 11-13px

Paras <= 60 characters wide

1.1 line-height for headings, 1.5 for paragraphs

Grid structure: think in units of 6.

Light and Shadow

1-3px drop shadow

0-3px distance

Inner shadow when button is depressed

Color

Recommended: Hues app

Start with three colors

Blend foreground color with background color for text (ie don’t just use pure gray/black if there’s a colored background)

Dark gray with blueish tint looks good. Blue bottom is common (e.g. on GitHub)

Use at least as dark as #d5d5d5 on white background

Pay for good icons, e.g. Picons/Pictos/Fico

(This was just after I took the UX Bootcamp on Visual Design, and – look away now – I’ve also posted some moodboards from around then.)

One thought on “Rough Notes from Johan Ronsse’s Design for Developers Slides

Leave a Reply