Some current trends in web site design

"In art the hand can never execute anything higher than the heart can inspire." Ralph Waldo Emerson

Some current trend web site design styles

Not an exhaustive list, but a categorization of current web design styles. Chances are that your design expectations follow closely to one of these popular categorical styles. The definitions are not strict, but guidelines of the design points of the style:

Web 2.0 Design Style

Web 2.0 is about how we generate and distribute content, not about design. In the last few years since the birth of this Web 2.0 era, it has also influencd the design styles of web sites and a particular style has evolved known as Web 2.0 Design... maybe we would more accurately call it Web 2.0 Style.

  • It is very simple in nature and is a noticeable departure from design standards of previous years.
  • Centered layout with fixed width - Left justified web sites have given way to centered screens of fixed width. Liquid width designs have for the most part dissappeared. Much of this is due, in our opinion, to the wider computer monitors available today. Fixed-width and centered designs just look better on these screens and are easier to work with in a browser window of any size.
  • Design Focus is on the content and the navigation, not the page design - "Content is King" in web sites and this is evident in Web 2.0 design. We are finally coming into the place in web design style where design is less about the designer and more about the content of the web site.
  • Lots of Whitespace - This term "whitespace" or some call it "negative-space" refers to areas on the page where there is nothing. Our mind's eye needs the right amount of whitespace to seperate and organize the ideas that we are scanning on a page. The more information that is crammed into the page we actually feel like we are less able to see or distinguish anything on the page. Odd enough, but it is the whitespace that draws our attention to the information we are looking for. Today's Web 2.0 designs use a lot of whitespace.
  • Large Text Headers - Section headers are in big text fonts often much bigger than the text in the paragraphs. This is a very distinct departure from design styles of the recent past and also from the Corporate Style.
  • Softer more Informal Look - Web 2.0 style uses lots of rounded stuff. Everything from rounded corners in the template to the buttons and breadcrumbs are typically created either round or with rounded corners.
  • Badges, buttons, and breadcrumbs - The Web 2.0 Style tends to adorn content with graphic elements that draw attention to certain parts of the page where content should be noticed. There is a starck similarity to print advertising that one notices in this element of the style.
  • Prominent Call to Action - This style is much more bold in its presentation of what we call "The Call to Action" meaning that various graphical and text treatments are used to make sure your eye is drawn to the responses the site owner wants (eg contact forms, registration forms, e-commerce).

Corporate Design Style

The classic corporate design or "corporate look" is an unmistakeable conservate look that everyone recognizes.

  • Often uses straight lines, square or near square cormers and angles to give them a formal look.
  • Designs are typically sort of masculine.
  • Fixed width layouts dominate but some older sites are liquid width.
  • Typically use the classic navigation at top and left.
  • Conservative colors are very common. Lots of light gray or white backgraounds.
  • Strict order and balance in the design. Everything is in its place. Call to action is likewise balanced and orderly not sticking out or demanding undue attention.

The classic corporate look style of design is the most prevelant on the Internet. Business and large organizations utilize this conservative style almost exclusively.

Theme Motif Design Style

The concept with the Theme Motif is that the graphic design paints a picture or tells a story that the overall web site is about.
See: Supreme Task and The Pasport
  • Theme Motif design is very graphically heavy and artistically illustrative. The design uses elements and/or characters of the story in the design in order to engage interest.
  • Photography is often used in the design.
  • Rich color schemes are almost always used.
  • Graphic Animation of some kind (usually Flash) is very common in part of the page.
  • Fixed width design is a necessity.

Flash web sites

Flash web sites were very popular for a few years but are becoming less popular now. Instead Flash is being incorporated into the design of the graphic elements but is not being used to display content. This is a much better use for the flash, reason being, that when content is inside of an all flash web site then it is presently unknown how successful search engines are at indexing the content. In the past, this content was not available to search engines at all, however, recently Google has acquired technology that will index some of the content in flash and appears to be able to follow hyperlinks inside of Flash. The technology and how it works is presently being held very secret and rules for search engine friendly Flash are have not been published. While this technology is certainly progress, Google still states on their website,"...we cannot process the content of some rich media files..". Until we know how this technology works and how effective it is, then we cannot know for sure what content in a flash website is actually being indexed properly. If search engine traffic is vital to an organization's web site then perhaps, for now, it is best to present that web site in an HTML format where it is most readily available to the search engine spiders. This allows the site owner the greatest amount of control over what information in their web site will be indexed and the quality of that indexing.

As it pertains to human visitors, Flash web sites have some disadvantages also. Flash web sites are created in a vertically static size which does not allow the page to expand with the content. To overcome this, the developer makes a scrolling device on those internal pages. These scrolling devices are all part of the design of the site and not part of the web browser (Firefox, MS Internet Explorer, Safari, Google Chrome, etc). This results in a new learning experience in how to browse that web site which is dependant on the site's design. This is putting the visitor at a disadvantage and can diminish the amount of your site that the visitor will actually consume. This issue also makes it difficult to print pages out of some Flash web sites. Suffice to say, although your graphics are appealing, many visitors are more interested in quickly and easily getting to the information they want and these visitors often do not have the patience required to navigate a Flash web site.

Flash is such a rich medium for displaying photos, graphical elements, animation, and navigation, but content is best published in the gold standard old-school HTML. We have had clients come to us requesting an all flash web site, but after we help them understand the benefits of a hybrid Flash/HTML web site, all of our clients have chosen the latter. Similarly, we have clients that had a Flash web site and found out from that experience that a Flash web site is limited in its effectiveness in several ways. These clients are typically wanting to get out of their Flash web site and move their content to the industry standard HTML format.

  • Flash should not be used for content that would benefit from search engine indexing because proper indexing cannot be guaranteed.
  • Flash is currently the best web site technology for graphical animation.
  • Many site visitors do not like Flash web sites.
  • Flash content can be created statically (making it difficult to update and maintain) or it can generated dynamically from data sources such as database queries and XML data (making it very easy to update and maintain).
  • The best of both worlds is to create a hybrid HTML/Flash web site using Flash for animated elements and HTML (outside of the flash) for searchable content.
  • The other option is to create two web sites (one Flash + one HTML) at the same URL so that search engines and web visitors alike can make their own choice as to which site to view.