5.12 Professional Pages

To instill trust and confidence in customers, web pages must look professional. The designer needs to bear in mind both the client's aims and the target audience.

General

1. Web pages should be consistent, and project the company's image throughout. Some companies engage in hard sell, and lose no opportunity of stressing the advantages of their products and services. Others — medical, legal and insurance services — seem hardly to sell at all, but aim to convey quality, tradition and selfless devotion to professional standards. What works for one market will not necessarily work for another.

2. Websites have a job to do. Indeed the purpose of each and every page needs to be carefully considered and fitted into preferred traffic routes. This takes precedence over aesthetic matters.

3. Content should be engagingly written to evoke a specific response: compare prices, see what you save, look at our guarantees, buy now, etc.

4. Pages should load quickly, follow clear themes and have foolproof navigation, with a site map for sites of any size.

5. Shopping cart should work flawlessly, and be no more than 3 clicks from the landing page.

6. Company information, privacy policies, guarantees and returns policies should all feature prominently if traffic metrics show these to be important to customers.

7. Layout should be aesthetically pleasing in all popular browsers, with colors appropriate to the market sector and with typefaces legible.

Specific Matters

Page Size

Are the preferred customers going to access the website from a large screen PC, a laptop, notebook or smart phone? Probably the first if they are buying up-market real estate, but the second if the site is an educational one serving the developing world, when you would want a site looking good at 600 x 800 pixels resolution.

Page Layout

Should you use the fluid layouts possible with Cascading Style Sheets? In most cases, yes, but put any extensive sections of text in fixed-width columns. For websites that are to be compiled into ebooks, however, you'll need to check with the compiler first: many CSS tags are not supported and you may have to use old-fashioned layout with tables.

Color Schemes

Color schemes should reflect the market sector and accommodate the company logo. Few designers now restrict themselves to web-safe colors, though there are display differences between operating systems, monitors, monitor gamma settings, browsers and browser versions. Check the mockups: what appears as a handsome deep brown color on one configuration may appear a garish purple on another.

Graphics

Graphics have to be appropriate and say something. Large graphics that increase loading time are more acceptable when image matters: art, fashion, real estate, glossy motoring etc. sites.

Text

Follow good typesetting standards, adding more white space and paragraphing if the text is primarily to be read on-screen. Use the browser-compatible fonts supplied by the Windows and Mac operating systems, and set the leading and word spacing with CSS. Make the the text resizable by the viewer unless a critical part of layout (as in designer's and architect's sites).

Things to Avoid

Surveys indicate that the following in particular annoy viewers, and are best avoided:

a. Pop-up ads.
b. Pages that require extra software to be installed.
c. Dead links.
d. Inconsistent or confusing navigation.
e. Registration to view a report, particularly if intrusive.
f. 'Wow' graphics or videos that take a long time to load.
g. Out-of-date content, or no date on articles.
h. No automatic error page redirection.
i. No site map.
j. Browser back button disabled.
k. No contact information on web forms.
l. Flash introductions that provide no useful introduction.
m. Background music, especially if it can't be turned off.
n. Over-powerful or distracting backgrounds.
o. Text that moves, vibrates or draws attention to itself.
p. Withholding price, shipping costs, guarantees and other vital information.
r. Links that perpetually open to new pages.

Positive Features

Features that make sites more popular and convincing include:

1. A brief, upfront presentation of a company's size, aims and history.
2. A friendly, open style of writing that engages directly with the preferred customers' needs.
3. A human 'face' to the site, with bios and photos as appropriate.
4. Original, authoritative and helpful articles.
5. Clearly-written white papers that can be downloaded without lengthy registration procedures.
6. A choice of media presentations: chatty videos for the casual surfer and concise text for the busy executive.

Good web page design is not a matter of following rules, but of applying the experience and creativity of a graphic designer to specific business needs. The better web-build companies acquire their flair and reputation by continually studying the creations of others on the web, and by working patiently with clients whose thoughts may have got no further than: ' we want something like XYZ company's site, only better'.

Questions

1. What in general should web pages aim to do, and how?
2. What overriding matters should the web designer bear in mind?
3. List the things to be avoided in web page design.
4. How would you improve the conversion rates of a website?

Sources and Further Reading

1. Before&After Page Design by John McWade. Peachpit Press. December 2003.
2. Web Design in a Nutshell: 2nd Edition by Jennifer Niederst Robbins. O'Reilly. September 2001.
3. Dreamweaver 8 Design and Construction by Marc Campbell. O'Reilly. January 2006.
4. Adobe Photoshop 7 Web Design with GoLive 6 by: Michael Baumgardt. Adobe Press. June 2002.
5. Sexy Web Design by Elliot Jay Stocks. SitePoint. March 2009.
6. Professional Web Design: Techniques and Templates by Clint Eccher. Course Technology PTR, June 2010.
7. Ordering Disorder: Grid Principles for Web Design by Khoi Vinh. New Riders. November 2010.
8. HTML5 Guidelines for Web Developers by Klaus Förster and Bernd Öggl. Addison-Wesley. June 2011.
9. Web page design. WebDevelopersNotes. The basics, but important.
10. Top 10 Mistakes in Web Design. Useit. Obvious, but often overlooked. Further lists on site.
11. 9 Essential Principles for Good Web Design. PsdTutPlus. Takes the logic of design further, and includes links to specific issues.
12. Web Pages that Suck. Examples of how not to do it.