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
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
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
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
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
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
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
cons: Usability issues, fixed width
- 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
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.
Explore posts in the same categories: design, web
September 13th, 2006 at 10:39 am
Good article, and good work on spotting different menu styles! What do you mean by “Expensive”?
September 13th, 2006 at 11:25 am
Nate, thank you for reading it!
I use “expensive” as “requires a lot of professional designer’s work, requires use of certain tools, i.e. Adobe Photoshop, takes multiple iterations to make it perfect, needs a big attention to small details etc.”.
September 13th, 2006 at 8:46 pm
Great article. I never thought it that way until I read your article.
I prefer to the simple, fast loading style with minimal usage of images but then people would say “your site is boring, put some images. Design something for the border/banner/background yada yada yada”
And you could add in the Web2.0 style , the banner will have reflections for the images and the word Beta slapped on the banner too. LOL.
Rock on.
September 13th, 2006 at 8:49 pm
I find the use of the word “expensive” quite interesting … especially for Apple’s website, whose design, of course leaving out content pictures, is quite dated and can be whipped up very easily. Designs such as digg’s are more intriguing, current, and simple to implement once you have your colour coordination right. Gotta love how graphics have given way to cleaner, simpler looks over the years.
September 13th, 2006 at 8:58 pm
Great atricle. I may return for reference - the division of the different styles is quite useful. Keep up the good work!
September 13th, 2006 at 8:58 pm
nicely done, and thorough. Where does Google fall in?
September 13th, 2006 at 8:58 pm
The ‘blog style’ might be another - this site is an example.
Great article by the way.
September 13th, 2006 at 9:12 pm
Good job! You work has landed onto digg’s 2nd page if Im not mistaken; forget which page it was dont want to hit back button. Now which one of the sites above are you peddling for traffic? BluBolt, Yelp? LoL
September 13th, 2006 at 9:15 pm
Super article!
Nice list of some of the styles currently used out there.
September 13th, 2006 at 9:20 pm
I think you touched on motifs more than “style.” Let me explain, the motifs are now, but the style is ever present, and always has been there. The style is more or less the visual representation as a whole that translates the values of whatever entity it is representing, in which ever medium at hand.
For example, Microsofts design motifs and “look” change from time to time, but it still represents the same style. The style being later rather than sooner visual cues, and trying to integrate into the visual landscape, rather than innovate.
Anyway, I enjoyed this article, but, I think you can go into even more depth! I think it’s fascinating. I also don’t identify with your expensive definition. It’s like with clothes, expensive clothes don’t necessarily have more worth, or take more effort, they just look better. In my opinion, the “most expensive” of your article give me a headache, and I never go there. I much rather look at newsvine or 9-rules. I associate expense with quality, although, that’s just my opinion, it’s not really any more correct. It’s probably silly. As am I.
Thanks! Keep it going.
September 13th, 2006 at 9:21 pm
Good article. I was also confused by “expensive”. To the accomplished web designer expensive=good thing. I guess if you were trying to create your own website and you didn’t know how to use photoshop,illustrator ,flash or fireworks your site would probably suck pretty bad. You would then have to hire the expensive web designer.
September 13th, 2006 at 9:23 pm
nice breakdown. good observations, this is what we wanted the web to look like back in 1998.
September 13th, 2006 at 9:29 pm
Excellent article. You really broke down what seems to be used the most on the web today. Personally i find the magazine style the most attractive just because of its uniqueness.
September 13th, 2006 at 9:36 pm
Hey nice reading man. I would have to say, as commentary, I cant believe Apple is still using that web design. I would have thought they ditched that thing by now its so outdated looking.
Adobe macromedia style I generally call table of links style, cant stand it think tts really outdated as well.
Most compelling to me are silevr/orange and web 2.0. Although I was surprised you tagged target as wWeb 2.0 but I guess if you loko at the details its there.
I played with some web 2.0 CSS styles in a project today and it was really fun how much better it looked than my other companies apps and it really didnt take that much.
Itll take time to see how much is matter when you have sites like go.com one of the ugliest things Ive ever laid eyes on being one of the top sites in the world. Yuck.
Anyway thanks for collecting this stuff, its a good reference for when I hire a UI designer.
September 13th, 2006 at 9:41 pm
great writeup. anybody can say you just put some links together in 15 minutes, but you made some good points and gave me a few things to think about
September 13th, 2006 at 9:49 pm
What do you mean by usability issues for Web 2.0 Design Style?
September 13th, 2006 at 9:55 pm
You forgot one very important design - Basic/Simple. This is the design used by Google, eBible, ask.com, etc.
September 13th, 2006 at 10:30 pm
[…] I found a very interesting article on current web design trends. My favorite is probably the Web 2.0 style, as it’s a mixture of professionalism and color, and for anyone who knows me, knows I love my color! […]
September 13th, 2006 at 10:50 pm
Current Trends in Web Design…
Pavel Senko has put together a pretty good overview analysis of current trends in web design. He’s identified some of common themes that are emerging….
September 13th, 2006 at 11:03 pm
I really liked Fitz’s comment above — everybody should re-read it before he/she/it (assuming there are aliens amongst us) goes any further…. Great thinking, Fitz!!
September 13th, 2006 at 11:20 pm
Pavel,
Wonderful article. I think you summed it up quite nicely. I had to laugh because I worked for Apple until just recently and am now designing sites for myself. When you mentioned “time consuming”, you were right!
Very well done. Good luck in the future!
September 13th, 2006 at 11:28 pm
[…] 최근 웹 디자인 트랜드라는 제목의 글을 발견… 대략(영어 실력이 딸리다 보니.. ㅡ.ㅡ) 읽어보니… 대략 그런듯.. ㅋㅋ […]
September 13th, 2006 at 11:35 pm
[…] Interessant en spot-on, de meest voorkomende designtrends van het moment. Webdesign is volwassen geworden, het merendeel is nog gebruiksvriendelijk ook. […]
September 13th, 2006 at 11:56 pm
[…] 当前流行包括了Yahoo!和Live.com的桌面风格、SilverOrange风格、苹果风格、微软风格、杂志风格、圆角风格（这似乎不能独立开来）、Adobe / Macromedia以及理所当然的Web2风格。相对好象Silver Orange Style比较适合我胃口read more | digg story Filed in log Posted by Di September , 2006 […]
September 14th, 2006 at 12:07 am
Nice one though… I was jus wondering why you didn’t include a “Blog” Style… anyways, this is must-read article for all web designers… Thanks for the efforts
September 14th, 2006 at 12:19 am
I have to address “expensive” term…
Well… there is a clear difference between “expensive” and “it looks expensive”. Almost nobody wants to buy a car for *a lot of tens* thousand dollars, but almost everybody want their car to look more expensive than it really is.
So, when you develop a web site (or hire somebody to design / build it), you may want it to be as cheap as possible in terms of development cost and look as expensive as possible in terms of perception. Not opposite.
So, when web design costs a lot (hundreds hours of $120/hour designer’s work), “expensive” is a clear “con”. So, it may or may not look expensive after all, but it will cost _a lot_ for sure.
I think the best web sites have pretty good balance between real cost of production and their look, specifically young start-ups like digg or other web 2.0 wave.
September 14th, 2006 at 12:44 am
[…] The article explains current web design trends, shows distinctive elements with examples.read more | digg story […]
September 14th, 2006 at 1:09 am
great stuff! We passed it around the office!
September 14th, 2006 at 1:45 am
Quite an interesting found. Check out Design Patterns: Badges, Tag Clouds, Huge Fonts.
September 14th, 2006 at 2:08 am
Thank you very much for this outlines
It was nice to see all together 
И было мило видеть заголовок на русском
September 14th, 2006 at 2:17 am
Neat observation.
September 14th, 2006 at 3:34 am
A simple and very good article about web design.
September 14th, 2006 at 4:16 am
Great!
September 14th, 2006 at 4:54 am
[…] Web Design Trends Explained Some of the major design trends explained quite nicely, courtesy of ontoinfo. Included are the “web2.0″ look, as well as the “apple look”. Compares and contrasts them as well. Insightful. (tags: ontoinfo web2.0 examples 2006 trends webdesign) […]
September 14th, 2006 at 6:38 am
[…] From beautifully designed Authentic Boredom, with nice article with tips for designers-beginners, fast move to treasury of on-top links from many services :… popurls.com and jump to Current Trends In Web Design and My 50 Favorite Design Resources from where you can travel and travel for hours. Ufff… […]
September 14th, 2006 at 6:44 am
[…] Current Trends In Web Design (tags: webdesign design web2.0 web trends inspiration apple) […]
September 14th, 2006 at 7:18 am
[…] http://www.ontoinfo.com/2006/09/13/current-trends-in-web-design/ […]
September 14th, 2006 at 7:43 am
Good post Pavel. A lot of web design posts now seem to run together but this one definitely stood out from the rest. Thanks.
September 14th, 2006 at 8:25 am
[…] de este post A del.icio.us A menéame Postanterior […]
September 14th, 2006 at 8:47 am
Pavel,
Great article. I tend to agree with Darian and his comment about motif as opposed to style, nonetheless you give a great overview. It has been my observation that the trend in the ‘Web 2.0′ designs seems to include lots of ’shiny’ and reflected graphical elements as you said but the *real* point of Web 2.0 design as I understand it goes beyond appearance.
The ‘V2 Web’ is about semantic markup, standards compliance (curse you Internet Explorer) and accessibility, as well as online apps like Project Spaces (http://www.forumone.com/section/services/projectspaces/) that use Ajax, Ruby, and other backend technologies to create interactive, collaborative, and portable (in the sense that it is usable from any Internet connection) environments. The best resource that I’ve found for Web 2.0 spotting is Emily Chang’s eHub (http://www.emilychang.com/go/ehub/).
As a aside, couldn’t find a direct e-mail link so I’ll put this here: Your command of english as a second language is admirable, a lot better than my command of spanish or ?russian? (don’t read cyrillic text so I don’t know). I’m impressed. Keep up the good work.
As a contact point for your blog I recommend the InTouch plugin by Verushka Perera.
September 14th, 2006 at 8:49 am
I have featured your article on my blog http://www.webrehabs.com
September 14th, 2006 at 8:59 am
[…] I also haven’t highlighted styles, which I didn’t find attractive for lots of reasons: from their usability to aesthetics.” LINK […]
September 14th, 2006 at 9:55 am
[…] Okay, enough with the blabling(meaning bla-bla-bla, LoL). I am looking at some web design resources now, love designing although I sucks in them, haha. Current Trend in Web Design A neat blog post which analyse the current trend of web designs online. Neat, non-geek(not so techie and hard to understand) overview of different trends, eg. Web 2.0 style, Magazine Style and etc. […]
September 14th, 2006 at 11:54 am
[…] Current Trends In Web Design Posted Friday, September 15th, 2006 at 1:02 am I browsed the web as much as this guy, or maybe more but I havent thought of doing this kind of listing and elaboration. *Sigh* Quite slow this week, maybe the rain is affecting the brain wave. Woot! […]
September 14th, 2006 at 12:15 pm
Well done!
My homepage | Please visit
September 14th, 2006 at 12:22 pm
Realmente muy buen analisis
September 14th, 2006 at 1:17 pm
I blogged this too.Amazing how digg can ramp your popularity in one day.
September 14th, 2006 at 3:51 pm
[…] This article looks at current web design style trends, with explanations and examples. « Text resize detection […]
September 14th, 2006 at 4:49 pm
[…] ontoinfo » Blog Archive » Current Trends In Web Design Tendências em webdesign (tags: webdesign design Trends web Inspiration) […]
September 14th, 2006 at 4:50 pm
[…] En Ontoinfo podemos encontrar un buen análisis sobre las Tendencias Actuales del Diseño Web, con una descripción, pros, contras, características comunes y algunos ejemplos de sitios. No es raro que aquí mencionen algunos sitios muy populares, ya que han sido estos los que han inspirado luego la creación y desarrollo de otros similares. […]
September 14th, 2006 at 5:53 pm
[…] Tendencias actuales en el diseño web (tags: webdesign inspiration trends toread diseño web) […]
September 14th, 2006 at 7:07 pm
[…] ontoinfo » Blog Archive » Current Trends In Web Design “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.” (tags: webdesign web2.0 trends web inspiration) […]
September 14th, 2006 at 8:22 pm
[…] เช็คสไตล์ล่าสุดได้ที่ ontoinfo […]
September 14th, 2006 at 9:56 pm
[…] ontoinfo has put together a nice article looking at the most popular sites out there and what kind of basic look and design they feature in terms of style, colors and navigation. Big sites set trends in a way that people get familiar with the way they look and work. Yahoo, Google, Mozilla, Microsoft, youtube.com and blogger are some of the examples shown. In fact there are many more design trends and many are being created on sites not known to most. […]
September 14th, 2006 at 10:49 pm
[…] Current Trends In Web Design (tags: WebDesign) […]
September 14th, 2006 at 11:28 pm
[…] ontoinfo » Current Trends In Web Design […]
September 15th, 2006 at 2:39 am
[…] ontoinfo » Blog Archive » Current Trends In Web Design (tags: web) Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. […]
September 15th, 2006 at 2:46 am
Informative article
I think Google falls in Rounded Plain Style?
September 15th, 2006 at 2:52 am
Well done! Although I’m missing the typical blog layout and the uberdesigners site/portfolio!.
September 15th, 2006 at 7:45 am
Great post! I’ve linked it in my own post!
September 15th, 2006 at 11:39 am
Great article. Well-written summary of major design trends. Particularly thankful for your comment on the meaning behind “expensive.” Many clients still do not recognize that high-end graphics–even if they navigation “buttons”–require a great deal of time and effort and close attention to detail to create and be tailored to the overall site’s look and feel.
September 15th, 2006 at 2:47 pm
[…] ontoinfo » Blog Archive » Current Trends In Web Design Tendências em webdesign (tags: webdesign design Trends web Inspiration) […]
September 16th, 2006 at 12:14 am
La cagó, se pasaron, super bueno el post !!!
September 16th, 2006 at 2:11 am
well said, fred. thank’s for the article.
:)olc
September 16th, 2006 at 3:46 am
[…] Wired Magazine published this great buzzword graphic about web 2.0 startups. Combine a word from each category, receive venture capital and start building it. Don’t know how to create this special appealing social-2.0-look? Ontoinfo sorted it all out in the current trends in web design. […]
September 16th, 2006 at 1:38 pm
[…] Not a bad little comparison of Current Trends In Web Design (with examples). | comment privately | digg it | save it | print it | email it […]
September 17th, 2006 at 1:40 am
I would like to thank everybody for very encouraging feedback!
My special thanks to Darian, Bob, chapan, fitz, Dan Boyce for additional points and observations. I appreciate your inputs, folks.
I’m preparing more articles on web design, which will be available soon.
Meanwhile, I would like to announce, that current theme (which I picked in hurry) is going to be replaced with my own theme.
Due to significant amount of spam comments, which I need to delete on daily basis, I have to disallow any further comments…