Google
 

Thursday, September 14, 2006

Current Trends In Web Design

Current Trends In Web Design

I have visited a lot of sites like CSS Zen Garden and others, I keep exploring the web on daily basis, so this article covers most of the current design trends which I recognize as high-quality ones.

Anyway, I’ll be brief and will try to get right to the point.

Web Desktop Style

pros: High-end looking style
cons: The most expensive


This is the most refined style with attempt to get close to graphics rich desktop look-and-feel as close as possible. As a result, that kind of style looks nice, but requires a lot of work and, usually, consumes lots of traffic.
In brief, Desktop Style can be distinguished by gradients all around, rich graphics, shadows and other imitation of desktop applications.

Examples of distinctive Web Desktop elements:

Web Desktop design style block elementBlocks. Usually, it is an area of screen with a border, a header and a footer, to aggregate logically connected elements: links, text, a score card, an article preview. Blocks may come with optional shadow.

Web Desktop web design style mini-blocks elementsMiniblocks are blocks in blocks: usually they have mini-picture with tiny text.

Web Desktop web design style element: buttonButtons. These web design elements come with gradient, contrast borders, optional shadow. Buttons may have “glass” effect, having reflections from underneath light. Usually buttons react on “mouseover” events (do some visual effect, when user moves mouse over the button).

Web Desktop web design style element - tabsTabs. They also use gradient, contrast borders, optional shadow. They react to “mouseover” event.


Silver Orange Style

pros: Usability, lightweight, simple
cons: Fashion, followers, somewhat expensive


A little bit simpler look-and-feel, with a good balance between style and a light-weight composition. Silver Orange style of web design is more concentrated on usability, than on a rich looking interface.
It does not try to impress a user (unlike Desktop Style), but rather provide him with a good usability experience.
As expected, silverorange.com are creators of Silver Orange design style.

Examples of distinctive Silver Orange style elements:

Silver Orange design style top menu element Top Menu. Usually it is dark with a light font color; background comes with a rich-colored gradient and contrast dividers:

Web Silver Orange design style logo and guide elementsLogo and guide line More gradients, guideline is in contrast with top menu background, font color is gray.

Silver Orange web design style element: gradient and textGradient and text divider. More gradients, mild divider


Apple Style

pros: High-end, quality, luxury
cons: Very distinctive, expensive


The style with glass tabs and buttons as a central figures of the design. Not very usable due to massive use of small or tiny fonts, but still pleasant, if you don’t have to deal with a small text quite often.
Expensive, requires a lot of work. Distinctive, so it’s extremely hard to seem original, doing web design in Apple Style, almost impossible.

Example of distinctive Apple style:

Silver Orange design style top menu element Apple Menu. Apple menu is a central point of Apple web design style. Everything else has pretty much the same style: glass buttons, gradients, rounded blocks…


Microsoft Style

pros: Functional, simple, cheap
cons: Perception: you are a MS affiliate


The main thing, which makes a site being in Microsoft Style is a gray, plain navigation panel on the left column with floating menus. Simple, clean and way too generic.
Created by engineers for engineers.

Example of distinctive Microsoft style:

Microsoft design style menu element Microsoft Menu. The main menu of Microsoft web design style is gray, functional and simple. Borders, “mouseover” events processing, floating sub-menus… Usually it occupies left column.

One more distinctive thing of Microsoft web design style is gradient in header condensing from left to right with search form on the top-right corner.

All blocks are divided by clean gray lines. I think, it a plus from usability point of view. People may have wide range of opinions on Microsoft way of doing business, but one thing is for sure: Microsoft design style is simple, functional and it has good usability.

Comparing to Apple style, it’s not so rich or luxury. But it works.


Magazine Style

pros: Attractive, simple, condensed
cons: Needs lots of text and photos, strongly depends on content quality


Magazine web design style is… well, for magazines. It tries to bring high quality visual composition onto your screen, so you can appreciate all work that magazine designers completed for this issue.
You can recognize it by high quality photos and images, mixed up with lots of links to articles.

Examples of distinctive Magazine style:

Target audience for Magazine Style is magazines reading people. Not engineers, not web designers, not even experienced web users.
This is really high-end stuff, created by professional designers, who can really enjoy what they are doing. In order to do something similar, you better have a pro working for you for a pretty good compensation…


Rounded Plain Style

pros: Simple, light, allows to focus on the content
cons: A bit boring, non-original, not impressive


Design like this is not bad at all. Its purpose – to draw attention to content. It also is minimal in terms of traffic.
Typical site (www.youtube.com) has top navigation menu with rounded corners and intentionally simple elements.

Example of distinctive Rounded Plain style:

Rounded Plain web design style


Web 2.0 Design Style

pros: Modern, well accepted, new
cons: Usability issues, fixed width


Web 2.0 web design style
Web 2.0 web design style


Web 2.0 web design style
Web 2.0 web design style
Web 2.0 design style can be recognized by
- Fixed width
- Central (rounded) shape with shadows
- Lots of gradients and volumes
- Large fonts
- Headers, highlighted with bright colors
- Substantial amount of gray text
- Wide range of text size
- Rounded shapes and buttons
- Shadows, glass-effects, more gradients


Adobe / Macromedia Style

pros: Clean, simple, balanced, high-end
cons: Expensive, distinctive, usability issues


This style is like Apple’s: once you’ve seen it, you can recognize any attempt to follow it. Very expensive design, very loaded in terms of graphical effects, very balanced overall. Originally created by Macromedia a few years back, this web design style remains one of the best.

Distinctive elements of Macromedia web design style.
Complex gradient menu with shadow, rounded blocks with shadows, rounded banner under menu, fixed width, centered.

Adobe / Macromedia web design style
Adobe / Macromedia web design style


This article is not…

This is not even an attempt to come up with a complete description of current web design styles; I’ve just put things (which I personally like) together and explained distinctive features of them.

Many other web design styles (especially from so called “Art Design” category) are left unexplained. Not because of I find them useless or not pretty, but mostly for usability reasons. You cannot use piece of art in everyday life. You are not suppose to.

I also haven’t highlighted styles, which I didn’t find attractive for lots of reasons: from their usability to aesthetics.

No comments: