🤿 blastoise

Mariana Castilho has one of the most impressive career trajectories of any designer I’ve ever met.

I first saw her while mentoring through Shift Nudge and within a few years, she’s landed roles at Universe, Vercel, and most recently as the first designer at Pierre.

One of the keys to her growth has been investing in her skills as an engineer. So a big goal of this week’s episode is to learn what it takes to transition from designer to builder.

Some highlights from our convo:

• The future of design engineering

• What makes designing dev tools unique

• How Mariana has grown as a visual designer

• What it’s like working with design celebrities

• What it means to care deeply about implementation

• How teams like Vercel consistently hit a high bar for craft

• Why Mariana succeeded learning to code on her third attempt

• a lot more

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

AUDIO FTW

So I was scrolling Twitter the other day and Fons Mans posted a card animation that I think I watched 10x in a row…

Obviously the visuals were great, but what made it really special was he used Jitter’s new audio feature.

It’s a perfect example of how one simple feature can unlock so many new use cases and creative opportunities. I even make all my episode clips in Jitter now!

Audio is such a powerful way to level up your storytelling and bring life and emotion to your designs. I think you’ll have a lot of fun playing with this one 👇

💡 KEY TAKEAWAYS

Key takeaways from this week’s episode

1 — How Mariana (finally) succeeded learning to code

The way to fail learning to code is to get stuck in tutorial hell.

The way to get stuck in tutorial hell is to pursue a learning journey.

If you bounce around from video to video you’ll accumulate knowledge… but eventually you’ll lose motivation. This is what Mariana’s first two attempts looked like (and mine too 😬).

Her third attempt was different though. Instead of focusing on the next learning rung, she made building the primary objective. By building things with whatever knowledge you have at the time you a) stay motivated b) uncover what you need to learn next.

So if you want to learn to code, your first step should be finding a (small) side project that you care about. If you make building the end goal, then the learning will happen automatically.

2 — Reframing design systems

Remember how Henry from Perplexity talked about building a design system as the first step?

Well Pierre is another great example of how startups can focus on the atomic level and ignore everything else.

This is how you unlock speed. Create a box of legos without worrying about connectivity (more info here).

3 — How Mariana is advancing so quickly in her career

Mariana only landed her first traditional design role a few years ago. Now she’s designing on the biggest stage for some of the highest profile companies in tech.

When I asked her how she’s advanced so quickly her answer was simple… share your work.

Both Vercel and Pierre found her through her Twitter.

So if this is an area you’re looking to grow in then definitely add this episode with Oliur to your queue ✌️

🔗 FEATURED RESOURCE

Take a peek inside Gumroad’s design system

In my recent article about reframing design systems I highlight the lack of public systems beyond the big players (Polaris, Material, etc.). This directly contributes to the “enterprisiness” of design systems as a practice.

So I found a more realistic example for you!

Gumroad’s design system is 100% public and it’s a legit resource. I’ve been poking around it all morning.

Here’s the link to bookmark it 👇

🧃 INSPIRATION JUICE

3 designs I saved this week

1️⃣ Linear’s bottom tab bar

Linear has been around for ~4 years now and they just released their mobile app. Let that sink in…

That’s what it looks like to prioritize quality at all costs. It reminds me of how Alex Cornell talked about the culture allowing for endless exploration.

It’s not just about making something beautiful… they even innovated on a core UX pattern. Notice how the tab bar becomes a sub menu with a back arrow 👀 Other apps have danced around this pattern but it’s about to become industry standard.

Check it out →

P.s. it’s also worth scrolling their new landing page if you haven’t yet ✌️

2️⃣ Tinted modal background

The next time I design a dashboard product I am 100% using gradient fades for my modal backgrounds. This design from Luke was the latest addition to my taste library.

Check it out →

3️⃣ Clever mockup framing

I’ve seen a lot of mockup containers but the Ballpark website offers a pretty fresh take 👀

The slight rotation, dotter border, rounded mask… it all comes together to create a playful composition. Honestly the whole site is worth checking out.

See it live →

🤝 WITH RAYCAST

What’s in Mariana’s Raycast?

You already know how cool I think Mariana is…

Now you get to see her Raycast setup and how she streamlines her workflows as a designer. At this point I’m shocked when someone doesn’t use Raycast 😅 It’s that good.

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