Over the last few years we have seen the control in website development shift from programmers to graphic designers. This was a necessary step in the evolution of the industry simply because more companies are seeing the value in maintaining a solid corporate branding throughout all of their marketing pieces. This means that more and more web development is being outsourced by Creative Houses and Advertising Agencies.
Twelve years ago (before Dreamweaver) I worked as a designer with an agency that specialized in point of purchase advertising. The Creative Director of this company believed that the web would someday become another powerful means of advertising so we had better start developing design standards. Since then, I have spent most of my career struggling to help clients and client managers find a balance between a well designed site and a site that performs well.
Implementing graphics that would display in a timely fashion over a 14.4 modem was somewhat less complicated then trying to convince the programmers that bullied this new industry that these small images were a necessary part of a website. Today that trend has completely shifted. I look at some of the overly complex design compositions that I receive from some Creative Agencies and wonder if they have ever even seen a website.
The industry buzz now is around the WEB 2.0 Design Standards. The following points remain true to these standards but also include logical design steps that I have been teaching for years.
Proper Website Layout
Screen Size
The standard, acceptable width of a website has always been determined by what is the most commonly used screen resolution. Up until recently websites were designed to accommodate screen resolutions of 800x600. Now it is perfectly acceptable to create a site up to 1000 pixels wide since the majority of computer users have their resolution set to 1024x768 or above.
Orientation
Simply put… centered.
I don’t think anything looks more awkward on a computer screen then a small website that is tucked away in the top left corner. Designing along the center axis of the computer screen will always produce a more elegant layout. I also do not like liquid layouts that spread themselves over the width of the user’s computer screen since this lowers the control I have over the positioning of the elements on the screen.
Fonts
Up until recently it seemed common to use very small type in websites. Although elegant looking, this made the sites difficult to read, especially when contrasting colors were used. The trend now is moving towards larger type thus emphasizing the content of the site more then the actual design. Popular sites are using font sizes of 12 to 14 points with header text being as large as 18 or 24.
Other font considerations…
-
Use a sans serif fonts like Arial or Verdana. These are much more legible on the screen the Times New Roman. These fonts are also cleaner and more modern looking.
-
Limit your paragraph text to a single color, with a second color used for links. Using an additional color for headers or, carefully, to emphasize an area of the text is acceptable but you will not draw your audience’s eye to any particular area if your body text looks like a Mexican Piñata.
-
Use a larger size or bolded font if you need to emphasize a part of the body text.
-
Try to avoid italics, especially in smaller font sizes.
-
Limit your site to three font sizes.
-
Try and avoid contrasting colors between your fonts and the background. This also includes black on white. You will find that a dark gray font on a white background is easier to read then black. Do not try and compare this to black text on a white sheet of paper. The most common paper is only about 84% white and not luminescent like a computer screen.
Design
Color
Bold and bright colors are becoming less popular with modern developers opting instead for cool and softer tones. This creates a comfortable palate where the content of the site becomes the key element. With modern computers readily displaying over a million colors, trying to limit a website design to the old 255 websafe color palette is also archaic.
As with all good design, it is perfectly acceptable to make use of empty space on the screen to separate content and create a more comfortable viewing environment. I read an article recently where the author stated that he would like to take 90% of the sites out there and blow them up like a balloon in order to separate the screen elements. (http://www.webdesignfromscratch.com/current-style.cfm#big-text)
3D Elements
This is another trend that is, (thankfully), starting to fade. I agree that it is nice to ad depth to a page but this can be achieved elegantly through the use of gradients, drop shadows and subtle reflections. I will personally use gentle 3D effects, but cautiously. My rule of thumb is, if I think it will look ridiculous on a printed brochure, it is equally ridiculous on a website.
Other Silly Effects
Personally I think websites offering free animated gifs to web developers should be outlawed. Professional web developers are not using these services; they are being used by the business man’s nephew who offered to build him a website for the price of a case of beer. If any developer is still using dynamically rotating cartoons, flashing lights, moving rules, and those extremely annoying animations that proclaim that a site is under construction, please stop now before you hurt someone. Just because you figured out how to make text flash through the entire spectrum of colors does not mean you should do it. Also, if a site is still under contruction is simply should not be published.
And to the businessman who did get his nephew to create a website… it looks ridiculous. Next time hire a professional.
Flash
Flash is a difficult topic for me, mostly because I do enjoy using it. More and more Flash is starting to look like that extremely talented middle child that just can’t seem to find his place in society. Creating an entire site in flash was never a good idea since updating content is time consuming and anything created in Flash is completely invisible to search engines. Some developers, including myself, have opted to using Flash on introduction screens to certain website but again this raises problems. The index page of a website is the most important for search engine optimization and using a Flash animation here will lower your rankings. Also, most visitors to a website are there to look for information. Waiting the extra fifteen seconds to cycle through a Flash movie is generally considered to be a waste of time.
Personally I am now advising against the use of Flash in websites and limiting its use to other rich media presentations.
Content & Navigation
Modern sociologists have branded our society as one that is mostly capable of reading, but generally chooses not to obtain their information this way. This is evident in the direction that modern advertising has gone. If a commercial does not have the ability to entertain a viewer then the viewer will generally lose interest. We need to look at 90% of the websites that are out there and ask ourselves, “Will a consumer who watches a car commercial and only retain the line Zoom Zoom Zoom realistically sift through pages and pages of written information on your website? The answer is a simple ‘no’. If the visitor is looking for a particular piece of information then we need to provide it simply and comfortably or he will move on to the next website.
The content of a website should be its primary function. Keep text as simple and short as possible and be sure that navigation menus are clear and laid out in a logical fashion.
