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

What does it look like to own web design for one of the fastest growing AI companies in the world?

>> So, we went through a few more pages.

[laughter] >> The scale of the amount of web design that you just did dawned on me. How do

you even get this opportunity if you don't have companies like Apple or Airbnb on your resume?

>> I mean, you always want to have one main core interaction or like the swell factor or something that really makes it easy to understand what you're doing.

I've been playing a lot with the CL code and it's amazing how how much it unlocks. You know, if you're a designer,

unlocks. You know, if you're a designer, you have all the ideas, [music] you know how it's supposed to look in the end.

So, like now you can u if you have a little bit of technical knowledge, you can build so many things. And I could say that keeps me awake at night. I just

so excited about, you know, building so many things. Welcome to Dive Club. My

many things. Welcome to Dive Club. My

name is Red and this is where designers never stop learning. This week's episode is with Roman Tesla, who's leading web design at 11 Labs. So, [music] he's

going to walk us through the tiniest of decisions all the way to how he thinks about the broader web system. But one of my favorite parts of this episode is

hearing about all of Roman's side projects [music] and the different ways that he's becoming a builder with AI.

But before we get into all of that, this episode starts in the 11 Labs Figma.

>> When you think of 11 Labs, it's a it's a voice company research going on like behind the scenes. [music] It's not a it's not a rapper company, you know, where the research and the models come from somewhere else and you just the UI

interface all that. So that was kind of the plan to try and like visualize that on the in the brand and on the marketing side of things and part of the product and that was kind of like tricky, right?

So, we're kind of looking for like different ways coming from this a bit more colorful if you can imagine like these colorful orbs uh like a bit pastely uh color palettes, a lot of

whites and trying to see, you know, like what can be like this unique uh identity and kind of like core for the brand. And

so work with the outside agency to try to collect some ideas. And so here's like just a just a file that we're working in. And so went through like a

working in. And so went through like a lot of different concept to be honest and it took a bit of time there, right?

So you know we had something with uh try to play with with shapes and with different colors. At some point we

different colors. At some point we stumbled upon this concept of cloudney patterns and we felt there was something that kind of really resonated with the brand. Right? So this is something that

brand. Right? So this is something that is connected to the voice and to the identity of the product. Right?

>> So clutney patterns are like those patterns where that like form when the like certain uh frequencies of music plays which like a really interesting concept but like it's kind of abstract.

you can play uh you can play with it a lot and then you get a lot of different interesting patterns and shapes. We

tried a lot of different things. It

wasn't feeling like it was it was 100% there, right? So, but there were already

there, right? So, but there were already some interesting ideas from the from the very beginning. Eventually, we ended up

very beginning. Eventually, we ended up that is something that is kind of a mix of um of cliny patterns of a little bit of color, you know, these kind of like moody images and little patterns and

motions and and a mix of that with with patterns, a bit of noise and and glass and and blur effects. Mhm.

>> And that's was and then like we ended up there was kind of the like the nice the nice point to start with the brand experimentation. We created some

experimentation. We created some generators online where we could like kind of play with different patterns and and try to combine like these diff these different layers. That was from that

different layers. That was from that point we had to like figure out how to do like the the most complex part, right? So this was like collaboration

right? So this was like collaboration like internally with an external team and from that we we were looking for different ways how to use it and we had to like take it and and and build on top

of that and and uh try to use you know like these patterns and these uh these mods and different use cases because you know 11 laps is still like very startupy and you know there's a lot of going on and there's so many projects happening

we could not kind of stop and redesign the whole website. Uh so we had a bit of a transition that is actually still happening. So, this was kind of the base

happening. So, this was kind of the base and the foundation.

>> Real quick message and then we can jump back into it. Fun fact for you, I'm right on the cusp of the top 1% of granola users. So, when I say I cannot

granola users. So, when I say I cannot get enough of this product, I mean it.

It is that [music] good. But after

seeing their end ofear crunched report, I have even more respect [music] for this product. But I never have a

this product. But I never have a conversation about design without grunting granola. And somehow it

grunting granola. And somehow it perfectly organizes all of it for me.

whether it's [music] chatting with guests for dive club or doing user research or keeping track of tasks for inflight. And then [music] Crunch gave

inflight. And then [music] Crunch gave me this beautiful synopsis of all of the key themes and even some funny moments from the past year. It's just a good product. So if somehow you're not

product. So if somehow you're not already [music] using Granola, head to dive.club/granola

dive.club/granola to spin it up for your next meeting. So

Lovable just had another big time [music] release. You can now build and

[music] release. You can now build and customize online stores powered by Shopify and Lovable. And earlier in my career, I was really into Shopify, but I always felt limited by their templates

and was super intimidated by doing anything too custom. But now you can go from idea to storefront [music] to selling in just a few minutes. It's a

big deal for the future of commerce. So,

if you've ever wanted to build an online store, now is the time. [music] Just

head to dive.club/loable

to get started. Okay, now on to the episode.

>> Something that is might be interesting is how we kind of went through, you know, looking in all of these patterns and how we try to like use them on on the website.

>> This is a point that so many designers find themselves in where they get this cool mood board and brand book and everything looks really nice and then it's like no no use it, you know. So

where'd you start when you were thinking about how to apply this, where to extrapolate it? I'd love to kind of go

extrapolate it? I'd love to kind of go back to even the beginning stages.

>> Yeah. Yeah.

>> It was like in a way something that looked pretty good and like you know like how agencies like to put it on some some banners ad banners where it's like very clean. You just put something

very clean. You just put something that's like visually nice but >> it doesn't necessarily tell the story that like maybe you want to tell like on a very specific page. You know like our product is uh pretty massive and so we

have a lot of different sub products.

you might not think of uh when you think of 11 laps you might think of just kind of voice cloning and voices but a lot of different sub products and they're all like very different from each other. So

like trying to figure out you know how to use all how we use use all of that.

So I actually started with the agents and it was kind of like one of my first was big uh projects where we got to play with some of the new branding system and try to find a way to use it. And so

something we took out of that was uh you know taking maybe the um the existing 11 laps not fully throwing it out right but you probably think about you know like a minimalist like a really nice clean

layout right a lot of white space and now we have these nice nice visuals we have um cliny patterns to connect with the voice a little bit visually and then we have like nice glass effects so I

think this is something that we took and we try to like put it and combine that in different assets that we use. So for

example, this one it was for agents, AI agents or back then it was like conversational agents but multiple names. This is like where we try to

names. This is like where we try to apply some of these colors. So you can see like from the very start this part and I think most of these pages are live so you can go and check them out. A lot

of like really nice interactions on it that tell the story but this part is animated and like these already new assets. Each of them is a video

assets. Each of them is a video showcasing different use cases and like this is how we try to in the first in the beginning. Yeah, that was that

the beginning. Yeah, that was that pattern >> patterns. So, we try to combine cliny

>> patterns. So, we try to combine cliny patterns, some of these uh moody but still clean images with blur effects and a bit of grain. Yeah, this was the the first implementation, our first try at it.

>> I really like this hero section because it feels very clean and familiar and you know that's like the sassy layout except you have the composition up top coming from the header.

>> That's pretty fresh. I haven't seen that implementation very often.

>> It was a fun process. We tried a lot of different layouts, right? So with this one, so this was something it was like a very late change almost before going live and I'm very happy that we did that to be honest. So like from the concept

is you know you land on this page as a user and then like three three different layers of interaction and understanding what the whole idea is because the the core of this is conversational. So

there's a lot of voice going on. So you

cannot see that you know if you just land on the page you have to click on something. So the first thing is try to

something. So the first thing is try to visualize the conversation in chat and specifically tool calling. Um so that you know the agent can check the order status and do like different things like

that. And so this this happens as like

that. And so this this happens as like the first interaction. So you kind of get idea what's happening. And then this bottom part is always like five viewpoint height visible like there's

about 5 to 10% of height that is always reserved. So like you know you know this

reserved. So like you know you know this is not cut off or it's not you know that you only see this part of on top and then you have CTA being cut off or anything like that. And then this is kind of the second layer of, you know,

trying to explain what we do and and what like conversational agents do.

These are videos you can kind of play.

You can hear the audio. Uh but these are still like passive, right? So you're

just kind of watching videos at this point, but you can already see that you know the agent can do so many different things and be in a as a customer support agent. It can be like in gaming and be

agent. It can be like in gaming and be like a character and you're already understanding a lot of things. And the

third layer is uh something yeah you cannot see in this view but there's a floating widget that is always present um that is a little different from the traditional you know 11laps widget that

is kind of integrated into the page and this one is for you to kind of talk and experience this yourself. So you know this takes the highest the most effort because you have to click and you have to talk and you might be not in the right place to talk but like once you do

you will be really convinced you know you can really experience the agent and then the quality of the voice and stuff like that. So that was kind of the um

like that. So that was kind of the um the idea behind that I think to you know just kind of demo the product, keep it clean and >> can I go a little bit deeper into that component really quickly because it

could land kind of flat without all that interactivity and in many ways how it moves and what it shows is kind of the quality of the design. So talk to me a little bit about how you're exploring

like the interactions. How closely are you working with developers? Are you

prototyping those yourself? Like what

how did that part of the process work?

Yeah, there are different ways that we go about it. We work actually like pretty close with developers. I'm like

semi- techchnical so I can go in the code and kind of play with it a bit myself and it's something that I was also doing at you know this step as well. But how it starts is uh you know

well. But how it starts is uh you know we get an idea. Um like normally our timelines at 11 laps are pretty short.

We don't kind of have the time to you know go and create like a ton of different prototypes and prototype a lot of different interactions and animations. I'm lucky to also work with

animations. I'm lucky to also work with a like really talented team that can just take a design and kind of really pick it up and understand what's supposed to happen. So we align pretty closely to like polish this. So with

this one, we have a few different types of animations. We have coded animations

of animations. We have coded animations that are like built in code and this is one of them. There's always a collaboration happening there. I might

jump in the code and try to, you know, play with the small interactions or try to polish some easing curves or some like the order of animations what's happening. And so we kind of collaborate

happening. And so we kind of collaborate on that until it hits a spot and until like we feel it's there, it's ready to be released. This one is awesome because

be released. This one is awesome because this one is built in code. You can

localize the text. We use that in different pages and there's a SEO use case as well. So like we we use something CMS called payload. So this is one of the components. We can just pick this component and say yeah I want to

have these chats and then it will create dynamically the chat which is really awesome.

>> Yeah, that's really cool.

>> Uh before that actually we explored drive as well for this one. So I even had a little different UI for this but like the first version build of this was in drive. Like a little drawback of

in drive. Like a little drawback of using drive in our case is because you cannot use voice and in our case voice is also uh yeah pretty important for this widget. We went with a built-in in

this widget. We went with a built-in in the code and we have some other examples that I would show where we have some graphics or some visual parts that were built in RI and some other things you

know like the videos. Uh some of them like I do myself sometimes but most of the time we have video designers that are creating a lot of awesome videos.

Lately we we try to go a lot more into building a lot of these widgets and code to you know achieve that sharpness and have all that control over the animation. This is how you can see how

animation. This is how you can see how we're trying to use the clay patterns and like something we realize pretty soon that if you try to put a lot of these patterns, you know, even if you have different shapes and use them for

every single graphic, like it becomes really like overwhelming, right? So, you

don't want to use this for every single like UI shot or every single image. But,

we had a few different variants. We're

like playing with smaller and more like a larger patterns, different cutouts that are happening. In this case, you cannot see so well on in this example, but like this part is blurred. this part

would be unblur or playing with with the blurs as well.

>> And you built like a web generator to create those.

>> We built that as part of the experimentation process to try and see how clotting patterns behave because part of the part of the branding exercise if you like one of the first

things I I I showed you where also clotting patterns were a lot simplified.

So at some point when you try to simplify them a lot they lose that mathematical feel and the accuracy feel and they kind of feel like you know some random blobs. So we're trying to find

random blobs. So we're trying to find how they actually look mathematically.

So we have this part that is pretty fun to play with.

>> That's so cool.

>> And bon based on you know mathematical behavior of clin patterns. So you kind of play with them and control them in different ways which is really awesome like thickness of lines. And you can see that's kind of the effect that we

started with. we have um there's a bit

started with. we have um there's a bit of noise effect overlaying. There's a

blur, but blur only kind of on parts of the of the image and that creates like this pretty pretty cool effect.

Something that we play with here for example. So you don't always have to

example. So you don't always have to like show the whole pattern. You can

take uh you know just part of the pattern, take the corner, zoom that in, and then you have like a really cool effect where part of the image is very visible, part of the image is you know >> Yeah, it's amazing. And you can see the

glassy nod to the brand book that you showed earlier. Now,

showed earlier. Now, >> this felt unique and and awesome and something very close to the brand feeling and vibe that we're going for.

So, we started with that and yeah, we try to play with it. We also had like versions where, you know, you would only have the cliding pattern and this was our first page. I'm just going through

some of these examples here. This was

like a very fun section too as a you know like the developer section and we tried to you know developers uh to like make this look a little bit more technical. So this can look like a

technical. So this can look like a little bit different from the rest. The

plan is to do the same whenever we, you know, end up building the developer page which uh not yet fully built in with following the new brand that I can't wait because I think that's going to be really fun. But this part here, if you

really fun. But this part here, if you check the website, it's animated. So we

have like this part is animated and this part and this is this part is fully done with in Re.

>> Uh so that was awesome to work on. So we

have a bit of a mix where we use the code where we use RIVE and some videos.

Also realized pretty early on that we could not solely rely on cluting patterns as like the only visual element. H so we're trying to find a

element. H so we're trying to find a balance and and also find a way to uh create some of the graphics. And so one part would be to right have some of the

product shots but you know with all of the complexity we did not want to try to over complicate the UI. So trying to simplify the the graphics a little bit and trying to find the balance there

till I still keep it clean and like match the whole aesthetic of the of the whole of the whole web page. Yeah, in

some cases would also want to have some some graphics or it's not a you know it's not a part of the UI they want to show. Uh so this was like one of the

show. Uh so this was like one of the first things that we tried where you know we have like these isometric kind of little technical like line based illustration. This one is fun because

illustration. This one is fun because you can click on it on the website.

Cool. Uh so that was pretty cool too.

>> The dotted lines around it really make it for me like they make it quite unique.

>> Yeah. Thank you. Thank you. That was uh something that is still there which I'm happy about too. And uh something you know like there a lot of kind of line work that you can see online but other

line is not so widely used. So which

gives a technical look from here. Okay.

Can show you a few more examples that we are trying to with playing with different line works and a bit of abstract uh graphics. Yeah. Yeah, and

this is already kind of getting into that a bit more technical feel and we also realized pretty early early on. So

that was one part was uh you know how do we bring that feeling of the voice and put it in the center of what the brand is. But the second part was also like a

is. But the second part was also like a technical part right and we did not want to make it too technical or make it look like it's only made for developers because the product so wide at the core of the whole company is the research.

Uh, so I wanted to like make sure that it's reflected and that's kind of how we ended up looking into the aesthetic. One

of the next following projects and you can see K is still playing with a with a similar aesthetic but like how it's developing. So that was the second page

developing. So that was the second page and like the whole idea with all of our landing pages and the whole design language on the website is, you know, as we're like developing all of these sections and all of these pages, we're

trying to build a bit of a system. It's

about the design uniqueness, but it's also about building a system to make sure we have all of these components that are somewhat reusable. We have a bunch of pages that are used, you know, not only for like the feature uh pages,

but for like SEO and some like other very specific projects. So, like we from the very very start, we built all of these as components and that was kind of part of the thinking process as well.

But as we're going through this, of course, every product is so different.

So, the hero section is where we're trying to do something a little bit different, something fun. And this was like really awesome idea from Nev actually where this part is a carousel and you can interact with that and play all the demos of of the of the music

right away.

>> The first thing I did when I got on this page cuz I just took my cursor I just grabbed it and spun it. It felt great.

>> I love this one. Uh I love this component. Yeah. Also like if you play

component. Yeah. Also like if you play the music I mean it's it's incredible right? How how awesome it sounds. That

right? How how awesome it sounds. That

is like another part how crazy it is, you know, going from from agents that could be its own standalone company to music that also tells you like the quality of the research behind the company. We went through this part and

company. We went through this part and this again like we'll try to play with a bit more kind of technical feeling and these like little snippets from the UI and they kind of animated and then going

through you know a bit of storytelling of going through generating a song and going through a couple versions. We

already started playing with separators and trying to see how we can some like visually maybe use a bit more lines because always a tricky part, you know, how to visually group the sections.

Often times you might need to have a center title or you might have to have like a left align title like then you sorting the all of the content within the section and with having the background like really clean and white,

it was kind of tricky to like group them, right? So we came up with like

them, right? So we came up with like with a neat system of like using like the separators like we have the dotted line, we have the title of the section and that's something that we used in the

the first the first pages and it also went to the music page. this we use it here. And in this part, this one was

here. And in this part, this one was really fun to work on is uh the left side is kind of scrolling through and the right side is sticky and this is clipped. And so like as you scroll like

clipped. And so like as you scroll like different parts of different graphics that's scrolling through and then you can also see again a different use case where we have a bit of noise. It's a

combo of like glass noise, colliding patterns, uh some moody moody images.

This parallax implementation here is probably my favorite part of this entire page. But again, it's one of those

page. But again, it's one of those things where like maybe you have the idea, but it's kind of hard to bring to life without getting out of, you know, just like vector and Figma. Like is that

something where you kind of have to pitch the idea to a developer and be like, "Hey, what if it worked like this?

Can you just try it and we'll see how it feels?" Were you able to prototype it?

feels?" Were you able to prototype it?

Like how do you bring something like this to life? cuz it's a very non-intuitive implementation, but it totally works.

>> Yeah, that's the fun part. I mean, at 11 Labs, everyone is really down to build something fun. So, often times when we

something fun. So, often times when we do not when there's like we're not sure if how that's technically I wouldn't say feasible, everything is pretty much feasible, right? But if it's technically

feasible, right? But if it's technically achievable or not in our case, then we kind of try to prototype it real quick.

So, awesome team. So, Gerge, shout out and and and Brad. So we just we try to like really quickly go and prototype this and if that makes sense you know we continue and then then the the final

step it would be like polishing everything I would jump in the code sometimes. So like to be honest I know

sometimes. So like to be honest I know often times in my past as well like it would be really tricky to pitch something you know whether it's a product or just a website to pitch some interaction but I think the team is very

eager to build awesome stuff.

>> Yeah it's amazing how often the answer comes down to you just have to work with people who care. Exactly. And and to be honest, you know, there are a lot of fun examples online. So like often times you

examples online. So like often times you would see something as an inspo and we kind of see okay that's these guys did that this way so we can for sure do something as well. So there's like some

inspiration online makes it a lot easier. After that we uh started

easier. After that we uh started thinking you know like at some point we stumbled upon like internally in the team experimenting with the grid system and trying to see like what else we can

do what else we can do to even like step this up even more. So we we landed eventually on on on the grid system to like add more lines to the page. And so

we did like a few more a few more versions, a few more styles of the page that are that were that we're sticking to now. So like this is something

to now. So like this is something already with a uh studio 3.0. Maybe

you've seen that online and you already see that this one is a little different.

So there was like kind of a next next version like of our process and we'll have to probably go back and also like clean up some of the previous pages to you know make sure we keep the consistency level. But this is something

consistency level. But this is something already closer to like our final our final look you know where you still have the hero section that serves as the place to sell the feature cuz like every every feature is really really

different. we already have this this

different. we already have this this interesting grid, right? So like that helps us separate the sections and so for example where the other one was similar concept of uh right side that was sticky on the left side was u you

can scroll through we have a similar concept here but we already using grid um some bento some bento grids as well and [clears throat] some some visuals that I'm going to also show you in a

second that's also another fun part of it. Yeah. So we have a few examples of

it. Yeah. So we have a few examples of this one. I love how intentional the

this one. I love how intentional the imagery is. Like all of it is so on

imagery is. Like all of it is so on brand and cohesive.

>> Yeah, that's another challenge. Um

that's something that that we we really wanted to, you know, show parts of the UI but not try to over complicate it.

Still stick to, you know, make sure like it fits it fits the UI of the of the page and simplified it a little bit. So

we try to intentionally cut off some of the noise, you know, that is important in the product but maybe not as crucial on the marketing website. So that's why some of these are like intentionally a little bit simplified. It also has now a

little bit of like an actual look. So,

this is not purely white. This is a bit of Yeah. grayish background color.

of Yeah. grayish background color.

>> Oh, yeah. You're right. I'm scrolling

this right now.

>> Yeah. Which it's a it's a really interesting effect because then it helps some of the graphics stand out. So, if

we use sometimes, you know, white color and some of the elements of the graphics or we have a secondary button or a toggle and we have like a slightly elevated effect then we use like white fill

>> and it makes like the whole element stand out a little bit more which is a pretty nice effect. Yeah. So, we went through a few more pages. There's a

there's a bunch. [laughter]

The scale of the amount of web design that you just did dawned on me. I've

been designing products every day for the last 15 years, but in the last 6 months, [music] everything has changed.

With AI in the mix, I'm cranking out ideas faster [music] than ever. But none

of that matters if I can't get the feedback that I need to get the team aligned. And right now getting Async

aligned. And right now getting Async feedback still kind [music] 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 and it's totally changing the way that I work. So I'm

excited to show you. Right now I'm only giving access to DiveClub listeners. So

head to dive.comclub/inflight

to [music] claim your spot.

Okay. So, let's take a step back here because you have an incredible amount of polished work that either has shipped or is shipping.

>> Can we just duck down a rabbit hole really quickly of some stuff that didn't make it and talk about why and look at some of the mess behind the scenes of these finished concepts?

>> We are about to redesign the text to speech page. And so, I'm just going to

speech page. And so, I'm just going to show you first our final version and then the version before that to kind of get a bit more context. this page um we're trying to you know explain and

show and demo our speech to text and our voices. So we have now if you open the

voices. So we have now if you open the page now you might see an omni box what we call like this part here but the older version we have on the website but the problem is you have to you know it's kind of like a text box first and then

you have to type in the text and then you have to select the voice and then click play. So it takes like too many

click play. So it takes like too many steps right so I want to like make it easier to demo all of the voices and that's kind of the core of the whole text of speech. We have like over 5,000 voices and they're really humanlike and

awesome. So uh this has to be as easy as

awesome. So uh this has to be as easy as possible right to demo. So um yeah the first the first version I landed on came from um a few iterations from other pages uh we work on the enterprise page

that was really awesome and that's where kind of like we landed on this maybe I'll show you for context so you makes more sense we came up with u this concept for you know on one side you

have like what you see in the app and we see in the product and the other side you see the output and what the user interacts with. So we would have the AI

interacts with. So we would have the AI agents and the I agents what you see in the product and then the the final output and then if you have the creative platform you would see a creative a platform what you see in the app and

then the output which would be in this case we would show a like a video that is dubbed and with voiceovers. So I like the split screen concept that we then built on and so that was like my first

idea to use that here as well. And so it will like land in the on this page and right away you would see okay you would have all of the voices you have list of voices. You can play right away and on

voices. You can play right away and on the right side you can see the result and you can play it or you can click and edit. The feedback we got though made a

edit. The feedback we got though made a lot of sense right. So like there's a lot of visual visual weight on the right side. one of the first things you land

side. one of the first things you land on this page, your your your eyes will will land here, which might be not so bad because it's kind of the voice that's selected, but it might take like a second for you to connect that this

part is linked to a voice on this side.

>> So like visually the visual weight is a lot lower.

>> Um, so it might take a second for you to like find out that okay, I can click on this to interact here >> and then something again that you know in my concepts first for me made a lot

of sense, right? that you know you can try to hover over this part. Yeah. Okay.

That would be an interaction. But the

downside was that you know this part here is not so it doesn't look so interactive, right? And so like the

interactive, right? And so like the visual weight is off. So I try to play um with a few more versions, you know, try to make this look a little bit more like like an omni box that we have now.

You can click and interact with this something like this where also like a little bit closer to what we have now.

Yeah, this was kind of the initial idea.

Then you hover over, you have a little morphing effect and you land on the, you know.

>> Yeah, that's cool.

>> Let you know that it's it's interactive.

Then we landed on this. You know, the whole background lets you see that the whole thing is in focus and your eyes land on the whole the whole card all together. And the left and

right side, they have the same visual weight. So, you know, visually they're

weight. So, you know, visually they're more connected. So you can click on the

more connected. So you can click on the left side, play the audio, you can click on the right side, change the text, regenerate to like kind of see that, you know, these are not some some oneoff

shots and you can see yourself that the voices are like really humanlike.

>> It kind of grounds the grid more too, like something from the first concept when you have the really prominent gradient box, but it's actually indented inside of the grid by like whatever it was, 12 pixels or 8 pixels. And so it

just like visually throws off the lines just a by a little bit. Whereas this

really like you have that perfect strong edge uh on both sides too. So I see why you landed on this concept.

>> Well, it's a pattern that you're probably going to see on a lot of other pages from us that are already live and then that are going to be coming out.

And the rest to be honest, [laughter] we kind of land on it pretty soon. So we

actually have already built like a pretty decent system and I can go back and show you like a few more versions of of the landing pages that we have. But

as we go through each page in each iteration, we try to experiment with with all of the section and sections and see if they work. And so like if you pull it a section and it works and we're

happy with it, we're going to try to find a way to, you know, reuse it in some way like add a bit of variance to it, make them interactive. So, a lot of these things that I kind of built,

>> that's been like my takeaway listening to you talk is you're not just designing websites. You're designing this really

websites. You're designing this really robust system to display infinite number of websites and trying to figure out all the motifs and components and patterns that work in all those different use

cases. It's a fun challenge. Like, this

cases. It's a fun challenge. Like, this

type of scale is something that I haven't worked on in web design before.

And I can tell you're having a lot of fun with it. It's not only looking at like one feature, one whether it's product design or web design. You're

trying to see like this one page or one feature isolated from everything else because like that's not how that's not how products are built. That's not how they work. That's not how they're

they work. That's not how they're technically set up, right? So how you technically set it up is you have components and you have systems. So you have to always keep that in mind and as a designer that's what I believe 100%.

And that's that's the fun part of it, right? So it's not only about building

right? So it's not only about building one single button or one single section.

you trying to imagine whatever um you might build in the future how that will can be applied. It will not be 100% but you kind of think of one component with a few variants that you can apply and

then like reuse in multiple places and so you have the consistency but once you customize them a little bit you put a different content inside different animation or graphic and then you have like a unique look.

>> I want to zoom out and get more of your story and career journey that kind of a thing. But before we move on, just to

thing. But before we move on, just to make sure we cover our bases, is there anything that you're particularly proud of or that you want to show us today?

>> One of our latest pages, right? So, we

had a bit of a transition, right? So,

there was like a lot of challenges and uh along the way to like really get there, but I think lately we've been really feeling it and having a lot of fun with uh with what we ended up with.

Uh we have Brad on the team uh who worked also on Tailwind. So, we also use Tailwind as on the for the marketing website as well. So, we're trying to like we're starting to really like play

with this and really enjoy the process and um like build a lot of the thing cool things in code. So, one of the awesome things here as you can see like the transition >> like this gradient that that we set up

in the back the noise like it's not it's no longer static.

>> It's been morphed now. So, like once you transition there's some um depth map that that's allowing us to like also animate the image which is really awesome.

>> It's beautiful. walk through these bento sections which we'll be reusing in a lot of different places but of course with different content and so we're starting ready to use a lot of uh a lot of animations there that are very

>> I'm such a big fan of bento grids where there's one card top left that has a way higher contrast than all of the other ones that pattern I'm such a big fan of looks great

>> awesome thank you so much man yeah I um we we're having uh so much fun with this also it creates this balance so we we started with the first pages where you know every single feature with like this

left and right on the conveyor page had to have this color. So now we now ended up something where we have this balance of uh like paperlike backgrounds, a subtle like line work and illustrations

and then subtle animations and a little bit of color and this creates like really nice effects. So we have these awesome little interactions that help us tell the story. Um and they're built in

a really cool way, right? So, it's not a it's not it's not RIV. It's not it's all built in code and it lets you as you hover like it place the interaction and then it it always finishes the

interaction even if you hover out like it will still finish interaction and reset it which is like a really awesome.

>> Yeah, it's beautiful. Are you generating these images? Like each page kind of has

these images? Like each page kind of has its own color motif going. How are you coming up with those?

>> We had a few different backgrounds that we generated initially. So, we have a we have a collection set that also like our branding team came up with. So we have a bunch of cloudney patterns, we have a bunch of backgrounds that will be maybe

about like 20 or 30 something like that.

And so we kind of mix and match them. So

we can take the cloudy pattern, we can take the background and we can kind of pick that and just, you know, play with that and just match them a little bit, right?

>> Okay, cool. I was just curious.

>> Yeah, we had a we also generated a couple of these things. So you might see them in the product as well. They use

for sound effects. They also like a mix of a little abstract with a color palette like these moody motion blur also like creates a pretty cool effect.

>> I appreciate you taking us through the the craziness that is your Figma and the amount of pixels that you're putting together is truly impressive. I do kind of want to zoom out and learn a little

bit more about your journey because even just doing a quick glance at your LinkedIn, >> you know, you're working at 11 Labs, which is very clearly in that top tier of companies, leans all the way into

design as a differentiating factor, and yet you don't have this like background of all of these high-profile companies.

You know, it's not like you got hired from Airbnb kind of thing. And I look at you and one of the reasons that I'm inspired is you've continuously put yourself out there on the internet and

tinkered and have all these experiments and it's clear that's played some role in you landing this job. So can you talk to us a bit about how you wound up at 11

Labs and the different ways that you've even approached your career to get to this point? I intentionally in my past

this point? I intentionally in my past try to focus on a little bit uh not to go like to to like big companies like I intentionally try to stay in startup area because it's a fun process for me

the building is the most fun process of like of this whole thing right I wanted to like one you know learn everything about how companies are built from the very very first step right not only from

design side but also from like uh from the founder side and how the companies are structured and everything like that but the second part that also allowed me to build a lot of um ideas on the Like I've been using that as not as much

as you know dropping everything and trying to build like a massive billion dollar company but like I've had some like little ideas here and there. That's

kind of like you probably have that too, right? So kind of the joy of building

right? So kind of the joy of building and that's uh got that in design but also you got that anytime you have any kind of idea and you want to make that idea real. I had a file sharing app that

idea real. I had a file sharing app that I built. to like play with e-commerce

I built. to like play with e-commerce like a B2C when they like during corona time last year I started building like more apps but like this created website called like app stacks where I would kind of talk do similar what you're

doing what I would talk to handpicked founders uh that I that I also admire myself and like more like makers you know of apps like yeah it would be like Amy not boring not >> boring yeah I think that's actually how

I found appstax was your piece with Andy Allen >> yeah from Andy it was it was awesome right so you learn a lot from them and it's really awesome to chatting and connect. So,

connect. So, >> can we go down that rabbit hole for a second? Because it's such a cool

second? Because it's such a cool project. Like, we'll link abstaxs in the

project. Like, we'll link abstaxs in the show notes. Why' you do it? How did you

show notes. Why' you do it? How did you pull it off? How did you get to the point where you're like, you know what, I'm actually going to do this and make it real and not just think about it.

>> I was actually working on another project called Portal that is like uh where I'm trying to rethink when I was also freelance like I'm trying to go into freelancing and working on my own projects and so there's a lot of gaps in

freelancing. So I was trying to build

freelancing. So I was trying to build this other project and at that point I started thinking right. So you when every time you start to build a new a new product you think like what is the best tax tech like there's so many tax

techs out there so you can go native there's so many web tools you can use right there's so many there's so many products that you can pick and so you always think what is the best route so that's something where I started with and that's where the um the name came

from appstax once I started think about it more and like the interesting part always is the backstory of apps and you want to know not only like this you know very markety or the whatever you see on

the on the website you want to see a bit the backstory. You want to see how they

the backstory. You want to see how they came up with that idea and that kind of that I thought was very inspiring and you you could learn a lot from for your own projects and your own companies and you can learn a lot whether you know

you're a designer or like or you're building something and that's how I started the idea and that was something I was not even sure if it was going to work. I just got that idea and I like

work. I just got that idea and I like one week and I started creating a list of all the people I would like to talk to and hear all the stories about and so I started just emailing them and like DMing on Twitter and surprisingly a lot

of them answered and almost for every every story that I did like there was a call almost all of them some of them were in a sync I had I think like about 30 stories even before I launched

everything and that was really awesome.

So we talked to really a lot of awesome awesome makers and founders. So the idea was yeah like pretty simple you know I thought it was very inspiring like there a lot of other similar projects I think

you in the category where was also part of the inspo like there's a status story if you've heard about them right but they focus something that I don't like personally that is a trend of sharing

you know mrs ars and it's all about your income whatever as a first thing and not about the craft right it's not about it's not about like the little details in the product it's not about you know

starting with the awesome idea idea and you're really caring about it and trying to build an awesome product and then having you know like MRI as as an outcome of that. So I wanted to make sure you know not talk about the income

but not talk about any of that but like more about the design aspect and the you know kind of craft side of it which I think is like more important valuable like in our community. I love it just

because you have this attitude of I'm just gonna do it, [laughter] you know, like I'm just gonna make it happen and you've done that so many times now and it really speaks to who

you are as a maker and as a builder and it's obviously played a pretty significant role in your own journey. So

>> I'm inspired. I genuinely am.

>> Thank you so much. Maybe to uh answer your question before um yeah how I found 11 Labs, right? So in around like April this year, right? So I had like all these project and ideas and now was a

really awesome time to build like with all of the AI tools, right? So you like feel like really empowered, right? So

like my plan was, you know, like I started freelancing and focusing full-time on projects and I started putting a lot more out on Twitter. So

that was appstax one of the projects.

Yeah. I got some viola, you know, like in my terms and like pretty Yeah, I got a pretty good reception. I had like all these projects and I was thinking, yeah, how do I need to like one place? I have

like all these separate websites. I need

like one place to just, you know, like just link and that was I had like my personal website. So I was like, let me

personal website. So I was like, let me just like create a very simple very simple website that I can share and I can list all of my projects. I just got a little idea and that's how like a lot of concepts start, right? So I think you

probably have the same thing, right? So

like you think of some really cool interaction or like a concept in your mind and you're like, "Yeah, it kind of makes sense in my mind, but let's see if that works." Framer and Web Flow before

that works." Framer and Web Flow before that, right? So that stuff was built in

that, right? So that stuff was built in framer and I was like let me see if I can do that in framer. And so like I came up with this like interaction but I was like yeah let me give it a shot. And

so the idea was that we have a very clean layout. I'm kind of like a fan of

clean layout. I'm kind of like a fan of awesome little details right so not to kind of lose the soul of product design.

So I try to always trying to find something like an interesting concept that like at least for me for myself I'm happy with and I'm you know kind of happy to share online with my friends.

Um, and so I came up with this concept and the idea is like these are all my projects and I hover over and have like this little, you know, fun interaction.

>> Yeah. And that was uh it was amazing to try to build this in framer and the fact that it worked that was incredible. And

the way it's built it's a lot of different whatever it's called in framer scenes right?

>> These um all of these states >> and I would have all of these separate layers, right? So just we are hiding and

layers, right? So just we are hiding and showing all of these things on hover.

Pretty pretty simple setup, but >> it's so cool though. I I remember a while ago actually sharing this as inspiration in the newsletter because I liked it so much. Like it's amazing.

Just like one really really good hover interaction as the core of a personal website is the ultimate move in my opinion. Like this just works so well.

opinion. Like this just works so well.

>> Thank you so much. And that that's something that we try to I try to continue now also at the level lab. I

think I mean you always want to have one main core interaction or like the SW factor or something that really makes it easy to understand what you're doing. On

one hand, you want to make it really easy to understand what the whole page is about, what the whole product is about. But also, you always want to have

about. But also, you always want to have a little bit of fun, right? So, this

little part is a custom font as well.

So like >> I was going to I was literally making a mental note in my head. I was like, I need to inspect element and figure out what font he's using there because it looks really cool.

>> There's a little website I forgot the name, but I can share afterwards. It

lets you just write on the iPad, right?

You can also write it on paper and you can write it by with your own hand and it would convert like your own handwriting into an actual font. So,

this is not a SVG or a picture. This an

actual font that I can use. And another

fun little thing um I wanted to like as well a little bit of info by myself. But

the thing is I didn't want to I didn't want to pay for like you know like a pro plan on framer.

So the the lowest plan is like the cheap part of me, right? I the lowest part is five bucks and it's only one page. I was

like I really need the second page here.

So instead of like you know upgrading to the to the to the pro plan to the higher plan I came up again with this this little interaction where it would be the same page but it would open this

overlay.

>> They it's it's another page but actually it's a yeah it's technically the same page but >> constraints breed creativity. So, I'm

looking at your list of projects here and you don't have Cali, which is the new one that you're working on. So, can

we talk a little bit about your latest experiment because you gave me a tiny glimpse and it's very very cool. So, I'm

wondering if we can kind of do a deep dive into that next.

>> 100%. Yeah, back in the early middle October, right? So, I had a little trip

October, right? So, I had a little trip with my wife in in Mexico. I've been

playing a lot with CL code and it's amazing how how much it unlocks. you

know if you're a designer you have all the ideas you know how it's supposed to look in the end so like now you can u if you have a little bit of technical knowledge you can build so many things and I can say that keeps me awake at

night I just so excited about you know building so many things I wanted to try and u you know on one hand experiment with our own APIs and see the developer experience of 11 laps and the other hand

you know I'm a huge fan of Mac apps I think if I had a choice I would just build only you know iPhone iOS and and native Mac apps because of you know all the experience and the detail to design

and yeah so I uh had a time to experiment with Kali and this is really awesome how much can be achieved in I think it was part-time during one week and so just like a little little demo

what what it can do right so it like lets you first um yeah convert text to an audio >> uh with with multiple voices and as well clone your voice so you can

you know you can create different pages for different projects. You can convert the text into voice. Another awesome

thing, you can also clone your voice.

So, it was a nice experiment to, you know, >> I love that interactions >> and a lot of animations. And so, if you try to record your voice and you get

this view, you get this animation right here, you know, that is like brings a little bit of joy, right? So, like when you're seeing that and >> the animation's so good.

>> Thank you. Yeah. And like small little details, right? So they're playing with

details, right? So they're playing with like a little press effect. So

>> Mhm.

>> this little floating bar. So like the idea is that it's floating on top visually, right? So when you press on

visually, right? So when you press on it, I think like naturally what you expect is to kind of tilt like wherever you're pressing. Then it's uh scaling

you're pressing. Then it's uh scaling down. If you press on the left side,

down. If you press on the left side, it's like press a little bit more on the left side as well. as someone with a little bit of technical knowhow that's now been accelerated with AI and all

these advancements and cloud code.

>> Any lessons or advice or even just learnings that you've accumulated on your own journey building your own software that you think other people could learn from or be inspired by cuz

I'm sure there's a good subset of people listening who keep hearing about cloud code. They keep seeing examples of

code. They keep seeing examples of people who are building their ideas, but they're still kind of on the sidelines, not really sure like what's possible or maybe unsure of even just how to strategically think about using these

tools.

>> A couple tricks that I have that I that I use and and something that I think you kind of have to find for yourself, right, to see like if that works. it's

changing all the time. H but something that I use for cloud code all the time is uh you know like first making sure uh you know kind of treat it as I don't know like your teammate that works for

me right so before like you starting you know you just kind of randomly say build me this and build me this like try to research like the best implementation so how I started with with Kali here um is

explain yeah I want to try to use this API I want to have this this use case and I want to do this and this and trying to research online and you know find best practices and give me some

options and then like build a plan around that and it would like you know go online and research and come back with a like a massive document with options with a exact implementation

and like when you see that you just get super excited right [laughter] >> I remember actually you know just one year ago before like I would even using any of these tools right so I was using

something uh like called flatterflow so like for my first version of my app portal and I remember you know like trying to sort out how Stripe APIs work and that documentation is like insane

>> because all these different versions that you can all the different ways you can build. So that took me a while to

can build. So that took me a while to like sort that out. It took me I remember with some errors like weeks couple weeks to like try to solve some things that I some problems that I had like now you can just say hey I want to build this and this and it will actually

go and find you the best ways to build.

So like you're really cutting all the time and saving all the time. It's it's

incredible. And yeah, then once you once you start building, what I do is I I have a bunch of like MD files, right? So

they always say like yeah, create a claw MD file for like um for the brief, for the info, I uh what I do, I create as many as possible. I would um whatever

the the feature is or the learning is I say hey like save this in the like payments API or save this in the the 11

laps API 11 laps voices or voice cloning so that it has context because one issue right now it's kind of forgetting so there's a context window so it will like save all the context in a specific MD file then whenever we need the

information again like it would go the document and then understand what needs to be done and another little trick is using uh to-do lists So like it would also create hey um like keep track of what you're doing. So like

once you create a plan of implementation and it would also create another MD file that is a to-do list or tasks or something like that they would go and kind of like do a little project

management or cloud code. Another thing

you know always using branches and committing every time you know some big feature is completed like making sure it's committed to GitHub and then you set up a branch and then you you know

merge and create a new branch. So the

like big changes are not lost.

>> How much of this if any did you design in Figma ahead of time?

>> For me makes it a lot easier, right?

Because with the it's still a little tricky to get the UI right. Um so I had this one. So like just visually planning

this one. So like just visually planning everything in Figma and trying to you know get at least the main screens.

>> Yeah. You really I mean you straight up designed this product in Figma like you acted as a traditional designer and then also built the idea.

>> Yeah. Yeah. Exactly. So that's

>> very cool.

>> That's the way I went through it. Um,

>> I think this is just a an aside. The

reason why I'm going to underline this and why I find it really inspiring is I think a lot of people look at AI and they write it off as, well, I can't get the visuals right. AI is not good at

designing. And part of me is like, I

designing. And part of me is like, I hear you. If you're trying to oneshot

hear you. If you're trying to oneshot the visuals, then yeah, you'll probably get a bunch of purple gradients. But

>> it just allows you to build pixel by pixel the idea that's in your head. And

so you can literally design anything in Figma and then bring it to life.

Exactly. Using cloud code and that's why I think I really love this example because you've nailed the pixel level design details in Figma, but there are so many other little design details that

you only figured out with claude code like that kind of 3D tilt on press. Like

that's a design detail. It just so happens to be in code, not in Figma.

>> Yeah, 100%. Um, yeah, it helps me a lot, you know, put my thoughts down in Figma and I think that will not go away, right? So, you just want to make sure

right? So, you just want to make sure you know where things are and you know how you want it to look and from the UX perspective how you want it to work. And

this like really helps me, you know, be confident about not just one screen, right? You can just try to go and build

right? You can just try to go and build this directly without the Figma mockup if it's one screen, but how it connects where you put some buttons and how the navigation works, how the whole experience works when you're trying to connect multiple screens. Like for me it

always helps having a Figma and then then it makes it a lot easier then to bring that to cloud code uh because they're like different extensions you have this built in already so you can

even copy code straight from Figma. So

you can copy swift UI. So at some point for example I had issues with uh you know copying some exact code for the or like getting some UI right. So I would try to you know select a component let's

say this one. I would copy the swift snippet directly into cloud code and say hey this is the code can you and then also screenshot and say can you build exactly like this

>> or using a Figma MCP but in my in my case it's not always successful because it's you know it's a copying the Figma layers right away and they're not always structured you need to use a lot of auto layouts and that kind of thing but if

you just have this and then you you can always for me I go like I would talk to a person I would try to you know add a screenshot at some code and then then say hey can you use this font size can use this color add a screenshot and some

code and then you know it takes a bit of back and forth but then eventually you can really get it pixel perfect and I want to highlight this because just the fact that it's doable from the from the

UI side right so uh mech and swift UI has always been tricky or like known for not being very flexible whenever you want to build some custom stuff right so like a lot of apps they look the same

but like even now already with cloud code so like the background here like is fully custom so there's like custom layer of blur. So, we have one of the default blurs plus some overlays.

>> Building really cool things is one piece of the puzzle, but I think something else that you've obviously gotten a little bit more comfortable with over the last few years is putting them out there on the internet and talking about

it and connecting with people. And maybe

before I [snorts] let you go, I'm curious if you have any advice for somebody watching who they have ideas.

Maybe they've even started to tinker, but they have basically no social presence and the whole thing feels a little bit weird and scary to them. Any

insights or things that you want to say to that person?

>> For me, what works is u trying to be really kind of you you can be proud of like what you're working on, something you're excited about, right? So, I think like the first step is to share it

online and try to connect with people. I

think that always works. It takes time.

So like if you have no presence it will take it might take a bit of time you know to try to connect with the right people but um you have to get yourself in the community. So I think if you're in the design Twitter bubble that's a

really awesome space to be in right you're like on the same level with so many people and it's very easy to you know get in touch with with a lot of designers and learn from them just putting stuff out there and not getting too demotivated when nothing's happening

when like you don't get a response that just the algorithm working. So just have to, you know, keep putting out there. If

you're happy with it, some other people will be happy with it, too. Even when

it's something small, like for me, the things that work out the most were the things that I actually did not spend so much time on, right? I just

>> It's always like that.

>> It's always like that. I just got a quick idea and I I thought, yeah, let me just build this and see what happens and then let me just put it online. Even

tying back to something that you said earlier when we were talking about app stacks too and you talked about just DMing people and people were actually like kind of surprisingly willing to participate and respond and that's been

my experience too where for some reason people are just really scared about sending DMs and you don't really have to be [laughter] like if you want to get momentum and start building community

and connect with like-minded builders send a lot of DMs. I think that's probably the most underrated slice of the internet right now is Twitter DMs. >> There's so much to give and so much to learn, right? Like Twitter now became

learn, right? Like Twitter now became the new the new dribble that like people putting out stuff they're working on.

It's not something fake. Like it's it's a very authentic if you like pick the right bubble inside Twitter. Like you

can learn a lot and you can get yourself very inspired. A lot of people building

very inspired. A lot of people building a lot of really awesome things. So

that's was the idea behind Appstax 2. So

you can see what other people are building and say, "Hey, actually like this app is incredibly so wellcraftrafted. I can do it too." I

wellcraftrafted. I can do it too." I

know for a fact a lot of a lot of designers like they have a lot of ideas, right? They also want to build a lot of

right? They also want to build a lot of things. So putting things out there also

things. So putting things out there also helps you connect with other people and just yeah makes it easier to get yourself get your foot in the door.

Yeah. Whenever there can be like a project someone wants to build or like get into some company like any company they admire, I think the best way is to actually not try to apply through like a normal route and try to go through like

HR and uh you know try to like go bottom up, but the best way is to try to connect with some of the people that work there and see if you see if you align. Right.

align. Right.

>> Well, Roman, you've definitely inspired us today. I appreciate you coming on and

us today. I appreciate you coming on and sharing your screen, just walking us through everything that you're thinking and making. It's really an awesome

and making. It's really an awesome journey and I'm just glad [music] that we got to turn it into an episode. I

hope that it inspires somebody out there to follow in your footsteps and I know I will.

>> Awesome. Thank you so much, man.

>> Before I let you go, I want to take just one minute to run you through my favorite products because I'm constantly asked [music] what's in my stack. Framer

is how I build websites. Genway is how I do research. Granola is how I take notes

do research. Granola is how I take notes during crit. Jitter is how I animate my

during crit. Jitter is how I animate my designs. Lovable is how I build my ideas

designs. Lovable is how I build my ideas in code. Mobin is how I find design

in code. Mobin is how I find design inspiration. Paper is how I design like

inspiration. Paper is how I design like a creative. And Raycast is my shortcut

a creative. And Raycast is my shortcut every step of the way. 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.