3.5 Page Design.

3.5.1 Introduction.

Page design covers a broad array of topics, and these can for convenience be split up into two categories:

• High-level principles for page design. Thought processes and activities that you should carry out to make sure that your designs have been carefully considered, and are suitable for the contexts in which they will be used.
• Detailed page design guidelines. These guidelines cannot be of 'one size fits all' sort, and will need to be considered in the light of the decisions that flow from high-level principles.

We will begin with high-level principles, using a selected set of IBM's page design guidelines to provide some major headings.

3.5.2 High-Level Page Design Principles.

IBM principle: "Design in a style that will appeal to your audience's tastes. Use your audience profile and strategy definition to define a visual style for your site which they will find appealing."

Whilst this is sound, it probably requires some clarification and refinement. It does not mean that design style and layout should be directly derived from consultation with representatives of your audience. A visual design style represents a negotiation between the designer and an audience, blending elements that the audience find familiar and acceptable with elements they may find challenging and new. Unless there is some sort of novelty and challenge in a visual design then your pages risk becoming digital wallpaper. Think about the way the advertising industry approaches this - they continually push barriers within recognisable genres in print and tv advertising in order to interest, intrigue and shock ... depending on the effects that they want. Site design should have some of these ambitions; but, of course, they must always be exercised for the sake of the broader strategic aims of the site - not for the sake of the personal whims of the designer.

Try not to make your assignment site a straight copy of some established style. Try and get some individuality into it so that you can fully exercise the graphical communication techniques that you are taught.

IBM principle: "Test the visual design. Before you begin coding and creating the visuals for your site, ask users to evaluate the planned visual style. Create some quick paper sketches that are easily revised. Offer your participants alternative sketches of different designs. Consider asking each participant the following questions:

• What would you perceive as the purpose of the site based on this presentation?
• What would you be looking for once you arrived at the site?
• What would you do next after seeing this presentation?
• What do you like and dislike about the presentation? (ask about the user's reaction to the metaphor if a metaphor is used in the presentation)
• What impression would you form of the company [organization] based on the visual style?

Creating simple sketches are valuable not only for soliciting feedback from users, but also for communicating your purpose and plans to other team members."

You can see this as providing a check on the kind of impression-building you were aiming for with your visual design. If you were trying to interest, intrigue and challenge, did you succeed in doing so? I'm not sure about the 'pencil sketches' idea. The impression you create is so bound up with your use of digital presentation I think you pretty well have to use the screen even at the sketching stage. Anyway, most multimedia specialists will probably be able to create a digital sketch or screen mock-up almost as quickly as they can create a paper version. This doesn't mean that design shouldn't go through a paper version; just that the paper version isn' t the right one for user feedback.

IBM principle: "Establish and/or comply with your organization's design conventions. Many organizations have an established set of design conventions that dictate how their logo and related elements of corporate identity are to appear on stationery and other materials. Consistent design conventions help your organization become more recognizable to the public. If your organization does not have a set of design conventions that apply to web design, you might suggest that one be established."

If your site exists to represent an organisation, or is linked with any kind of corporate communication effort, then it must consider the visual design adopted by the organisation, and work within or relate to it. Even these notes, which I deliberately keep distinct from any APU site, are prepared in a sober, bureaucratic style that makes them appropriate for official student use.

In the case of the 'UK On-line' assignment task, this means that you have to consider that you are representing the government in your design. As I have already stated, you don't have to follow UK On-line's established style; but their way of communicating should find its way into your design thinking.

IBM principle: "Maintain consistent visual identity. Establish a visual identity by using related visual elements throughout your site. A consistent visual style gives a site a sense of unity and reinforces users' experience that they are rooted in a certain place."

This should be used without qualification. The unity of a web site, or sub-sites within a large web, is crucial if you are to give the user the necessary cues that they are moving within your site and a unified body of information. As IBM indicate, this doesn't mean that every page has to be derived from a common template - but that there is sufficient repetition of visual cues that the audience understands that these pages belong together.

IBM principle: "Present your message efficiently and avoid clutter. Your words and your design will be more powerful if you can say more with less, so be rigorous about eliminating superfluous elements. Every element of your design should support the goal of your message. While using purely decorative elements is legitimate, keep in mind that a tremendous amount of information is competing for users' attention. Information overload can cause discomfort and prevent users from finding the information they want to find."

This is getting close to the realm of low-level guidelines, but is probably worth adopting as a general principle. There are very few areas of communication where the "less is more" principle fails to apply ... it seems to be applicable to paintings, novels and acting styles, so I don't see why it shouldn't be applicable to web sites as well. The other version of this maxim is that everything should be as complex as it has to be, but no more.

As you design your pages, consciously apply a simplicity principle: ask yourself for each element (image, text, animation, sound, etc.) why it is on the page, and what 'work' it is doing to earn its keep. Perhaps put a fragment of such reasoning in your documentation, just to convince me that you have done it.

IBM principles: "Design within boundaries of an "image-safe" area. Anticipate your users' screen resolution settings and the size of their monitors. ... Avoid requiring users to scroll in order to determine page contents. Users should be able to recognise immediately whether the subject of any given page interests them. Elements that are critical to dentifying page contents need to be visible in the image-safe area without scrolling. ... Avoid requiring the use of horizontal scroll bars. ... Use the top and left areas of the page for navigation and identity."

These principles spill over into the category of specific guidelines and may be somewhat contentious. They sum up sound principles concerning the way in which people commonly use screen-based media, and our top-down lef-to-right reading culture. However, it is best to take them on board as strong suggestions that carry a heavy weight in your design trade-offs. This is perhaps better summed up in the more general principle that there is are established traditions in graphic design and digital design that you must bear in mind in the design process, and that if you depart from tradition then you must do so for good and well-considered reasons.

These principles also highlight difficulties in designing for a range of platforms and screen sizes in an era of very sophisticated design, and that trying to cater for everyone has probably stopped being a sensible aim. I have very strong doubts about such 'principles' as "use web-safe colours", "make sure your pages work on all browsers". As an example, in the early weeks of these notes I tried to make sure that they rendered properly in both Netscape 4+ and IE 4+ ... however, Netscape's odd handling of CSS scoping rules made this a bore, and the pages (with the Geocities adverts) simply collapsed in Netscape 6. So now I test on IE 5+, and the rest of the world can go hang, for all I care.

Identify the broad principles that you are going to adhere to in your design, and identify the models and traditions on which you are drawing. Justify them to yourself, and put a sample of this thinking in your documentation.