3. Graphic Design
Contents
Problems
Although I am not a professional graphic designer, there are some obvious problems.- Layout lacks clear structure
- Inconsistent elements
- Contrast is too high in background elements
- Important elements are not highlighted effectively
- Editorial star is more prominent than the headline
- Sideway taz.de cannot be read instantaneously
- Border-less light gray boxes against white
- Too cluttered
Approach
In line with pre-determined use cases, the design should guide the visitor through the content as quickly and clearly as possible. The current design fails considerably.
The first thing a visitor would read is the logo. Second is the main picture, third the main headlines. Users then tend to scan the other headlines for articles of interest and will then click on the first article that draws that interest.
Thus, the design should:
- Make the logo the most prominent and clear element. It should be clear that the user is on the taz website. Taz.de is sufficiently big and well contrasted (the logo is well designed), but positioned sideways. Sideways text is far less effective.
- Make it easy to scan the headlines. Consistent vertical alignment and consistent typefaces will do this. This is done reasonably well, but could certainly be improved with this goal in mind.
- Additional features should be clearly out of the way of the headlines, but prominent enough that the user knows they're there.
Best practice
Always hire a professional full-time graphic designer to design the site. This cannot be substituted by part-time designers, or by anyone who is also a programmer. This is also preferably someone who knows modern web design and incorporates subtle, advanced techniques, such as the golden ratio. Modern web design techniques are described on sites such as A List Apart and Digital Web Magazine.
Although I am not a graphic designer myself, here are some comments:
- Manage typography elements: use proper quotation marks: “quote” „quote“ ‘quote’ ‚quote‘ ›quote‹ »quote«. Likewise, em-dashes, en-dashes and minus (—, –, −). See A List Apart
- Expand the layout to appear as if it continues, rather than constrained and claustrophobic.
- Pay more attention to the vertical alignment.
- Avoid floating square boxes.
- Use more dead space, website space is limitless.
- Reduce the number of colours displayed (especially from the ads), so that particular elements (such as selected ads) can stand out.
- Reduce contrast of non content elements (black bar on left).
- Allow vertical scanning from the user (to easily scan every headline).
- Square, bordered, low contrast edges are not pretty
- Improve quality of images used, many images have been poorly reduced.
- Replace all GIF formats with PNG formats.
Here are some examples of high-class modern professional designers (of course, these are not media sites):