Discover the web design trends, techniques, and tools that will define website and digital product design in 2018 — and beyond.
It’s easy to get a little snobby about trends in creative disciplines. After all, there’s nothing creative or innovative about keeping tabs on “what’s hot” — unless maybe you’re doing so just to continuously buck the trends.
1. Broken grid layouts
In designers’ neverending quest for more creative and engaging layouts, the grid we’ve always relied on to bring harmony and logic to our layouts has itself become a kind of constraint.
Which isn’t to say that broken grid layouts ditch the concept of the grid altogether — instead, they allow images and text elements to drift into and across the gutters that usually serve as hard stops in more sober layouts. Here, the usual discreet boxes of images and text begin to overlap and converge, often creating beautifully unexpected juxtapositions of bitmap and letterform.
2. Illustrations take center stage
One of the more interesting challenges I’ve witnessed in the world of marketing digital products is that of image selection. I’ve watched whole design teams mull over the debate, usually ending up in one of two places:
- Product UI shots and GIFs
- Editorial/lifestyle photography
The former emphasizes the in-product experience, features, and functionality, while the latter tries to emphasize the product’s human dimension: the effect it has on people’s lives.
But heading into 2018, we’re seeing — and will continue to see — the work of illustrators attain an all-new prominence in both marketing and product design.
Why this is happening fascinates me, and I can’t decide exactly what it is. Perhaps it’s just the same cyclicality we’ve long observed in the world of fashion — after all, illustration dominated the advertising world up till the late 60s or so.
Or, maybe Dropbox’s design team was onto something with this explanation of their new illustration style:
We create rough sketches using graphite, then pair them with colorful, abstract shapes to bring the creative process to life. Our style is inspired by the moment when you first have an idea, and serves as a reminder that the “canvas is only blank until you make the first mark.”
I mean … they had to be onto something with this redesign … right?
Illustrations can also be very powerful in bringing more abstract concepts to vivid life, as you can see in Shopify’s Polaris site. With a single drawing, Shopify clarifies that the Polaris design system is intended to serve as a guiding light — a north star — for every member of the team.
Finally, it’s worth noting that illustrations can also neatly resolve some of the representational challenges posed by photography.
We build our digital products for a staggeringly diverse array of human beings — but the moment you capture a photo of a real human being and pop that photo into your website’s hero, that human being personifies your user. And leaves all other users unrepresented.
In contrast, the human being illustrated in Shopify Polaris’ hero image is just a human being. Specifiers like race, gender, nationality, and much more are left undefined, making it easier for any of us to project ourselves into the role of that lone thinker, contemplating the creative possibilities illuminated by a guiding light.
3. Brutalism reaches mainstream status
Early in 2017, we published an article touching on the rise of brutalism and sought to answer the why of the emerging style:
Brutalism … is ripping open a space where designers can do what they want, rather than what they should. The works created here eschew all the optimization advice and best practices lists in favor of looks and effects that live in the jarring, and sometimes border on the offensive (to expectations, anyway).
So you can imagine our surprise when, of all site types, two ecommerce outlets jumped on the brutal bandwagon:
Balenciaga
Gucci
4. More organic and oblique shapes
Nature abhors a straight line.
–William Kent
Both web and mobile design have been dominated by card-based UIs for several years now. Until recently, most of those cards were (mostly) sharp-edged and right-angled, exposing the geometry of their underlying divs in an almost modernist concern for the materials of web design.
That’s changed in a big, big way in 2017. Now, every app from Google Now to Twitter to Facebook boasts almost aggressively rounded corners on their cards, input boxes, profile avatars, and more.
And it’s not just those primary elements growing more organic shapes. Backgrounds now abound with almost amoeboid blobs of color, dramatic diagonals, even dashes of the real world rendered almost cartoonish.
But designers aren’t just turning to organic curves in their never-ending search for a way out of the box. Many simply give those boxes a twist out of their usual 90° angles, freshening up their designs with a simple change of perspective, as on Stripe’s homepage.
All this isn’t to say that right angles are going to go the way of the dinosaur. We’ve also seen several sites double-down on straight lines — and mix them effectively with more organic and spherical shapes.
You’ll also notice the emergence of “flashing” or “vibrating” colors in many website UIs. While these color combinations create incredibly striking effects — including ghostly afterimages that seem to linger in your eye as you scroll on — it’s worth noting that they represent iffy territory from an accessibility perspective.
While accessibility is usually thought of as making a design user-friendly for the disabled, it’s worth remembering that even those with color vision can have a hard time with jarring color combos.
