Top Web Design Trends to Follow in 2018


February 22, 2018 | Ericka O'Connor

With the new year in full swing, 2018 promises to be an exciting one for web design with trends that improve website functionality, please the eye, and make communications easier between design and development.


Design Systems

There’s been a lot of talk about design systems in our industry lately. Companies worldwide are starting to bring together their online brand in one language. The brand may have a variety of digital touchpoints such as websites, portals, microsites and apps. Though they may be created by different companies, it shouldn’t feel like it. Each touchpoint needs to work together to create a system that bolsters the brand through consistency by creating components from modules that exist across the products. The image below shows how this system works.

Design Systems Structure

Because of their organization, design systems create components that can withstand the test of time. Even when designs change over time, the system is setup in a way that requires little development restructuring.

For 2018, we will start to see companies tightening their branding by becoming more efficient with their use of components across web and app systems. This will allow them to have the capacity to start investing in more fun techniques (like those you’ll see below) while future-proofing their investment. While a very technical trend, it’s promising to the innovativeness of design to include more of the trends you’ll see below and evolve those to the latest technologies.



Another exciting event happening this year is the launch of a new design tool from InVision called InVision Studio, promising ease of use with a setup similar to the popular design app Sketch. Unlike Sketch, InVision Studio will have the capabilities to make page interactions, microinteractions and animations quicker to design and translate to development. The ease of integrating this new tool means we will see more animations across the web and that these transitions will be faster to implement. The ultimate polish on a digital experience, animations can help give brands a more modern feel, as seen in the examples below.

Page Transitions

Page transitions ease the experience like a movie guiding you from page to page.

Page Transitions - Ten Twenty



Page Transitions - Invision Labs

Source: InVision Labs


Microinteractions are those tiny visual cues that let you know what is happening, to again guide you through the experience smoothly.

Microinteractions - Webannie HS2 Solutions Hackathon

Source: - a hackathon project by Bounteous

Microinteractions 2 Webannie HS2 Solutions Hackathon

Source: - a hackathon project by Bounteous


Breaking the Grid

Over the years, we’ve seen the responsive web world inch toward being able to handle visual design more similarly to what we commonly see in print.

One such design pattern used in print is breaking the grid. It’s an illusionary effect because everything is still technically on a grid. Designers are able to manipulate this grid and make it look optically more free flowing.

Check out some of the ways designers are breaking the grid on the web:

Breaking the Grid - Interword



Breaking the Grid - PopularPays



Breaking the Grid - Tallence



Resurgence in '90s Design

In the post-material design world, the latest trend making a comeback is a nod to ‘90s design which was inclusive of pastels, electric color palettes and geometry. Inspired by fashion and home design trends, it brings back an “I Love the 90s” vibe which can be seen in the examples below:

90s Design - Upperquad


 90s Design - Confront



With new tools and advancements in design systems, 2018 is sure to bring some impressive digital design trends, with new ways of implementing nostalgic styles and hints of motion in the mix.