Trendwatch 2012: Prevalent Elements In Website Design
Whether it's a new year or a new season, design trends are always changing. And, much like almost every element in the online world, website design trends change quickly and evolve over time.
While there are some elements to the design of websites that remain constant, as they reflect best practices, there are always new trends in website design that pop up. We’ve compiled a list of 2012 website design trends, as well as examples of the trends, in order to show the direction in which website design is moving so far this year.
Simplicity - Back to basics
The first trend that we are exploring is actually a revitalization of a previous website trend. With numerous sites, we are seeing a return to simplicity, where classic graphic layout is used in laying out the pages.
Imagery and copy on web pages are now sharing similarities with print layout, where the strength is in delivering the message. In the past, more emphasis was placed on the texture and graphical elements, resulting in the design standing out more than the content.
Conveying messages clearly and capturing the attention of your website visitors is key to having a successful website. Placing focus on the messaging, rather than flashy design elements, will ensure that your visitors are able to find what they're looking for, and fast.
If the user is unable to find information quickly and easily, they will leave your site. A grid format of laying out content is common to keep information well-organized. Larger fonts and typography are also utilized to add interest and emphasis to information, and body copy is typically larger now, between 14-16 pixels.
Another example of this simplicity trend includes the minimal use of effects, such as gradients, within shapes and buttons. Drop shadows are used in subtle ways to make the content more organized, and keeping the design two-dimensional, stepping away from all the 3-D special effects that were popular once in web 2.0 style.
Large Background Images
Complementing the increasing popularity in simplicity, large beautiful images are used to make the site unique and project the predominant mood of the site. There has been a predominant shift away from Flash-based sites by utilizing a large background image, as one can create that same effect using other technologies. The advantage of this is having a more SEO-friendly programming language, and it is also a more viable option because this presents a better user-experience for an increasingly large mobile audience, since not all mobile phones are equipped with Flash.
Using large background images can also work to keep your design simplified with a huge statement by replacing the need for the usual extra effects and graphics to make the site visually effective. Remember: a picture can be worth a thousand words!
Scroll Layout / Vertical Narratives
In terms of design layouts, the use of scrolling and having a long web page seems to be increasing in popularity. Many websites, mobile sites, blogs and social media online, are using scrolling, as it seems to be a more natural response to accessing more information from a usability perspective. There has been an increase of page layouts that use scrolling down as the way to present information.
In the most basic form, the website's copy and information is laid out in chronological order along with smart image placement, such as on The Nest's. With more advanced programming, scrolling downward on a page animates the information along with creating imagery. We can see an excellent example of this on the section of Nike's site that focuses on their Air Jordan 2012 models. This format is used to deliver information in a more dynamic and interactive fashion for the user.
The largest social media websites online are also using this vertical scrolling layout: Facebook's Timeline features vertical scrolling to access past information; Twitter's feed has the most recent Tweets at the top, and chronologically organized. eCommerce sites are also typically organized vertically, with their product catalogues displaying information in a vertical fashion. With the explosion of blogs in the internet, blogs offer the best examples of vertically displayed information for every type of genre site.
While this element is not exactly new, there was a lesser movement towards horizontal scrolling, and coming back to an emphasis on the vertical layout, since most mobile websites and apps are not designed for vertical scrolling. Instinctually, the user will naturally scroll up and down with their mouse before they will look for the horizontal scroll bar to navigate through the web page from left to right.
With the latest trends in website design, we’re seeing a shift away from the web 2.0 trend. The web 2.0 trend tended to have all information kept above the fold and large amounts of information broken down into sub-pages. Web designers are now laying out information through vertical narration which is a reaction the user’s natural web surfing habit.
These are only three of the major current website design trends that are a result of previous trends, and have been reengineered for today's modern web users. The focus on simplicity places the focus on the messaging on the site; the large background images align with keeping a clean and clutter-free page and compatibility with all types of browsers; and vertical layout is an ergonomically designed format for users to access information.
We stand behind the importance of the content over the design, and more people are realizing the importance of the content and the messaging. With these three key trends emphasizing content and design, we see a progressive move to more catered visitor experience, and intuitively designed websites.
What new trends in website design have you seen?
PS: Thanks for your insights and input to put this together, Sunny.