The next wave of web design

The Outerbase website is an interesting case study in current design trends.

I fired off a quick tweet about it last week but wanted to expand on the ideas in a more polished article.

Here’s my thinking on how to stand out as web design trends evolve 👇

Dev tool impact

Dev tools have heavily influenced web design trends over the last few years. First it was Stripe, then it was Linear, and now there are dozens of extremely high quality websites all offering their take on a mostly consistent aesthetic:

• subtle glows

• gradients

• transparency

• blurring

But now we’re entering the next trend cycle 👇

The AI era is upon us

Back in May I came across Aaron Rolston’s portfolio and immediately knew that using generative images to frame mockups was going to be a thing.

So I wasn’t surprised at all to see this tactic on the new Outerbase site 👀

But they take it a few steps further and use generative images in ways I haven’t see yet…

For starters, each database type has its own generative hover state which I love.

They’re even creating custom images for each of their partner providers 👀

This is a pretty significant departure from what I'd say has been the dominant style of leaning into a brand's primary color with lighting, texture, etc.

So the question is… what happens when this trend accelerates? How do you stand out in a world where anyone can quickly generate beautiful graphics and imagery?

Well… believe it or not I have a few ideas👇

Standing out in today’s landscape

In my original tweet I cited Intercom’s redesign as the website that kicked off the whole AI-generated image trend. Only to be reminded 10+ times in the comments that these were all done by human artists 🤦‍♂️

The fact that I thought this was AI speaks volumes about the state of design today.

It is SO EASY to make something beautiful… and very difficult to tell what remains human.

It reminds me of this idea from Val Tetu:

“AI changes the economic equation of doing great things: the opportunity cost of doing something great is increasing as the cost of doing something mediocre is plummeting”

We’re in the early innings of generative imagery for web design, but one thing is already crystal clear…

A pretty image (like the one above) isn’t good enough any more. Because they’re about to be on every website and we all know it took you <10 minutes to make.

So you have to get more creative 👇

1 — Establish conceptual motifs

Perplexity’s brand team is undeniably crushing it on Twitter right now. But why? Their retro futuristic aesthetic is certainly nice. But that’s easily copiable.

IMO what separates Perplexity’s imagery is the quality of the underlying metaphor.

Anyone can generate a stunning landscape at sunset. But it takes skill to come up with a visual representation of “bicycle for the mind” and effectively tie it back to the brand.

As designers we’re good at establishing visual motifs… but how can you use generative art to establish conceptual motifs?

2 — Find subtle use cases

When a generated image is the show, it can feel cheap.

I’ve lost count of how many onboarding mockups I’ve seen where the left half of the screen is a picture of someone gazing at a mountain landscape. That’s going to grow old quickly.

But maybe there’s a more subtle way to use on-brand imagery?

Take the background of this hover state for example 👀

Using generative imagery to add subtle visual interest makes a lot of sense to me.

This is how I approached the design of the /ideas page too. I could’ve easily made each article’s cover photo the focal point of the design. Instead I turned it into more of an abstract pattern.

3 — Add some motion

I can find an image I like, copy and paste it into Raycast, and reverse-engineer a prompt to feed into Visual Electric in ~90 seconds.

But once you add a bit of motion, it creates a feeling of quality because you know you can’t replicate it as easily (even if it’s 8-bit flames on a rocket ship 😅)

“[Animations] take some of the edge off of ‘they just used AI to make this’”
— Anthony Hobday

It really doesn’t require anything too complex either. For example these subtle leaves are probably my favorite part of the Agora website and make the entire page feel premium 👀

Closing thoughts

I think this tweet from Joe Greve sums up how I’m feeling nicely. He says:

“I’ve been unable to decide on if I want to use generative art on a marketing site I’m working on… it feels so cheap on one hand, but is frankly REALLY good on the other”

He’s right. It is good. And to deny its quality feels like burying your head in the sand.

So if you want to differentiate as a designer, it’s going to be hard to do so based on the art alone. We have to push past slapping a pretty picture on a website and identify more creative use cases. Hopefully this article sparks some ideas of your own :)