Thinking Outside the Web – Designing with 2.0

Thinking Outside the Web – Designing with 2.0
http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/digg_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/reddit_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/dzone_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/stumbleupon_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/delicious_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/blogmarks_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/newsvine_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/google_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/myspace_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/facebook_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/yahoobuzz_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/sphinn_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/twitter_16.png

You’ve probably seen them all over the Web: sites featuring glossy buttons, large text, and vivid colors that immediately catch your eye.  These visually striking websites are meant to help you locate the information you need quickly,  and are a contrast from past websites that overloaded you with information and often left you in the dark about the next steps to take to get the information you need.  This current trend in web style is commonly referred to as “Web 2.0,” and not only is it taking the Web by storm, but is also appearing on our televisions and on the shelves of our favorite stores.

Web 2.0 Explained

Web 2.0 is more than just current trends in website design. In fact, 2.0 includes current Web phenomena like social networking websites (MySpace, Facebook, and LinkedIn),  blogs, wikis, and video-sharing websites.  According to Wikipedia, Web 2.0 is “characterized as facilitating communication, information sharing, interoperability, user-centered design, and collaboration on the World Wide Web.”  To sum it up, Web 2.0 is all about simplicity and getting more done with less.

2.0 Design Principles

The characteristics of Web 2.0 lend themselves to the design innovations of 2.0.  Aside from the glossy buttons, rounded corners, and reduced clutter,  some of the trademarks of a 2.0 design include:

  • Larger font and ample white space  that allow the user to quickly scan a website to locate what he or she is seeking  instead of reading through paragraphs of 12pt text just to locate one line of information.  Many current sites use sans-serif fonts (Arial and Verdana, for example) since these fonts are generally easier to read on-screen, and they retain their crispness at varying font sizes.
  • Strong Colors:  Solid, vivid colors are often used to highlight areas of importance or interest. While gradients are used for background effects and special objects such as buttons, solid colors are used for call-outs on other essential areas of the website.
  • Bold Logos: Since font sizes in general are larger amongst modern web designs, a company’s logo needs to stick out more than ever.  Many companies account for this by re-working their logos and using bolder, rounded fonts. Usually, these logos are again surrounded by a decent amount of white space to prevent crowding, and to allow their logo to flow with the rest of the site’s text and graphics.

Branding with 2.0 in Mind

Today, many companies are looking at the design fundamentals established in Web 2.0 websites, and are incorporating them into their own marketing campaigns.  One of the most popular and most recent examples is Pepsi’s logo re-design.

The new Pepsi cans and bottles feature a revamped Pepsi logo against a simple blue background, with the word “Pepsi” to the lower left of the logo in rounded, lowercase letters. The text aspect of the logo, and the solid blue color of the can, is very similar to 2.0 web design.  All lowercase letters,  in a strong,  sans-serif font,  highlighted by the solid blue can and offset by the new Pepsi logo itself,  remind one of a simple 2.0 website.

Other companies are following suit. Examples of  companies that are using 2.o styles in their branding decisions include Wayfaring, Pando, Mozilla, and Eventful. Notice how each makes uses of clean, rounded fonts in their logos, which mesh well with the rest of their site’s design.

Think Outside the Web

Although the design elements in Web 2.0 may give way to different design methods further down the line, it is easy to see that what is online today has a large impact on branding decisions in all forms of media. Keeping your web and print branding consistent can go a long way toward solidifying an impression in your customers’ minds, and will make you look more professional in today’s rapidly evolving medium.

About the Author

Melissa likes the Web and building things that live there. We ask her to do something, she disappears for a while, comes up with an intelligent design, then builds a Web site around that design that will not only do her bidding, but will do the bidding of their new owners. Over the past few years she has worked on (often single-handedly) the design, production and launch of 100s of websites. She usually does this quietly, efficiently, and with a smirk that makes everyone else wonder what she's up to. And, if you ask her nicely, she might also agree to design a tattoo for you, although that will have to wait until after work.

Author Profile: