Apr 28, 2007

LEAP University - A Fresh Look - The Visual Style of Web 2.0

This is the last of a three part series on the impact of Web 2.0 for businesses who have an online presence. "Web 2.0" is a term coined for the next generation of development in interactive design and development.

Our last issue discussed the impact of social media and user-generated content on your branding efforts. Now, we'll be covering the visual style of the next generation of interactive development collectively known as "web 2.0." It's not about visual presentation! It's all about visual presentation! Which is it, anyway?  As the next phase of interactive media marches on, leaving table tags and browser-based hacks in its wake, what is coming next for designers? What new methods are worth learning and implementing, and which ones are going to be outdated before they even make it through the "early adopter" stage? This is made additionally complex by the very nebulous and somewhat ill-defined nature of Web 2.0 itself. When even Wikipedia can't decide whether the visual elements are relevant to Web 2.0, it's no wonder others find it confusing.

Semantic Markup and CSS: As the web becomes more and more about content, and less and less about presentation, clean, semantic markup is no longer optional: it's critical. As Richard McManus and Joshua Porter write in their article for Digital Web magazine, "Because content flows across the web in RSS feeds and can be remixed along the way, Web designers must now think beyond sites and figure out how to brand the content itself." Part of branding the content is offering it in a reliable, semantic format, such as XML or RSS. Meaningful tags and semantic markup allow you to position the content itself for maximum relevance and increase the odds that interested users will find it through whatever web services they are using. The advances made in standards-compliance by the major browsers in the last year are rapidly removing any remaining excuses for not switching to CSS-based design. So if presentation is dead, then what's left to design? Web 2.0 puts the emphasis on content, but with so many outlets for the same content and APIs, presentation is far from dead.Without the content exclusivity of earlier stages of the Web, today's presentation focus needs to be on creating a superior user experience, so your interface becomes the preferred source of many for that content. Open APIs, tagged and shared content, and user-generated content can create a level playing field on the backend. The UI is still important, and may be the last place your particular site gets the opportunity to stand out from the crowd. By using semantic markup to effectively brand the content itself and developing a rich user experience on the front-end, you capture users from both directions.

Design Trends Worth Noting: The social web and the new paradigm of Web 2.0 has been pushing certain design trends. Larger fonts and simpler, centered, fixed-width layouts create more white space, putting the focus on the content. These techniques are also much easier on the eyes of the users, compared to the crammed-full, busy designs of the past. Rounded shapes and softer, neutral background colors also carry forward this concept of being easier on the eye. Today's users also seem to be less concerned than in the past with scrolling, at least to a point. The benefits of a more comfortable line height and font size can overrule the "keep it above the fold" rule.Subtle use of 3-dimensional effects can be very effective in creating a sense of depth on these simpler layouts, avoiding a "flat" look. However, it's easy to get heavy-handed with the use of gradients, drop shadows, and "wet floor" effects. There are unfortunately plenty of examples of 3-d effects being overused on the Web right now.

Ben Hunt has a fairly comprehensive breakdown of these recent design trends and others on webdesignfromscratch.com

Connect with on Google+