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


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.)