It’s 2019, you’ve already got a couple briefs to respond to, but you have no idea what’s “in” this year. Fear not, I’m here to fill you in on all of the hot web design trends you’ll need to know to keep your brands on the cutting edge this year:
- Gradients, bold typography and color blocks
- Unique, broken and asymmetrical layouts
- Outlined typography
- CSS animations
- Custom illustrations and icons
Photo by Christopher Gower on Unsplash
You might notice some of these are trends that have emerged in the past few years. As the web continues to develop, we’re likely to see these trends evolve even further. With smartphones and devices getting ever-faster processing speeds, we’re constantly able to do more with the web than ever before.
Now let’s dig a little bit deeper into each of the trends. With the help of the fantastic web design award site, Awwwards, I’ve included examples for each trend.
1. Gradients, Bold Typography and Color Blocks
Last year, we saw gradients take the design world by storm. In addition, we also saw the emergence of large swaths of color accompanied by bold typography. Don’t expect this trend to change in 2019. Gradients are here to stay awhile, although they should be used in much more subtle ways than in the previous year.
“Jackie” website by Brave People via Awwwards
The Jackie website uses large blocks of color with striking bold typography beautifully. This website is a great example of how to pair simplistic product photography with this modern trend. The web design takes some elements of minimalism but creates a style unique to the brand. The aesthetic extends beyond website design as you can see the same trend applied to their packaging and printed material.
2. Unique, Broken and Asymmetrical Layouts
Graphic designers typically follow the guidelines of a grid religiously. To the uninitiated in graphic design, a grid is the underlying structure to a design made up of intersecting horizontal and vertical lines. Following the grid generally leads to making sleek, visually appealing layouts. In 2019, web designers are breaking the mold and experimenting with layouts that don’t follow any kind of grid structure. Although tricky, when executed well, these broken and asymmetrical layouts can lead to interesting and unique designs.
image: https://cdn.business2community.com/wp-content/uploads/2019/05/Shanes-Blog-Image-3.png
“Whitetail Gin” website by Impression via Awwwards
The Whitetail Gin website demonstrates how to beautifully create a website following the broken layout trend. Without the help of a grid, it can be easy for the layout to get away from the designer. Whitetail had no such issue and managed to create a modern website that has a sophisticated and high quality feel to it. There is an artful aspect to the design, thanks to the asymmetrical grid.
3. Outlined Typography
As mentioned above, we saw big, bold headlines take the web by storm in 2018. Although this trend isn’t fading, it is starting to feel a bit stale to marketers. In an effort for brands to stand out in a sea of sameness, we’ve seen the emergence of outlined typography. Taking cues from its predecessor, this typography is shown in bold and in a large font size.
image: https://cdn.business2community.com/wp-content/uploads/2019/05/Shanes-Blog-Image-4.png
“ACES Baseball” website by Mostly Serious via Awwwards
The style draws in the eye without being too overbearing. It is especially useful when contrasting with other type on a page. In the above example, the outlined type serves as an accent to the solid colored text. Expect to see more and more outlined type as we progress through 2019.
4. CSS Animations
Animations are nothing new to web designers and developers. This year, however, their use is set to explode. As the technology continues to develop, it will keep getting easier to create interesting and complex animations. Expect to see animations used in more places and with greater frequency. Traditionally, animations are rendered as GIFs, but we’re seeing more support for CSS-generated animations across the web.
image: https://cdn.business2community.com/wp-content/uploads/2019/05/Shanes-Blog-Image-5.png
“Your 2018 Wrapped” microsite by Spotify In-House/Active Theory via Awwwards
Spotify does a spectacular job showcasing the flexibility of CSS animations in their “Your 2018 Wrapped” microsite. The headline text does a barrel roll and the background and text color change when you hover over the “Connect with Spotify” button. Once inside the microsite, the user is presented with a buffet of sharp, finely tuned transitions and animations that together create a unique branded experience for Spotify patrons.
5. Custom Illustrations & Icons
There’s nothing more boring than a website filled to the brim with stock photography. The same can be said for stock icons and illustrations. That’s why we’ve seen more brands embrace the beauty of custom illustrations and icons. There’s a wide variety of customization within this trend. It can be as small as adding a logo to a generic icon, or as big as commissioning full-scale color illustrations for each section of a site. No matter what length you go to, adding a touch of customization goes a long way in branding your website assets.
image: https://cdn.business2community.com/wp-content/uploads/2019/05/Shanes-Blog-Image-6.png
“Camden Town Brewery” website by Studio Juice via Awwwards
The Camden Town Brewery website follows a lot of the trends mentioned in this article. They chose to utilize big blocks of color throughout the site with bold typography. As a way of distinguishing their look even further, they developed a set of custom icons for various sections around the site. Each icon follows a consistent look; a simplistic icon with a small-scale version of the logo worked in. Combined with the rest of the website elements this helps form a cohesive branded experience for the brewery.
That’s a wrap on this year’s list of the top web design trends. It will be interesting to see how these trends evolve as the year progresses. We’ll check back in a year to see what changed, what remained consistent and what’s new in the world of graphic design.
[“source=business2community”]
