March 19, 2012 5:30 AM
2012 has brought with it a wave of web design trends. Keeping up with these constant developments is essential, but it's important to keep in mind that effective web design is more than just a coat of paint; it always needs to support your business goals. Good web design is a necessary part of your larger web marketing and user experience picture. In keeping with this holistic approach, we selected the following as the top web design trends to implement this year:
NOTE: If you find this post useful, check out our webinar on the same topic, "Top Website Design Trends for 2012", along with our blog post, "Top Mobile Website Design Trends for 2012".
1. HTML5, CSS3 and JQUERY
2. Mobile Compatibility and Responsive Layouts
Designers can no longer ignore the exponential growth in mobile usage, and always have to consider how a website will perform on mobile. When designing a site, for example, one has to determine whether a native app, web app or one website that auto-scales to mobile screen sizes will be optimal.
Responsive layout refers to how well a layout responds to the size of a screen. It organizes the content to make it just as visually pleasing on a small screen as a large one. Responsive layouts can be great for those organizations that may have a smaller budget and/or resources.
. Typographic Layouts
Typography is an extremely effective and creative way to instantly grab the attention of your visitors. Before, designers would need to build images to create the effect of rich typography, but now, especially with Typekit
and Google Fonts
, a site's performance and accessibility are no longer bogged down by extra images.
4. The Grid
The original intent of the grid was to streamline web development by using common dimensions in the design layout. Anything but restrictive, grid layouts can be aesthetically pleasing, and allow for creativity in their implementation.
5. Large Background Images
In many ways, this trend is becoming a best practice. Large background images are a great way to maximize a smaller marketing/advertising budget to engage a wide audience. Large images work to draw a visitor in, creating more of an immersive user experience.
6. Perceived Affordance and Metaphoric Design
Don Norman, a renowned psychologist and cognitive scientist, expanded on a theory of perceived affordance
in design, and it's becoming more prevalent than ever. To get a sense of what perceived affordance is, ask yourself the question: "When I see something for the first time on a website, how do I know how to use it?" There are many visual metaphors built into user interfaces, including drop shadows, gradients and rounded corners. These visual metaphors help to create perspective, give the illusion of depth and 3-dimensionality, and ultimately guide the user towards taking a specific action (i.e clicking a button).
Although perceived affordance and metaphoric design have been used for some time, designers have found more strategic and thoughtful ways to apply it recently.
7. Social Media Integration
Having social media integration on your website is now as crucial as having basic navigation. Although the practice of including social media links on your website is anything but new, designers have recently begun to devise more thoughtful ways of integrating social media into a website's design, giving these channels prominence instead of just relegating them to the footer.
Illustration has been used for years now, and it has added a humanistic dimension to design. However, it has evolved and become more popular over the past few years. It was previously used for buttons and select interface elements only, but has now become more integrated with the full user experience.
9. Single Page Websites
Previously, the concept of the "fold" guided web design. The fold refers to the imaginary barrier on a web page, above which all important content sits.
This concept, alongside the misperception that "users don't scroll", became very ingrained in web design practices, and it often led to visual clutter. However, with the recent explosion of single page websites, content layouts have morphed to more of a story-book format, and the fold doesn't have as dominant of an influence on web design. It's important to note, though, that key company/product messaging and calls to action are still best to place closer to the top of the page.
Parallax has become more popular over the past year or so. What parallax refers to is the design of two parallel objects moving at different speeds. When built correctly, it really helps to disrupt the linear paradigm of scrolling. However, the drawback to this fresh and engaging technology is that most current browsers cannot support it, so we can expect to see this gain even more traction in the next few years.
11. Elegant Modal Boxes
Gone are the days of the annoying pop-up (well, for the most part!) Modal boxes have become widespread in interface design, particularly for contact forms, login windows, and tool/help windows. Modal boxes are much more elegant and unobtrusive, working to layer information without frustrating or driving the user away from key pages.
To sum up, not every trend is worth adopting just for the sake of it being a trend. You need to ensure that when you're redesigning your website, you're aware of the latest trends and best practices, but are only applying those that support your marketing objectives. Ultimately, web design needs to work in conjunction with a solid content strategy, SEO, and conversion optimization to be fully successful.
Originally posted on Marqui's Web Marketing Blog
Marqui's Web Marketing Blog is brought to you by their marketing and consulting team to share ideas, best practices and trends from the world of web marketing. The blog aims to cover a broad array of topics relating to web marketing including content management, conversion optimization, SEO, email marketing and lead nurturing.