Roman Tesliuk - From side projects to leading web design at Eleven Labs

Summary

Dive Club 🤿 – Episode Summary

Podcast: Dive Club
Host: Ridd
Guest: Roman Tesliuk (Head of Web Design, Eleven Labs)
Date: December 15, 2025
Episode: From side projects to leading web design at Eleven Labs

---

Episode Overview

This episode features a deep-dive conversation between host Ridd and Roman Tesliuk about Roman’s journey from creative side projects to leading web design at Eleven Labs. Roman shares his iterative design process, his approach to combining timeless principles with modern interactivity, and how curiosity and personal excitement drive his best work. The episode is packed with candid discussions, real project breakdowns, and advice for any designer struggling with personal or portfolio work—especially in the age of AI-driven tools.

---

Key Discussion Points

The Challenge of Designing for Yourself

• Identity and Self-Reflection in Portfolio Design
  Designing your own site is as tough as any client work—possibly tougher because it forces you to confront personal identity and perfectionism.

  • “To me, it feels just as difficult as designing your own personal portfolio because you're trying to make a cool design, and you're also struggling with your own identity while you're doing it.” — Roman (B), [00:19] / [04:16]
  • The internal struggle: balancing portfolio pieces that showcase work versus making the site itself a design showpiece.

• Going Broad and Wide with Concepts
  Roman describes his process as intentionally “going wide”, exploring a huge range of visual directions, often outside his usual style.

  • “I just wanted to go as far away from what it was as I could.” — Roman (B), [05:18]
  • “You have to figure out what feels timeless, what feels too trendy, and what still feels like you.” — [Throughout 05:00–09:00]

Exploration, Experimentation & Toolmaking

• Playing with Design Languages & Tools

  • Roman shares details of his Figma files, how he screenshots inspiration, tries out nostalgic pixel art, and explores grid systems and old-school typography.
    • “I even was pixelating the logo... it's like a throwback. You know, if you grew up in the 90s playing computer games, you're used to this kind of pixel art. There's a nostalgic piece of me that loves that.” — Roman, [05:55]

• The Role of Personal Toolmaking

  • Roman builds custom tools and plugins (including a mosaic bitmap icon tool). He walks through the evolution of this pixel icon maker—how a playful side idea became the seed of a central interactive element.

    • “I've always, even when I was hand coding websites before AI, would create little variables as like a control panel... Now, you can just be like: give me a slider that adjusts the hover distance.” — Roman, [17:52]
    • Time spent on fun ideas is not wasted: “You wouldn't believe how long it took me to make this Figma icon... a ridiculous amount of time spent on this one dumb icon that had no idea what I was even going to do with it.” — Roman, [09:09]

  • Not all explorations ship, but they often lead to even better outcomes.

    • “This never saw the light of day... there’s still a part of me that comes back to this one.” — Roman, [12:25]

AI as a Design Superpower

• How AI Changes the Process

  • AI accelerates iteration and unlocks superpowers, but requires a vision to avoid generic results.
    • “AI is giving me superpowers now... what if we tapped into the Unsplash API? ...it's like, for no other reason than I enjoy this.” — Roman, [24:18]
    • "These tools just produce slop? No, they produce whatever you want them to produce. Come up with some kind of an idea and you can bring it to life." — Ridd (C), [28:06]

• Prompt Engineering as a Skill

  • Roman describes how he uses prompts not just to "one-shot" outcomes but to iterate, explore, and direct the tools with increasing specificity.
    • “If you’re just trying to one-shot a website, that's a sloppy prompt... These are hammers, not magic wands. Your dream home comes from your vision.” — Roman, [28:30]

Balancing Timelessness with Playfulness

• Seeking 'Timeless' over 'Trendy'

  • The main creative tension: resisting fleeting trends to focus on what will feel right in years, not just months.
    • “I wanted something that felt more timeless... Ultimately, that’s why I went with a sharper, more geometric, Swiss-inspired layout.” — Roman, [08:29]

• Exploration Leading to the Final Direction

  • Roman walked through—step by step—how initial pixelated, highly interactive designs were ultimately distilled into cleaner, more foundational layouts (yet still retained playfulness via interactive details).

Iteration: Figma vs. Code

• Where Are Creative Decisions Made?

  • “I’d get it to like 85% in Figma, and then finish in code—especially for anything interactive, like hover states and animations.” — Roman, [39:29] / [52:53]
  • Sometimes, designs are only realized through code tinkering, not static design.

• Notable Moment: Diagonal Animation Component

  • “I had this added as like a hover state... and I'm like, that's too much. I probably spent three times as long on this project as I needed to!” — Roman, [55:04]

Battling Discouragement & Finding Vision

• Comparison and Design Envy

  • Roman cautions against browsing too many references mid-project.
    • “You might be 50% done and then see a cool new site and think, ‘Oh, what I’m doing is basic.’ So easy to get discouraged.” — Roman, [45:59]/[61:08]

• Advice for Designers Building Portfolios

  • “Get a vision for what you want it to be. Pick adjectives! Commit to a direction. Don’t look at too many references. And let your own excitement drive the project.” — Roman, [45:10]/[60:10]
  • “Having that conviction of what excites you and what you really like—regardless of how it’s received—that’s what makes it fun.” — Roman, [61:08]

---

Memorable Quotes & Moments

• On the Uncertainty of Identity in Self-Initiated Work:
  “You’re also struggling with your own identity while you’re doing it. Who am I?” — Roman (B), [00:19]
• On Building and Playing with Tools:
  “Their first thing my kids did when I showed them this was, ‘let’s max out every parameter and see what it looks like’... It’s a digital fidget spinner—I couldn’t stop playing with it.” — Roman, [25:45]
• On AI as a Creative Partner:
  “You’re not going to swing a hammer and accidentally build your dream home... designers are cooked? Well, you just plagiarized an entire website.” — Roman, [28:30]
• On Personal Fulfillment in Side Projects:
  “When you stumble onto something that just feels very fun for yourself, that will ultimately impact how your project comes together... If I was bored and everything was on a deadline, it’d feel sterile and rushed.” — Roman, [30:30]
• On Going Deep (and Wide):
  “Something I love about this behind the scenes is seeing how wide you go, but how deep you go.” — Ridd, [56:43]

---

Timestamps for Key Segments

| Topic/Segment | Timestamp | |-----------------------------------------------------------------|-------------| | Identity Crisis & 'Who Am I?' When Designing Your Portfolio | [00:19],[04:16] | | Gathering Inspiration & Early Experimentation | [04:48]–[09:00] | | Deep Dive: Pixel Icons & Mosaic Tool | [09:08]–[11:47] | | Toolmaking & Interactive Design Flows | [13:13]–[23:49] | | AI as a Workflow Supercharger | [17:52]–[24:18] | | Iteration, Exploring Dead Ends, and the Value of Play | [24:10]–[30:30] | | Timelessness vs. Trendiness, Visual Direction Choices | [35:33]–[38:53] | | Building in Figma vs. Tinkering in Code | [39:29]–[54:08] | | The Value of Process, Experimentation, and Confidence | [45:10]–[61:08] |

---

Takeaways & Advice (For Designers)

• Embrace Exploration: Go wide and deep. Try 10 directions and don’t be afraid to discard most as you focus on what feels “timeless.”
• Let Curiosity Lead: Your best (& most original) work will spring from genuine interest, not chasing trends or seeking approval.
• Use AI (and Tools) as Extensions—not Crutches: Develop a vision, articulate it, and use the new tools to sharpen and iterate, not just generate.
• Don’t Get Stuck in Comparison: Avoid the “design envy” trap. Trust in your own adjectives and ambitions.
• Finish in Code: Especially for interactive or animated sites, expect to do your last 10-20% of refinement hands-on, outside design tools.
• Iterate, Play, and Have Fun: Your joy in the process will come through in the final product.

---

Episode Vibe

Candid, insightful, a little neurotic, and deeply encouraging for any designer—whether you’re shipping a personal site, a product, or dreaming up your next tool. The conversation is technically detailed but always circles back to craft, energy, and the human side of design.

---

For all show notes, resources, and episode links: dive.club

Transcript

[A]

I probably learned more about visual design from MDS than anyone in the design community.

[B]

It's almost like, how do you create a peanut butter and jelly sandwich? It's like, well, first you have to invent the universe. You know, it's like, how many steps back do you want to go?

[A]

So I wanted to go deep into his creative process to see how he explores visual ideas.

[B]

To me, it feels just as difficult as designing your own personal portfolio because you're trying to make a cool design and you're also struggling with your own identity while you're doing it. So you're like, who am I?

[A]

Welcome to Dive Club. My name is Rid. And this is where designers never stop learning. This week's episode is with my good friend Matt Smith, who you probably know as mds. And he's going to walk us through how he designed and built the all new Shift Nudge website. He takes us through his Figma file that is full of really, really good ideas that didn't ship. And he even shows us how he built his own mosaic tool in v0. So if you want a behind the scenes of the creative, one of the truly great designers today, then I think you're going to enjoy this one.

[B]

It's something that I had wanted to do for a very long time, but it's like, oh, in order to do this, I need to do that and I need to. It's almost like, how do you create a peanut butter and jelly sandwich? It's like, well, first you have to invent the universe, you know, it's like, how many steps back do you want to go? And so that's why it just took me forever. And so I finally decided, okay, I'm not going to try to do it in code. I just. I'm going to get back to designing some, like, kind of branding stuff. And so I brought in a lot of, like, existing assets of some newer things that I had designed. I like this kind of style, but I maybe felt like it was too chaotic for a website. This is sort of like a PDF of a team deck with, like, different. Just, like different design ideas and some kind of fun graphic design things that I can just do as a PDF that doesn't really have to be web friendly. And so sometimes it's just kind of fun to design like that. But then I'm like, okay, how does this translate to a website site? And I started kind of playing around with a lot of different ideas. I even was like, screenshotting different things that were cool on Instagram, just random things. That I really liked. And even these, like, diagonal lines, I'm using some of these as like, some of that is kind of already being used as smaller things. And. But then I was like, what if I just went, like a completely different direction? And I. I think I saw this as a background at a church service that I was at. I'm like, that's pretty cool. I could use that website. And so I started thinking about, you know, you could imagine animated gradient.

[C]

Yeah.

[B]

In a header of a. Of a website. It would be fairly easy to do with just simple css. So I'm like, I'm thinking, how can I make something cool like animated that seems fresh and maybe there's a dark mode version. And so I just started designing things and I started playing with this, like, pixel ink trap font.

[A]

Real quick message, and then we can.

[C]

Jump back into it.

[A]

So I got a new computer recently, and what do you think was the very first app that I installed?

[C]

If you've been listening to this show.

[A]

For a bit, then you probably guessed that the answer is Raycast. But at this point, it is an extension of my fingertips and a fundamental way that I use my computer. And I'm not alone. I mean, I see this sentiment from people I looked up to on Twitter all the time. So if you're still on the fence.

[C]

I mean, just do it.

[A]

Download Raycast and thank me later. Just head to Dive Club slash Raycast to get started.

[C]

All right, here's the thing.

[A]

You don't need another dashboard. What you need to do is to talk to customers. So I want to introduce you to genway AI. You can think of it kind of like Vibe researching. To validate your ideas quickly, just draft your questions, select an icp, and then their AI agent runs interviews on your behalf by pulling from a panel of global participants. I mean, you could literally set it up in the morning and get actionable insights by lunchtime. It's validation at your fingertips and you can try it out free for 14 days. Just head to Dive Club Genway to get started. That's G E N W A Y.

[C]

Okay, now on to the episode.

[B]

I'm not going from, like, a full brand guide that's already fully existent. It's like you have to follow this brand brand guideline. And so, you know, to me, it feels just as difficult as designing your own personal portfolio because you're trying to make a cool design and you're also struggling with your own identity while you're doing it. So you're like, who am I?

[C]

Yeah, this is a Reflection of you as a person.

[B]

Because it's sometimes hard to even define that. And to design off of that definition, it can be challenging.

[C]

Yeah.

[B]

And then you end up trying to make your cite the design skill showcase versus your portfolio products. Your portfolio pieces need to kind of showcase your work versus how zany and cool your website is. And there's a fine balance between, like, botching that or, you know, doing it well. And so therein lies the internal struggle of like forever trying to design this.

[C]

You said you went wide. This is admittedly wider than I thought you were going to show. Like, nothing like what I associate with you.

[B]

Yeah, it was like very, very cream. And like, just for some other website, it could be kind of cool. But I just wanted to go as far away from what it was as I could. And you know, these are just some, you know, just commandee, commandee, Move stuff around. Command D, move stuff around. Just playing around with, you know, do I want to go with like a monospace font? And like, you know, just trying to figure out, not really designing the website. I'm just kind of laying a bunch of random things out and a bunch of like, just tiny changes. Like, do I have floating nav? Do I have it stuck onto the top?

[C]

Pixelated logo was on the table too.

[B]

I was even pixelating the logo. I'm like, for whatever reason, I don't know if it's just kind of a trendy thing. It's like kind of in the dither ballpark. Everybody's all in love with dithering right now. And also it sort of is a, like a throwback. You know, if you grew up in the 90s playing computer games, you're kind of like used to this kind of pixel art. And there's a nostalgic piece of me that like really loves that. But, you know, and then right in the next one, I'm like, nah, I can't do the pixel logo. Like, just like, I don't need to be making that decision at this stage. But these are the things that you're pendulum is looking as a designer just like, oh my gosh. So, yeah, and then I'm like, well, of course we got to just figure out we're going to do a mobile. Am I going to do a bottom floating cta? What if I have a mobile menu that pops up from the bottom?

[C]

The indented paragraphs there on the type where you have like the align at the in depth, but there's no line space, like no extra line space between the sentences. That's I Would never have thought to do that.

[B]

It's, you know, like, if you grab any of these, I don't know if you can see it, but I've got those old, like, graphic design manual typography books. You know, you'll see that a lot in the tried and true graphic design typography. Just like an Entire book of 60 pages of how to handle paragraph indents. And you're just like, wow, they made a book out of this.

[C]

Yeah. Some light afternoon reading.

[B]

Yeah, exactly. I would just soak it in. You know, like, it's fun to. Is it a. Is it a 3 rim paragraph indent or do you go like. I don't know that it truly works on, on this page, but it is kind of fun to play with. And so, yeah, you can just see. I'm just. I'm just scattering. Here's like some. I don't even know where I got this from. Some kind of other screenshot of something. Just a bunch of randomness.

[C]

Are we looking at a single session of exploration? Because there is like this unified theme that's kind of pulling. This is like, how long did you.

[B]

This is probably a day or two of just, okay, zooming in and out on this design. And you can kind of see like, okay, this mosaic idea sort of popping in as like an idea. I was just using, like, the, the mosaic. I think there's just mosaic and Pixel plugin that you can run and just kind of like crank it up and play around with that. And then I'm like, what if there was like this huge, like testimonial, like full screen showcase and maybe there was a way to make it more editorial. And then if we go to this meticulously organized page two, I'm continuing some of this, trying to clean it up a little. And I'm like, well, this one, for some reason, this one felt better than the others. I guess that's why I put a green, green emoji on it. The composition, the negative space that I really loved.

[C]

Yeah.

[B]

If you called it something else and used it for another project, it could probably work well. But I just, at the end of the day, I didn't feel like it was a good representation. It was almost too. Too much personality in a way. My vision for Chef Nudge is like the modern interface design school that's sort of like built on these timeless principles of typography, layout, and color and how we can apply those to design. And this doesn't feel like it represents that. This feels like a time piece. Like it's you know, created. I wanted something that. That felt more timeless. And that's why I just ultimately was like, this is not the way to go. Okay. And then all of a sudden, I started making these pixel icons.

[C]

I wasn't.

[B]

And I was also just not. I was just letting myself have fun. I'm like, I'm just going to make these little pixel icons, and that'll be fun. You wouldn't believe how long it took me to make this Figma icon because I'm trying to fit it within, like, this square. It's like, do you do a two pixels in between? I'm like trying to do two pixel blocks for every block, and I want to have two pixel negative space. It looks like, oh, just like a simple little thing. But if you look at the difference of this shape versus that shape, it's like a ridiculous amount of time spent just on this one dumb icon that had no idea what I was even going to do with it. And ultimately I never even used it.

[C]

Yeah, I was about to say that didn't show.

[B]

Yeah, it didn't even make the cut. But I'm pretty proud of this icon because it took. It took a long time. And then I'm like, what if I made them big? Like, oh, that's kind of cool. I kept going back and forth like, oh, do I want to use this pixel font? It's kind of cool, but if I use this pixel font, it feels weird. If I use these pixel icons. Maybe I, you know, maybe I just use this strategically for arrows. Any number of these directions I could have gone with. But again, you know, you're kind of wrestling with the identity of your. Your baby. And so you're, you know, in a way, you're scared to make a decision. Yeah.

[C]

And how are you going to feel about it two years from now?

[B]

Yeah, exactly. But I knew that when I. Anytime I booted this back up, I'm like, eh, like, that's cool and all, but that's not it. And so going back to my, you know, black on black roots here, I did kind of want to go with like a. I don't know why this icon is white. And it like, makes me want to just make it not white while we're here. But, like, there's even something about this kind of like, cream color scheme that's kind of fun. I'm like, well, maybe I could make it work. You can see me kind of going back to it, like, maybe. Maybe there's a way. And so anyway, and then we're like back on Page three. And then this is where I was like, okay, no, I want to go back into the kind of same color scheme. Maybe I go with just the pixel logo, but I go with like a cleaner serif typeface. And I actually, even looking back at this, I'm like, I mean, that was pretty nice.

[C]

It's pretty nice. The pixelated arrow is really cool too because then it's just like, it's just sparingly used in a way that. Yeah, that's.

[B]

And there's still part of me that's like, should I have done this instead? Like, it feels very much like more sassy. You know, it's like, it's sort of like expected to have, I don't know, like your centered hero text, your main call to action. But there is something that I still really love about this. And I think even if I would have gone forward with this direction, I would have liked it. So I started playing around with more and more. Just, you can see like just the sheer volume of just. And then this one, I mean, I still look at this.

[C]

Interesting.

[B]

I do like that a lot. Maybe I did a grid and then these were going to be like floating nav bars with, you know, some fun, you know, layer blur.

[C]

That's like a fun juxtaposition here because you have like the retro squares behind, but then a really, really modern looking floating.

[B]

I think that's what's fun about this one is like grid, pixels, bitmap, but then this like, you know, really clean.

[C]

Yeah, it's like a collision of eras.

[B]

With these like really big drop shadows that really makes that like pink pop off.

[C]

Dang, dude, this concept. There's some really good work that didn't ship in this video file.

[B]

I mean, I kind of hate that this never saw the light of day. Like, I never pasted screenshots of this. I never posted.

[C]

I might, I might cut this from the final edit and claim it as my own ingenuity later.

[B]

There's still a part of me that even comes back to this one. I'm like, man, I could have gone with this one. And. And there's definitely a world where, where I could see myself doing that. I even made like a. What I thought was a very nice light mode version of that as well. Even now I'm just like, dang it, should I have done this? But I also feel like it is still very. I don't know, I. I don't feel like this is quite as timeless. I don't think it's incredibly trendy. It's Kind of like unique and you could probably change it. And then I was like, what if I even. I was playing around with some different ideas. I think I accidentally made this gray at one point and I was like, this is kind of cool. Then I'm playing around with. I bring it back in.

[C]

The font switch up here.

[B]

Yeah, a little font switch up. This was the old font that I had on the entire page. It's like tt Hers Noya or Furs. New for people who don't say Noya. I had a. I had a type typography designer friend that I used to work with in our. We. We were like partners in a co working space. And we worked together for a couple years, like side by side. And he was the one that introduced me to the noia pronunciation, which is apparently the correct way to say.

[C]

Wait, that wasn't a joke. That's actually.

[B]

That was not a joke. That's how you say it. No, Helvetica. Noya. TT Furs. Noya.

[C]

Wow. Wow. You said Noya.

[A]

And I was like, what the hell is he talking? And I just let it slide.

[B]

I'm only going on his. What he told me. But. And he usually says things pretty confidently.

[C]

But yeah, he was just messing with me this entire time. And now we got it on record.

[B]

You can imagine there's maybe not everyone knows this, but like there's a certain traditional graphic design realm of people that are quite snobby. Like typography designers in particular. Specifically the older ones maybe, or at least that's how they were also in my graphic design program at the University of Redacted. So anyway, yeah, went back to tt first NOIA on this one. And then I'm like, maybe. Maybe I go black and white and I do just the pink inside of here. But you can almost imagine how stressed I am just trying to make the decision between these different directions.

[C]

It's fascinating that you have to design like a random section of mobile in order to even properly evaluate it. I know that's something that I'm like, well, that's so interesting. I do not do that. So let's.

[B]

Let's keep going here. We got page three. Let's go on to page four. Okay, this is actually kind of funny. This is actually a screenshot of a version that I built with code. Oh, this one actually got built. I had actually built these parameters of like distance, speed, duration, count. This was kind of like my AI vibe coded version. All of these were bouncy and kind of pixelated. I was pretty much set on Going with something like that, you can tell this was kind of similar to the other. The other ones that I was showing. And I can show you this, please. What I did here with these icons, I was like, this is so simple. These are just square color blocks. I could build all of these with just css and I wouldn't even need to use any images. And so I started Vibe coding this thing inside of V0, but it was basically like. One of the first prompts was probably something along the lines of, see if we can go all the way back. Yeah, here we go. I'd like to build a small tool that functions as a bitmap icon builder. The icon Canvas will be 24 by 24. Each block will be 4 by 4. This will give us 12 blocks, blah, blah, blah. The icon canvas should be able to save the settings of that icon in a small code snippet. The goal will be to generate 12 or more unique icons. And then I just kind of went from there, you know, just prompting, prompting, prompting, prompting, prompting. If I click any of these blocks, you know, it's just like you can click it on and off, kind of like minesweeper or whatever. And I've got it where I think it just added grid lines. And I was like, actually, that's kind of helpful when I'm trying to. And then I can export a png. I can change a few things here. I can just save it if, like, if I. I think if I go a little smaller. Yeah, it's got, like, the control panel over here. And then what's kind of cool is it would give me this snippet. And so it would be a snippet of some kind of code, you know, that it generated to just let it know that these were the blocks that were filled in. And then I generated all these icons I went through and meticulously clicked, redesign them in this little. And again, none of these even shipped. Like, I spent so much time on this thing. This is probably an older version I've got. Oh, yeah, there's the figma. There's the Figma one. So I can copy that snippet and I can go back up here and kind of paste it in and then load that one instead.

[C]

Oh, cool.

[B]

And then I was like, okay, I got these working, like, on this website. It's just fun for me to kind of play around with how I can make things interactive, how I can play with motion and things like that. So I took all of this code and I ended up making another. Another version of this. You can see, like, no, the latest version is not right. Do not make any changes. Create the defaults. Like, are you kidding me? Come on. Like, I think we've all been here at a certain point.

[C]

Oh, yeah.

[B]

Like, it's very, very, very important that all these parameters are saved and set at the default.

[C]

It's cool to see that toolmaking is part of your creative process too. Like, that's definitely a trend that I've kind of had my finger on over the last few months where it's like, I need to make a thing, I need to explore a thing. I'll make a tool for it. Having that as a knee jerk reaction is kind of a superpower in today's day.

[B]

And I think it's so cool because, like, I've always, even when I was hand coding websites, before AI existed, would create little variables as like a little control panel in my CSS animation file or in my JavaScript file. And it would be like speed, you know, bounce distance, timing. And I would just have all these little throttles that I could just adjust. I could swipe over, go to the code, change it from 200 milliseconds to 150 milliseconds, change the cubic bezier curves, and I'm just like back and forth, back and forth, back and forth, testing it, testing it. And now it's just so much easier because you can just be like, give me a slider that adjusts the hover distance. So that's basically what I ended up. So you can see, like, I've got this kind of cool hover effect for these little blocks going around. And actually the first one I started with, it was like, there was like more of a reverse fade situation. And. And I think what I ended up doing was like, what if we did this and it would add a new one and. And I kept changing it over and over and over, but I wanted to kind of keep the last version of it as well. And so I was like, why don't we add a hover effect? You know, list that. I can just keep saving these so we're not redoing them.

[C]

Genius. Actually, I, I've had multiple projects where that's exactly what I should have done.

[B]

Yeah, because you just, you keep iterating, iterating, iterating, and you kind of forget there's no good.

[C]

There's not a command D as easily. You kind of have to build your.

[B]

Own command D. And so sometimes you have to say like, okay, generate all these parameters as modifiable variables in a control panel versus like, hard coding every single one of them. So then I was like, okay, I'm going to create one where it's like neighbors hover effect. And you can pretty quickly see, like, you know, maybe for certain different things that would work. This one's just like a little, like, it's just a reverse gravity well is kind of fun, fun gravity strength. So it's like pulling in the. But it's a little bit weird. And then I think I even said, like, come up with some creative ways that you would just create, like, five vastly different hover effects. And one of them was shift, expand. Or maybe it was close to it. I can't remember how we got. I was like, that one is fun. Like, that one's the most fun to me. Like, it's just like avoiding your mouse cursor. And then you can play around with the intensity.

[C]

Is this kind of what made it to prod? Like, this one does look familiar.

[B]

Yeah, this one is very close to what made it to production. Just because I really, really like this.

[C]

Can I ask a clarifying question? Like, yes, super. And I know we're like, this is a long time ago maybe, but how able were you to articulate this effect? Or did this come out of just, hey, do some crazy stuff, like, make something unique, you know, because I'm not even sure that I would have had the language or the ability to visualize this and put it into words.

[B]

So, like, yeah, I knew that I wanted, I knew that I wanted the blocks to kind of scatter. And this is a little bit of a side tangent, but I had done another little project like this with my personal site playing around with the blocks and scrambling them around. So I, I, I'd already had a previous project where I had done something like that, and I knew that I wanted them to just kind. I kind of wanted it to be fun. So when I had the hover effect set up, it was like just prompting at some point, like, give me six vastly different hover effects and how we can manipulate these pixels. And then I would say, okay, these four aren't very good, but maybe there's five more in line with maybe this one.

[C]

Love it.

[B]

I think that's how I ended up, like, going down the rabbit hole to ultimately getting to this one.

[C]

That makes a lot of sense.

[B]

Yeah, it's sort of like you're just kind of trying to fine tune your taste.

[C]

Yeah.

[B]

Because that's.

[C]

I would do something like that with like a. If I'm writing titles for an episode, I'd be like, Give me six. I'm like, oh, that one's kind of interesting. Can you give me five more like that one?

[B]

Yeah, exactly. And I just.

[C]

I never thought to do that with something like an animation, but. Makes a lot of sense.

[B]

Yeah. So I just started playing around with this and, you know, it was just really fun to play with and click. And then I was like, oh, what if we added a click effect where it was, like, kind of bouncing? I eventually made it where, you know, it kind of timed out and they would all kind of come back together. But this is where it started. I was like, I wonder if this would work with. With an image. And so let's just grab one of the. I'll just grab my little avatar out of here and. And I wanted it to, like, convert it to pixels and kind of the same kind of format and then have the same thing happen when I, like, hovered around. I'm like, oh, that's pretty cool.

[C]

Yeah, that's pretty cool.

[B]

So I would just sit here for minutes on end just being like, yeah, that's it. Yep. And I just would. It's a digital fidget spinner. I just couldn't stop playing around with it. And then I added all these, like, toggles, like, okay, could we go back and forth between pixel and photo? And also, it's pretty important whenever you're working with, you know, Canvas and webgl stuff, like, you want your frames per second to be very high. If you're down in the 20s or 30s, you're doing something wrong and there's too many scripts loading. And so I'll. If I'm ever going to do some, like, heavy interactive thing, it's always good to have, like, the frame rate showing just so this one's actually going a little bit slow. Normally it would run around 120. Being able to click and have this.

[C]

Just kind of click effect is so fun.

[B]

Ultimately, it ended up being where you could click it and it would just change between photo and. And pixels. And then I had one where it was, like, pixelated, but then it, like, as it bounced once, it kind of showed the photo periodically, but then it switched back to pixels. So, I mean, I. I mean, I spent. So, I mean, you can see I'm on version 135. Like, how many prompts? You know, it's like, wait a second. Yeah. Yes.

[C]

Perfect.

[B]

Oh, yeah. I wanted to be able to, like, resize these resizes. Things aren't even working. But I'm. I'm kind of like, thinking ahead how I'm going to like, implement this in a actual website versus just a little. Just one thing to come up with, you know, an, you know, pattern generator or whatever. But it's like, how am I actually going to use this in production? And that was ultimately, I think I ended up like, you know, copying a lot of this code out of here into my cursor project and then refining it in cursor.

[C]

Makes sense.

[B]

Fast forwarding. This is sort of like the refined mosaic with updated. You know, some of the variables weren't that great and some of the other ones were better. And so this is sort of the updated, latest and greatest version where.

[C]

Oh, man, it's fun.

[B]

It's like, feeling pretty good now. So I can.

[C]

Is that. That's on Click. It switches between the image that switches on.

[B]

Click now.

[C]

Dud. Freaking genius.

[B]

And so I can go click. Explosion is like a little bit higher.

[C]

That's great.

[B]

You know, with Cursor, like, I can code HTML and CSS and a tiny bit of JavaScript fairly well without any AI assistance. Like, I pretty much can just do whatever I want things to do in the browser for doing it for so long. But tapping into APIs, I can pop in a JavaScript snippet and if it's, like, really well documented, I can, okay, this is how you get that. And then I can place it here and code. But I've always been more of a just kind of like, very hacky sort of developer. But AI is like, giving me superpowers now because I'm like, what if we tapped into the unsplash API? And I'm like, here's my API token, like, fingers crossed, it's going to. And they're like, let me just build a route for that. And I'm just like, oh, my gosh. Because I was like, I mean, it's cool to have, you know, a single picture there, but what if I could, like, randomly pull in an unsplashed photo and just have it, like, work with my Mosaic, Little effect. For no other reason other than I really enjoy this. It's like, I would be doing this on the weekend for fun, you know, and then it's really cool if you. Like, the first thing that my kids did when I showed them this was like, let's max out every single one of these, like, and see what it looks like. And then it's like. And so, like, if you. If you click it enough, you can kind of get everything out of the way.

[C]

It's like, feels like I just won an old game of Solitaire.

[B]

Yeah, exactly. And the other thing that's kind of cool that. That I thought was neat, especially if anybody wanted to actually go do this on their own or play around with it. Like, you can go actually just upload your own photo. See if I got. I got a picture of my desk here before I painted my office black. There is a little bug when you upload a photo. Like, it's not quite getting the aspect ratio first, but if you do click it once, it'll kind of fix. That's one thing I haven't quite figured out, but. But also, like the other cool thing, if you time it just right, you can go and download this and it'll capture what it looks like.

[C]

Oh, cool.

[B]

And then this is like the image that it just downloaded.

[C]

Yeah, that's fun.

[B]

So, like, you could theoretically use this as, like, an avatar generator. I could probably add, like, maybe if you press the P key, you could pause it, like, wherever the things are, and then you could download it or maybe adjust. But it's really cool. I mean, you could see, like, how far you could potentially take this. Like, you could turn this into, like, buildmymosaicavatar.com and just have the ability to people upload it and things. And it's just all started from a little prompt.

[C]

Well, it kind of started even before that, based off of what you're walking me through. Like, did it start actually with those little pixel icons?

[B]

Yeah, it definitely did. It started with the pixel icon.

[C]

That's cool to me because I'm trying to understand the creative process. And you just kind of stumbled onto one little thing. You're like, there's something there.

[B]

And I think that whenever we do, like, live calls, we just did one yesterday with the Chef Nudge students, and we were going over some cursor things and vibe coding, AI stuff. And I was just telling them, like, it's so much better if you have, like, some sort of end goal in mind. If you're just being overwhelmed by the sheer amount of AI tools coming in and you're like, oh, I gotta use that tool. And then you get the tool and you. Every one of them has a prompt box, and you're like, yeah, you still kind of hit blank canvas syndrome in a way. And I think sometimes it can be really cool to just be really into something. Like, I was just, for whatever reason, I can't get these pixel things out of my mind. I'm like, I'm going to design 20 pixel icons. Like, what if I could make these with JavaScript? What if they were Interactive, you know, and just kind of like, let your own curiosity kind of lead that. And it's more like, I'm. I am using this as a tool versus Generate Me, the best website you've ever seen.

[C]

Yeah, I love that point. And I'm even just going to underline it because there's so much of the discourse that I see is like, well, these tools just produce slop. And it's like, no, they produce whatever you want them to produce. Yeah. Like, and come up with some kind of an idea and, like, you can bring it to life.

[B]

You know, they will produce slop if you're trying to one shot a website. Which is a sloppy prompt.

[C]

Exactly.

[B]

And so I think. I like to. I like to think of them as, you know, it's like a hammer. You're not going to swing a hammer and accidentally build your dream home. Your dream home is going to come from your vision of, like, how many bedrooms? How many bathrooms? Is it one story? Is it two? You know, what is the site? Is a siding? Is it stucco? You know, there are people taking pictures of websites that they really love and being like, like, you know, build me this. And it's like, oh, my gosh, I one shotted this thing. Designers are cooked. It's like, well, you did just plagiarize this entire website that somebody else made. So, you know, I think it just helps to have some vision and just sense that, okay, I'm going to use this tool to help me achieve a certain goal.

[A]

I've been designing products every day for the last 15 years, but in the last six months, everything has changed. With AI in the mix, I'm cranking out ideas faster than any. But none of that matters if I can't get the feedback that I need.

[C]

To get the team aligned.

[A]

And right now, getting async feedback still kind of sucks. So I'm building the product I've always wanted, and it's called Inflight. I use it every day to share ideas and get feedback from the team. It's totally changing the way that I work, so I'm excited to show you. Right now I'm only giving access to Dive Club listeners, so head to Dive Club Inflight to claim your spot.

[C]

Speaking of vision, let's zoom out for a second here, because you have this goal that you kind of talked about of making something that is timeless. It's literally tied to part of your identity and who you are on the Internet. You want to love it not just six months from now, but years from now.

[B]

Yeah.

[C]

You also have this really neat visual effect that you've spent collectively maybe an entire hour just hovering over because it feels good and you want to put it somewhere.

[B]

Probably 20 hours of.

[C]

I was, hey, I was maybe said it, not me. I was gonna be. I was gonna be generous. But how do you reconcile those two? Like from a strategic. Now you're back in the. The creative director C. Like, where did you go from here?

[B]

It is tricky to be able to do what I did here in the context of another project with very real deadlines, very real, like team member dependencies and things like that. You know, I did have the liberty of spending as much time on this little one thing as I wanted to, but obviously, you know, I can't just only do this all day long. So at some point, especially if you're having trouble with AI and you're like, no, I didn't want you to do that. I just will move on. I'll just put it away and move. Like, I need to build out the structure of the website. I need to build out all these components. I need to start coding this and making progress. And I think that if you can just allow yourself some time to explore and maybe put a time limit on it and just knowing what your priorities are and knowing what you actually have to do, I think there, there is time to play around and experiment and explore. And sometimes it can just be. I. It's hard to like, put that into a process. Okay, from 9 to 10am I'm going to explore and tinker and look for magic. Sometimes that's just not how it works. Sometimes you like? Yeah, but you. I think it is important to build it in and like, enjoy playing around. Like, I've had so much fun building that. It's just like, like this page serves no purpose, you know, like, it just exists. And I wanted to be able to kind of show, I don't know, you know, how things could work and how you could change it. And it's just. It was just fun for me to do. And so I think, I think when you stumble onto something that just feels very fun for your per. For yourself, that will ultimately impact how your project comes together. And somehow that fun transfers, that energy transfer happens. If I put fun and creativity and a good time into my project, hopefully that transfers to the person, you know, experiencing that project. And if I was bored and everything was on a deadline and I was like, oh God, I gotta get this done, it's probably going to feel sterile and rushed. You know, it's hard to like, put that into A process. Okay. From 9 to 10am I'm going to explore and tinker and look for magic. Sometimes that's just not how it works. Sometimes, you know, like, I think it is important to build it in and, like, enjoy playing around. Like, I've had so much fun building that. It's just like, this page serves no purpose. It just exists. And I wanted to be able to kind of show how things could work and how you could change it. And it was just fun for me to do. And so I think when you stumble onto something that just feels very fun for yourself, that will ultimately impact how your project comes together. And somehow that fun transfers, that energy transfer happens. If I put fun and creativity and a good time into my project, hopefully that transfers to the person, you know, experiencing that project. And if I was bored and everything was on a deadline and I was like, oh, God, I gotta get this done, it's probably gonna feel sterile and rushed, you know, So I think there's. There's always a balance. And I don't have a better answer than that.

[C]

Yeah, I mean, it makes sense. You. You obviously felt something with the pixel icons because you spent quite some time working on them without having any idea if they would even make it. But, yeah, I think you can feel like whenever there's an idea that's really energizing from, it unravels other ideas. Yeah, that's almost like the real value in my mind. Just like, you can feel the energy, and then you're like, oh, I have to go down that route because there are good things that I can't see yet down that route.

[B]

Yeah, yeah, absolutely. And there's also a big difference between building a little tool to play around with and then trying to figure out how is this going to work on my actual website. And then also testing, you know, like, Lighthouse scores and how fast is my page load for search engine optimization and things like that. It took me, like, a couple of days to get this to a place where I was, like, lazy loading. I've got, like, a lazy loader placeholder that loads in the mosaic, but actually this is built off of, like, four SVG icons. I had to recreate the Mosaic component to accept four SVGs as an input and then rebuild them in, like, WebGL.

[C]

So was there a performance element to that or was it more just about making it easier to do it?

[B]

I wanted to just be easy to just choose any icon I wanted to and turn it into Mosaic and so you can see, like, on more of these pages. If we get back into like, design files. You can see, like, it's starting to look more like the actual website now. I even was like, well, I could probably use this, like, image mosaic thing, be kind of fun. And I was thinking, like, I'm going to use this, like, huge, big image mosaic. But every time I. I don't know, every time I tried to put it together, it wasn't. It just felt a little bit out of place. And so I was like, let me just design a bunch of like, really kind of sharp geometric icons.

[C]

Is this an example of going left when feeling stuck maybe?

[B]

So it was just like, let me just. These are. These feel nice and sharp. There's a circle and a square. They're timeless, you know, a rectangle. Some of these, maybe the sideways Pac man, maybe not as timeless. And I ended up not using some of, you know, some of these because they felt, you know, they're very much different than some of the others. But it's kind of like I really like the pixel idea. I like the big icons. I wanted to somehow, but it just felt like they didn't work in the site very well. And so I just designed a bunch of these. And then on my page six, you can see, like, I started, you know, getting these way more. Everything just started kind of fitting together a little bit better. And I was like, what if I just went like, full typography layout and color only, like heavily gridded, very Swiss graphic design style. And just trying to use those timeless fundamentals to build this website and like, stripped it of all like sassy trendy gradients and kind of things. But I'll keep in the little, like, you know, fun interactive thing, even though that sort of. It kind of breaks that idea of being timeless. This could be, you know, out of date. But if I just remove the mosaic interactive quality from. Would still have that kind of static graphic design manual kind of feel, I can just pop in, you know, any. Any of these that I wanted. I did have it kind of transitioning between pixels and. And sharp SVGs, but the pixelated version, it looked a little bit odd. So I just kind of decided to.

[C]

I kind of like the sharp static state transitioning into pixels. That's like. Feels very intentional to me.

[B]

I think once I'd finally pushed through all these different concepts, the sharp style just felt like it was sitting better with me. And my website never changed. I'd be okay with it. Like, yeah, you just use that one. And so. But then I also have the same. The same mosaic. I have a prop that's like is it icon mode or is it photo mode? And if it's icon Mode, it accepts SVGs and it's photo mode, it accepts a photo. And so now I just have like the clickable version on the website and then I can also say whether or not it's, it is default pixel mode or default photo mode and it loads a placeholder image and then as soon as the mosaic is ready in the background, it will load in. And then I added like an initial bounce function. So like when it's ready, it bounces to let you know that it's ready. So like if you were on a silver connection, it would just load the photo and then it might take 5, 6 seconds and then it would bounce and kind of be like, oh, now we're ready. This version too, like it kind of helped me dial in like what do I want as the default parameters? You know, like how, how big or small is the grid gonna be? How many click explosions are there gonna be? And I only ended up using it, you know, it's only used probably on these, you know, on the homepage and then on that like profile page. Those are the only places that I'm currently using it. Oh, actually no, I take that back. I, I put this as the figma 101 nice kind of thing as well. I built, built the entire website in React and I don't know React, like I don't know the syntax. I, I'm aware of like what's happening, like importing components and I kind of know what useeffect means, but it's still a little blurry.

[C]

But don't ask you to say it out loud.

[B]

Don't ask me to say it out loud. But what's cool about that is it allows me to host all of these files on here and I can put the entire figma course on here and just kind of of, you know, have it be gated with. We just like just give your name and email and then you get access to the full course. Yeah, instead of trying to like hide everything. And so once you've activated your access, you'll be on these same pages with the video showing process.

[C]

Question real quickly, how pixel perfect did you get in figma versus how much designing happened with you just tinkering in code once you kind of nailed down the high level direction that you wanted to take.

[B]

I would say I got it to like 85% how I wanted to it it, but I didn't have it like fully systematized. I didn't build variables, I didn't build a design system fully. I mean, I do have, you know, some components here when, you know, it's just easier to design with with certain components. But I would say, generally when I'm building something myself, and I'm definitely going to be making the website, I will only get it to, you know, I don't know, 85, 90% complete. And then I'm just, like, I'm adding class names. I'm adding, like, PT30 for tailwind class names and just trying to figure out the rest. Here's another page that has these, like, single icons. It's kind of cool. I ended up adjusting things and kind of redesigning things. Like, I never even designed the mobile menu like this until I had it in code. I kind of built it in code, and then sometimes I'll take a screenshot and then bring it back into figma and adjust it.

[C]

That hover state's a perfect example of something that I probably would just do in code every time anyway.

[B]

Yeah, I definitely.

[C]

It's all about how it feels.

[B]

I definitely made this hover state in code, for sure. I had a variety of, like, different versions where you can see how this one has the, like, the leading arrow coming in and the. The other arrow going out. I had a version that was just only shifting and there was no background. It almost felt like I was going too restrained with the button idea. And so adding the hover back in, it felt like it was maybe a little bit more intentional. But that's another example. Like, I had five versions of this. I had this, like. Like, I told you that I really like that diagonal pattern. So I ended up kind of building out this diagonal animation component. I had this added as, like, a hover state. And, like, when you're hovering, then, like, the bars were. And I'm like, that's too much. That's way too much. I probably spent three times the amount of time I needed to spend on this project. I've got three or four different directions I could have taken and things I could have coded, but ultimately I just tried to stay true to, like, all right, what feels timeless. I'm kind of going for that, like, polished, timeless, foundational vibe. And that's kind of like where it ended. But, you know, you can see, like, where, oh, what if we did this? And, like, my lizard brain is just, like, jumping all over the place. Oh, diagonal interaction.

[C]

You had to get it in there somewhere. The 404 page is the perfect, like, this motif is dope, but it didn't fit Exactly.

[B]

Even the 404 page. Here's some other ideas that I had.

[C]

Oh my gosh. You did multiple explorations in. That's really good. What the heck kind of that PDF style almost from the very first.

[B]

And I was like, I'm already using this like 12 column grid and I'm very strictly staying to these four columns in most parts. And I still think this was cool, but, oh man, it's really cool. I was like, I don't know. I even. I have this as a color variable and I almost decided to go with this like hyper green color. I can just change the interactive color variable in my global CSS and, and you know, kind of feel it out.

[C]

I think I. Something I love about this behind the scenes is seeing how wide you go, but how deep you go. Oh, fudge.

[B]

I'm thinking about like every little dumb detail. Like, like, this is. It's Christmas time. I'm thinking about the Christmas Story movie. Like, oh, fudge. Except I didn't say fudge.

[C]

This is such a fun window into your creative process and there were many pit stops along the way. Another perfect example here. Yeah, like, this is design. This is it.

[B]

This is a diagram I made for Claude where I'm like, dude, look at, look at what I'm talking about here, man.

[C]

No way.

[B]

This is what I want because I know how tailwind works, I know roughly how React components work. And if I was just coding this with like HTML and CSS components, it would be pretty easy. And in retrospect, I might should have done that first because this is my first time building out a full website with React, not with cursor, but this is not so complicated. But, you know, like, if you look at the way that I'm handling this, like these offset and then I want them to responsively, you know, pop into place where went a little bit far down. You know, I wanted them to kind of stay in the second column versus the, you know, the offset column. So it's not really that complicated. But if you don't articulate that well when you're trying to, you know, code up your, you know, or your cursor component, I don't know if this was like a waste of time or if this actually helped, but I'm constantly trying to figure out ways to just lock in context and be able to reference context. What I first did was I built like a slash system page and I just was like, let's just make these components accessible and clean and let's just knock out some of these components and figure out where we're going to build in the padding versus we're going to like include the padding in the page reference. And so this was sort of like one of those documents. I probably made a few others. I mean, this is like just another random trying to test out like different colors for something I've never had on really any of my sites is, you know, light mode.

[C]

So I don't know how I feel about it. I know, I feel like it breaks some rules somewhere.

[B]

It breaks some rules. It's there if people want it.

[C]

There's somebody watching who maybe has Christmas break circled as like, I'm going to work on my portfolio and personal website and I want to do something that's creative and doesn't feel either like the trend du jour or just a really nice mimic of something that is already recognizable and, you know, well crafted. Any other advice or general mindset shifts that people can make to be able to grow this kind of creative exploration process that you're showing here?

[B]

I think the best thing you can do if you're working on your personal website or just some little project is just try to get a vision for, for what you want it to be. Is it going to be techy? Is it going to be like classical? Is it going to be bright and colorful and blobby? Or is it going to be sharp and crisp and no corner radius and come on, some adjectives like things that you like. That alone. Just having a design direction that you feel confident that you want to pursue do will help you filter out those decisions that might go this way or go that way. And, and don't look at too many references, you know, because I feel like you might be in like 50 of the way done with your design or trying to figure something out and then you see some. Somebody launch some new website and then you're just like, oh man, so much more than what I'm working on.

[C]

Yeah.

[B]

Like, I can't tell you how many times I probably saw something and I'm like, oh, that's so good. Like, what I'm doing is just so basic, you know, and it's just so easy to get discouraged when you're by yourself with your own little designs. And so I think having that conviction of what just excites you and what you really like, regardless of how it's going to be received, I think that's what makes it fun and that's where you can really explore like these little AI tools and figure out how can I wield them to bring out my vision? I Think that's the way to use it instead of saying, how can I one shot this and make, you know, stripe.com website or whatever the cool website of the day is.

[C]

I love it. I have multiple websites that I'm kind of thinking of right now, and I feel like this has been peak inspiration for me is just seeing this file. Like, I so appreciate being able to get a glimpse of the mess and all of the different silly pages and directions and just how deep you've went and just stuff like this, like, it's. It's really awesome. And you know, this, this, this content is few and far between. So I appreciate you pulling back the curtain and sharing with us today.

[B]

It's a pleasure.

[C]

You obviously felt something with the pixel icons because you spent quite some time working on them without having any idea if they would even make it. But yeah, I think you can feel like whenever there's an idea that's really energizing from it unravels other ideas you like. That's almost like the real value in my mind. Just like you can feel the energy and then you're like, oh, I have to go down that route because there are good things that I can't see yet down that route. Yeah.

[B]

And there's also a big difference between building a little tool to play around with and then trying to figure out how is this going to work on my actual website and, and then also testing, you know, like lighthouse scores and how fast is my page load for search engine optimization and things like that. It took me like a couple of days to get this to a place where I was like, lazy loading. I've got like a lazy loader placeholder that loads in the mosaic. But actually this is built off of like four SVG icons. I had to recreate the Mosaic component to, to like accept 4 SVGs as an input and then rebuild them in like WebGL.

[C]

So was there a performance element to that or was it more just about making it easier to do it?

[B]

I wanted to just be easy to just choose any icon I wanted to and turn it into Mosaic. And so you can see like on more of these pages, if we get back into like design files, you can see like, it's starting to look more like the actual website now. Like, I kind of had an idea for what I wanted to. I even was like, well, I could probably use this like, image mosaic thing, be kind of fun. And I was thinking, like, I'm going to use this like, huge, big image mosaic. But every time, I. I don't know, every Time I tried to put it together, it wasn't. It just felt a little bit out of place. And so I was like, let me just design a bunch of like, really kind of sharp geometric icons.

[C]

And is this an example of going left when feeling stuck maybe?

[B]

So it was just like, let me just. These are. These feel nice and sharp. There's, you know, a circle and a square. They're timeless. You know, a rectangle. Some of these, maybe the, the sideways Pac man, maybe not as timeless. And I ended up not using some of, you know, some of these because they felt, you know, they're. They're very much different than some of the others. But it's kind of like I really like the pixel idea. I like the big icons. I wanted to somehow, but it just felt like they didn't work on the site very well. And so I just designed a bunch of these. And then on my page six, you can see like I started, you know, getting these way more. Everything just started kind of fitting together a little bit better. And I was like, what if I just went like full typography layout and color only, like heavily gridded, very Swiss graphic design style and just trying to use those timeless fundamentals to build this website and like stripped it of all like sassy trendy gradients and kind of things. But I'll keep in the little like, you know, fun interactive thing, even though that sort. It kind of breaks that idea of being timeless because this would be very. This could be, you know, out of date. But if I just removed the mosaic interactive quality from. Would still have that kind of static graphic design manual kind of feel. I did have it kind of transitioning between pixels and. And sharp SVGs, but the pixelated version, it looked a little bit odd. So I just kind of decided to.

[C]

I kind of like the sharp static state transitioning into pixels. That's like. Feels very intentional to me.

[B]

Yeah, I enjoy. I think once I'd finally just push through all these different concepts, the sharp style just felt like it was sitting better with me. You know, if my website never changed, I'd be okay with it. Like, oh, you just use that one. But then I also have the same, the same mosaic. I, I have a prop that's like, is it icon mode or is it photo mode? And if it's icon Mode, it accepts SVGs and it's photo mode, it accepts a photo. And so now I just have like the clickable version on the website. And so. And then I can also say whether or not it's. It is default pixel mode or default photo mode and it loads a placeholder image and then as soon as the mosaic is ready in the background, it will load in. And then I added like an initial bounce function. So like when it's ready, it bounces to let you know that it's ready. So like if you were on a silver connection, it would just load the photo and then it might take 5, 6 seconds and then it would bounce and kind of be like, oh, now we're ready. And so kind of fun. And this version too, like it kind of helped me dial in like what do I want as the default parameters? You know, like how, how big or small is the grid going to be? How many click explosions are there going to be? That's cool.

[C]

Process question real quickly. How pixel perfect did you get in Figma versus how much designing happened with ud? Just tinkering in code once you kind of nailed down the high level direction that you wanted to take.

[B]

Yeah, so like all of this was I, I would say I got it to like 85% how I wanted it, but I didn't have it like fully systemati. I didn't build variables, I didn't build a design system fully. I mean I do have, you know, some components here when, you know, it's just easier to design with with certain components. But I would say generally when I'm building something myself and I'm definitely going to be making the website, I will, I will only get it to, you know, I don't know, 85, 90% complete and, and then I'm just like, I'm adding class names, I'm adding like PT30 for tailwind class names and just trying to figure out out the rest. Here's another page that has these like single icons. It's kind of cool. So yeah, I, I end up, I ended up adjusting things and kind of redesigning things. Like I never even designed the mobile menu like this until I had it in code and I just decided to, I kind of built it in code and then sometimes I'll take a screenshot and then bring it back into Figma and adjust it.

[C]

H. That hover state's a perfect example of something that I probably would just do in code every time anyway. Yeah, I definitely, it's all about how it feels.

[B]

I definitely made this hover state in code for sure. And I had a bunch, I had a variety of like different versions where like you can see how this one has the like the leading arrow coming in and the, the other arrow going out. I had a version that was Just only shifting and there was no background. But then it felt, it almost felt like I was going too restrained with the button idea. And so adding the hover back in, it felt like it was maybe a little bit more intentional. But that's another example. I had five versions of this. Like, I told you that I really like that diagonal pattern.

[C]

Oh.

[B]

So I ended up kind of building out this diagonal animation component.

[C]

It.

[B]

And you can change. You can. I had this added as like a hover state. And like when you're hovering, then like the bars were. And I'm like, that's too much. It's way too much. And I don't know, I just, I did. I probably spent three times the amount of time I needed to spend on this project. I've got, you know, three or four different directions I could have taken and things I could have coded. But, But I, I, I ultimately I just tried to stay true to, like, all right, what feels timeless. I'm kind of going for that, like, polished, timeless foundational vibe. And that's kind of like where it ended. But you know, you can see, like, where, oh, what if we did this? And like, my lizard brain is just like jumping all over the place. Oh, diagonal inter interaction.

[C]

You had to get it in there somewhere. 404 page is the perfect, like, this motif is dope. But it didn't fit Exactly.

[B]

Even the 404 page. Here's some other ideas that I had.

[C]

Oh, my gosh. You did multiple explorations in. That's really good.

[B]

What the heck?

[C]

Kind of that PDF style almost from the very first.

[B]

And I was like, I'm already using this like, 12 column grid and I'm very strictly staying to these four columns by most in most parts. And I still think this was cool, but, oh, man, it's like I was like, I don't know. I even, I have this as a color variable. And I almost decided to go with this like, hyper green color. But it is kind of fun, you know, like, you can throw up the. I can just change the interactive color variable in my global CSS and, you know, kind of feel it out.

[C]

I think I, something I love about this behind the scenes is seeing how wide you go, but, but how deep you go. Oh, fudge.

[B]

I'm thinking about like, every little dumb detail. Like, like, this is. It's Christmas time. I'm thinking about the Christmas Story movie. Like, oh, fudge. Except I didn't say fudge.

[C]

Oh, man, it's so good. This is such a fun window into your creative process. And there Were many pit stops along the way. Another perfect example here. Yeah, like, this is design. This is it.

[B]

This is. This is a diagram I made for Claude where I'm like, dude, look at, look at what I'm talking about here, man.

[C]

No way.

[B]

This is what I want because I know how tailwind works. I know roughly how REACT components work. And if I was just coding this with like, HTML CSS components, it would be pretty easy. And in retrospect, I might should have done that first because this is my first time building out a full website with React, not with. Not with Cursor. But I, you know, this is not so complicated, but, you know, like, if you look at the way that I'm handling this, like these offset. And then I want them to responsively, you know, pop into place where went a little bit far down. Now I wanted them to kind of stay in the second column versus the, you know, the offset column them. So it's not really that complicated. But if you don't articulate that well when you're trying to, you know, code up your, you know, your cursor component. I found that I don't know if this was like a waste of time or if this actually helped, but I'm constantly trying to figure out ways to just lock in context and be able to reference context over. So I built out. What I first did was I built like a slash system page and I just was like, let's just make these components accessible and clean, and let's just knock out some of these components and figure out where we're going to build in the padding versus we're going to like, include the padding in the page reference. And so this was sort of like one of those documents. I probably made a few others there might be. Just trying to look around to see, like, what else there might be. I mean, this is like just another random trying to test out, like different colors for. Or something I've never had on really any of my sites is, you know, light mode.

[C]

So I don't know how I feel about it. I know I feel like it breaks some rules somewhere.

[B]

It breaks some rules, but, you know, it's there if people want it before.

[C]

Maybe to land the plane here, you know, there's somebody watching who maybe has a Christmas break, like circled as like, I'm gonna work on my portfolio and personal website, and I want to do something that's creative and doesn't feel either like the trend du jour or just a really nice mimic of something that is already recognizable and well crafted any other advice or general mindset shifts that people can make to be able to grow this kind of creative exploration process that you're showing here, here.

[B]

I think the best thing you can do if you're working on your personal website or just some little project is just try to get a vision for, for what you want it to be. Is it going to be techy? Is it going to be like classical? Is it going to be bright and colorful and blobby? Or is it going to be sharp and crisp and no corner radius and come up with some adjectives like things that you like or like. Oh, is it going to be like. It's going to be sort of in this ballpark. And I think that alone, just having a design direction that you feel confident that you want to pursue will help you filter out those decisions that might, might make you, you know, go this way or go that way and, and don't look at too many references, you know, because I feel like you might be in like 50 of the way done with your design or trying to figure something out and then you see some. Somebody launch some new website and then you're just like, oh man, so much more than what I'm working on.

[C]

Y. Yeah.

[B]

Like I. I can't tell you how many times I probably saw something and I'm like, oh, that's so good. Like, what I'm doing is just so basic, you know, and it's just so easy to get discouraged when you're sitting by yourself with your own little designs. And so I think having that conviction of what just excites you and what you really like, regardless of how it's going to be received, I think that's what makes it fun. And that's where you can really explore like, like these little AI tools and figure out how can I wield them to bring out my vision. I think that's the way to use it. Instead of saying, how can I one shot this and make, you know, stripe.com website or whatever the cool website of the day is. And yeah, so just trying to like figure that out and then use that tool to help you achieve that vision.

[C]

Well, I love it. I have multiple websites that I'm kind of thinking of right now and I feel like this has been peak inspiration for me is just seeing this file. Like, I so appreciate being able to get a glimpse of the mess and all of the different silly pages and directions and just how deep you've went and just stuff like this, like, it's, it's really awesome. And this content is few and far between, so I appreciate you pulling back the curtain and sharing with us today.

[A]

Before I let you go, I want to take just one minute to run you through my favorite products because I'm constantly asked what in my stack Framer is how I build websites, Genway is how I do research, Granola is how I take notes during crit Jitter is how I animate my designs, Lovable is how I build my ideas in code, Mobin is how I find design inspiration, Paper is how I design like a creative and Raycast is my shortcut every.

[C]

Step of the way.

[A]

Now, I've hand selected these companies so that I can do these episodes full time. So by far the number one way to support the show is to check them out. You can find the full list at Dive Club Partners.