24 Examples of Web 2.0 and Traditional Design Rules Coming Together

11. Cream Scoop

cream-scoop

The first thing you’ll notice about Cream Scoop is the bold selection of colors used throughout the site. They’re not afraid to take the colors up a notch from the norm, and the result is as refreshing as it is different.

Though the colors are bold, there are also subtle blends of strong type and gradients that are peppered throughout the site. Notice how the background gradient brightens at the top, like the edge of a spotlight, to highlight the otherwise minimal navigation. The type is well organized and balanced, with a distinctly Web 2.0 feel.

Traditional Aspects:

  • Bold selection of colors, yet a selection that works in surprisingly effective ways.
  • Minimalist navigation that gets the job done.
  • Great use of playful illustration.
  • Layout is structured but fun.

Web 2.0 Enhancements:

  • Fantastic use of a gradient in the background.
  • Bright blue really grabs your attention and directs it to the important stuff.
  • Cool use of avatars on the about page (how old are these guys?).
  • Great fonts used throughout.

12. Carbonica

carbonica

Carbonica forgoes the gradients and shiny goodness of Web 2.0 and goes for a “pieced together” look reminiscent of a scrapbook. Great use of texture and animation, but also a really fun take on hand-drawn type.

Be sure to scroll down a bit and check out the icons, which also fit the theme perfectly!

Traditional Aspects:

  • Basic structure is in play.
  • Hand-crafted lettering goes well with the theme of the site.
  • The animation is a nice touch (but sorry, the use of Flash keeps this point out of the Web 2.0 Category).

Web 2.0 Enhancements:

  • The texture is great.
  • Drop shadows add realistic depth.
  • Nice icons, photos, and illustration.

13. DSGN + DVLP

DSGN+DVLP

Again the overall black and white color scheme works for this site, and they accent this direction with some clean icons pulled right out of the Web 2.0 handbag.

The homepage stands on its own as a sort of splash page, and has a good mix of icons, strong layout, and even a bit of photography. All of these elements come together in a sophisticated way and manage to emit quite a bit of energy.

You’ll notice that the secondary pages use a separate, 3-column template to serve up the information. It’s all very much a minimalist design, but that’s not a bad thing.

Traditional Aspects:

  • Black, white and gray offer a distinct feel.
  • Good balance of type on the homepage.
  • 3-column secondary page template allows a consistent flow of information once you navigate away from the homepage.

Web 2.0 Enhancements:

  • Social media awareness is definitely in play.
  • Glossy icons scattered throughout add needed color.
  • Good mix of photography and icons.
  • Jumbo icons are featured on the secondary pages.

14. Marchand de Trucs

marchand

It contains wonderful artwork and, behind it all, a great foundation and structured content.

Traditional Aspects:

  • Intense attention to detail.
  • Color theory is well in play, and it’s a very involved palette at that.
  • Good use of fonts that follow the general theme of the site.

Web 2.0 Enhancements:

  • Extremely nice use of illustration as a header
  • Relatively large icons.

15. Paiko

paiko

Paiko, though simple, is one of my favorite sites on the list. It comes across as a split blend of traditional design staples and Web 2.0 enhancements: Good type of all sizes (including the very Web 2.0 mega-headlines), great whitespace, and of course the ever-important grid that holds it all together.

The choice of adding texture in the background really sets the site apart, and adds another layer to the already strong design; it is treated with care, and not overly used as it is in some sites. This texture, combined with the more sophisticated appeal of the site, goes a long way in strengthening Paiko’s identity.

Browse over to the portfolio page to see an example of great spacing and grid structure, not to mention some fun examples of well-cropped images.

Traditional Aspects:

  • Simple, two-column grid structure with gutter space that gives it a nice airy feel. This structure is carried throughout the site, which gives it a very consistent flow.
  • Crafty feel adds a nice touch, without being overbearing.
  • Font variations and color are very sophisticated.

Web 2.0 Enhancements:

  • Jumbo-text!
  • The headline is huge and highly legible, and plays nicely against the smaller type below.
  • Great images and layout on the portfolio page.
  • Conservative use of texture adds to the overall identity.