Table of Contents
The World Wide Web is a highly visual and interactive environment that is no stranger to the forces of aesthetic change. Trends in web development and design are not only influenced by technological shifts, they are also dictated in great part by what Internet users perceive as effective and delectable.
Take, for example, the heavy use of Flash animations of yore, or the antiquated hit counters at the bottom of the page, or the scripts that change the appearance of the cursor. Those elements have been dismissed as garish and antiquated by web surfers, but in their time they were considered trendy.
Web design trends develop fast, but the inclination of delivering a clean and stylish appearance has not fallen out of favor. The following eight elements of web design are not entirely trendy, in fact, some are destined to become the norm, just like the use of Cascading Style Sheets (CSS) replaced the use of frames years ago. Let these concepts serve as reminders of what the top designers are expected to incorporate into their work in 2012.
Keeping website layouts clean and simple is part of a trend that has always presented a strong appeal in the visual arts. From advertising to architecture, visual designers have returned to simplicity whenever opposing trends threaten to topple the less-is-more aesthetic philosophy.
Web designers should learn to embrace the white space background and add color, typography, images and shapes sparingly. This simple approach to design must also extend to the website navigation.
Fonts and Typography
Typographers believe that the World Wide Web is an ideal playground where any message can be easily conveyed through the effective use of fonts.
Now that we are firmly in the second decade of the 21st century, typographers are rejoicing at the variety of custom web fonts cropping up on handsomely designed pages. If there is one thing that web designers should become acquainted with in 2012, it is typography.
A good place to start is Google Web Fonts, a central library of open source fonts that encourages budding typographers to upload their creations, and web designers to peruse the website, select a desired font, copy the code generated by Google, and include it into the font family properties of the website.
HTML5 and CSS3
Modern web browsers like Google Chrome and Opera began the HTML5 revolution, which is now poised to take over the World Wide Web.
The focus on clean animations and social media interaction make HTML5 an attractive proposition for web designers since it does away with the former constraints of Adobe Flash.
Responsive Web Design
The proliferation of smartphones, tablet computers and other Internet-connected devices are making responsive web design a standard.
It is not fair to call it a trend, since it is currently a necessity, and in the future it will be accepted as the norm for all websites. The principles of responsiveness observe and respect the fact that users expect fluid layouts that adjust to different screen sizes and display content accordingly.
(Further reading: Responsive Web Design: What It Is and How To Use It)
Whenever web projects called for a lot of links in the past, dropdown and sidebar menus were the most sensible solution to avoid overcrowding of links on the page. A more reasonable and stylish solution for 2012 can be achieved with the use of multiple columns oriented at the top of the page.
One solution is to neatly arrange the navigation links into short columns on either side of the page logo. The use of sidebars and menus arranged across the bottom of the page is still valid, but keeping the essential navigation links at the top is preferred.
The explosion of content across the World Wide Web has resulted in a lot of downward scrolling. This is particularly noticeable on blogs that are constantly updated with fresh content.
Fixed navigation design calls for the effective use of elements such as floating menu bars that remain in place as visitors explore the website and content without having to scroll back up. Fixed position navigation is ideal for websites that have a few navigation links that can follow the visitor around, remaining visible but otherwise not intrusive.
Distinct Geometric Shapes
Keeping with the above-mentioned example of Microsoft using Live Tiles in its new and future operating systems, a web design trend to watch in 2012 involves the use of squares and circles in lieu of the MS Windows and Apple OSX graphic user interface paradigm of the past.
In the Web 2.0 era, web designers sought to recreate the familiar look and feel of a desktop to make the visitor comfortable. The popularity of the Apple iOS and Google Android has moved some designers to create pages with small icons arranged like apps on a smartphone menu.
The contrarian trend of using circular shapes to present navigation and content is emerging in 2012, and it is likely to spread thanks to CSS3. Page elements suitable for circular shapes include small badges, logos, navigation links and pictures.
Scalable Vector Graphics
In keeping with the principles of responsive web design, scalable vector graphics (SVGs) are expected to keep computer graphic designers busy. The idea stems from the fact that original, well-designed SVGs look great in modern high-resolution monitors and portable screen.
SVGs create an excellent opportunity for branding since they can be adopted as logos and icons. A good SVG can become the face of a business, and it can be anthropomorphized for future transformations and animations.
Good examples of vector graphics and their effective utilization include the large red “O” letter used by Opera Software, the different treatments given to the Twitter bluebird mascot, and the different characters used by the Mozilla Foundation for their different open source software products.nah