Wednesday, January 22, 2003

Designing for the screen

There are plenty of books and commentaries on the subject of design for the web and design for interactive media. It sure is crucial that the concept of interactivity is thought of as a differentiator in designing for the computer screen rather than paper, but what about those basic things like getting things to look good in the space. What about ‘balance’, ‘harmony’, ‘proportion’. We need to consider some of these fundemental layout design concepts. Forget all that for a moment: Let’s forget about interactivity, structure, usability and other such important issues relating to delivery of content on a computer screen and consider the blank space, the rectangular space. Take a blank piece of paper and pretend that you need to arrange a heading, a logo, some text and a couple of graphics in that space. Where do you start?

furthermore...

Take a look at these two layouts:

Which is best?

Matter of opinion? Or is the one on the right more balanced? Wouldn't you agree that the eye is drawn in rather than left to wander aimlessly amongst the shapes. Here is the same image showing the alignment grid that was used to keep the components 'tied' together.

What I have done here is quite simply to use a grid to help me realise some kind of order from these components of the design. In this case I have divided the space into 9 equal divisions and aligned edges or centres to these vertical lines. I have also aligned some components with each other in the vertical dimension. Grids are often used by graphic designers to 'harmonise' separate components in the design. The grid does not have to be evenly distributed and may even consist of more complex geometry.

Balance

Good graphic design mixes different kinds of content together to make visually interesting compositions. It's all a question of balance. Too much text without any graphics is unlikely to be compelling. If there is a need for lots of text then blocking some out in a different style or mixing it with narrow columns of highlights or heading can be effective. The way that these components are balanced is crucial to the overall strength of the design and therefore rules of proportion found in nature are often used.

The Golden Rectangle

It turns out that many forms in nature seem to be constructed using a particular proportion, sometimes known as the 'Divine Proportion' or 'Golden Ratio'. This is a ratio derived from the division of a line into two parts, such that, the ratio of the two parts is the same as the ratio of the greater part to the whole. This explains it: So, it would be possible and even desirable to base a design on the 'golden rectangle': This image represents the method of constructing the 'golden rectangle'. Closely allied to the 'golden rectangle' is the 'root 2' rectangle, based on a similar construction method. The arc is made from the far corner of the original square. The resulting proportion is used in the definition of standard European paper sizes (A4, A3, A0 etc). It is interesting that the proportions of the computer screen rectangle is neither of these. 640 x 480 or 800 x 600 are both in the proportion 4 to 3 Here is an image that represents that format:

Reality Check

There are some great designers working on the web and we can certainly learn from some good examples. The truth is, though, that designing for the web screen is designing for a dynamic and fluid medium. We have to understand the technology that our 'viewers' are using. We should be aware of the potential of alignment, balance and proportion. We have the tools to make this visual language work for us. Photoshop, InDesign, Flash, Dreamweaver and GoLive, all have features like grids and construction lines to help manipulate objects and components to achieve compelling design.

Limitations

Designing for the the web is different to designing for interactive CDROMs. The web screen space is less controllable than many designers would like. That is one reason why so many web designers prefer to use Flash as a way to display content. The rectangular space is (almost) entirely under their control and can even be scaled to fit the size of the viewer's window. I have previously written about the scrolling window here and in this article I discuss the potential of the 'liquid' design. Certainly, using grids and alignments to organise content has it's limitations as a technique for conceptualising 'liquid' designs for the web.