24 Examples of Web 2.0 and Traditional Design Rules Coming Together

6. Metalab’s “Fluid” Tumblr theme

The only Tumblr theme to make the list is entitled “Fluid,” by Metalab design. It made the list because of a simple reason: It’s a freaking beautiful example of Web 2.0 at its best. Simple, clean, and gleaming with color.

One might consider it a bit one-side in this comparison (it’s a Web 2.0 catch-all). That’s because Metalab is known for setting standards in the Web 2.0 arena, and this site is a testament to that fact. Metalab Design keeps the foundational rules in mind, however, and keeps the structure simple and well organized.

Transparency and overlapping graphics are one of the newer trends in Web 2.0. They give a site a great amount of depth and imbue a cutting edge, almost futuristic look. Metalab’s “Fluid” has embraced this concept and, better yet, delivered it to the masses as a downloadable theme.

Traditional Aspects:

Simple, effective structure.
Stands out in the masses of Tumblr themes.
Contemporary (though simple) color scheme.

Web 2.0 Enhancements:

Big, vibrant photography.
Ups the ante for cutting edge Web 2.0 design
Highly legible fonts and headers.
Use of rounded corners and gradients are taken to the extreme, but they are presented in a fun, modern Web 2.0 solution.
Icons are a great, minimalist way to navigate the options for each post.
Let’s not forget about the transparent backgrounds!

7. Viget

Oh boy. This site. It gets me every time. Sure I’m a softy for texture, but this designer has also captured the subtlety of good color theory and hierarchy.

We mean just check out those portraits near the bottom! They’re eye-catching yet they don’t compete with what could be a very complicated design flow. Let’s not forget the great font choices and watercolor feel. The icing on the cake is that, though the site is image-heavy, it loads in a snap!

Another cool aspect of this site is that the designers want to share a lot of information with their community, and it’s not information that sells them as designers, but information that they feel typical users might find valuable.

They allow you to dig deeper without cramming their needs down your throat, which is always a welcome practice.

Traditional Aspects:

Well-structured content.
Beautiful color and type.
Though the fonts are on the small side, the main content is still easy to read.
Great artwork fuses seamlessly into the design (cool portraits).

Web 2.0 Enhancements:

Watercolor theme is extremely contemporary, and though it’s image-heavy, it’s been engineered to load lean and mean.
Sidebar content is well organized and content-driven.
Unique solution to the “Speech Bubble” box in the sidebar.
Lots of shared, content-driven information.

8. FeelWire

Another amazing example of great whitespace is Feelwire. Black type on white backgrounds, with great shades of gray in between, never seems to get old. Add a couple of brightly colored icons, and you have yourself a simple, yet effective site. It’s all about simplicity here (heck, they only have one page!).

The Web 2.0 styled icons serve as the centerpiece for this page, and they go a long way in holding the site together. They also prevent the site from being overrun with text, and give the user something to be curious about.

Traditional Aspects:

Short, sweet, and to the point: a single page site.
White space!
Subtle, tasteful font choices.
Nice, basic layout.

Web 2.0 Enhancements:

The glossy icons pop off the page, in a good way.
Really cool rollovers on the icons keep the site uncluttered, yet give you the information you need in a fun way.
Nice avatars add a human element.

9. Agami Creative

Okay, maybe it is just a personal thing with these highly textured sites, but what Agami Creative does, it does very well. It’s another contemporary example of how image-heavy sites can become a perfectly acceptable solution in a day of high-speed connections.

The centerpiece of this site is most definitely the watercolor header, which serves as a perfect backdrop to the crafty logo design. It also houses the navigation, placing just enough emphasis on its location, yet without insulting the user (because most people know where to find the navigation these days.).

Clicking over to the portfolio page, you’ll notice a layout with the perfect amount of breathing space and a strong grid system.

Simple images contribute to the work and draw your eyes to the individual projects, like looking through a keyhole to the final result. All of this is wrapped up with a sophisticated serif font for the headers and a highly legible sans-serif font for the body text.

Traditional Aspects:

More beautiful use of color theory.
Great artwork.
Interesting combination of type/fonts.
Artistic, hand-drawn logo has a feel that is carried throughout the site.

Web 2.0 Enhancements:

Oversized navigation makes it easy to move around the site.
They make it really easy to get in touch.
Use of avatars is a good idea.
Love the texture!

10. Adit Shukla

Another site with a great illustrative approach, Designer Adit Shukla also knows how to put together a great color scheme, and even plays with a nice solution to the sidebar.

For some odd reason, many sidebars are sloppy and overlooked, as if designers have permission to ignore the rules of good design when throwing together the sidebar of a site. Not with this site.

Though the content is minimal (even a bit sparse), one can’t help but love the creativity involved, especially in the illustrative header, which adds a well-needed amount of depth. The navigational tabs up above are a nice touch as well.

Traditional Aspects:

Vibrant colors.
Creative solutions to common elements, such as the sidebar and the header.
Illustration adds a lot of depth.

Web 2.0 Enhancements:

Simple layout with a well-developed header illustration, which also houses the navigation.
Large type is effective.
Multiple ways to navigate the site (though honestly, I’m not convinced this is such a good thing).
Transparent tabs are a nice touch.