25 Examples of Web 2.0 and Traditional Design Rules Coming Together

In the large scope of the design world, the term “Web 2.0″ is relatively a new one.

With it, comes its own set of standards, some strong, others not so strong, since Web 2.0 in itself is a very fickle, ever-evolving definition of design standards.

Countless examples of Web 2.0 sites have broken the rules of what was once considered strong design.

On the other hand, in many cases Web 2.0 has strengthened common design misnomers; it places a focus on usability, interface, and readability.

At its best, Web 2.0 stands as an equal to the traditional design rules practiced for centuries, though it is no doubt a reflection of our society in its current state of hustle and bustle.

Here’s a collection of 25 sites showcasing how Web 2.0 and traditional design practices can come together to form truly stunning websites.

 

1. Pixel Matrix Design

Josh Pyles is a nice guy, and he’s also a fantastic, disciplined designer. His latest iteration of Pixel Matrix is a stunner, and makes especially good use of color and a strong grid system. Browse over his portfolio and you’ll see that he carries this practice into his client work.

If you check out the “About” page (making note of the nice tab system in play), you can see that Josh has included a nice photo of his workspace.

Below this shot is a great balance of Web 2.0 styled fonts, which establish an extremely strong hierarchy of information. He keeps his own bio small and tucked into the sidebar, and balances the larger text of the content area with smaller, sophisticated type in the sidebar.

Traditional Aspects:

  • Great grid system.
  • Wonderful color theory
  • Strong hierarchy of information

Web 2.0 Enhancements:

  • Beautiful gradients.
  • Subtle details.
  • Large, highly legible font choices.
  • A great number of ways to stay connected.
  • Even the contact form has a nice implementation of rounded corners!

 

2. MuttInk

Lately texture seems to be the greatest thing since rounded corners, and though MuttInk’s site might not be classified as typical Web 2.0, one glance is all that’s required to know that Jeremy Holmes (the man behind the work) is an amazing designer and graphic artist.

An attention to detail, texture, and a strong identity places this as a personal fave.

Even though the days of overly-muted colors are somewhat behind us (which is a good thing, in my opinion), I’m still a fan of subtle, earthy tones that are complimented with bright accents, and MuttInk has pulled this off brilliantly.

The turquoise atop the beige really pops, and maintains the “drafting table” feel that permeates the site. And though the type is on the tiny side, and a bit tough to read in spots, it still looks great on the page.

Traditional Aspects:

  • Extremely close attention to detail.
  • Nice type (though perhaps too small).
  • Great brand identity.
  • Great use of space, particularly on the portfolio pages.

Web 2.0 Enhancements:

  • Great use of texture.
  • Big, professional images showcasing the work.
  • Quick access to social linkage.

 

3. 45 Royale

The portfolio over at 45 Royale not only showcases an amazing array of work, but it shows that the team behind the site understands good use of multiple design standards. It’s a fantastic blend of Web 2.0 fallbacks, but has a solid foundation in traditional design standards (and just look at those colors!).

In particular, 45 Royale has one of the best grid systems I’ve seen lately, and the images they’ve chosen to showcase the work really mesh well with the fluorescent colored header above.

Seeing the color theory and organization mesh with such great harmony is always a treat, and they’ve supplemented it all with a highly sophisticated blend of fonts, both large and small.

Bright colors surrounding a secondary palette of gray, white, and black? Awesome.

Traditional Aspects:

  • One of the better examples of a grid system.
  • Plenty of whitespace and breathing room.
  • Brilliant color choice.
  • Good flow of information.

Web 2.0 Enhancements:

  • The colors simply sing…so much that I listed it in both categories.
  • Jumbo-sized type is highly legible, though tasteful.
  • Great use of Illustration and graphics.
  • Multitude of projects are well organized and nicely displayed.

 

4. Pinch Zoom

I’m a sucker for great illustration, especially when it’s presented atop a wonderful example of white space. I love this site so much that simply clicking through the portfolio is a blast. Great whitespace, great grid system, and wonderful use of JavaScript; these things have a way of speaking to me (yes, I’m in front of a computer quite a lot).

The important thing to keep in mind when we’re faced with the many technologies available these days, especially the fancy fades and trickery made possible by JavaScript, is to taper them and reign them in.

Remember the late nineties when Flash was all the rage? Remember how sick of Flash we all got afterwards? Good Web 2.0 standards are just as much about discipline as it is about design, and Pinch Zoom has it well under control.

They sprinkle their site with the fancy goodness, yet keep it lean and fun, with virtually zero time waiting on the images.

Traditional Aspects:

  • Another great grid system (seeing a pattern here?).
  • Black on white never seems to get old.
  • Nice balance of fonts and headlines. (The small font, though legible, could maybe be a point size or two larger).

Web 2.0 Enhancements:

  • The JavaScript portfolio slider is dang fun and effective.
  • Interface is minimalist and direct.
  • Varied use of Illustration is a great touch.
  • Embraces the web’s current technology without becoming cumbersome.
  • Unique solutions to page layout (Check out the mega-dropdown when clicking the info tab. There’s virtually an entire website hiding up there!).

 

5. Cameron Moll

I’ve always been a fan of Cameron’s work, and as you can tell he tends to stay on the traditional side of the design playing field. Though his blog site tends to fall within the traditional side of sophisticated design and small fonts there’s no denying the elegance and beauty of his portfolio page, which is a fantastic balance of the new and the traditional.

The colors are vibrant and the font choices mesh with the overall feel, but again, the type can get pretty small in places, which is a Web 2.0 no-no. But who am I to nit-pick? Cameron has found great success and is the man behind Authenticjobs.com, a great resource for designers (and one that’s helped pay my bills).

Traditional Aspects:

  • Well-structured content.
  • Subtle color variations are a nice touch.
  • Type looks elegant, though tends to ride on the small side of the spectrum. Even so, it’s legible and looks nice.

Web 2.0 Enhancements:

  • Very nice use of texture.
  • Portfolio contains nice images of the work, which are very straightforward and easy to navigate.

 

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.

I 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.

Upon rolling over these icons, I was really happy with what I found: A very simple hover status that gave me the information I was looking for, doing so with the ever-popular Web 2.0 “Speech Bubble”. A great touch.

Last thing: Though I like the red links, which also pop off of the page and interact well with the icons, I do think they should make the contact link a bit more noticeable. As of now it’s a bit too tucked into the content, and I really had to search for a way to get in touch with these talented developers. Just sayin’.

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 (though honestly I think they could have done better with these. Not sure how the anime look is supposed to mesh with this site other than the Asian influence?).
  • 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.

 

12. 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.

 

13. 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.

 

14. 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.

 

15. Marchand de Trucs

So maybe I can’t speak the language, but that doesn’t mean the site isn’t still speaking to me… Okay, that line was lame, but still this site is pretty sweet. It contains wonderful artwork and, behind it all, a great foundation and structured content. Not too bad for what (I think) appears to be an online magic shop!

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.

 

16. 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.

 

17. Matt Dempsey

On the other extreme of the texture spectrum, we have a site by Matt Dempsey. Now, there’s definitely a thing as too much texture, and some would have a valid point if they argued that this site goes to far.

However, I still like it, and the details won me over as I started sifting through the information. Matt isn’t afraid to break a few rules that have always bugged me (like keeping information above the fold, an idea I feel was invented at a round-table discussion of over-thinking marketing folks. I say so because I once was one of those marketing folks.).

When it comes down to it, Matt Dempsey presents his work, and his site, in a bold and “in your face” manner. And breaking a few rules is what being a designer is all about, whether the rules are old or new.

Traditional Aspects:

  • Believe it or not, there’s a simple grid system underlying the texture.
  • Distinct and unique
  • Not afraid to break a few rules

Web 2.0 Enhancements:

  • Matt uses an obviously Web 2.0 approach to his fonts and logo
  • Good use of technology on the interior pages (the JavaScript slider is a cool touch).
  • Every bit of important information is huge and easy to read.
  • Portfolio presents the work in a fun, high-tech way.

 

18. Digital Mash

With Digital Mash, you can see that plenty of thought went into the items they wished to include in the site, or better yet, the items they chose to leave out.

Being able to cut back the fat is an important practice for any designer, and Digital Mash lays out the basics, and only the basics. Open the page and you’ll know within seconds what the author of the site is all about.

The smooth gradient of the background does a great job of presenting the content in a sophisticated manner. From the clean type, to the punchy graphic of the illustration, the site keeps it simple.

The best part has to be when you dig deeper into the site. Head to the work page and you’ll find a portfolio presented in an almost old-fashioned way; the individual pieces look as though they’re ready to be printed and bound into a leather attache case.

However, the sleek presentation, the dropshadows, and the small details (such as the slightly bent corners of each piece), give it all a contemporary slant. Combining the new and the old. Gotta love it.

Traditional Aspects:

  • Trimmed away unnecessary elements.
  • Vibrant colors on the homepage and in the header of the secondary pages add a vibrant accent to the gray background.
  • Hierarchy of information is strong, and so is the general flow of the site.

Web 2.0 Enhancements:

  • Amazing presentation of the portfolio images; dropshadows, upturned edges, and small details really bring this site to a higher standard.
  • Nice gradient in the background really presents the information well.
  • Large type and oversized imagery are friendly to the eyes.
  • Very cool navigation solution.

 

19. Kyan Media

Kyan Media is another site that leans heavily on the Web 2.0 side of the spectrum. The cloud design and the vibrant blue color palette are straight out of the book, but it’s an extremely strong example of the standard.

The site plays it straight, and in large letters tells you exactly what they do, followed by examples of the work. It’s a simple design strategy found in countless sites, and for good reason. It’s quick, and doesn’t threaten a short attention span.

And, like all good examples, it embraces the technology as well as it does traditional design rules. Take some time and hover over the examples of work. It’s a fun and informative way to present featured portfolio pieces, and allows us, the user, to dig deeper, or to get the basics with just a glance.

Traditional Aspects:

  • Everything has an extremely solid feel.
  • General layout of each page is strong
  • The informational hierarchy is great.
  • Fonts, headers, and font colors are consistent throughout.

Web 2.0 Enhancements:

  • Bright blue color palette.
  • Fun use of illustration (who doesn’t like clouds?).
  • Punchy photography.
  • Good implementation of technology.
  • Subtle dropshadows add depth.
  • Highly legible fonts and oversized headers.

 

20. Rockatee

Well, it says “Functional Design” in the header, so it had better work, right? Luckily, this site does. It’s another example of how texture is creeping into the web design market and confirming the notion that we’re well into the high-speed era of surfing the web.

Something you might notice is that Rockatee has quite a few projects on display in the portfolio section, so a streamlined solution was definitely in order. They did so with a series of snapshots, which showcase the depth of their prolific portfolio. Do yourself a favor and check it out.

Another feature of note is the nice navigation. It’s well placed and makes the site a breeze to click through. They even help you along on the homepage with a nice big button that leads to the portfolio.

Traditional Aspects:

  • Everything has an extremely solid feel.
  • General layout of each page is strong.
  • Color theory is well explored and implemented.
  • Strong attention to detail.

Web 2.0 Enhancements:

  • Fantastic navigation.
  • Big buttons lead you to the important bits.
  • Cool “snapshot” portfolio with great crops of the individual works.
  • Site showcases the designers many side projects, but doesn’t let them get in the way of the central elements.
  • Great idea with the timeline on the “About” page.

 

21. Things That Are Brown

Another one of my personal favorites is Things That Are Brown. They pull off an extremely polished site that is an equal to (or better than) sites created by large agencies, yet they also give you an inside look at the people behind the scenes.

The about page contains great photography that, while professional enough, is also has a very homemade appeal. You can tell that the team took a trip outside, scouted a decent spot, and took a few snapshots with their own digital cameras.

A professional, yet accessible and friendly team is exactly the type of team I want to work with. These people are real.

This is one of those rare sites that seamlessly fuses strong design rules with modern tweaks. Their tagline, “Humbly Awesome,” is dead on.

Traditional Aspects:

  • Nice color with great accents.
  • Good use of artwork that integrates well.
  • Solid and consistent throughout.

Web 2.0 Enhancements:

  • Navigation is clean and easy to read.
  • Nice buttons that don’t overdo the gloss.
  • Photography is personal and adds a human touch to the site.
  • The portfolio is clear and easy to navigate, with great presentation of the work.
  • Headlines are large, yet sophisticated.

 

22. Andrew Bradshaw

This is perhaps one of the most sophisticated sites on the list. Andrew has a great way of meshing texture, type, buttons, and photography into a congealed package. He also keeps hierarchy in mind, accentuating the important aspects and minimizing the sections that may not be of interest to all users.

The navigation is a highlight, with varying colors appearing as you hover over the tabs; a very sleek touch.

Also of note is the textured header and the strong font choice used in his logo. Again, Andrew combines subtlety and accents to create a beautiful site that is thorough and compelling throughout.

Traditional Aspects:

  • Overall appeal of clean sophistication.
  • Good use of accent elements, both in color and with type.
  • As usual, a strong grid system holds it together.
  • Hierarchy is implemented well.

Web 2.0 Enhancements:

  • A different take on buttons.
  • Brilliant use of photography and image presentation.
  • Awesome details in the navigation.

 

23. James Lai

Lately I have a thing for single page websites, and as you’ve probably guessed, I’m a sucker for texture as well. Enter James Lai, a designer who knows how to present himself through a fancy use of type, texture, and animation.

What I commend him for the most is his ability to keep his site to a single page, and forgive us the “All About Me” page found on virtually every site. Though I place a high value on the human element, sometimes the work speaks for itself, and I can’t fault a guy for believing in his own skill set.

Traditional Aspects:

  • Simple, single-page solution.
  • Animation adds interest to the presentation (though it slowed the site a bit on my end).
  • Good attention to detail.

Web 2.0 Enhancements:

  • Huge type on the homepage tells you the exact purpose behind the site.
  • Contact information is easy to find.
  • Cool thumbnails help users navigate the portfolio.
  • Interesting use of texture.

 

24. Subvert

Subvert was included not only for its obviously functional layout, but for the fading slideshow featured on the homepage. The presentation is fun, but it’s also informative and valuable to potential clients.

The background texture is complimented by transparent details, including a great navigation system featuring transparent tabs! The hover status of this navigation is subtle and maintains the transparency.

I tend to navigate directly to the work pages on these sites, and Subvert doesn’t disappoint in its presentation. The grid structure is strong and easy to navigate, and upon clicking, the user is taken to an expanded view of the work.

Traditional Aspects:

  • Great overall flow.
  • Strong presentation of the portfolio on the “Work” page.

Web 2.0 Enhancements:

  • Huge type presented on a fading slideshow.
  • Transparent navigational tabs!
  • The buttons are nice and add a good contrast to the backgrounds.
  • Slideshow of the office on the “Company” page is a nice touch.
  • Embraces technology.

 

25. Yellow Bird Project

At first glance this site might appear a bit disheveled or scattered, but the more I look at it, and the more I browse through its pages, the more I’ve noticed the strength of its organization. Better yet, the Indie-inspired design really starts to appeal the longer the stay, and the scattered look of the site actually fits the theme.

If you check out the Photo Gallery, you’ll see a slew of amateur photos that once again add to the Indie look, while showcasing the product.

This sort of underground approach, which was made popular by sites like threadless.com, immediately attaches the viewer to the product.

They want to be a part of the crowd and don’t feel as though someone is just trying to sell them something. If that isn’t a Web 2.0 philosophy, I’m not sure what is.

Traditional Aspects:

  • Crafty logo really establishes the feel, which is carried out throughout the entire site.
  • Though it feels scattered or loose at first, one realizes that this “put together” look is exactly what the designers were going for. They pull off the look while still making the site easy to navigate.
  • Consistent, non-traditional approach.

Web 2.0 Enhancements:

  • It’s more about the philosophy with this one. While the social aspect of Web 2.0 is in full effect, this site is also made strong because of its viral marketing approach and great underlying philanthropy.
  • Builds a community!
  • Great photos and easy navigation don’t hurt either.

 

In Closing…

Web 2.0 is a tough standard to define, as where traditional design standards are a rigid collection of rules and guidelines (grid structure, color theory, letter spacing, kerning, tracking, and so on), Web 2.0, while containing similar standards, is almost more so a way of life.

It combines philosophy, marketing, technology, ease of use, and countless other aspects of our busy universe with an ultimate goal of making things easier for the masses.

In that regard, Web 2.0 and the traditional rules that were established ages ago, ultimately share the same goal: To organize the chaos, and to simplify the complex.

These days, it can be a tough gig, so we need all of the tools at our disposal, whether they’re cutting edge, or whether they’ve been proven over centuries past.


Written exclusively for WDD by Josh Sears. He is a Writer, Illustrator, and Designer for a slew of web-based projects. He makes his living as Lead Web Designer, Creative Director, and Co-Owner of Littlelines.com. You can check out his work here, or follow his updates on Twitter.

How do you use web 2.0 elements with traditional design? Please share examples from your own portfolio or other good examples that you may have come across.



  • http://www.antsmagazine.com/ Nahid Saleem

    Wow nice.. thanks

  • http://cab.blogspot.com/ Vitor

    Alguns eu gostei e outros eu odiei… Obrigado pela lista! Hugs of Brasil!

  • http://www.mment.at mment

    nice list! thanks for sharing

  • http://www.studio7designs.com Sarah

    Great writeup on some of the best design companies around. Really like the amount of time spent looking into the companies.

  • RoaldA

    What?? Allmost non of these are web 2.0!

    • http://www.littlelines.com Josh Sears

      Hi RoaldA,

      The point wasn’t so much to showcase web 2.0 sites, but more so to illustrate the fact that we as designers can use elements from new design standards (web 2.0) as well as traditional design. I leaned more heavily on the “traditional” side of things in order to point out the traditional design aspects, since “Web 2.0″ is always a tough standard to capture at any given moment due to the extreme pace in which it changes.

      Thanks for the reply,

      Josh

  • http://blog.insicdesigns.com insic

    Very good read and Inspiring site designs that you have in your samples.

  • http://www.branditsolutions.com application development

    The preliminary step is aim to maintain the site simple, understandable and translucent.The fundamental endeavor of every website is to make business thus the graphics and the text must provide to each one visiting the page and so bringing them closer to buying a product.

  • http://www.orphicpixel.com Mars

    web 2.0 thingy, its been a while that i lost my interest in web 2.0, and now you just wake me up on appreciating them again

  • http://espresso-online.info theamoeba

    very nice. its always interesting to see what is going on in the industry. thank you for the effort you always go into to produce these articles.

  • http://www.kamikazemusic.com Dave Sparks

    Great post, is nice to see a little commentary and thought rather than just the usual list of “inspirational” screen shots.

  • http://www.mattdempsey.com Matt Dempsey

    Hey Josh and WDD, thanks very much for the feature! I appreciate the mention amongst these design greats, glad you like my rule breaking!

    Cheers!
    Matt

    • http://www.littlelines.com Josh Sears

      No problem Matt :)

  • http://www.behance.net/bouza Roland

    very nice list!

  • http://www.jeca.be jeCaj

    Great article! keep up the good work :)

  • http://simonmeisinger.at Simon

    i don´t get the point. well designed websites were and are ALWAYS influenced by „traditional design rules“ no matter if they claim to be „web2.0“ or not.

    • http://www.littlelines.com Josh Sears

      Hi Simon, the point is that a lot of sites claiming to be “Web 2.0″ are created from under-trained, naive (possibly lazy?) designers who ride the coat tails of a trend rather than thinking out a site. This isn’t so much about “good web 2.0 sites” as it’s about pointing out the fact that, as you mentioned, good Web 2.0 requires good traditional design implementation as well.

  • Justin

    Can we just drop the whole “Web 2.0″ phrase all together? It doesn’t mean ANYTHING. There was no web 1.0 and there is no 2.0. And there will never be a 3.0. It’s an old phrase and we need to treat it like IE6 and stop using it. ;)

    BTW, you said “Web 2.0″ 58 times in this article. :P

    • http://www.littlelines.com Josh Sears

      Hi Justin, I’d be happy to drop the term myself honestly :) When it comes down to it, my point with the article is, in a round about way, to point out the fact that the term doesn’t really matter. Good design is always going to be about good design, no matter what the current trend.

      I agree though, when a client asks for something Web 2.0, I always wonder if they know what that means anymore. I’m not sure if anyone really knows what it means anymore ;)

      Regardless, there’s no denying that the term “Web 2.0″ is still prominent, especially amongst the masses. And there’s also no denying that it does encompass a certain “look”, no matter how often the standard is evolving.

      • Justin

        Oh I get it, don’t worry. :)

        And I completely agree that good design is just good design. I guess some clients just want to hear “web 2.0″ thrown in there to make it sound more modern. It’s a shame though, that it comes down to that sometimes.

        Anyway, great roundup either way. And I didn’t mean to sound like I was dissing the article as a whole, just the “web 2.0″ part. :P

  • http://www.devfeeds.nl Joey Prijs

    Thanks! This post points out some of the best agencies that are out there, and because of that it is a great source of inspiration..

  • http://www.creativeindividual.co.uk Laura

    Nice list, my favourits are:
    – Andrew Bradshaw – Extremely top-notch portfolio too!
    – 45 Royale – Beautiful colours.
    – Carbonica – I love it because it isn’t super shiny…lovely textures.

    Interesting concept that Web 2.0 is more of a way of life than just a design standard… I do love watching the style develop and grow though!

    Other sites to check out are:
    http://www.remixcreative.net/
    http://www.campaignmonitor.com/

    Good use of that fairly new Web 2.0 design element, Letterpress Text… Even if print has had it for a long time.

  • http://www.decart-design.com Mr. Qwerty

    Amazed list
    i like it, thanx

  • http://www.robjwood.com Rob wood

    Web 2.0?

    I currently work with web 4.0, i had it installed on my computer a few days ago.

  • http://www.bcm-websolutions.de/de/services-webdesign-stuttgart.html Christoph

    Awesome sites! Thanks for that!

  • http://benk.110mb.com/ Ben Kenny

    Lame. I’ve used most of these techniques before. I normally found that clients of mine didn’t like what I did when I copied from these kind of websites. I’ll be sticking with Web 1.0 thanks.

  • Sean

    I hate to be that guy, but after looking over the list, virtually none of the things you list as “Web 2.0 Enhancements” are actually Web 2.0 enhancements.

    This article should really be titled “25 Examples of Modern Design Trends and Traditional Design Rules Coming Together”

    • http://www.littlelines.com Josh Sears

      Not sure if you caught my input sprinkled throughout the article about Web 2.0:

      “Web 2.0 in itself is a very fickle, ever-evolving definition…

      …Web 2.0 is a tough standard to define, as where traditional design standards are a rigid collection of rules and guidelines (grid structure, color theory, letter spacing, kerning, tracking, and so on), Web 2.0, while containing similar standards, is almost more so a way of life.

      It combines philosophy, marketing, technology, ease of use, and countless other aspects of our busy universe with an ultimate goal of making things easier for the masses…”

      The point of the matter is that the term “Web 2.0″ exists and describes a design standard whether designers want to admit it or not. Whether its lifestyle, a business model, or round corners and glossy buttons.

      Feel free to document what you feel might be true web 2.0 standards and see if the same holds true tomorrow. The term has become so bloated and pverstated that it’s virtually impossible to pin down.

      • Sean

        Got to disagree with almost all of that.

        Web 2.0 is pretty clearly defined, and has been for a while. It revolves around allowing users to participate in in the website, usually by allowing them to create content.

        This can range from anything as simple as Amazon’s review system to something like Twitter, which is completely user-driven. In fact, this conversation we are having right now is the essence of Web 2.0.

        Any other definition you have heard is just people trying to sound knowledgeable, because they don’t really have a firm grasp on it. And that is OK, because I was probably in that same boat not too long ago myself.

  • http://www.drumania.com.ar Martin Brumana

    Really really good, but i like de minimalist design

  • http://www.artelix.nl Melvin José

    Good stuff.
    Thank you!

  • http://www.sorinistudor.ro Sorin Istudor

    some of the designs I know the other not :). Thanks for the list!

  • http://inspectelement.com Tom Kenny

    Fantastic in-depth look at web 2.0 trends used well. I especially enjoyed it as I recently wrote about web design trends not having to disappear completely and this is a perfect example of this!

    • http://www.littlelines.com Josh Sears

      I liked your article as well. The point is definitely to illustrate that “Web 2.0″ has an ever-evolving set of standards. In my eyes, it simply encompasses modern trends in design as well as lifestyle, business approach, and a slew of other features. Some people (many that have responded to my article) are of a certain mindset that Web 2.0 defines a very specific set of rules. I tend to disagree. It’s all about staying fresh and keeping your radar up for what is popular, but also not forgetting that good design practices will always remain the most important aspect of good design.

      Thanks for the input,

      Josh

  • http://www.geekartist.net/ Janice Schwarz

    I’m with Sean there in the comments. Web 2.0 is not a design style. Web 2.0 is a term coined by O’Reilly outlining trends for uses of the web.

    From the horse’s mouth: http://oreilly.com/web2/archive/what-is-web-20.html

    As designers, we should know better than the clients that keep asking for a “Web 2.0 looking website”…when that can mean just about anything from their standpoint.

    • http://www.littlelines.com Josh Sears

      Not sure if you caught my input sprinkled throughout the article about Web 2.0:

      “Web 2.0 in itself is a very fickle, ever-evolving definition…

      …Web 2.0 is a tough standard to define, as where traditional design standards are a rigid collection of rules and guidelines (grid structure, color theory, letter spacing, kerning, tracking, and so on), Web 2.0, while containing similar standards, is almost more so a way of life.

      It combines philosophy, marketing, technology, ease of use, and countless other aspects of our busy universe with an ultimate goal of making things easier for the masses…”

      The point of the matter is that the term “Web 2.0″ exists and describes a design standard whether designers want to admit it or not. Whether its lifestyle, a business model, or round corners and glossy buttons.

  • http://www.heilkunde.com schuessler

    That’s a great article – thanks for the list!

  • http://saseantic.com Sa

    Good examples. Thanks!

  • http://www.onesixtyone.com Kyle Petersen

    Great roundup–I’d have to say that Pixel Matrix is my favorite by far, even though I had seen many of those sites before and even visit some of them regularly.

    • http://www.littlelines.com Josh Sears

      Thanks Kyle, I agree that Pixel Matrix has outdone themselves with the new site. It’s definitely one of the most thought-out design in the list.

  • http://www.cypherbox.net creativekai

    cool sites! =)

  • http://www.slightlycurvedcube.co.uk Wayne Hodkinson

    Like em all – cheers!

  • http://evelt.com joel k.

    I don’t get the whole web 2.0 mania

    while this article is great, the web 2.0 thing is not real.
    yes png instead of gif, glossy looks, apple-ipod style design, more dynamic stuff, a blog or 2 for every person and there dog, so be it..

    it was possible before, and its getting better like every art form. no big deal.

    html 5 is a new thing so is xml support, and deserves celebration,
    but 1.0 /2.0 /3.0 what on the planet it is, nobody can say for sure

    i would rename this post “beautiful eye candy websites that designers worked very hard to create and maintain” :)

    no offense this is a great showcase of great websites

  • muhammadiq

    this one also nice http://www.atapp.de

  • http://www.jakir.info jakir

    nice list….. i really like this …

  • http://www.psprint.com/stickers-labels Ashely Adams : Sticker Printing

    Very nice post. But I wonder how you would define strong design. I mean its not just Web 2.0 but the whole concept of web designing is very fickle. What’s “in” today is outdated tomorrow. And taking about breaking the rules……..well I don’t think designing can be limited by rules. After all it’s all about creativity…..isn’t it??

    • http://www.crazyantz.com subhash

      You are absolutely right. Its all about creativity and generation. Me too agreeing.

  • http://all-for-design.com All for design

    Waho, great article !

  • http://amberweinberg.com/ Amber Weinberg

    Great lists and I love the fact you explained your reasons for picking these, as well as listing your qualifications for great traditional and 2.0 design.

  • http://www.designsheffield.co.uk Abbas

    I’ve only got Web 1.0 installed, so thanks for posting the screenshots, otherwise I wouldn’t be able to see them.

    Seriously though, these lists seem to be the same lists of sites with a different title.

    Are there any corporate sites that employ modern design techniques??

  • http://www.khwebdesign.net/ Kent

    This is a great concept for an article. I personally love the Web 2.0 look but it’s not appropriate for every project nor is it something that will be around forever. It’s great to show how Web 2.0 concepts can be merged with traditional designs to avoid being a one trick pony.

  • http://nathanhoad.net Nathan

    Great list! I’ve added it to my inspiration list :-)

  • Asif Siddiqui

    Great article!

  • http://www.dzinepress.com Dzinepress

    really unique stuff you share always, that’s why i always follow your website for my better inspiration for make more creative work. thanks

  • http://www.rmsjr.com Rob

    Amazing article… Great approach to breaking down each site. But hold on, aren’t we in Web 3.0 yet?

    • http://www.littlelines.com Josh Sears

      Actually we’re on Web 3.287, but who’s counting?

  • http://www.OxzenMedia.com Oxzen Media

    Nice list. Great to see so many different sites and layouts next to each other. Thanks.

  • http://soumyasm.deviantart.com/gallery/ Soumya

    Superb article! Very helpful! Thanks!

  • http://www.iamstevehansen.com Steve Hansen

    Great article, very inspiring… makes me want to do some re-designing…

  • http://www.bulletpointmarketing.com bigbri

    Mixed reactions on here… I think the problem is that you state only a partial definition of Web 2.0: “it places a focus on usability, interface, and readability.”

    While this is true, a more complete definition would include the fact that Web 2.0 is about instant, dynamic feedback using scripting like Ruby on Rails, Ajax, PHP/MYSQL, ASP etc…

    Trying to design output to “on the fly” user interactions is what makes it so different, not just the layout.

    Think about how Google Maps blew us all away when we could zoom in and move the map instantly without reloading it – that’s the real shift from WEB 1.0 to 2.0… (I use those terms, but I agree that labeling versions of the web is kinda silly)

  • http://t00nfish.de t00nfish

    Oh i like the work of Digital Mash, Number 18. The glossy clear theme is totally my favourite :D

  • RB

    Nice selection. But the web2.0 thing has to stop… it’s getting to be more and more of a clichee, like the “hi, i’m XXX, and i design GREAT websites” bit… common

    good designers don’t need more rules

  • http://kalimevole.blogspot.com Jan Jelinek

    Hi, thanks for nice showcases of trends in design. I have a question.

    Many things you name as Web 2.0 Enhancements, are not not included in Web 2.0. For example: Illustrations in header.

    So now my question. Do you thing there are some design trends or techniques included in Web 2.0?

    Please correct my meanings about that.

  • http://codequietly.com Dane Harrigan

    This article was very well written. An obvious bias on textures ;-) but great read none the less. The examples were thought out and on point. Good job.

    -Dane

  • http://www.koushik.com Laxman Koushik

    Inspiring List of sites… good article.:)

  • http://www.hooliga.com Sports Bar Search

    That’s a great list. Thanks for putting this together.

  • https://antuane.wordpress.com/ António Manuel Cardoso

    great article. But some times e very dificult to do this points. Some clients don’t understand

  • eric

    basically,none all of them are 2.0 concepts..
    thanks anyway for sharing..*_*

  • http://www.volkanbagcali.net volkan

    nice list

  • http://www.bname.ru/ Alexander Osipov

    Wow, thanks for sharing, great article!

  • Randy Anderson

    I love these examples. Very nice stuff here. Nearly every one of them is designed well. But when it comes to design on the web, there is no such f*ing thing as Web 2.0 – whether it be form or function (which as far as the web goes is often hard to separate). The web as well as all things available online, whether through a smartphone, a computer, a kiosk or whatever is evolving and designers need to keep up their end by applying great design that works in tandem with the machinery of the web – whether they are tools, apps or whatever. THAT is what ‘Web 2.0′ is if you have to use that term. Design on the web for so long was bad simply because true designers had no idea what to do with the cryptic design tools given them (they still aren’t very good IMHO) nor did they speak up as they DID learn the tools and take the lead on the design side. What so many are calling Web 2.0 has nothing at all to do with a specific ‘look’. I was there when the Web was a twinkle is some developers eye and for years was ugly as when desktop publishing was a laughable replacement for professional publishing. I have watched as designers – real designers – have skulked away as though their only reason for being there was to make the site look ‘pretty’. For the web, design is nearly everything and if a site is fully functional but ugly, than in reality it isn’t functioning at all. There… I feel much better. :)

  • http://www.sarbuy.com Tesser

    That’s a great list. Thanks for putting this together.

  • http://designinformer.com Design Informer

    Great post. You have some really nice sites showcased.

  • http://twitter.com/matushiq matushiq

    great! inspirational. thx.

  • http://www.websiteplaats.nl daka

    teah great list…always nice to see nice designs… like that book the webdesign idee or something like that

  • http://www.squiders.com Web Design Maidstone

    good list, some interesting examples

  • http://ictaddicts.com George

    Amazing resource thanks a million for sharing!!

  • http://www.divisionbyzero.co.uk Division By Zero

    Great article, not just the collection of sites but the content – it’s nice to occasionally see a roundup of sites which is more than just thumbnails and links – after all we can get those from CSS galleries.

  • http://www.itechsystemz.com iTech Systemz

    V good article. Web 2.0 enhancements part is great.

  • http://www.sakinshrestha.com Sakin

    Great collections. I enjoy Web 2.0 enhancements… Love it.

  • http://www.proclones.com John

    Fantastic article. I have been searching for some web 2.0 inspiration and now I have found it! haha. Thanks again!

  • miekun

    what is web 2.0 ??? more rule??? whats rule? however nice list, thanks for sharing

  • http://www.formulis.com FormulisLasVegas

    The 45Royale and Cream Scoop websites really look sharp. Good collection of different kinds of 2.0 sites. I can’t help but wonder aloud if the 2.0 “framework” tends to limit designers from thinking a bit more outside of the box.

  • http://www.socialmediapark.com socialmediapark

    very nice list!
    thank’s

  • http://www.kavintechnology.com kavin

    Thank you for sharing

    Nice list………….

  • http://addonsolutions.com/PHP-Programming.php Mayur Shah

    Hi,

    Its good stuff but can we have more like web 3.0?

    Thanks

  • http://www.simplewebinc.com sandy

    Great collection of examples. A good article, that i would like to recommend.

  • http://www.studio33in.com prity

    Nice list thanks

  • Y. Kan

    While aesthetically, this is a lovely roundup of websites, the list shows that you have almost no understanding of what Web 2.0 is.

    Web 2.0 is NOT a visual language. It’s not glossy icons, gradients, or textures.

  • http://www.dumidesign.com dumidesign

    nice design collection.

    thanks

    Dumidesign

  • http://www.infomreza.com/ John

    Realy great designs, a lot to learn from.

    Thanks

  • http://perkinsdesigns.com/home/ Phil

    Thanks for sharing this illustrative list

  • http://www.alisanaei.com Ali Sanaei

    Good examples, thanks. Would have been better if there were images of how these sites used to look like before using Web 2.0 functionalities.

  • http://www.vinfotech.com Web 2.0 Design

    Superb designs. My favourites are Cameron Moll, Viget, Agami Creative, Marchand de Trucs & Andrew Bradshaw….Many thanks for sharing this collection :)

  • http://rodrigo-silveira.com/design.php awesome designs

    those are indeed some awesome, superb designs. i’ll have to agree with ashley, though… i mean, back in the late 90s the ‘new’ and ‘cool’ designs that broke the rules are now considered terrible. those shown here may never be considered ugly, but more and more people are overusing and abusing the general concepts used here, and that is making this ‘new’ style of web designing kind of boring and annoying…

  • http://www.pujya.com Web Designing, Web Designers, SEO Hyderabad

    good work! i like it, thanx

  • http://www.classifiedsonline.comn.in/ Free Ads

    Web 2.0 designs are really good. But can you provide few web 2.0 templates for download ?

  • mangat rajput

    nice list! thanks for sharing

  • http://www.benstokesmarketing.co.uk Ben Stokes

    Some nice examples above – I would say the digital mash web design is one of my favourites . . . All though the site has changed some what now if you click on the link.

    Thanks guys

  • http://www.haliyikamafabrikalari.com parça kontör

    Some nice examples above – I would say the digital mash web design is one of my favourites . . . All though the site has changed some what now if you click on the link.

    Thanks guys..

  • http://www.mammut-medien.de Daniel

    I really like the simplicity of Feelwire and the look and feel of Cream Scoop.
    Beautiful sites alltogether.

    Thanks for the list.

  • http://www.searchguru4u.com Web Development 2.0

    Great. I always wonder when will we be able to employ every Web 2.0 feature in a commercial website, but by seeing what you are doing, I believe it is possible. Cheers :)

  • http://www.i4visualmedia.co.uk essex website designers

    nice, i feel alot of the blue sites work well

  • http://www.papersoup.org Brixter

    Nice list, thanks for sharing.

    My favorite in the list is the Viget Inspire. Very inspiring.

  • http://javedweb.com/blog/ Javed Gardezi

    I love the Web 2.0 design…!!. This technology is simply amazing.!!

  • http://baradesign.com.au Bara Web Design

    Great list! 45 Royale looks nice.

  • http://www.kloportfolios.com Tarlan

    My fave is 45 Royale. I came across their site a while back and it’s so simple and beautiful.