Menu Close

This article is brought to you by Constantino, a renowned company offering premium and affordable website design

You have to get creative when you lack a strong visual. This month’s design trends roundup focuses on this concept.

Have you ever started a design project that was just hard to show? Or maybe one that didn’t have many video or photo assets to work with? That’s when designers have to stretch their creativity to come up with interesting and engaging concepts that will still keep users scrolling and clicking.

This month, our design trend focus is on three trends that suggest that things are somewhat difficult.

Here’s what’s trending in design this month:

1. Homepages with Typography Focus

When you don’t have many other elements to work with, the go-to option is often typography. There are so many great and fun ways to use text elements to grab user attention and tell a good story online.

The challenge with this design trend is thinking responsively. You have to take special care with how text elements respond on different device sizes to ensure that everything is still readable and your effects come across seamlessly. (This is sometimes tougher than it might seem.)

The reward here is that users know immediately what your website design is about because there’s often large text on the screen that tells them right away. No guessing here!

Stellare uses its brand name with a color/background motion technique and a clever pun to grab your attention right away. (Did this technique work for you? It made me grin.) It works in part because the design is so simple. You don’t need to know what the video is in the background to understand the text. Everything is easy to read with simple text choices and a high focus on one key word.

stellare

Engagency is a similar business type – also an agency – but takes a totally different approach to a design-with-typography homepage. Here, the visual element is emphasized by contrast, from a dark background with stark white lettering to a single word with a colorful gradient for attention.

engagency

Terra takes the most stark approach of all, using whitespace to help users focus on the type element. There’s also a square mouse hover option that matches the shape on the screen to tie everything together in a simple but connected way.

terra

2. Overlapping Elements

When you lack a single key piece of imagery, a better option is to use space or allow elements to encroach on each other’s spaces to create visual interest. This is another rather tricky technique that can be difficult to design on multiple screen sizes.

On the other hand, when it works well, this technique can have a stellar effect.

Overlapping elements can include text against background or foreground elements, images or video and text, or even small images, illustrations, or animations that overlap other elements (text or imagery).

When designing with this trend, it is important to pay attention to how elements interact so that everything remains readable and so that important information is not covered up.

Cresci’s uses an overprint effect to make text elements seem to merge in and out of the background. The homepage design is stark, but the texture, oversized text, and overall effect are definitely attention-grabbing.

crescis

Christina Hohner allows both images and text to overlap in various ways on her homepage. She’s trying to emphasize multiple things by showing what she does and using images to match.

hohner

Pudding Studio uses a fun little animation with a funky typeface in the header to create a lot of visual intrigue. What is this website all about? Thankfully they follow up quickly with a description so the user understands right away.

pudding

3. Ways to Show AI

How do you show artificial intelligence? Over the last few months, we noted multiple trends with different ways to show it, including using robotic figures and text-heavy designs.

The focus on how to show AI has shifted again with things that just look kind of high-tech, but aren’t focused on putting a “face” to the technology.

OpenCall.ai uses an animation that maybe resembles a soundwave to show their AI technology. It works because there are enough words and descriptors on the screen that you don’t really need the image. It’s designed to be small for a reason.

opencall

Walbi uses two effects at the same time to show their AI – a special text treatment on some of the letters/words in the main headline and the green pulsing element. The latter is becoming almost a trend of its own to show artificial intelligence “thinking.”

walbi

Apple is getting in on the AI game with “Apple Intelligence.” The landing page shows different elements that iOS is using AI to make your life better. Some of the screens may be recognizable, while others are previewing something new in an upcoming update. This example is the closest to showing AI in action of any of the above, but it also requires the user to already have some familiarity and connect some dots on their own as well.

apple ai

Conclusion

The most interesting trend here is the last one. While the first two have made rounds and trended in the past, showing AI is a pretty new concept. How do you show computer processing?

It’s a tough concept, but thinking outside the box helps. Do you think you could find an interesting way to show this on your own or would you borrow from a concept you’ve seen elsewhere. It’s great food for thought … and best to think about it before one of these projects comes your way.

We #StandWithUkraine.
Learn how you can help too!

#Stand­With­Ukraine

We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need read below and also visit this page: Learn more

We don't know how long the war will last. But what we do know is that we can't stand aside and watch.

The fastest way you can help too is to support Ukraine financially. The National Bank of Ukraine (NBU) has opened a multi-currency account for that purpose. Learn more

This account accepts donations in US, Canadian and Australian dollars, euros, British pounds, Swiss francs, yuan and yen.

UA823000010000032302338301027

Also accepting cryptocurrency donations – the fastest way to help. Learn more

BTC – 357a3So9CbsNfBBgFYACGvxxS6tMaDoa1P

ETH, USDT (ERC-20) – 0x165CD37b4C644C2921454429E7F9358d18A45e14

If you want to volunteer in the army of Ukraine and help with deeds, then here are specific instructions how to do this: Learn more

Spread the word!