As the season begins to change, so do some of the trends that web designers use in projects. From fuzzy folds to interesting image frame edges to neon color, there’s a lot to be excited about.
Here’s what design is all about this month.
1. Blurry Is Back
Blur as a design element is gaining traction in a big way. This web design trend can look like many different things and be used in different ways.
From blurring backgrounds in images to blurring foreground features, there’s a use case for just about everything.
What makes blur a very usable design element is that it’s easy to create and use. Blur can be created in Adobe Photoshop or similar software, with CSS, or be part of the way an image is created. It can be soft or hard, with or without color, and any size or shape.
Its versatility and flexibility make it a very popular choice for backgrounds and foreground elements, as you’ll see below.
Future London Academy uses blur in an unusual way with a foreground blur feature that darkens the edges of some oversized letters. The technique is repeated on the scroll bar and on some images as well.
outcrowd uses background blur with animation to help create visual focus while scrolling. The colorful blurry circles become smaller and less blurry as the user moves down the page to add to the story the design is trying to convey.
Bricklayer Dao uses a blur in the background, almost like a red “sunspot” to help create a focal point in the middle of the screen. Note that the eclipse does not have a specific shape here; it’s almost a swash that leads the eye across and down the screen.
2. Interesting Edge
Most of the containers you see for images and videos online are rectangular or circular. Straight lines help separate content elements.
But more designers are thinking outside the box – literally – with interesting edges for content elements. (Note that this web design trend is quite difficult to pull off and you’ll need to really think about making these shapes work together, especially when you switch from horizontal to vertical orientations. )
What all these projects that use interesting edges have in common is that images are placed behind an element that isn’t a shape you’d normally expect. Most also include some element of motion, from loading or scrolling animations to video. (You should click through to see how each of these examples works.)
Lenka Daviesova has an image behind two cutout shapes that includes a simple load animation. What makes this interesting is that you don’t feel like anything is missing from the parts of the image that you can’t see. Your brain fills in the blanks for you.
Ho Daigi Mountain Resort has moving images behind a mountain-shaped foreground element. This shape helps provide information about the site and is a smart way to stick the logo into the lower third of the home hero area. The edge of the mountain is carried through each scroll bar on the home page design.
Kafeaterra uses interesting edges in a completely different way. Although the shape is a common rectangle, it is very dramatic and text elements enter the space. It is so unexpected that the overlapping of the elements without a real space of their own sets a very specific tone for the subject.
3. Neon Yellow
One of the hardest color choices to portray on screens is a trend – neon yellow.
Neons are traditionally difficult because they can create visual and contrast challenges and don’t always look as intended due to user settings. Neon yellow is everywhere right now with a black or dark background. (Perhaps due to the popularity of dark mode.)
The commonality for most of these trendy designs is that yellow is tasteful and not widely used, for the most part. Too much neon can be hard to read or it can irritate your eyes.
There also seems to be a consistent vibe with these projects that feels a bit masculine and bare.
Metaluxe uses neon yellow for text accents and a giant QR code on the home page. The color is designed to help you easily transition content from top to bottom to the call to action.
Robbert Lokhorst uses neon yellow – two colors here, actually – in the logo, as button highlights, and for keywords in the all-text hero field. Note that the logo and button colors are more yellow than the original text.
Tortoise & Hare Agency CX uses neon yellow on a black and white video roll as text and button speech. While this can be a tricky combination, the added shading in the video helps create enough contrast to make it come together. In general, neon yellow is not recommended over white or light colors because there is not enough contrast to read it. Here, however, they do a great job of pulling the pieces together.
Conclusion
One of the interesting things about this collection of trends is that we’re seeing new iterations of things that were popular in the not-so-distant past. Fuzzy was a big trend a few years ago and it seems to be making a comeback. Neons seem to come and go regularly.
If nothing else, these “recycled” trends are a good reminder to file work well so you can dig out some of those old ideas when they come back into fashion.
