Top 10 web design trends and predictions for 2014

Tags: , &

design-predictions-by-zing-design

With the new year finally here and the Zing Design team having just made it back into the office we thought that now is a great time to look back on what has been happening over the last year in the web design scene and come up with some predictions for what we think the top web design trends of 2014 might be. If you are a developer, you might also want to check out the top 10 web development trends and predictions for 2014.

1. Large hero image

You can see these popping up all around the web as designers are dropping the once favoured slider from the top real estate of the page and filling the space with a large hero image, usually accompanied by a small amount of text. Check out Lateral inc and Focus Lab for some nice examples.

fl-screen-shot-by-zing-design

Most likely the shift from slider to large hero areas is happening because it’s a very effective way of grabbing users’ attention and enticing them to continue exploring the rest of the site. This trend has been growing in popularity and shows no sign of slowing down, it’s definitely here to stay for 2014.

2. More video content

More and more websites continue to favour video content over text to explain new or technical concepts. With the rise in popularity of sites like YouTube and Kickstarter many internet users would rather watch a video than read about it, and why not? Videos offer the unique combination of words and imagery that can help convey a new idea better and in a shorter amount of time. Videos also have the added benefit of ranking especially well in search engines like Google.

coin-screen-shot-by-zing-design

While it is true that videos can consume a bit of data, nowadays bandwidth limits are growing to allow for fast downloads and larger caps, so as far as we’re concerned this is definitely going to be one trend that continues to grow as we progress through 2014. Also another interesting side note to this trend is that many sites are dropping the idea of hosting their videos on youtube in favour for self hosting and the great control it offers them over their own content.

3. Flat UI

The big names are rocking it, and for good reason too. Flat UI took the throne from skeuomorphic design, which acted as an introductory guide to a new digital world. Now that we’ve figured out how the big scary internet works, we can drop the clutter – it’s time to focus on bare essentials.

A flat UI may be the first experience in web for those who have skipped the skeuomorphic period. Many have been gifted an iPad or eReader, or have received their first smartphone. As UX and UI designers we need to ensure that new users can also find their way around the app. It’s early days for the flat UI, this design methodology has plenty of room for innovation. We’ll see intuitive, simplified, flat interfaces come out of 2014.

flat-ui-example-zing-design

4. Simplified navigation & white space

The introduction of a flat UI has given the rest of the web some well needed breathing space, well, white space anyway. White spaces provides clarity and simplicity which in turn improves site retention, and increases readability. A few of our favourites include Exposure, Hello Monday and FoundryCo.

To create this extra breathing space we have observed a resurgence in fixed navigation (sticky header) and a dropped sidebar. This allows users to focus on the central content. We predict more websites will clean up and flash their white space in 2014.

FoundationCo screenshot

White space at FoundryCo

5. Simplicity in parallax

Parallax in web design creates an illusion of 3D as layers move at different speeds, usually while the user scrolls through content. When used well, parallax can create a memorising experience which captivates users. It did trigger a wave of implantation after all! Check out these stunning parallax sites Discover Shadow, Zensorium Tinke and Lost World’s Fairs.

Parallax. It’s memorable, it’s fun, it’s almost annoying and may cause projectile vomiting. In 2014 we predict parallax will be used with increased care and control, but we wouldn’t throw away the sick bag just yet!

Screenshot from Tinke

Parallax on Tinke

6. Responsive design will become an industry standard

Although this one has been done to death, responsive web design is important for a future proof website. There are many responsive frameworks for both design and development to help with the transition.

In 2014, an increasing amount of users will browse the web through alternative devices such as smart watches, glasses, television and even refrigerators! Responsive web design will preform on all these devices, and the next.

The days of a secondary mobile or touch site are numbered. In 2014 we predict that responsive design will become industry standard, and we’ve put together two helpful cheat sheets to help you get started in responsive website design:

What widths should I design for?
What screen densities should I design for?

screenshot from mediaqueries

Showcase of responsive design at Media Queries

7. Smarter transitions

Although some sites have adopted this trend of smart transitions already, we can really see it taking off as designers begin to use more subtly animated transitions to reinforce the user’s direction and journey through the website. Previously animated transitions would have provided an inconsistent experience between mobile and desktop but now as more phone hardware is able to cope with the demands of in-browser animation, this is becoming less of a concern.

Of course this will undoubtedly lead to an overuse of these types of transitions as everyone jumps on the bandwagon, resulting in some sites becoming more cumbersome and confusing for users. However, we do see this being more of a positive push in the right direction as the good implementations will set the standard and the bad ones will be forgotten.

You can find a great article about smart transition over at Smashing Magazine.

8. Exploration of (non-rectangular) shapes

The exploration of different shapes to display content is going to see more headway this year as designers look for ways to diversify their works from others. A small push away from the rectangular shapes used in most sites today in favour for something more experimental and unique, could see web design start to branch out in new directions.

three-shapes-by-zing-design

By shapes, we are referring to the use of anything other than the rectangular blocks that make up most of the page structure as it stands currently. We hope that we’ll see more creative use of triangles, hexagons and non-parallel angles divide up the page and bring a whole new dimension to the game. There is a high possibility that 2014 is the year we will see some of these designs start to emerge into the mainstream.

9. Wider range of typefaces

Since the inception of Google Web Fonts, we are starting to see a larger diversity in typefaces being used on the web. we see this trend speeding up as the New Year gets under way and more designers begin to experiment with a wider variety of typefaces.

This will open up more interesting and impactful design ideas as more web designers start to experiment with typography and using text as image to grab and hold the attention of Internet users. In particular, we think handwritten and flat design fonts will become common place in 2014.

custom-fontface-2014-zing-design

10. Icons and custom illustrations

Illustration has taken on many forms throughout the web, icons, SVG, animation and the rising hero area. With less bandwidth restriction we can expect to see more of this craft.

Illustration speaks for itself whether it’s quirky, beautiful, engaging or educational. We invite the decrease of awkward stock photos with an increase in custom illustrations in 2014.

Want to know how to make your illustrations work responsively? You might like to check out our article on what image sizes/resolutions you will need to consider when designing for responsive websites and high retina devices.

Screenshot of Wes Anderson Collection

Illustration of The Wes Anderson Collection

Here are a few examples of great use of illustrations:
Break it Down
Foundation by Zurb
Abrams Books – Wes Anderson Collection

People who have viewed this post also viewed

Comments

  1. Sean

    Overall I enjoyed reading your list and mostly agree with the points you made. One trend I suspect to become more established is the re-focusing on the content of a website. The look and feel of a website, while important, are merely secondary to the content. With the availability of analytics data, one size fits all content no longer has the impact it once did. I know personally when reading/visiting a website, if the content is too vague or is relying on the use of key industry terms to establish authority, I almost immediately abandon that site. My perspective is that the content must absolutely connect with the audience it is targeted to. Most people will say they can solve problem A. Fewer will say how they do it. Even less will tie it back to the fundamental motivations for doing so, whether representative of an organization or an individual. At a point when a visitor or user feels that connection or understanding on some personal level, they will now view you as legitimately distinct. Telling a story is great but not unless it resonates.

    Reply

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text