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.
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.
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.
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.
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!
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:
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.
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.
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.