7 Hot Web Design Trends for 2013
With the fast-moving nature of the web, it’s only natural that website design trends change regularly. The year 2013 will prove to hold just as much change in web design practices as any prior year. It will be a fun and exciting year in web design, and here are seven of the hottest trends to expect in the months to come.
1. Responsive Web Design
Responsive design is the approach of developing one set of code to accommodate the display of a web design in all display environments, regardless of screen dimensions. For example, you may see one variation of the design on a desktop, another on a tablet’s horizontal view, another on a tablet’s vertical view, and yet another on a smartphone. Responsive design is a content-focused approach to building web experiences, and is future-focused in that the design is fluid and can adapt to new technology on an ongoing basis.
With the proliferation of screen sizes—not just smaller mobile dimensions, but also oversized desktop displays and screens on many new surfaces such as car dashboards and kitchen countertops in the future—expect responsive web design to be a major trend moving forward. For a few examples, check out bostonglobe.com, mashable.com or catalystsearchmarketing.com (designed by Digital Marketing NOW).
2. Full Screen Design
A wave of greater visual design is upon us. Look at the recent redesigns of Facebook, Twitter and LinkedIn, and it’s apparent that some of the most popular sites on the web are striving to deliver a more visual experience.
Similarly, we expect to see more companies taking the visual direction to a greater extreme with the implementation of full-screen designs. Examples of full-screen website designs include: lotuscars.com, tatchies.com, and culinariafoodandwine.com.
3. Vertical & Infinite Scrolling
We’ve noticed more and more websites with extremely long, vertical-scrolling pages. Examples of this type of website include theleanstartup.com, apethebook.com, launchfactory.org, dangersoffracking.com, and the Skullcandy Supreme Sound website (Bonus! This site scrolls vertically AND horizontally.). The website guidetotheappgalaxy.com is especially interesting in that it represents vertical scrolling from the bottom up, quite a unique approach!
One of the most popular vertical-scrolling sites, which actually represents “infinite scrolling,” is Pinterest. The site continually loads new pins seamlessly as the user scrolls down the page. Pagination becomes a non-issue, and the user-experience works for a site like Pinterest. Infinite scrolling is definitely not right for every website, but in the case that you are looking to showcase a number of images or content pieces related to a single category, it can be effective.
4. Parallax Design
One of the cooler developments in web design in recent years is parallax design, which incorporates special scrolling techniques whereby background images on the screen move slower than foreground images. The resulting illusion on the screen is one of 3D depth. The effect can be truly amazing.
See examples at beetle.com, activatedrinks.com, stopatnever.com, sullivannyc.com and the Air Jordan 2012 website. Be sure to scroll down the page!
5. Big Big Big Buttons
Websites with buttons that include calls-to-action are ubiquitous. However, sometimes websites take the concept to an entirely new level, and we expect to see more of this in the coming year.
Simplicity can be an incredibly effective antidote for conversion optimization improvements when dealing with busy, frazzled and distracted users awash in information overload. The use of oversized call-to-action buttons can help simplify a site to its core, and can help site visitors get what they are looking for faster. Sites with large buttons include statusboard.me, kissmetrics.com and desktime.com.
6. Social Media Integration
Social media integration historically has meant social chicklets in a website, or the display of Facebook and/or Twitter activity feeds in a website. These examples of integration are limited, and begging for a truer integration of content and engagement. It’s time to go beyond “Share this.” Waaay beyond!
In terms of basic tools, Click To Tweet is a good option in that it hones in on the very specific pieces of data that would be most shareable, rather than forcing the user to share the entire page. We highly recommend the tool.
The major social platforms each offer a range of integration options, as well. For example, Twitter for Websites, Twitter’s embedded timelines, and Facebook social plugins deepen site and social integration. Even these, though, are examples of the current state of “patchwork integration” rather than what you should consider true integration.
True integration will come in the future, as the line between “website” and “social” becomes blurred. Instead, developers and users alike will one day come to focus on the web experience, including all communication and visitor satisfaction. The notion of being “social” as a stand-alone activity will become antiquated, and in its place your site will simply enable greater real-time communication and engagement. Expect 2013 to start heading in that direction.
7. Designed Fonts
In the past, in order to beautify a website, a designer would typically look to images. In 2013, expect fonts to be a critical design element in many websites. This is thanks to web fonts such as those listed at Google Fonts and MyFonts, enabling designers to go beyond standard system fonts.
There are many different font formats for the web, including EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO and XSF, which can make font selection quite challenging. However, with the use of the CSS3 @Font-Face rule, designers can have a limitless number of custom fonts with which to work. Perhaps one day in the not too distant future web font embedding will become the default design practice, enabling almost any typeface and any font style, just like in print design.