Web 2.0 culture has indeed change the way on how we look at the design of websites and the Internet. With tons of new websites sprung into action daily, we examine each individuals if they fit the bills of Web 2.0. Though the transition from Web 1.0 to Web 2.0 design is ongoing, and in a pace that it may well entered yet another era before your know it. Horrible and droning website design still literally corrupts the Internet today but it would take considerable effort to completely eradicate this form of malice and raise a new level of web design standard.
Still most of us may remain oblivious of the true meaning of this term which is defined as Web 2.0. This topic is not unfamiliar and has always been debated by web developers, designers and professionals. Are there any guidelines for us to follow or protocol to adhere to?
While the World Wide Web Consortium (W3C) sets the web standard and guidelines for the Internet and even develops inter-operable technologies (specifications, guidelines, software, and tools) to lead the Web. But when it comes to Web 2.0, there is no clear indication on how it should be, primary when it occupies a more design aspect.
For many, Web 2.0 design standard may just means that a website is more colourful, more visually enhanced or simply with more animation or motion graphics etc. However there should be at least some basic ingredients to be implanted before a website should consider a Web 2.0 category.
I quote the explanation from Wikipedia:
Web 2.0 is a revolutionary view of the Internet and the social and business uses of advanced technologies rather than the technical aspects of those technologies. The core concept of Web 2.0 is: Use Internet as a platform and leverage network effect to harness the collective intelligence in a cost-effective manner”
The Wikipedia definition may not help you to understand the meaning clearly maybe because Web 2.0 concept cannot be explained in mere words. I think it would be easier for us to understand the true meaning of Web 2.0 by presenting the generation of the Web 2.0 concept graphically. I shall touch on the characteristic of Web 2.0 design in this segment.
Keynotes of Web 2.0 Design Elements
Here we analyzed and discuss some of the keynotes of what makes a Web 2.0 Design Elements.
Simplicity of Design
The simplicity of web application functionality is both mirrored in the design and style of today’s webpages. Simplicity of today web design simply means focused, clean and straightforward. Web designers have moved from the stage of squeezing every single pieces of information into our webpages to eliminating the unnecessary, at the same time presenting a clean and simple interface for visitors. They are also attempting to engage the lifespan of visitors by capturing their attention instantly to what is important, rather than trying to overwhelm them with everything under the sun.
Twitter presents a clean and simple layout on its site. The clear and distinctive information bring users straight to the point without confusing them.
Columns Reduction and Centered Design
The ancient layout of floating left and right pages with numerous columns has been replaced by the stylistic centered design trend. Designers are able to present information in a sleeker and self-assured centered orientation. As fewest numbers of columns is used, the simplicity increases simultaneously. It’s practical as well in the area of viewing because it’s much more compatible with various screen resolutions and sizes.
The resumator has a centered layout with minimal columns to present their information clearly. This neat and obvious way of design will have maximum impact on the attention of their visitors.
Arrangement & Whitespace
Readability is a critical factor to bring your message across. Instead of cramping your texts, website designer are keeping a simple and clean layout by increasing line heights and adding lots of whitespace to pages. Web designers are also focusing on the essentials of improving the viewing pleasure of visitors by producing crisply, sharp and fresh pages.
Checkout App has a high level of readability on its site with nice level of spacing. It has also arranged their section neatly to provide organized and clean pages.
Choice Of Colours
Today’s websites used a mixture of strong and complementary colours to emphasize important concepts as well as creates distinctness between areas of the site. Certain colours has been perceived to be more effective and safer for designers to adopt. Designers also have a variety of Web 2.0 colour tools available to test-drive and enrich their design.
Tea Round has manipulate colours brilliantly by using bright, strong colours to divide the page into clear sections and to highlight important elements yet retaining the original feel of its concept.
Variation of Fonts Sizes
Bold use of large fonts is often used by new websites to point out their key concepts to visitors, or to convey a focus and clear message about their website’s main objective or mission. It’s like an “elevator pitch” or limited self promotion. The font sizes of today’s new websites have increase to improve the readability of the visitors. More utilization of lower case fonts and different selection of comfortable typography could also be seen to create a casual and comfortable rapport with the visitors.
Kissmetrics uses different variety of typography and font sizes to differentiate the weight of each statement. Its mission is to “Keep It Simple” whether it’s their design or application.
Sticky And Simple Navigation
This new trend of navigation set apart from the busyness of the site content and the body of the page. There are usually a hierarchy of navigation bars displayed distinctively with each specifically fulfilling their intention. Web designers has realized the importance of effective navigation so they have built the navigation into something that is simple and could be found on every pages without you trying to look for it.
Envato present site navigation in a new and interesting dimensional way. Its navigation bar slides down into an umbrella chain of community sites at the same time remains firmly on the bottom.
New Age Logos
The designers have restudied the logos design capability and reinvented the logos into something which is daring and confident. Significant large logos are often used to establish a prominent brands business and gave an intriguing feel to visitors.
WP Coder boosts a logo that is cleverly related to it’s scope of work. Not only has the logo been imbued together with the text, it has shown that logo design could be bold and adventurous, at the same time forging a brand with incorporating attitude, tone of voice, and first impression.
Blunt and Rounded Edges
This current trend is to round out the corners, even on fonts too. Its set to reduce the visual intimidation of anything that’s sharp or stern. It’s also reflective of the informal attitude and casual tone of today’s Web approach.
Apple is a great example of striking the balance of simplicity with rich imagery sensitively-applied. It has changed the usual formal and traditional corporate feel by designing the edges of the icons, text and design into something which is so elegantly and pleasing yet enjoyable for most visitors.
A New Feel And Look
Subtle use of drop shadows, gradients, mirrored images, glossy and shinny surfaces has added a realistic 3D effect and classy edge to the once dull interface. The effect of creating a reflective logo, surface or image could be found on many new websites to make them more engaging. The site not only become more entertaining in visual and life-like but enhances the qualitative feel of the design. These little touches make our visual interface feel more solid and real. Realistic effects of water droplets, shiny plastic surfaces, glass reflections have been very popular and may also remind us of certain tactile or aesthetic qualities of real-world objects.
Two Toasters has shinny icons, gradient background and shadows images to make the website more visually interactive.
Engaging Icons
The old school of stock photography or marketing images with happy business people shaking hands has gradually been replaced by simple and engaging icons. These impressive and richly detailed icons draw the attention of your visitors and does not put them off by those rigid traditional pictures. These may well include exciting and idiosyncratic shapes or star-shaped labels which has a call to action effect, often utilized to promote and highlight a free or particular service.
Cabomba make uses of intriguing icons and labels to engage their visitors. Those icons are not only sharp and clear, its also bring out their intended meaning perfectly without using huge human life pictures.
Web 2.0 Websites
Now, we’ll be showcasing 30 very classic example of websites that have built with the Web 2.0 design elements in mind.
TapTap Mobile is a website dedicated in developing software for iPhone and iPod touch.
Miro is an Open-source, non-profit video player and podcast client.
Guifx services include creating touchscreen interfaces, consulting and custom GUI design.
Telebidscript allows you to create your own Swoopo-style pay-per-bid website in seconds.
Transport Magic is a matchmaking service that gives consumers the right tools to make the best decision for their shipping needs.
LemonStand allows web designers & developers to create custom eCommerce sites with powerful features.
(mt) Media Temple, Inc. is an industry-leading, privately held, profitable web hosting and software application services company based in California.
Real Mac Software focused on developing exceptionally useful and easy to use software for Mac OS X.
Ribbit integrate voice and rich communication features into your website, application or community.
Sourcebits provide software development services for Mac, iPhone, Android and Web.
Storenvy allows you to start selling online by opening an e-store.
Yazsoft make high quality software for a wide range of users.
Blackberry is a popular brand selling smartphones internationally.
AppBoy is a social outlet for mobile applications lovers.
BeQRious.com is focused on supplying news, information, technical solutions of QR codes.
Enhancedlabs is a global design firm specializing in high-end graphics and branding. They also provides some free beautiful Web 2.0 icons.
HouseShout! is a website designed for those looking to buy, sell, rent, let and share their properties without the use of an agent, in a community style platform.
iCyte enables you to highlight and save text on any webpage, allowing you to recall the most relevant information.
Mobclix is the industry’s mobile ad exchange network via open marketplace platform. Its project a clean and neat image with some cute icons.
Clear, open, fresh and simple. When you arrive at this site, you’re under no doubt what the site does, or where to start looking for what you want. The design is positive and lively with every Web 2.0 ingredients in place.
PixelNovel Timeline is a revolutionary version control system built for designers who use Adobe Photoshop.
Skype allows you to make free video and voice calls, send instant messages and share files with other Skype users. Its site is lively with exceptional colour handling.
Toldya lets you buy and sell among friends on social networks, blogs and web sites. You can simply create and copy your store directly to your profiles (such as MySpace, Facebook and others) as well as your own blog or website.
A joyful and lively site that has rearrange the section of traditional layout.
VMIX provides software as a service (SaaS) online video and photo platform solutions for media, entertainment, organizations, and business websites.
Vyew is a new and powerful platform for real-time and always on interaction between people and content.
Zooloo is a comprehensive application that bring all of your interests together.
Putacart sells just about anything on your blog or favorite social site by putting up a shopping cart.
Lovebox is a digital wristband to help raise money and awareness for different charities around the world via the web. Its has excellent colour symbolism to encourage visitors to donate.
Krop is a job board and career resource website for creative professionals. Its sleek design joined perfectly with the term professional.
Web 2.0: The Upward Trend
Some may argues with the design elements of Web 2.0 but what we all can agreed on is that Web trend are indeed moving into a more simpler, beautifully visualized and sophisticated era. The effects of Web 2.0 design are far-reaching. Like all paradigm shifts, it affects people visually, culturally, and even socially.
One of the most affected groups is the designers and developers who will be the group that will be building it. Not only because their technical skills and mindset will be adjusted but also because they needs to integrate content as part of a unified whole, an ecosystem if you will, and not just an individual island.
Resources
- O’Reilly Media : What is Web 2.0?
- SEOmoz : List of Seomoz’s Web 2.0 awards
- The FontFeed : The logos of Web 2.0
- Vandelay Design Blog : Resources for Web 2.0 design
What is your take on Web 2.0 design? Feel free to discuss it below.
[…] The Keynotes Of Web 2.0 Design Elements With 30 Dazzling Showcases … […]
Great design examples, I’m bookmarking this page for inspiration.