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

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.

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

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.

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

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.

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.

Upcoming trends

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

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.

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.

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* 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

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

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

What’s on decline

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.

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

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.

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

• trends
• web design