Web design trends for 2013

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. ;)
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:

1. 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.
2. Enormous screen resolutions: The iPad 3, as well as other mobile devices, were released and with these come enormous screen resolutions.
3. Improving HTML/CSS: There have been improvements in features such as HTML5, CSS3 and web-safe fonts in browsers.
4. 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.
5. 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

Due to the unprecedented rise in the use of mobile devices, we are seeing a flood of websites that are designed to work on both desktops and phones. Designers are finding more and more the need to create designs that work on different screen widths, whether it’s 320 pixels or 2500 pixels. We can thank the use of multiple devices and RWD for this abandonment of the standard width.

With the flexibility of RWD, it’s not surprising it’s being quickly adopted into mainstream sites like the news.

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.

2. HTML5 and JavaScript replace Flash

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).
Many web designers have lived through the rise and fall of websites built with Adobe Flash. Now we must approach these same design issues the new way — replacing Flash with HTML5, CSS3, Javascript, Canvas, etc.
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.

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

Thanks to responsive web design, which allows designs to convert to screens of any size, designers are creating websites that give the feeling of being in front of a movie screen. We are seeing websites that use little text with big photos and videos (photo and videos that sometimes cover the screen entirely).

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:

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!

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:

Daniel Vane.com 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.

Conclusion

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.
source: http://99designs.com/designer-blog/2013/02/21/web-design-trends-for-2013/