🤿 designing a unicorn

Somehow it’s become cool to diss design systems (Ivan’s recent tweet about Notion definitely didn’t help).

But I think the pendulum has swung too far and we’ve started throwing the baby out with the bath water…

Here’s why 👇

LET’S PLAY A GAME

Which product am I talking about?

1. They were named the top design tool of 2023 by Product Hunt

2. They were voted 2024’s top animation tool in Contra’s awards

Give up? The product is Jitter.

It’s like Figma but for motion design and it is blowing up right now.

For good reason too! Jitter makes it so easy to create really high quality animations. And there’s even a Figma plugin so you can bring your designs in with a single click.

So if you’re a designer… don’t sleep on this tool anymore 👇

📺 THIS WEEK’S EPISODE

Designing a unicorn AI startup from nothing

Imagine leading the design of an AI product that skyrockets to a billion+ dollar valuation in under two years…

That’s the story of Perplexity and today we get to hear from their founding designer and current Head of Design, Henry Modisett.

Some highlights:

• What it takes to thrive as a founding designer

• Why Henry likes hiring designers who can code

• The challenges of designing dynamic interfaces

• Why Henry didn’t want to anthropomorphize the AI

• The initial creative direction for the Perplexity brand

• The keys to making a consumer product cognitively fast

• Why Henry built a mini design system as his very first step

• a lot more

Listen on YouTube, Spotify, Apple, or wherever you get your podcasts 👇

Key takeaways

1️⃣ Starting with a design system

Before Henry had any idea what the Perplexity product would become, he built a component system in React as the first step. The goal was to give himself a toolbox to make it easy to assemble new features.

Many components are obvious (ex: you know you’ll need a grid, type system, color system, buttons, etc.). We don’t have to overcomplicate design systems. They’re the thing you invest in to move fast… not the thing you invest in once you have most of the interface figured out.

I go deeper in this week’s featured idea 👀

2️⃣ Empowerment through code

When you write code, you develop a stronger emotional attachment to the product. You’re also empowered to continually make improvements without having to go through engineers. The more removed you are from what ships, the easier it is to dish blame on someone else for an experience being janky.

“Having designers that can code is a hack…quality just happens”

3️⃣ Velocity is everything

Henry makes a point to prioritize velocity over exploration, debate, visual design, etc. And a big part of what makes that possible is empowering designers to make decisions. If it’s a UX question, the designer needs to make a call (”go with your gut and if you want to change it later you can”).

This is also why having designers who can code is key. Nothing is cemented. You don’t need permission to iterate after something ships.

4️⃣ Dynamic UI systems

At the root of Perplexity are UI systems that display dynamic content based on what the user searches. That means as a designer, you can’t possibly mock up all of the states and use cases. You have to think about interfaces as slightly abstracted (ex: “entity comparison” which can work for comparing dog breeds, restaurants, etc.). Part of designing a dynamic system is you have to be ok with percentage outcomes. Sometimes the formatting isn’t going to be perfect.

You’re designing the system, giving AI the tools to use, and hoping that it works most of the time.

🤝 WITH FRAMER

How to create the glow effect on the new Framer website

See the blue glow at the bottom of the new Framer website?

Well I’m kind of obsessed with it. So I asked the designer (aka the big enchilada of hype) to walk us through exactly how it’s made.

It never gets old to see how the Framer team builds their own website in Framer…

My biggest takeaway is that I need to be pairing linear gradients with radial masks a lot more 👀

🧃 INSPIRATION JUICE

3 designs I saved this week

1 — Unique icon style

My new favorite follow is Mehdi. He posts a new design every day and they’re good.

I particularly love the way he’s nesting these icons in the alert banner. That sunken dark padding with the subtle shadows is :chefskiss: 🤌

See it live →

2 — Clerk Auth page

If you missed the Oliur episode, his #1 example of what it looks like to share your work is James McDonald. This mockup shows why.

A few tiny details I love:

1. The inner shadows on the input

2. The subtle bg pattern nodding to the home page motif

3. The way the bg pattern lines break the frame of the container

See it live →

3 — Airbnb inspired micro interaction

Bartek showing once again how delightfully buttery your animations can be with Jitter…

(also I have a fun Airbnb partnership coming up next month that I cannot wait to share more about 🤫)

See it live →

🔗 FEATURED RESOURCE

How to become your engineering team’s favorite designer

I probably spend too much time thinking about how designers can improve the way they collaborate with developers…

So here are 7 tactics you can use to make your dev team love you 👇

Meet the Dive partners 

I made a list of my favorite products and asked them to come on as sponsors of the newsletter/podcast. They said yes 🥹

The #1 way to support Dive Club is to check them out👇

Jitter​ → How I animate my designs

Framer​ → How I build my websites

Maven ​→ How I invest in my career

Raycast ​ → How I do pretty much everything on my computer

Episodes you might’ve missed...

Ideas you might’ve missed…

Thanks for reading! I'm working hard to bring you the best design resources on the planet 🫶

If you want to go even deeper you can always:

☞ Read all ​ideas​

☞ Watch all ​episodes ​

☞ Learn ​advanced design tactics​

P.S. if you were forwarded this email you can ​subscribe here