Subscribe to our Newsletter

Get articles, advice and tips about:

Top Web Design Trends 2017

Top Web Design Trends 2017

by Frida Nyvall

Predictions of what we expect to see in web design during 2017. What are the top web design trends, what is still trending from last year, and which trends are declining?

First off, a few trends that recently arrived, and that we think will just increase during 2017:

Recently arrived

Angled lines and Non rectangular headers

The big hero image or slideshow on landing- or splash pages has become so common it needs to be spiced up to fully catch the attention of a seasoned web visitor.

The most common practice seems to be to use a slightly angled, sloped line although other ways of breaking those straight horizontal lines also occur.

The angled line design trend also affects other elements, for example online payment company Stripe and Microsoft email service Outlook also uses it to visually divide sections throughout their websites.

Stripe website

Angled header background on Stripe's website

Outlook website

Angled header background at Outlook


!

For developers wanting to implement this trend, these two articles should help get the job done: Ultimate Guide to Non-Rectangular Headers (Part 1) and Sloped edges with consistent angle in CSS

Mobile navigation moves to desktop

Since more and more users spend more and more time on the Internet and in apps using their mobile phones, it seems only natural that design patterns mostly seen on mobile get transferred to larger screens.

Popout menus that include the “big icon, small centered text” pattern will become more common on desktops.

screenshots of spotify and smashing magazine

Spotify mobile navigation to the right, and the Smashing Magazine redesign to the left

The new Linkedin menu also uses this pattern

We believe that this trend is going to grow significantly this year, due to the fact that it has been incorporated not only in the recent redesign of Linkedin, but also in the redesign of the leading web industry site Smashing Magazine (designed and developed by no others than Andy Clarke and Sara Soueidan).

To the right: the new Jinx menu. To the left: the navigation at 24ways

Other typical examples are the redesign of geek wear company Jinx, as well as the on the 2016 edition of 24 ways, an advent calendar for web geeks professionals.

People want to follow the big companies and leading individuals in the industry, therefore more menus of this type are sure to pop up.

Gradients

Pokémon Go screenshots

Example of gradients used in the Pokémon Go app design

The flat trend has been around for quite a while, and designers are now trying to find ways of making flat elements a little more interesting. Adding gradients has been one way of doing this, as seen in the Pokémon Go app, as well as on Spotify and project management tool Asana.

screenshot of Spotify and Asana websites

Gradients on Spotify and Asana websites


Upcoming trends

Not fully here yet, but we predict they will evolve during 2017.

Displaying content in new ways

Making use of new technology for displaying content in new ways. For example designing for VR, or breaking out of the grid, using unconventional and creative layouts.

VR Goggles was named this year’s Christmas gift in Sweden. Even though VR technology is not available to others than the privileged parts of the planet’s population, many of those tend to be developers whose interest and enthusiasm in the technology will spread through the rest of the industry.

screenshot of tweet

With over 18k twitter followers, designer and front-end developer Sarah Drasner has a lot of influence on the web industry

CSS Grid Layout is a new feature for the programming language CSS, that is used to determine appearance and structure on a website. CSS Grid Layout will be launched in the latest versions of select browsers this Spring, making it easier to layout content on the web.

Rachel Andrew

Few people know as much about CSS Grid Layout as Rachel Andrew, who has sort of become the face of the new feature, promoting and teaching it to others.

Earthly colors

Greenery is the Pantone color of 2017

Greenery is the Pantone color of 2017

The Pantone color of the year is called Greenery. This might be a clue as to why rumor has it earthly colors will make their way into web designs this year, contrasting to the vibrant, sometimes even neon- like color choices we’ve seen in 2016.


Trends from 2016
that are here to Stay:

Parallax Effects

Parallax effects* will still be popular, although implementations might be more fully thought through, taking performance and usability into consideration.

*Parallax effects means websites that create a sense of depth by moving images on a website at different times and speed, often as the user scrolls down a page. See a typical example here: www.firewatchgame.com

Strong Typography

Big and bold typography will also stay. Typography will become even more important as new layouts open up possibilities to play around with texts in ways that was previously mostly just seen in print.

Animations

Animations both large and small will continue to be important parts in user interaction. However, just adding movement to a website will not cut it any longer. There will be more detailed work and more effort made to assure animations fit their purpose as well as are aligned with the organization’s overall brand expression.

Large video & Image backgrounds

We will continue to see a lot of websites using large video and image backgrounds.


What’s on decline

Hexagons

The hexagon shape and honeycomb pattern were super-hot for a while, but might have been over-used along with variations on the theme such as hexagonal/triangular patterns.

Too Flat Design

Flat icons with long shadows

For a while, flat icons with long shadows was the thing.

Remember these? The super flat design is on decline, giving room for playing around with structures, gradients and shadows.

Obvious Stock Images

Business people

This might not be an accurate image of the workforce in real life

When everyone is using the same type of good-looking, happy and diverse models in their office photos, the content (and ultimately the company) stops being trustworthy.

Content nowadays needs to be credible, because visitors are better at spotting what is fake.


Just Remember

The web industry is always changing at a fast pace, which affects the life-span of trends within the industry. When designing and building a website, main focus needs to be on the goals and challenges of the project, not on what happens to be hot right now.

Red Onion comic


Don’t miss the next article – sign up for our newsletter at the top!

Tags

More posts

img

Silver Award in Smashing Magazine CSS Grid Challenge

img

Speaking on Boagworld Show about Getting From Idea to App

img

The Dark Side of Web Design – confirmshaming