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.
Web Desktop Style
www.yahoo.com
mail.yahoo.com
www.live.com
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:
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
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
www.apple.com
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…
Article
continues below
Microsoft Style
www.microsoft.com
www.msn.com
www.rsdn.ru
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.
Rounded Plain Style
www.youtube.com
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
blogger.com
netflix.com
orange.co.uk
shoutwire.com
simoka.com
Digg.com
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
adobe.com
macromedia.com
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. |
