The Evolution of Website Development

WEB 2.0 Design Standards
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 than 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 800×600. 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 1024×768 or above.

Orientation
Simply put centered.
I don’t think anything looks more awkward on a computer screen than 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 a larger type thus emphasizing the content of the site more than 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 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 Piata.

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 than 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
Colour
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/)