Social
KIJO - Twitter KIJO - Facebook KIJO - Instagram

Web Design Trends To Lookout For in 2017 - Updated

Mike O'Raw

Designer

Author Image: Mike O'Raw
Crucial Trading - Website Tablet
Share This:
Share on Facebook Share on Google Share on Linkedin

With the new year in full wing it seems like a good time to reflect on what an exciting year 2016 was for web design and anticipate the trends we expect to see in 2016. This past year has seen the fast pace of evolution continue and shows no signs of slowing down. With 2016 being the year that responsive design became a necessity rather than an optional extra and the technology required for creating highly visual storytelling websites continued to advance.

Heres our predictions for what web design trends to lookout for in 2017:

1. Animations & Interactions

Websites have evolved from simple online business cards, to highly visual interactive marketing platforms. The use of rich visual animations will continue to assist in telling the story of a website and create user experiences that are memorable and enjoyable for users.

Hover & Interaction Animations
Visual feedback will be provided through hover animations, creating the feeling of an immersive deeper layer to websites. Contextual information can be provided as and when a user needs it, allowing designs to embrace simplicity. User interfaces will continue to evolve with interaction animations shaping how users navigate and use a website.

 

Hover animation - Web Design Trends
Credit: https://dribbble.com/Maxdicapua

Scrolling Animations
Scrolling is in some instances replacing clicking. A common design trend that we are beginning to see more and more is the use of vertical or horizontal scrolling to present information to a user. As a user scrolls animations are used to draw attention to particular elements and pieces of information, in the order that the designer intended.

CSS3 brought animations into the mainstream and made it simple to add animated elements to any design. We anticipate that animations of all varieties and complexities will continue to infiltrate your screen, creating delightful memorable experiences.

2. Cinemagraphs or Moving Images

Cinemagraphs are a visual technique where a part of a photograph is animated or moves, normally repeating on a loop, while the rest of the photograph remains still. You may have seen one of these already, its possible you may have mistaken it for a video.

Cinemagraphs or living images as they are sometimes known, are a brilliant visual element to add to any page, they can stand out when compared to conventional animated .gifs or videos. Cinemagraphs allow a designer to draw attention to a particular element of a photograph, such as a fireplace burning or the bubbles in a glass of champagne.

We expect to see cinemagraphs a lot more moving into next year and see them as a natural progression of large bold imagery and video backgrounds.

3. Visual Storytelling

The average website visitor is ultimately in a rush to find the information they need and websites have a short time to capture a visitors attention. The tools and technologies we use to build websites are continually evolving and becoming ever more advanced. As a result of these incremental advances (some which are discussed in this article) web design has become more about telling a story, rather than a static page of text.

Websites and web apps are now able to visually guide a user through a page, combining clever animation and powerful imagery to tell the story of a product or a brand. The potential for this way of designing is huge, with designers in control of how users consume the important information and the order in which they consume it. This benefits the user also, as now rather than digging around a flat website looking for the information you need, the information comes to you.

From a user experience point of view visual storytelling helps to make a user feel happy and engaged, minimising pain points and eliminating the previous frustration of navigating a website.

Visual Storytellling - KIJO - Web Design Birmingham

4. Scrolling not clicking

With the increase in usage of mobile devices websites are adapting to rely less on clicking links and are instead looking to use vertical and horizontal scrolling. The reason for this is that it can be easier for users to scroll than clicking multiple links to find out the information they need. This is especially true on touchscreen devices, where the flick of a finger is more intuitive than tapping a button.

As users scroll through a page, the visual elements, imagery and typography are all combined using animation to capture a users attention and visually guide them through a websites content.

Scrolling website coin animation - web design trends 2016 - KIJO

5. Typography as a Feature

Typography has seen a huge surge in popularity in the last few years and rightly so. Typography has the ability to transform designs in arguably the most profound way. With websites ultimately responsible for presenting information, it makes sense that how the words look on a page play a critical role in the overall design. Using custom fonts is now easier than ever before, with numerous font marketplaces available. Drop-in font libraries like Google Fonts makes it easy to choose from a huge variety of fonts and begin using them in next to no time.

Rather than just the choice of font, typography has become a feature all on its own. With unique combinations of font face, weight and style being cleverly combined to create visual elements made up entirely of text. The general rule of thumb with typography seems to be the bigger the better, and we couldn’t agree more. The future is bright for typography on the web, as the tools and choice of fonts continues to improve.

Typography as a feature - Web design

Credit: Dribble – Explore the Nature moodboard

Typography as a feature two - The KIJO Blog

6. Web Design Trends – Notable Mentions

Responsive design

Responsive design will continue to be integral to web design, with mobile devices here to stay and search engines changing their algorithms to reflect this. The way we design responsively will continue to evolve, with designing for specific device breakpoints becoming less important and instead increasing importance will be placed on the responsiveness of individual page elements.

The responsive performance of websites will also begin to take centre stage, particularly how quickly a website loads on mobile devices with slower connections.

Video 

Video is now a design feature, rather than just being a piece of media to be watched. Full screen video headers and video as the background of page elements are two of the most common methods of using video in an unconventional and engaging way.  Video as a feature is likely to carry on into future as technology and internet connections improve.

Further Reading:

10 Amazing Websites with Visual Story Telling
Cinemagraph: 28 Still Photos With Subtle Motion
Responsive and Server Side
Disney’s 12 Basic Principles of Animation

 

Keep Reading