Web design trends to watch in 2018

Defining the future of design

Discover the trends, techniques, and tools that will define the future of web design. Plus, grab 6 free Webflow templates along the way.


Designers are going off the grid on the quest for more creative and engaging layouts. Broken grid layouts give images and text a fresh new way to interact, producing beautiful juxtapositions of bitmap and letterform that are unattainable in more restrictive layouts.

Examples of broken grids

Behold the brutalism. Designers embrace Brutalism as an open space to do what they want — not what they should. Balenciaga and Gucci, for example, have jumped on the brutalist bandwagon to produce unforgettable experiences. 

Examples of brutalism

The era of minimalism gives way to the visually enticing, emotionally evocative, and truly unforgettable maximalism. Designers embrace maximalist sites that demand more from visitors, and in return, deliver a unique and stand-alone user experience.

Examples of maximalism

Illustrations bring brand messages to life and modern designers use them to draw in and pique the curiosity of every viewer. Free from photography’s representational risks and challenges, illustrations tell universal stories in entirely new ways.

Dropbox’s rebrand late in 2017 reflects this growing trend towards the colorful, abstract, and lively illustrations we expect to see more of in 2018 and beyond.

Organic shapes

Leading brands and designers abandon strict grid layouts and sharp edges in favor of softer, organic shapes and curved lines. Bolstered by vivid colors, these organic shapes produce a more approachable and memorable user experience.

Stripe, for example, went way out of the box with freshened up designs on their homepage.

Examples of illustration
More pervasive interactions & animations

Designers now have the tools to guide user behavior using interactions and animations. Information is no longer static as motion and interactivity deliver brand messages in a memorable, and often delightful, fashion.

Scroll-based behavior

Designers embrace scroll-based behavior to create more immersive experiences. The expected, scroll-based behavior is transformed into miracles of subtle animations, calling attention and telling a story. The result? Visitors don’t miss vital lines of copy or a conversion-driving form.

Page transitions

Designers transform the expected process of entering a new page into a delightful experience. Designers embellish page transitions with effects and animations to produce page progressions that are something to behold. Some of these effects are able to tell stories of their own.

Examples of interactions & animations
The video element

Video calls shotgun in web design as faster internet connections and higher bandwidth enable a more consistent and reliable user experience. Designers are using the power of video as a visual tool to that can transfix visitors and communicate brand message in ways static elements can’t.

Examples of the video element
CSS grid

CSS grid, "the first real layout system for the web," gives designers almost God-like control over the screens before us. Designers are taking advantage of CSS grid to precisely craft layouts both vertically and horizontally.

Examples of CSS grid

The Variable Fonts Project teaches the old, single-font dog a few new tricks, allowing it to behave like multiple fonts. Designers are using this tool to manipulate a single font file into different forms, without calling 16 different fonts from the CSS.

A resurgence of serifs

Once upon a time, non-retina screens and poor font support made it difficult — and downright risky — to use serif fonts. Those days have given way to robust screens and font rendering technologies that have set the stage for an elegant renaissance for serif fonts. Readable, clean, and elaborate — serif fonts are stealing the scene, and screen.

Examples of well-applied serifs
Web books

Designers are ditching the familiar, gated PDF approach to ebook distribution in favor of web books — ebooks, built specifically for the web. They compile content into one strong, well-designed, and easily accessible piece you won't just download and forget.

Get these web books
Immersive, multimedia long-form

Now more than ever, designers are resisting the temptation to simply paste long-form content into a text field and call it a day. Instead, they’re embracing innovative ways of telling stories packed with text, video, sound, charts, graphs, and much more. The result? Stories and brand narratives that come alive, enticing the reader to dig deeper.

Examples of long-form
Floating menus

Designers are beginning to take fixed navigation one step further by liberating it from the rest of the site design. The result? A comforting navigational dashboard, forever at your fingertips.

Examples of floating menus
Design systems

Design systems take a modular approach to crafting digital experiences, driving consistency and efficiency for designers. Instead of starting from scratch with every UI, designers can mix and match ubiquitous components to produce unique and powerful experiences for any context.

Examples of design systems
The hunt for the perfect tool continues

Emerging tools blend, rather than bridge, design and development. The design deliverable — once static and requiring numerous feedback loops — is becoming dynamic. What tools are propelling this future for designers? Our experts weigh in:

Best for:
Design, development, prototyping, animation, content management, and handoff to development
InVision Studio
Best for:
Design, prototyping, and handoff to development
Best for:
Design, vector drawing, collaboration, static prototyping, and wireframing
Best for:
Design, wireframing, and vector drawing
Adobe XD
Best for:
Prototyping and wireframing
Best for:
Hand off to development
Best for:
Prototyping and animation
Best for:
Prototyping and design systems
Best for:
Prototyping and animation
Principles-first design

The principles that brands are founded on have now become the guiding light for design decisions as well. A brand’s principles provide a mission, vision, promise, and now, a blueprint for both content and design.

For example, at Webflow, our mission is to empower designers, entrepreneurs, and creative professionals to bring their ideas to life on the web.

That mission infuses everything we do, from our visual design language to ... our literal language. It means that we focus relentlessly on making the technical as clear and accessible as possible. Without losing the meaningful side of technicality.

You can see that in the names we’ve chosen for our products: the Designer. The Editor. The CMS. Hosting. We’re not trying to be fancy here. We just want you to know what you’re working with. Everything we build should literally do “what it says on the tin.”

Because brand principles shouldn’t be empty, abstract concepts.

They should help you and your team make better decisions, faster.

Broken Grid

Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

Clone the site
Grab your free, trendy templates

Each of these 6 templates take one of 2018's top trends as a starting point. We can't wait to see where you take them next.

Start building 2018’s next big thing — visually

Discover all of Webflow


World-class hosting in a few clicks


The power of code — without writing it


Craft precise animations and interactions


Content management, meet visual design


Write and edit — right on your site


Design, build, and grow online stores