Idan Gazit: Design for developers¶

Tags: django, djangocon, plone

Why does he care about telling us about design? He can’t teach us design in half an hour. What he can do is tell us about the design that we can do something about. Design is just one of the things that you should know a little bit about. Just like you must know a bit about databases, optimization, caching, deploying, testing and so on, you must know a bit about design. As programmer. Don Norman quote: attractive things work better.

The goal is sucking less. You’re not going to be a great designer. A good way of sucking less is doing less. Be minimal. You simply have less opportunities to suck. It is also a bit of a trend nowadays to do more with white space and to put less on a page. “Minimalist design”.

He showed some examples. Just a few colors. A solid background. A couple of 1px dashed lines to add structure.

Create a visual hierarchy. Try to steer the visitor. Some things are more important, some are less important. Add contrast for that. Add discoverability.

Put your content front and center. That’s the most important part. Squint your eyes and look at your page: can you still make out the main content block? Also: give your content room to breath. So add white space between things. It helps set them off.

Contrast (color, or bold, or upper/lowercase) helps showing your hierarchy. Emphasize (big, color) and de-emphasize (smaller and a bit grayer, for instance).

Play with it. Steal ideas. Keep a folder with screenshots of (parts of) pages that you like. You’ll get better with time.

Design with a grid. You don’t need a unique structure every time. You can use one of the available css frameworks, for instance http://960.gs/ or http://www.blueprint.org/. Such a grid seems to fit our brain and it almost automatically looks OK. Just go with a grid and start with pencil and paper.

Typography is not only font selection. It also means laying out your letters on a page. There’s loads of best-practices from our 574 years of typesetting, but most of that got forgotten when we moved to the web. There’s more attention lately. Some things NOT to do:

• Lines are normally set “solid”. Set a line height of 1.3em to 2.0em so that the lines are set a little bit apart. This is the biggest issue on most websites.

• Don’t make the columns too wide (and thus the lines too long). Rule of thumb: make your line about two alphabets (a-z a-z) long.

• 12 pt fonts. That’s ok for books, but a computer screen is further away, so 16pt is better.

• Too many fonts. Rule of thumb: just 2 or 3 typefaces, maximum. A good guide is a sans-serif (“helvetica”) for titles and serif for body text (for instance Georgia).

Two highly recommended links: http://typographyforlawyers.com and http://webtypography.net .

Most browsers (including IE since version 4.0) allow web fonts. You can use more than those 8 standard fonts now. You can DIY (for instance with the FontSquirrel font-face generator) or you can go with a hosted solution like http://typekit.com/ (note that google also jumped into this lately with typekit so those fonts are now hosted using google’s CDN).

Color. Choosing a good color scheme. Color theory is hard, it is a lot like music theory. Watch out for localization as colors have different meanings: in the west, white means purity, in the east it often means death…

If you don’t know what to do, go with a monochromatic scheme. White/black plus red, medium red, light red.

You can go with complementary (colors on the opposite sides of the color wheel) and many others.

Two suggested sites for color schemes: http://colourlovers.com and http://kuler.adobe.com .

Steal and learn. Look at https://patterntap.com/patterntap or sites like that to get design ideas. And read a free book http://designingfortheweb.co.uk/book .

Rules are meant to be broken. Just don’t break too many at the same time.

Question: stealing? What are the legal issues? Answer: I didn’t mean steal steal, I meant lifting ideas. Don’t copy someone’s layout wholescale. Change things.

Question: what about color blindness? Answer: hire an expect, this is hard. Colors are hard. There’s biology, culture, …