Top 7 Web Design Trends of 2012
1. Responsive Web Design.
Traditionally, websites were created for interaction on a desktop computer. As each year passes, more and more users access the Internet from devices other than the desktop computer. Initially, designers responded to the increase in browsing devices by adding multiple fixed width layouts to websites to enable viewing on each. This gets more difficult, however, as the number of alternate formats increases. Because of this, many sites now use responsive web design, which incorporates multiple fluid grid layouts.
RWD has advantages and drawbacks. On the plus side, it uses a single code base for a website and any changes you make only need to be made once. It may improve SEO, does offer a single URL, and provides a consistent experience across devices. However, it is more difficult to create proper navigation via responsive web design. It is also harder to create a design that is optimal on both a large screen and small screen. Additionally, banner advertisements and video are not fluid and so cannot be translated properly.
2. Large Background Photos.
You have almost certainly seen this trend. Websites are increasingly using aesthetically appealing photos that cover all or much of the screen. A photo that takes up the entire background of a site's homepage gives the impression that the user is physically entering or is already within the site. Many sites animate large photos to give the viewer a cinematic experience.
3. Retina Support.
In March, Apple Developer announced that starting May 1, new apps and app updates submitted to the App Store have to be built for iOS devices with retina display. Retina screens are twice as dense as the average LCD, so a retina screen for a handheld phone has double the resolution of a standard phone screen. In order to support those, designers must sample any image at double the resolution, then save a standard version at half the size. The larger image is scaled down to the standard resolution and looks crisp on retina screens.
4. Infinite Scrolling.
Infinite scroll pre-fetches content from a subsequent page and adds it to the user's current page. It provides a seamless interface without reloading. This design is useful when you want to keep the user and clicking "Next Page" is a barrier to this. It is useful for reader retention because it conforms to the reader's typical reading habits. Designers must ensure that the functionality enhances an existing navigational structure to remain SEO-friendly and accessible.
In contrast, this design does not seem like a good choice for something like a blog, where a reader wants to access page 17 directly, rather than scrolling through pages 1-16 to get there - there is no permalink to a given state of the page. In addition, there is currently no way to cancel or opt out of this style. Adding more content to the page increases the memory footprint.
5. Social Media Icons.
You can't go anywhere on the web today without running across social media icons. These allow users to share what they read or thought or purchased with their followers or friends on whatever social media they choose. The way the icons are displayed is up to the designer. Bear in mind that the display should be eye-catching while not distracting from the product or content and be user-friendly while cleverly laid out.
6. Content Heavy Websites.
Traditionally, websites contained minimal content, skewing toward the utilitarian. As people spend more time on the web and use it for more reasons, the value of content has increased. Before a website is built, determine the type and amount of content your site will include because including content needs to be part of the design phase. If you do not have content ready during the design phase, use filler content. The more you know about the length and size of the content, however, the better for design. It is particularly important for the front page or other content-heavy pages that have little flexibility for adjustment. Heavy content requires a tight fit, as well as good organization and placement.
A page with a lot of content should use a grid system with well-organized margins and some padding to permit a little flexibility. As a designer, plan for white space and good borders to create an aesthetically appealing page that separates content in a natural way. Vary formatting and pick typefaces carefully. It is vital that content be accessible and searchable on multiple platforms.
7. Detailed Illustrations.
With the millions of websites and probably hundreds for any given type of product or service, capturing the viewer is vital. One web design trend is to create detailed, attractive pages. Many of them use traditional "drawing" techniques - less high-tech and more nostalgic, fun, or simply pretty. The type of drawing should enhance the branding of the site - a "Good Night, Moon" style illustration for an online children's clothing store, for example. Typically, you can click on part of the illustration to access the rest of the site or simply to uncover a fun feature.