Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided
Posted by admin, 9 Months, 6 Days, 4 Hours, 42 Minutes ago
One of the web 2.0 design and layout trends which I actually quite like is what I am going to call "clean and horizontally divided". Catchy name eh?
Every trend should have a poster-boy, and the poster-boy for this trend is *drum roll* shoeboxed.com!
So, hopefully from the above screenshot you can see what I am talking about when I say "horizontally divided". You can see there are several sections of the website which are all divided by different colors and layout. Each segment serves a specific purpose, with the amount of "real" information increasing as you move further down the page, and the amount of "marketing" information decreasing as you move down the page.
Before we analyze the elements of this trend, here are some more sites which are worth looking at to give you an idea of what this trend is about:
Wishlistr.com
Blogadda.com
ChurchPlantMedia.com
Corking Design
Dibusoft
Enrichment
BizMagic
NetNova
Studio3K
YikeSite
Oak Tree Creative
Revolver
OK, enough of that! Lets get to it!
Top Segment/Logo
Looking at all the above screenshots you will see that most of these sites follow a fairly similar trend for their logos and top segments.
The top-most segment tends to contain a darker background with a very simple text based logo:
The logos may also have a small amount of decorative extras, but nothing too over the top:
These top segments tend to contain very little elements other than the logo. This leads to a clean look where the user is not overloaded with information and navigation options at the top of the page.
Other Segments
The second segment tends to contain large typography and a bit of catch-phrase or selling point for the website.
Third and fourth segments tend to explain the website or product in more detail (e.g. feature-list, screenshots and focus points).
Colors
The color schemes on these websites vary. Gradients are used extensively but subtlety. Black and light blues feature heavily, with splashes of vibrant colors in large icons on the sites.
Let's take a look at the more vibrant of the color schemes:
Icons/Vector/Characters
Graphics play an important part in the overall look-and-feel of this trend. We have already mentioned the use of gradients, but in addition to this is vector cartoons and catchy icons.
Vector cartoon characters are visually appealing and help brand a website. They also make the user feel like the application/website is very easy to use:
Icons and badges also help add a splash of color to the site. They can also draw attention to the more marketable aspects of the product/application/service.
Navigation
A big theme of this trend is simple, effective and clean. In order to achieve the clean feel, simple navigation is a key. In the sites we have looked at, there is a maximum of seven menu items present on the home page. Some even have as little as three menu items (Home, Login, Sign up).
So there you have it - a complete analysis of the "clean, colorful and horizontally divided" web 2.0 trend. I hope you are able to use this as a tool to help your own creativity if you choose to design a site which fits into this trend.
I hope to do further analysis on other web 2.0 trends - it is rather time consuming though so let me know if this is useful.
Comments (81)
wow great article. i have always liked this style too so will this will come in handy for my next web project.
shoeboxed.com is a very attractive design. thankyou for your analysis.
Thanks for your kind words. If you have any other examples let me know!
When it is all laid out, it all seems so obviously simple.
They are ALL great designs and are certainly a good reflection of the current style of design.
Great post!
An excellent article, with plenty of examples to make it oh-so-obvious. Rock on.
hmmm. looks to me like all those layouts were done by the same person. maybe this article is just a clever bit of advertising?
Nice article about this trend, but people should be discouraged from copying these approaches. Brand strategy needs to be explored first and then conceptual designs should be explored. That'll result in a more unique look that will let their brand character shine through. Don't be a sheep - stand out from the herd mentality.
@Brendan Gramer totally agree
Great analysis! I see many of them using the 1-2-3-4 design, layered (segmented) flow, nice use of colors and images, fewer words and more symbols to catch attention. The fonts are clear and well spaced - the reading stress is at its lowest for all these websites. Also everyone knows that a picture is worth a million words. But what matters is keeping it simple. Giving too much information in a single picture diminishes its ability to catch attention.
loopy: no I did not design any of these sites and this is not "clever advertising".. I truly wish I had the creative talent to make any one of the websites I have listed.
Here is another cool design for a web 2.0 site i found. A bit different from the rest.
http://www.rocksites.com
they all look like the same sit with different colors.. trendy?
Hmm, I'll agree on a few of those points, but while I'd call my design for shirtsforlimbs.com "Web 2.0 inspired," I certainly wouldn't call it "colorful."
good job highlighting the similar design models these types of sites are using. I have noticed this trend myself and was thinking about incorporating these styles into my own site.
Great analysis and great design tips - I'm planning on referencing your article in the next few days.
One thing I found very interesting is that you cited some very nascent Web 2.0 sites and not the biggest players.
That, in itself, is very 2.0. :P
Fantastic collection of Web 2.0 styles and great selection of photographs to depict your observation. I like how the sections were broken down as well. Great work!
Great analysis! You make me know what is real web 2.0ï¼
Nice article. Now that you put some of the screenshot together, it became clear about how these designs can look so similar and rather uninspired sometimes... Header, nav, a rather large area showcasing the site's selling point, and then some.
Don't you think so?
Very interesting article, thank you very much for this.
This is really awesome. I can't wait for Part 2!
This is an excellent analysis of the sites' home pages; If you're going to do further work, I'd be interested in learning more about the subpage design, and also learn more about site architecture for larger sites (ie: how do you capture, in the navigation , sites that are very deep or very wide or both)
Good job!
Hey, great article! I imagine it did take a bit of time to put it all together, but I'm sure everyone really appreciates it! Looking forward to perusing the rest of your site and subsequent articles. :)
Jason
JayAndSilentRob.com
I've been a fan of this style for awhile now and incorporated these design elements into our latest redesign. You can view it at <a href="http://www.purevisibility.com">http://www.purevisibility.com</a>.
Nice post!
I've been a fan of this style for awhile now and incorporated these design elements into our latest redesign. You can view it at http://www.purevisibility.com
Nice post!
I feel that the designs themselves are not Web 2.0, but rather a new design style that has evolved with the increased use of CSS and the increase in research into user experience. The first thing to notice about all of those sites is the ability to quickly scan the page to find what it is you're searching for. I believe designers and programmers in this Web 2.0 movement have become more aware of who their users are, and what types of paths they may take through a site.
People don't read pages on sites, they scan them.
Nice job with the review. I would be interested as well at another review of design of internal pages. Keep up the good work.
Nice sites, although they all look like they've been designed by the same person! I think the lack of variety weakens the article and that it would have been better to see the same design principles illustrated with sites that didn't look so alike.
They are nice clean sites with the ability to scan the page quickly, i like that. They are also using the "z pattern" format where the users eye starts in the upper left and scans to the upper right then down to the lower left and then across to the right, all happening "above the fold". These are an example of good design in my opinion.
Thank you for pulling together this nice trend analysis for Web 2.0 sites -- what I'd love to see is a little more analysis on whether this trend is working. In other words, it's great to see that lots of people are starting to layout their pages similarly, but does this layout work? Do consumers find it intuitive, can they accomplish what they want efficiently, are they finding all of the relevant capabilities of the site, is it converting browsers into users, etc.? This is something that always sticks in the back of my mind with design trends (web pages or otherwise): is this new trend good, or is it the next "parachute pants" of the 1980's?
--------------------------------
http://www.constantwebsite.com
nice site I like your design and layout
<a href="http://www.constantwebsite.com"> Professional
Website Design</a>
hey, this is awesome. i like your analysis. the only thing I am skeptic about is the fact that the web designers lean back and just keep everything simple and clean, as you said. I don't think this is bad, but there are way more ways to present something in a tasteful manner, aren't there?
everything is getting so unified. good or bad, that's up to you.
Wow! Great article and good trend analysis. I have been working on a redesign of my blog and I will take your article and included designs to come up with something good.
Thank you!
Raj
Hahaha. What a bunch of lazy designers. Are the using the same template?
Really interesting article, well done!
Nice article, nice summary. I watch them everyday, but I didn´t so the "rules" applying. You opened my eyes wider. Thanks for that.
Does the very fact that these "Top 20 Web 2.0 Trendy Wedesign Trends To Watch" - type posts are reproducing like rabbits mean that this as a 'new' style is dead in the water?and that anyone coming up with a similar site will/should be laughed at/ridiculed in the street...?
Don't get me wrong, I like the look of the sites and am considering doing some designs in a similar vein but I just can't get away from the word 'copycat' when considering such a distinctive 'formula'.
Someone please tell me 'it's OK'... :-)
Fantastic article and layout, cool designs, what's next web 3.0 :) <a href="http://www.constantwebsite.com"> Affordable
Website Design </a>
very good
aganin and again!!!
paul "it's okay" :)
you may well be right about it being dead in the water though!
Great article! I posted it at InformedNetworker.
Ok, I give up...I can't think of anymore words/phrases to google in finding tutorials that show how to 'horizontally divide'/center align a site like the ones showcased in this article. Would anyone mind pointing me in the right direction (tutorial, different words to try, etc.)?
I've tried going it alone by looking at code on some of these sites but always seem to end up with a typical vertical, 2-column layout...Thanks in advance!
Great article. It's inspired me to create a tutorial on how to make a layout like this. Let me know what you think.
http://36pixels.com/2007/12/07/the-great-horizontal-divide/
I really like the clean and simple look of the sites you analyzed as web 2.0 style. I threw together a site that has the theme change depending on the time of day.. liquid.. and accessible but it just didn't "ring" with me. But, after seeing your analysis on the 2.0 styles, I am going to try to make a site with the simpleness and cleanliness of the 2.0 merged with what i have for changing themes of the day. It also seems that 2.0 styles seem to have a bigger focus on accessibility too.. which I like to see. I am a big believer in correct coding and accessibility in a website.
Thanks!
Finally! A careful analysis of what we thought we were observing all along. Perhaps most small corporations should begin to adopt this standard. In fact, nearly every site at CSSartillery.com seems to do this, and this layout trend seems to represent the "sell something cheaply but useful to all the masses" principal.
http://www.ptolomy.com
stavo cercando delle nuove informazioni e sono capitato qui
grazie per questa guida
Great Analysis and its helps me alot. This is very true that today's user not read the page it scan it and have many other options so the job of designer not finished with producing good design he has to produce great + simple design which make user think once before leaving the page and i think this article help designers.
I m excited to read about the design of inner pages and the structure of web portal. How you analyze it?
Thanks for your sharing!
Good article,thank you!
thank you!
thank you!Good article
Good article
Good article
well
well
eMarketing will be more and more important in the future
thx
Great list and detailed coverage on the different components. Seems to me that most of the items are designers' work. What can coder and developers do?
I'm all for clean and simple designs... but all those look very similar (not much variety). I don't care much for the cartoony characters personally.
great! this was really helpful!
that was a helpful hint in solving the problem...
Great Analysis and its helps me alot. This is very true that today's user not read the page it scan it and have many other options so the job of designer not finished with producing good design he has to produce great + simple design which make user think once before leaving the page and i think this article help designers.
hey, thanks so much for posting this. it really helped me. so much. :D
Great and excellent article itâs realy helpful. Thanks again.
Thanks, really good article. Thanks a lot for sharing. Good luck )
Excellent â very useful info. Thanks!
Great article. This will be very helpful with the design of our new wedding site. We want to make sure it really has a "2.0" look.
Fantastic article! Thank you for the excellent analysis of the role of the site elements. This will help me incorporate your principles in the design of photographer portfolio web site http://www.sungatephotography.com
it has helped me accordingly kip up
eMarketing will be more and more important in the future...
Can they accomplish what they want efficiently, are they finding all of the relevant capabilities of the site, is it converting browsers into users, etc.?
Great analysis! I see many of them using design, layered (segmented) flow, nice use of colors and images, fewer words and more symbols to catch attention
Such a good article. very interesting.
Thanks for sharing here...
I've been working on making my site utilize these chracteristics little by little now for the past several months. A few more to go....I need to go away from the 800 wide and redo my header. I have been seeing this trend for a whille now and I think it makes for a website that is much easier to nasvigate.
This will be very helpful with the design of our new wedding site
You have very interesting site.Thanks for all.
