Design Shrine Style Interiors & Web Design Resources

RSS Design, Web, Interior & Style Portal

Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided

Article or RSS item submitted by Ty Wenzel • Nov 15th, 2007 • Category: General, Trend Forcasting, Tutorials, Web Design

SOURCE

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

HyperPixel Design

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.

Share, E-Mail or Print the Style:
  • E-mail this story to a friend!
  • Print this article!
  • e-mail
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Mixx
  • Reddit
  • Technorati
  • YahooMyWeb
  • Google
  • TwitThis
  • Pownce
  • Live
  • Wists
  • ThisNext
Share This Post

If you liked this, You might also like:

  1. 99 Resources for Web 2.0 Design
  2. BADGES Web 2.0 Badges - A set of free badges to download and use in your own designs. Fresh Badge...
  3. Another fantastic Web 2.0 Design Guide
  4. CUT TO THE SOURCE Shortcut to Web2.0 Style If you don't have the resources to create your own “2.0”-style site...
  5. Top 10 Trends in Home Design
  6. Tomorrow's homes are on the drawing board and they are nothing like the places you may recall from your childhood....
  7. Best of CSS Design 2007
  8. SOURCE OF ARTICLE  For those who don’t know, I’m also the guy behind Best Web Gallery and N.Design Studio. In...
  9. Nautical Trends
  10. It’s back…All things sailor! The nautical trend keeps on giving year after year and has become a trend that never...
  11. Essential Web Design and Blogging Sources
  12. I found this great list of resources that would help any blogger or web maven out. I'll be reading them...
  13. Trends: Citrus Colors
  14. Check out this nice short trend report on Citrus Colors....
  15. 40 Excellent Web Based Tools to Help You Design from Anywhere
  16. SOURCE Online Image Editing Project Draw Project Draw is an online sketch tool from the makers of AutoCAD and Revit....
  17. Hippyshopper guide to your eco spring clean
  18. There's a long weekend coming up, so you'll have no more excuses not to do those chores: It's time...
  19. Green with Envy for the 2008 Design Trends
  20. Happy New Year!This year, make your motto: “A clean slate in 2008!” It’s time to throw out the old, and...

Tagged as: ,

Leave a Reply