Predicting the future is always a risky venture, and there is no precise method that allows you to define the future trends of web design. But… we can try.
>> Check out our newest web design trends roundup here
We’ve determined the directions of web design based on our observation of what types of design solutions are gaining popularity. Many web design trends occur due to changes in: technology, market, fashion, pop culture and art. But first, let’s take a quick look back at 2012 and see what trends are on the rise.
Signs of the times in 2012
Last year was important, perhaps even a turning point, for web designers. A few key points of interest in 2012 were:
- Mobile devices with Internet increases: This trend has been present for years but statistics from 2012 show it’s at an all time high, which makes it extremely important to take into account while designing for web.
- Enormous screen resolutions: The iPad 3, as well as other mobile devices, were released and with these come enormous screen resolutions.
- Improving HTML/CSS: There have been improvements in features such as HTML5, CSS3 and web-safe fonts in browsers.
- Release of Windows 8, with it’s metro interface: Despite sluggish sales of the new Windows operating system, the metro interface changes the way of thinking about software interfaces. It is moving away from the standard window with a title bar and navigation at the top.
- Navigation within 1-page: Navigating within 1 dynamic page is replacing navigation from page to page. Over the last year, we saw many websites with this type of solution. For example, Facebook’s traditional layout was replaced by a timeline with infinite scrolling that makes users feel like they’re moving back in time.
So, what can we expect to see in 2013? Make sure to share what you think in the comments!
1. Responsive web design (RWD) goes mainstream
Website: The Boston Globe
The Boston Globe is a newspaper that can be adjusted to fit any screen size, which makes it easier to carry right in your back pocket. 🙂
You can find more RWD design examples in my last post, Responsive web design: key tips and approaches.
The quest for a rich user experience is nothing new. The term RIA (Rich Internet Application) was first used in 2001 by Macromedia (now part of Adobe) to describe websites made entirely in Flash. In 2005, Adobe and Maromedia announced that Flash was supposed to be the multimedia publishing platform for all devices. Steve Jobs disagreed and Apple never officially supported Flash. Today, Steve Jobs would be proud to hear Flash is dying (or maybe is already dead).
You can see Google is adopting the latest technologies by their investment in Chrome. Chrome is really pushing the internet forward with awesome sites like Chrome Experiments — you have to check these experiments out! We at 99designs can’t wait to see what the future holds for websites supported by these browsers.
Website: Chrome Experiments
Find Your Way to Oz is an awesome example (out of many) from Chrome Experiments. What are some of your favorite Chrome Experiments?
3. Websites give a cinematic and storytelling experience
Website: Cadillac’s ATS vs. The World
Cadillac’s ATS vs. The World uses a huge image of a rotating earth, which gives a nice cinematic feel. If only they incorporated this type of style throughout the rest of their site.
Another example of a cinematic experience can be found on digital agency site, Welikesmall. Although this site has a lot going on, it does a good job at using small fonts and eye-catching photos.
Similarly to this cinematic experience, we are seeing websites that integrate storytelling:
Website: The Story of Jess & Russ
The Story of Jess & Russ unfolds a love story of the couple as users scroll. Just looking at this site once, you might feel like you’ve been there sharing their journey all along.
Want more storytelling? Check out Impress A Penguin who cleverly uses storytelling to find a new Community Manager for their company. Or the site promoting the film, Skin Color: Honey which has viewers explore the website as the young boy Jung — a great, interactive way to get any interested moviegoer engaged.
4. Creative navigations replace traditional navigations
One thing you might have noticed while looking at the examples of cinematic and storytelling sites is how some are straying from the traditional top navigation bar. User-experience is shifting from a clear hierarchical navigation to a rich user experience with the use of full-screen photographs, videos, interactive elements and animation.
Website navigations usually consist of links set in a menu bar with the viewer clicking through, and scrolling down each page. Now, we are seeing very sophisticated navigations — main menus are being reduced, sometimes disappearing completely or sliding behind screen edges.
In some cases, when a viewer scrolls they aren’t moving down a page, but are remaining on the same page and seeing different graphics enter the screen.
Here are examples of creative navigations we might be seeing more of in 2013:
Bagigia is an interesting example of a product site that gives viewers a unique experience by making it feel like they are getting to play, flip and rotate the hand bag. The navigation bar is hidden so nothing distracts the user’s attention from the product. The viewer can navigate via the zipper graphic or on the right side of the site.
BOND uses a fascinating concept of navigating through time starting from 1962 (seems a bit storytelling to me). When you begin scrolling you move into the O of the word BOND and, as you scroll, are faced with different cars, colors and screens — it feels as if you’re traveling from the past to the present. Check it out if you haven’t, this site is really well done!
Website: The Production Kitchen
The first thing you’ll notice about The Production Kitchen is it’s chock-full of incredibly detailed and charming illustrations. It’s like a map where you have to drag (not scroll) to explore each section. Again, there is a navigation bar added to the bottom, just in case the viewer doesn’t have time to explore (trust us, you should make time).
5. Websites incorporate parallax effects
When there is really no story to tell, some websites choose to imitate camera movement with parallax effect. Parallax creates an illusion of depth by making elements (layers) of a web page move at different speeds as viewers scroll.
I’ll give an example to help visualize this: When your driving, the trees surrounding the road seem to move by your car quicker than say, a house you’re coming up on in the distance. Simulating this visual effect on a monitor screen provides for an engaging user experience. This effect has been known for some time, but is being used more and more in web designs.
Spotify — an awesome music site that allows you to build your own playlists — uses parallax effect as the viewer scrolls down the page.
Zuelements also plays around with this effect (although it’s more subtle).
6. Web designs inspired by Swiss design style
Swiss design style, or the International Typographic Style, has been inspiring designers since the 1950s. Swiss design style features typography as the primary design element, and favors sans-serif typefaces, grids and asymmetrical layouts. Fathers of this style focused on simplicity, legibility and objectivity.
Recently, this style has shined in a new light with Windows 8 interface release. This idea of using grids and grid-based typography is gaining even more attention.
Microsoft’s website is based on the Swiss UI design style — grid-based, white space, flat colors and big letters. It’s worth noting that Microsoft’s website navigation is more traditional than their Windows 8 interface. It’s also important to note how Windows 8 is designed for touch, not just pointing and clicking. Will we be seeing more and more designs created for touch screen?
Here are other examples of websites that use Swiss design style:
Website: Daniel Vane.com
Daniel Vane’s site does a great job at implementing a fullscreen square grid layout, which are becoming more popular.
Buffalo also does a great job at demonstrating this idea of grid-based, white space, flat colors and big letters. They also show how a hexagon grid is possible.
Now it’s your turn to make predictions on the trends we’ll be seeing in web design over the next year. It’s clear, we are seeing more responsive web designs, designs that integrate storytelling and site’s that integrate creative ways for viewers to interactive within a page. This certainly changes design workflow and brings new, exciting challenges for all web designers.