Broken Grid
Brutalism
Illustrations
Interactions
Video Element
CSS Grid
Variable Fonts
Web Books
Long Form
Floating Menu
Industry Trends
Design Systems
Design Tools
Principle-first
Clonable Examples
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Catalysts of change in web design are larger than the evolving design techniques themselves. In 2018, the Webflow design team anticipates that the following industry trends will guide our design processes and work.
The power of the web lies in its universality. UX professionals and designers are becoming more aware of their responsibility to produce inclusive design solutions.
What does diversity look like in the future of web design? It's more than purple humans, but maybe those are a start.
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.
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:
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.
Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.
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.
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
