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:
Blocks. 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.
Miniblocks are blocks in blocks: usually they have mini-picture with tiny text.
Buttons. 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).
Tabs. 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:
Top Menu. Usually it is dark with a light font color; background comes with a rich-colored gradient and contrast dividers:
Logo and guide line More gradients, guideline is in contrast with top menu background, font color is gray.
Gradient 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:
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 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:
Web 2.0 Design Style
pros: Modern, well accepted, new
cons: Usability issues, fixed width
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.
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.