web design lecture

In October, I will repeat my yearly "Visual Web Design" lecture for the beginning Media Studies Bachelor students. In just two weeks, they'll be making their own Web newspaper from scratch: design, news writing, photography; just everything. Most of them have never done Web design before, many have almost no computer experience. And every year they make great sites. It's really fun.

So what should be included this year? It's always a mix of print tradition rules, mixed with what's unique to computers. That's really way two much for a two-hour lecture, but I have to try.

To ease their memories, I give them a comprehensive handout, and make a Web page with links and stuff.

Here's a sketch of the contents:

First ask yourself: What do you want to say?

The rhetoric of arrival (Landow): Where am I? What's here? Where can I go from here? (Veen).

Typography: fonts and the Web. (By the way, which fonts are safe these days?) Legibility as the primary goal. Legibility as a product of font size, line length and leading. Font faces and character. Font size and priority.

Lay-out: Volumes, symmetry and asymmetry. Grids. Basing grids on leading of smallest type. Standard solutions: the Cnet three-panel layout, the Discovery horizontal layout. Flexible, fluent designs: Wired News.

White-space, hairlines and coloured fields.

Daring to prioritise: Apple , Danilo Black . Visible area. Above the fold.

Colour: Black, red, white, gray. Complementaries. Contrast . Taking colours from images. The amazing colour tool by Poynter institute .

Images: placement, cropping. Go close!

Navigation: typical styles: top bar, left column, hierarchy crumb trails, fisheyes, overview pages.

Links: inline, at the end, or in a special pane. Typography, colour, semiotics of links. Hypertext news writing.

Video and Interactive Graphics: New York Times, El Mundo, MSNBC, BBC .

Workflow: Pencil! Thumbnails, style sheet.

Related Overviews

<< Previously in Surftrail:
good-looking blogs

Next: >>
new blog design