20 web design trends for 2019 | Webflow Blog

On the other hand, there’s the suggestion that “creative thinking is knowing just how to hide your resources”– a quote commonly credited to Albert Einstein, though more probable created by satirist C.E.M. Joad. (Appropriate, no?)

Either way, it’s not difficult to understand what’s trendy. Just raise your eyes off your smartphone and have a look around– or do not!

What issues is comprehending the hows as well as whys of patterns’ appearance and fostering. Since at the end of the day, trends have a lot to inform us about our social moment: what we enjoy, what we despise, what we want to approach. The closer we reach understanding those points, the closer we get to getting in others’ heads– to empathizing with them. As well as, really, to understanding ourselves.

Besides, when the art chroniclers, fashion movie critics, as well as internet designers of the future look back on our existing era, what they’ll see and also discuss will be the leading fads of our day. When they talk about the looks of the 20teens, they’ll really be discussing what was fashionable– and what threw the patterns.

Trends, then, are background planned.

With all that in mind, allow’s see what future chroniclers will be saying about today. With a little aid from a few contemporary tastemakers.

Our very first factor is Zack Onisko, Chief Executive Officer at

@dribbble, amazing dad, guitar noodler. Just when you believed the future was level, brand names like Pitch as well as Red stripe are tossing their brand name weight behind a new-old-fashioned type of picture: 3D.

Not content with the cut-out illustration design popularized by Slack, developers are looking to include deepness and also realistic look to graphics designed to blur the boundaries between the digital and also real worlds.

In a sense, this hones the comparison between electronic items and human beings, even as it brings them together right into imaginary rooms where people can understand and manipulate digital elements (like the graphs as well as symbols in Pitch’s hero section). You can’t aid but think about the popular assertion that Facebook’s actual interruption is the method it makes us, its customers, right into the item– and question if designers aren’t unconsciously pressing against this idea.

Naturally, if that’s the case, this seems like a merely step-by-step advancement. These designs don’t a lot grant people their humankind back as make them from level pictures right into animations.

Keeping that in mind, possibly Red stripe’s much more reasonable charge card computer animation provides a glimpse of a future where the physical and also electronic can be provided thus.

2. From spirited wordmark to major logo– aka, the Helveticization of brand identification

In 2018, we saw numerous extremely visible brand names transform from wonderfully eccentric brand identities to much more … cough … anticipated … sans serifs.

Or, as I such as to put it: All brands identifications ultimately lead to a Helvetica version.

MailChimp in cursive, camel case on the left and lowercase sans serif on the right
Uber's old hyper-masculine, squarish typeface logo in allcaps on the left and new, custom, sans-serif typeface in titlecase on the right

< img src ="https://uploads-ssl.webflow.com/583347ca8f6c7ee058111b55/5c119a2cf12c3e60fcb9236f_iG0Q38Z9a_jq4VrUYAcdRkYK_L8_7EB5a17sPVj70rcV1XvLDmuEitCr45OSG25cZkbOa0dLOeyIZUcrIOr8j3uW7sRJBSWxI9R0-Wuu0fV5ZbgX9Oex0lxxFMpGGXMorGFDfV9M.png"alt =" MailChimp in cursive, camel case left wing and lowercase sans serif on the right "> Granted, none of the 3 brand names we desire went right to the old standby. And also one– Mailchimp– developed in a direction that truthfully really feels even more suitable for a brand that’s made distinctive voice as well as playful brand name properties a keystone of their advertising. Still, for each and every of these business, the rebrands can feel a little bit like a too-familiar advancement towards what you might

not-unfairly call staid, boring corporatism. That stated, you have to wonder if this change from recognizably unusual to ubiquitously voiceless involves the idea of cognitive fluency: the suggestion that we are most comfortable with that said which we have actually experienced prior to.

With the globe’s greatest, most familiar brand names all boasting serif-less logos, it’s little wonder that a step in that instructions is seen as the trademark of a company acquiring maturity. Because sense, this is a type of meta-trend we anticipate to see over and also over once more, and also 2019 is not likely to be an exemption.

3. Outlined type

Like any design-driven brand name, we’re big fans of typography below at Webflow, so we’re constantly looking for brand-new trends in text (seek more listed below!).

So when Zack called out the arising fad in detailed kind, we leapt to see what the brand-new point in letterforms held for us. Ends up– it was vacant.

There’s something elusive regarding this sort of half-there, half-gone text that instantly attracts and also holds the eye, demanding that you comply with the letterforms to their natural final thought. That makes it a pretty handy strategy for some remarkable branding, as in this expedition for Less heavy Resources:

In a globe where chunky sans serifs dominate branding, an aesthetically lighter letterform absolutely does capture a feel of standard– yet various. Which in the end is what any kind of new brand name requirements: a sense that it’s both cutting edge and also trustworthy.

4. The continued increase of brutalism

We stated it last year, and also we’re saying it

again this year: The future will be brutal

.(Also actual? I recognize. Sorry.)There appears to be something especially attractive regarding brutalism’s in-your-face aesthetic nowadays. Whether it’s as an all-natural pendulum swing far from the “clean” and “marginal” style that just recently controlled the internet– a denial of the cutesy kindness of a million brand name’s voice and illustrations, a middle finger in the face of the supposed “homogeneous web,” or an act of resistance to the increasingly unique blend of fact as well as fiction the web subjects us to daily– there’s no rejecting that brutalism has actually vacated style’s subculture and right into the fully branded spotlight.

Need examples? We obtained you:

As well as it goes means beyond interior meeting posters and repetitive ideas. Squarespace’s recent rebrand welcomes brutalism by way of New york city City’s gritty visual aesthetic as well as brash character:

White text on a black baground that repeats the words "slightly left of center" in a stylyzed way that bends the text to create the illusion of stacked boxes

Brutalism’s staying power recommends an intriguing element of style trends’introduction and also adoption that reminds me of the pop punk phenomenon of the late-90s( below’s to dating myself!): Whatever the pattern, no matter exactly how “defiant”or “in your face”it could appear initially glance, it can and will certainly be co-opted for the prominent market. And that development from “subcultural” fad to mainstream essential can cross multiple years.

As high as I have actually come to be a follower of the bold trailblazing brutalism attempts to advance, I would ask designers one point:

Bear in mind, please, that there are individuals around that find frenetic animations filled with excessive, fragmented type as well as flashing colors very disorienting.

Style, like any other innovative pursuit, doesn’t need to be for everyone regularly– however remember that if you choose to include such points in your style work, you are determining that your work isn’t for those that will certainly locate it dizzying, abominable, and overwhelming.

Yet these things aren’t essential to a brutalist layout. If you’re wanting to create an easily accessible take on brutalist looks, take a look at David Copeland’s Guidelines for Brutalist Layout, which advises us: 5. A lot more varied, nonconforming illustration designs In her surprisingly detailed as well as thoroughly interesting case study of her help Slack, illustrator Alice Lee reminds us:

And while it’s simple to see Alice’s work kicking off a progressively identical illustratory design among SaaS item companies and also other start-ups, it doesn’t take a load of browsing to find designers besides Alice extracting the rich veins of operate in other areas.

Such as the photocollage design being checked out at Medium and Intercom. Yet we’re likewise seeing individuals influenced by the physicality of paper craft:

Three-dimensionalized handles Alice’s mostly flat cut-out style:

And in hugely colorful physical/digital landscapes, such as that seen in CrowdRise’s present homepage:

It’s not hard to see echoes of Alice Lee’s work for Slack in all of these– her voice has entered into the modern-day style zeitgeist. Yet each of them extend her voice in interesting means, showing the creative potential inherent in looking outside what every person else is doing, as well as blazing, even if tentatively, your very own path.

We’re also seeing developers embracing extra abstract and also surreal approaches to illustrate less concrete ideas, like staying scrappy:

Or”lifecycle advertising”: As an abstract art follower, I’m quite looking forward to seeing much more expressive, allusive items like these turn up throughout the web.

6. Extra daring and classic kind

While logo layout work may be remaining to fad towards homogeneity, we as well as Zack are seeing some even more eccentric options appearing as well, such as Mailchimp’s fostering of the (in)well-known Cooper Black font (of Tootsie Roll fame!) for its brand name font:

Abstract shaking the wonderfully thick Vesterbro Black (and Regular and also Hefty) in combination with Grilli Kind’s America Mono:

And also the fantastically plump collection(which isfull of

mirrors of Alice Lee!), Humaaans. We called out the renaissance in serif font styles in 2018, yet it appears that 2019 might be putting its quirkier, extra timeless foot onward– at the very least in the headings. Each of the retro-ish faces above function complete weight ranges, making them best for the versatility that content job needs.

Many thanks for the trendspotting, Zack!

Our following factor is Sacha Grief, a developer, designer, as well as business owner living in Kyoto, Japan. You might know him from his superb (and marginal) curated website and newsletter, Sidebar, or Vulcan.js. He was kind enough to do his own brief articles, so here’s Sacha’s pattern

checklist, in his very own words:

7. Inclusive layout Numerous lines have actually currently been written about the value of accessibility, yet rebrand it as “ Inclusive Style “and you’ve got an entire new unclaimed buzzword to

write publications and essays regarding! All joking apart, thinking of the demands of a varied collection of customers is never ever a negative thing, as well as if it takes a stylish principle to assist us do it, I’ll take it.

Editor’s note: As you can see in the screenshot over, supporters for inclusive layout typically appeal to exactly how inclusive/accessible layout can help brands fulfill business goals. The logic is sound, however they should not need to.

It’s an easy act of humankind to include and accommodate others, as well as if you construct inclusive reasoning into your style procedure, the prices are no more than incremental, and also can ultimately boost your user experience for every person.

Besides: we’re all disabled occasionally.

8. Style + code

While we were all agonizing over whether designers need to discover to code, several of us silently did just that– and used our newly found understanding to develop much better design tools. We’re seeing a new plant of design devices like Figma or Framer X that allow tighter integration with coding with APIs as well as plug-in systems.

Editor’s note: As well as tools like Webflow, which avoid directly over APIs and also plugins to let you layout code. Oh, and if you’re a Figma follower, you must take a look at developer Charli Marie’s video on converting Figma layouts into useful Webflow

sites: 9. Strong typography For some reason, any type of list of style trends always has to consist of “strong typography.” Seeing as typography has been around since 1439, you can’t truly go wrong with that said one. (Well, except for that short duration back in 2013 when Apple choose everything ought to currently be embeded in Helvetica Neue Ultra Light).

Editor’s note: Guilty as billed, Sacha. A lot more on this listed below. Our following contributor is the inimitable Pablo Stanley. When Pablo’s not developing excellent points for InVision, or wowing the style world with his insightful, colorful pictures, he appears to really appreciate excavating into Webflow.

Especially considering that we introduced …

— Pablo Stanley

For several internet designers as well as developers, flexbox has given a sort of holy grail. It responds to the olden inquiry of exactly how to effectively focus points, both up and down and also horizontally. It makes formerly intricate formats relatively simple to apply. It even (rather essentially) allows the legendary “ holy grail “layout. Things is, it doesn’t offer you regulate over the straight and also upright placements of aspects at the same time. That is, it’s a this or that device.

Get in CSS grid: which lets you position a thing specifically where you want it, both vertically as well as horizontally. Sounds straightforward, however the reality is that it opens a level of expressive freedom and also control that previously just print might offer us.

As well as yet: nobody is using it.

Well, practically no one. Especially when you consider it relative to flexbox.

According to Chrome System Standing, approximately 83%of web page sights include flexbox. CSS grid? Just 1.5 %, roughly. Why, you ask? Well, the answer, as it often is with web format

devices, is unequal assistance. Or, extra particularly, the never-unexpected absence of assistance (of doubtful assistance) provided by Web Explorer (IE), which regardless of being deprecated by Microsoft, is still overmuch trusted by many businesses.

Still, IE use most likely isn’t substantial sufficient to totally describe the lack of grid adoption. So, think about that the statistics mentioned over concentrate on page sights, not pages. That implies that it’s the lack of fostering of grid by major sites that more probable explains grid’s apparently poor efficiency to day.

Which makes sense. These significant platforms possibly only went all-in on flexbox fairly just recently. And rejiggering the formats of websites that draw in billions of individuals is no little task.

Fortunately, you most likely don’t encounter the exact same concerns in the majority of your work. And with Webflow, you do not even need to invest hours mastering grid’s syntax. You can simply use it. Today. Visually. For our next guest design thinker, I relied on Los Montoya, lead developer at social app Mappen and imaginative supervisor of Juxta Labs. Below’s Los in his own words:

11. Contrary approaches to shade based on market position

Words are how you communicate with your group to obtain work done efficiently.

Words are just how you aid a customer fall in love with your brand name.

Which sets the duplicate so large you’re forced to refine the sentence in fragments, not whole phrases. (Hence, in theory concentrating your focus.)

We’re also seeing this huge text fad emerge in imaginative menu styles, as you can see in the website of architectural firm Dot to Populate:

To stick with Dot to Populate for a moment, it’s also worth calling out an arising fad around taking advantage of the leading device of human-computer interaction: the humble arrow.

Because it plays such a crucial duty in the dynamics of human interaction with digital spaces, a number of us hesitate to mess with the cursor. But not everybody.

Webflow-using developer Niccolò Miranda has additionally place the arrow to more innovative work than aiming and also clicking on his portfolio website. On his homepage, the cursor hints you to click and hold, setting off an amusing computer animation of him hard at the workplace throughout the day.

However in 2018, that style began to transfigure. Developers grew tired of the centered heading as well as switch atop lovely picture.

However typical regions aren’t the only way to aesthetically connect distinct elements. There’s likewise the law of consistent connectedness, which explains why it’s clear, in the style over, that “It’s a Light” refers to the light visualized on the left.

Yet that realization has much of us “customers” asking yourself: is the cost of admission worth the return on investment? Has the transformation from mobile “phone” to pocket-sized supercomputer cost us greater than it’s brought us?

And also if that holds true: just how can we correct the discrepancy? Can we have our cake and eat it too?