24 Examples of Web 2.0 and Traditional Design Rules Coming Together

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

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.

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

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

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

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

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.