Bonus

|

Episode 2

How to design and build websites faster with AI

Adam Mura

Co-founder of Relume

Apr 2, 2024

Apr 2, 2024

|

62 mins

62 mins

music by Dennis

About this Episode

One of the tools I'm most interested in right now is Relume. 200k+ people are using it to design and build websites faster with AI. They have a massive set of Figma/Webflow components which allows them to take a unique approach that “respects the process” of web design. In this bonus episode, their co-founder Adam gives us an end-to-end demo where he sitemaps, wireframes, designs, and builds a full website in ~30 min. We then get into the weeds about:

  • How the web design process will evolve with AI

  • What this means for the role of designer

  • His journey as a design founder adapting to AI

  • Where Relume is headed next as a company 👀

Share on Twitter
Share on Twitter
Share on LinkedIn
Share on LinkedIn

Show Notes

Deep Dives

Get our weekly breakdowns

Insights + resources from top designers 👇

Lauren LoPrete

Director of Design Systems @ Cash App

David Hoang

VP of Marketing and Design @ Replit

Adrien Griveau

Founding Designer @ Linear

James McDonald

Designer @ Clerk

Femke

Design Lead @ Gusto

Join 10K+ designers

HC

HC

HC

HC

Deep Dives

Get our weekly breakdowns

Free lessons from 👇

Lauren LoPrete

Lead designer @ Netflix

David Hoang

VP of Marketing and Design @ Replit

Adrien Griveau

Founding Designer @ Linear

Femke

Design Lead @ Gusto

Join 10K+ designers

HC

HC

HC

Deep Dives

Get our weekly breakdowns

Insights + resources from top designers 👇

Lauren LoPrete

Director of Design Systems @ Cash App

David Hoang

VP of Marketing and Design @ Replit

Adrien Griveau

Founding Designer @ Linear

James McDonald

Designer @ Clerk

Femke

Design Lead @ Gusto

Join 10K+ designers

HC

HC

HC

HC

Transcript chapters

[00:00:00] Sitemapping with Relume

Adam: For this demo, I want to, I want to actually show you like a practical example of how we would have used, Reloom, um, in a real client, project. And so typically in the past, We would start with obviously the client giving us their assets and anything that they have.

And so we would use, uh, or work with a lot of startups, um, that really only had a bunch of assets, and a logo. These would be the typical assets we would receive. So obviously you have, if it was an app or a web app, we'd have some UI, we'd have some lifestyle photos.

And if we're lucky, we would have some other supporting assets too. And obviously a logo. So at this point, uh, this is what we've received from the client. We sort of have inspiration from them too. We've done a workshop and the next stage would be to create a sitemap. and the sitemapping is good step, for like planning out the scope of the project and.

Um, how many pages that would be, then we'd get into like a wireframe and we liked wireframes because it was like full focus on just the copy, uh, and the layouts and there was no distraction of colors, typography. So this is pretty standard, right? We've all sort of been through a similar design process, um, when designing a website after the wireframe.

It's like all about the branding, the visual concepts. and then, which would sort of look like this, and then we have the style guide and design system that would come off the back of that and then you start designing High Fidelity and building the design system and designing High Fidelity would sort of go hand in hand at that stage.

So what I'm going to do is I'm going to walk you through how we would approach this project if we had Reloom So what we're going to do is I'm going to start with the sitemap, which will be the first stage. And I've actually crafted a prompt that we can use inside of Reloom.

So I'm going to just copy this prompt and I'm going to paste it into relu and I'll sort of walk you through how I've structured the prompt But what's important to point out is that Reloom is, is made for designing and building marketing websites for now.

We are going to in the future venture out into web apps, but at the moment it's for marketing websites. So this project is to create a marketing site for a, an app in the crypto space where it combines traditional and blockchain reward systems. Um, allowing users to earn in app sort of rewards, and digital points as they like sort of exercise and achieve their, their exercise goals.

[00:00:00] Sitemapping with Relume

Adam: For this demo, I want to, I want to actually show you like a practical example of how we would have used, Reloom, um, in a real client, project. And so typically in the past, We would start with obviously the client giving us their assets and anything that they have.

And so we would use, uh, or work with a lot of startups, um, that really only had a bunch of assets, and a logo. These would be the typical assets we would receive. So obviously you have, if it was an app or a web app, we'd have some UI, we'd have some lifestyle photos.

And if we're lucky, we would have some other supporting assets too. And obviously a logo. So at this point, uh, this is what we've received from the client. We sort of have inspiration from them too. We've done a workshop and the next stage would be to create a sitemap. and the sitemapping is good step, for like planning out the scope of the project and.

Um, how many pages that would be, then we'd get into like a wireframe and we liked wireframes because it was like full focus on just the copy, uh, and the layouts and there was no distraction of colors, typography. So this is pretty standard, right? We've all sort of been through a similar design process, um, when designing a website after the wireframe.

It's like all about the branding, the visual concepts. and then, which would sort of look like this, and then we have the style guide and design system that would come off the back of that and then you start designing High Fidelity and building the design system and designing High Fidelity would sort of go hand in hand at that stage.

So what I'm going to do is I'm going to walk you through how we would approach this project if we had Reloom So what we're going to do is I'm going to start with the sitemap, which will be the first stage. And I've actually crafted a prompt that we can use inside of Reloom.

So I'm going to just copy this prompt and I'm going to paste it into relu and I'll sort of walk you through how I've structured the prompt But what's important to point out is that Reloom is, is made for designing and building marketing websites for now.

We are going to in the future venture out into web apps, but at the moment it's for marketing websites. So this project is to create a marketing site for a, an app in the crypto space where it combines traditional and blockchain reward systems. Um, allowing users to earn in app sort of rewards, and digital points as they like sort of exercise and achieve their, their exercise goals.

[00:02:35] How to write a great prompt

Adam: So that's what the company does and we're creating a sitemap for the website for that company. And so as I structure this, it's important to sort of start with a good frame and, and the best frame is always going to be a company description. But you might want to include other things into that prompt.

Um, and so I've listed some relevant notes that might have come out of a workshop with a client or some of the goals of the website. And they include, you know, the primary goal of driving downloads of the app. That's what the purpose of this website is. that the startup might be hiring. So I wanted to make sure that we included a careers page.

and not keeping the page too long, so I've specified 5 7 sections. just so that we can sort of capture exactly what the app does in the homepage, but not give too much information so that people can go and download the app. And then, it's only available in the US,

if you want to go into more detail, what I found to be useful, what we found from testing is that framing it in these chunks of information but starting with the company description first is just a good way of structuring it. And so this is important to point out because you'll probably find using Relim quite easy.

There's, Less, a lot less buttons than most platforms, but the hard part is actually understanding how the AI works with the platform and understanding how to prompt, uh, effectively. I like to say the AI is the interface, so getting good at this is important and it's a constant, learning and discovery process.

Okay, so then we have number of pages. I'm going to say 5 to 10. That's typical of a startup. If it was a big corporate company, maybe I'd select more, but I think 5 to 10 is good. And then you can select your language as well. So I'm going to go ahead, I'm going to generate the sitemap. And as you can see here, it's, it started generating, uh, the homepage.

And it also has generated an about page, a blog and a blog post. Okay. A products and a products page and a careers page. And so at this point, I can start editing the sitemap and, and using Reloom to sort of, get it to a point where it's ready to share with the clients, sort of go through that. But let's just look into the homepage.

So here's what it's suggesting. It's suggests all this key sections, that you would want. So. Hero header section and in the description is sort of specifying the purpose of that section. So You can sort of read through we have a feature section showcase the benefits of using Movement including health tracking and rewards.

We have another benefit section. The details the advantages of movements, blockchain reward system How it works cta a testimonial and pricing and let's just say I don't want pricing You On this page because I just want to Get them to download the app and then I want to move the testimonial up further And i'm happy with this flow at this point And let's say that I don't want to have products here instead.

I just want to have a how it works page I can go ahead and I can make changes to, to the sitemap. I can move things around. if I want, I can drag it around, put it in different orders. I can basically do whatever you need to do to edit this sitemap. And I can also generate the rest of the sitemap at once, or I can generate a page at once and add additional prompts. So here I could specify what exactly I'd want on that page, but for the sake of speed, I'm going to generate the rest of the sitemap.

And so it's going to, Go through that process, which should take, you know, a minute or two to do Now I guess at this point because the ideation is so rapid what I like to do is generate a bunch of versions of a page just because I want to see like variations of A about page and what sort of the best flows It's a bit of a shift in how we design, but I like to take more of a generative process. And I actually probably carry that out into the next phase when we start designing the Y frame. Cause maybe I want to explore some further ideas around layouts, uh, and how it all sort of comes together.

that's what I like to do because of just how easy it is to generate new ideas. And then I'll sort of piece it together into, One single page. So yeah, I guess we have three about pages. I might just like Sort of look through all that see if there's any ideas and then bring them all together And then in the next phase i'd sort of do a similar process So we have the sitemap designed and Now it's time to sort of share that with the client You You can paste this sitemap into Figma, which I'm going to show you how to do, or you can share it, in Reloom and the client can leave comments, but I'm just going to show you how I'd go about inserting that into my Figma file.

[00:02:35] How to write a great prompt

Adam: So that's what the company does and we're creating a sitemap for the website for that company. And so as I structure this, it's important to sort of start with a good frame and, and the best frame is always going to be a company description. But you might want to include other things into that prompt.

Um, and so I've listed some relevant notes that might have come out of a workshop with a client or some of the goals of the website. And they include, you know, the primary goal of driving downloads of the app. That's what the purpose of this website is. that the startup might be hiring. So I wanted to make sure that we included a careers page.

and not keeping the page too long, so I've specified 5 7 sections. just so that we can sort of capture exactly what the app does in the homepage, but not give too much information so that people can go and download the app. And then, it's only available in the US,

if you want to go into more detail, what I found to be useful, what we found from testing is that framing it in these chunks of information but starting with the company description first is just a good way of structuring it. And so this is important to point out because you'll probably find using Relim quite easy.

There's, Less, a lot less buttons than most platforms, but the hard part is actually understanding how the AI works with the platform and understanding how to prompt, uh, effectively. I like to say the AI is the interface, so getting good at this is important and it's a constant, learning and discovery process.

Okay, so then we have number of pages. I'm going to say 5 to 10. That's typical of a startup. If it was a big corporate company, maybe I'd select more, but I think 5 to 10 is good. And then you can select your language as well. So I'm going to go ahead, I'm going to generate the sitemap. And as you can see here, it's, it started generating, uh, the homepage.

And it also has generated an about page, a blog and a blog post. Okay. A products and a products page and a careers page. And so at this point, I can start editing the sitemap and, and using Reloom to sort of, get it to a point where it's ready to share with the clients, sort of go through that. But let's just look into the homepage.

So here's what it's suggesting. It's suggests all this key sections, that you would want. So. Hero header section and in the description is sort of specifying the purpose of that section. So You can sort of read through we have a feature section showcase the benefits of using Movement including health tracking and rewards.

We have another benefit section. The details the advantages of movements, blockchain reward system How it works cta a testimonial and pricing and let's just say I don't want pricing You On this page because I just want to Get them to download the app and then I want to move the testimonial up further And i'm happy with this flow at this point And let's say that I don't want to have products here instead.

I just want to have a how it works page I can go ahead and I can make changes to, to the sitemap. I can move things around. if I want, I can drag it around, put it in different orders. I can basically do whatever you need to do to edit this sitemap. And I can also generate the rest of the sitemap at once, or I can generate a page at once and add additional prompts. So here I could specify what exactly I'd want on that page, but for the sake of speed, I'm going to generate the rest of the sitemap.

And so it's going to, Go through that process, which should take, you know, a minute or two to do Now I guess at this point because the ideation is so rapid what I like to do is generate a bunch of versions of a page just because I want to see like variations of A about page and what sort of the best flows It's a bit of a shift in how we design, but I like to take more of a generative process. And I actually probably carry that out into the next phase when we start designing the Y frame. Cause maybe I want to explore some further ideas around layouts, uh, and how it all sort of comes together.

that's what I like to do because of just how easy it is to generate new ideas. And then I'll sort of piece it together into, One single page. So yeah, I guess we have three about pages. I might just like Sort of look through all that see if there's any ideas and then bring them all together And then in the next phase i'd sort of do a similar process So we have the sitemap designed and Now it's time to sort of share that with the client You You can paste this sitemap into Figma, which I'm going to show you how to do, or you can share it, in Reloom and the client can leave comments, but I'm just going to show you how I'd go about inserting that into my Figma file.

[00:07:22] Inserting your sitemap into Figma

Adam: We do have a Reloom plug in. Now the Reloom plug in is a way for you to export the sitemap and Y frames back into, Figma. So that you can make any edits in there. . let's imagine the client's happy with that. I've got a pretty good idea on the scope of the project.

[00:07:22] Inserting your sitemap into Figma

Adam: We do have a Reloom plug in. Now the Reloom plug in is a way for you to export the sitemap and Y frames back into, Figma. So that you can make any edits in there. . let's imagine the client's happy with that. I've got a pretty good idea on the scope of the project.

[00:07:40] Using Relume for the wireframing process

Adam: The pages that are involved. It's now time to jump into the wireframing process which I'll probably insert into here. But I'm going to head back over to Reloom and I'm going to click wireframe. And what's going to happen is that the AI is going to convert that sitemap, that information in there, into components essentially.

Um, and so Reloom's built into Reloom. On top of our component library of we have over like a thousand components So the way it works is it finds the most appropriate component it updates the copy and it follows the Flow that it provided in the sitemap. So that's how it works this stage, you can start to make edits to the Y frame.

And what's, I guess, different about Reloom to say maybe Figma is that you can start to rapidly update the Y frame, and replace it with components. and so, you know, if you didn't want a background image, you could remove that. But I like the background image cause I know I had some rich photography to work with.

If I wanted to have a form instead of the, two buttons, I could do that as well. If I wanted to replace it with like a completely different, component. I could do that as well. So if I wanted to sort of go for this kind of component, but yeah, there's like a wide range of layouts that you could choose from hopefully Every layout you could imagine is is is here in reloom, but I actually like the idea of having like a A nice background image because I know I just have that rich photography.

I'm going to bring that in eventually so what i'm going to do is i'm going to You Just type that out. I'm going to delete that button. you know what, maybe I want to get AI to rewrite this, or regenerate copy. I can rerun that and see what else it can come up with. Cool. So, wireframe, finding, you know, removing elements.

And adding elements, and just sort of tweaking the layout of, of this. Okay. So yeah, I'll start working through that and you know what maybe I want to like shuffle things around so i'm just going to go ahead I'm going to get into a good shape so that when we go into To figma, I have to do a lot less work. You can just focus on making this high fidelity So i'm going to quickly go through this and and shape it up a little bit better

So I'm going to move that how it works section up because probably, it's probably good to actually probably start there. Um, and then I'll wedge a testimonials panel in between. And then for this, I'm going to use background image just to be consistent with the above. And then this, this, this. This foot is probably a little bit overkill for a startup.

[00:07:40] Using Relume for the wireframing process

Adam: The pages that are involved. It's now time to jump into the wireframing process which I'll probably insert into here. But I'm going to head back over to Reloom and I'm going to click wireframe. And what's going to happen is that the AI is going to convert that sitemap, that information in there, into components essentially.

Um, and so Reloom's built into Reloom. On top of our component library of we have over like a thousand components So the way it works is it finds the most appropriate component it updates the copy and it follows the Flow that it provided in the sitemap. So that's how it works this stage, you can start to make edits to the Y frame.

And what's, I guess, different about Reloom to say maybe Figma is that you can start to rapidly update the Y frame, and replace it with components. and so, you know, if you didn't want a background image, you could remove that. But I like the background image cause I know I had some rich photography to work with.

If I wanted to have a form instead of the, two buttons, I could do that as well. If I wanted to replace it with like a completely different, component. I could do that as well. So if I wanted to sort of go for this kind of component, but yeah, there's like a wide range of layouts that you could choose from hopefully Every layout you could imagine is is is here in reloom, but I actually like the idea of having like a A nice background image because I know I just have that rich photography.

I'm going to bring that in eventually so what i'm going to do is i'm going to You Just type that out. I'm going to delete that button. you know what, maybe I want to get AI to rewrite this, or regenerate copy. I can rerun that and see what else it can come up with. Cool. So, wireframe, finding, you know, removing elements.

And adding elements, and just sort of tweaking the layout of, of this. Okay. So yeah, I'll start working through that and you know what maybe I want to like shuffle things around so i'm just going to go ahead I'm going to get into a good shape so that when we go into To figma, I have to do a lot less work. You can just focus on making this high fidelity So i'm going to quickly go through this and and shape it up a little bit better

So I'm going to move that how it works section up because probably, it's probably good to actually probably start there. Um, and then I'll wedge a testimonials panel in between. And then for this, I'm going to use background image just to be consistent with the above. And then this, this, this. This foot is probably a little bit overkill for a startup.

[00:11:01] Importing wireframes into Figma

Adam: So, all right, cool. So I'm pretty happy with that. So from here, I'm going to or export that out of Reloom, import it into Figma. So I'm going to head over to Figma, I'm going to go back to the Reloom plug in.

when I import this, it's actually going to connect to the styles, the variables, inside of this figma file. And so, like, typically I probably wouldn't have my design system set up, but considering that, you know, for the purpose of this demo, I'm showing you an example of where we've actually presented concepts, And going ahead and actually build the design system based off those concepts.

When I paste it in, it's, it's, it's not going to look like this. Typically it would. Cause we hadn't done that if we were starting with, um, with the reloom Figma file, which by the way is, is how you would start every project, how you should start every project, just cause it works best when, when using our, our Figma file, which we have.

Here, uh, so it comes with like a style guide and it comes with all the components, um, as well And so i've just updated this so then when I go ahead and I paste this in it's not going to look like a wireframe So let's imagine that We're past the wireframe phase and we're actually in the design phase and we're trying to go from wireframe to high fidelity What i'm going to do is i'm going to then click The project and I'm going to add wireframe

It's going to update all the copy it's going to get it back into shape might take a couple of couple of minutes to do i've imported the entire Website into figma Uh, it's all sort of built with, uh, with mobile versions, and it's syncing with my design system.

I'm now up to the stage where I would probably detach, the components from the system and now start, actually playing around and manipulating it for high fidelity. And so I do want to, uh, Have a go at like designing this and just just spending a little bit of time just to show how Sort of close we are to arriving at something that actually looks really nice and it it doesn't really take too long to get there Because I like I I have a personal philosophy I think if you have a really good foundations of good typography good color and really strong assets the rest when working with the component library, like spacing, layout, is sort of there pre built into it, which is, a combination of all those things, you're going to arrive at a design that looks pretty nice.

So I want to sort of prove that point.

[00:11:01] Importing wireframes into Figma

Adam: So, all right, cool. So I'm pretty happy with that. So from here, I'm going to or export that out of Reloom, import it into Figma. So I'm going to head over to Figma, I'm going to go back to the Reloom plug in.

when I import this, it's actually going to connect to the styles, the variables, inside of this figma file. And so, like, typically I probably wouldn't have my design system set up, but considering that, you know, for the purpose of this demo, I'm showing you an example of where we've actually presented concepts, And going ahead and actually build the design system based off those concepts.

When I paste it in, it's, it's, it's not going to look like this. Typically it would. Cause we hadn't done that if we were starting with, um, with the reloom Figma file, which by the way is, is how you would start every project, how you should start every project, just cause it works best when, when using our, our Figma file, which we have.

Here, uh, so it comes with like a style guide and it comes with all the components, um, as well And so i've just updated this so then when I go ahead and I paste this in it's not going to look like a wireframe So let's imagine that We're past the wireframe phase and we're actually in the design phase and we're trying to go from wireframe to high fidelity What i'm going to do is i'm going to then click The project and I'm going to add wireframe

It's going to update all the copy it's going to get it back into shape might take a couple of couple of minutes to do i've imported the entire Website into figma Uh, it's all sort of built with, uh, with mobile versions, and it's syncing with my design system.

I'm now up to the stage where I would probably detach, the components from the system and now start, actually playing around and manipulating it for high fidelity. And so I do want to, uh, Have a go at like designing this and just just spending a little bit of time just to show how Sort of close we are to arriving at something that actually looks really nice and it it doesn't really take too long to get there Because I like I I have a personal philosophy I think if you have a really good foundations of good typography good color and really strong assets the rest when working with the component library, like spacing, layout, is sort of there pre built into it, which is, a combination of all those things, you're going to arrive at a design that looks pretty nice.

So I want to sort of prove that point.

[00:30:18] Getting your designs into Webflow

Adam: What is also cool is like, okay, so we've locked down a design. We want to get into development so we can also export this into Webflow. There is a plugin that helps do that, but it, the limitations around how it like actually works responsibly, um, there are a lot of limitations around that and how it translates and builds the component.

So if we're using Reloom. we essentially would go back, and let's imagine that we still have like the core structure here. If we were using Reloom, we would go back to this stage, and what we can do is we can copy and paste this basically entire project into Webflow. so I'm just going to show you how that works.

And just like it did with Figma, it would sync with like your style guide and your classes in there. Okay. So that the whole thing can just instantly sync just like just like what happened with with figma, so what i'm going to do is i'm going to Go to reloom and i'm going to go to the webflow library and We have you can just like copy and paste components from here into webflow but we do have a style guide.

This is like sort of the starting place for any reloom project and so you would clone that style guide, um, so I'm just going to go ahead and create a groovy site. what this file has is it's basically providing the design system that you can update. Um, so instead of starting from scratch, this is a file with all the pre built classes that you will need.

which mimics the, the Figma, style guide. So if you've set up the Figma already, it's like essentially you do the same in a, in Webflow. So we have a style guide page, which I'll show you.

Cool. So on the style guide page, we have typography. It's just laid out a little bit different, but it includes, All the things that you would see, in the Figma file. it's not styled yet, so it's actually probably going to look more like a Y frame. But, I'd go ahead and I'd delete this. And then I'd go back to Reloom.

And I'd go ahead and I'd just press CTRL C or I could go copy to Webflow. And then I'm going to paste this in. we have the components all pasted in. But what's cool is I can go and publish that straight to the browser. And once that's published, I'll show you how it's like fully mobile responsive as well. Okay, so we have the menu, sort of works. Um, we have, you know, testimonials, accordions.

it's fully mobile responsive. So I have a mobile menu. I've chosen a mega menu for this, for this website, but we should have updated that. But yeah, as you can see, it's fully mobile responsive. See you. So you can imagine how quickly it gets you to an end result now that you have like the core structure just the foundations there and then Basically what you're left with is the fun part where you're putting together typography colors assets and yeah Working with with like a solid design system and applying that to to the y frame So that would be the most efficient way to use realist

Ridd: It's amazing. I mean, I have so many questions and we can kind of get into that from here, but just even taking a second to say, I knew that really was a big deal just based off of people I respect talking about it a lot. I played with it just a little bit, but. Man, this product and what you've built is quite robust.

Like it's a lot more capable than even I realized. So first off, I just want to say like, what you have is, is very, very special.

Adam: Thanks, man. Thanks. Uh, appreciate that.

[00:30:18] Getting your designs into Webflow

Adam: What is also cool is like, okay, so we've locked down a design. We want to get into development so we can also export this into Webflow. There is a plugin that helps do that, but it, the limitations around how it like actually works responsibly, um, there are a lot of limitations around that and how it translates and builds the component.

So if we're using Reloom. we essentially would go back, and let's imagine that we still have like the core structure here. If we were using Reloom, we would go back to this stage, and what we can do is we can copy and paste this basically entire project into Webflow. so I'm just going to show you how that works.

And just like it did with Figma, it would sync with like your style guide and your classes in there. Okay. So that the whole thing can just instantly sync just like just like what happened with with figma, so what i'm going to do is i'm going to Go to reloom and i'm going to go to the webflow library and We have you can just like copy and paste components from here into webflow but we do have a style guide.

This is like sort of the starting place for any reloom project and so you would clone that style guide, um, so I'm just going to go ahead and create a groovy site. what this file has is it's basically providing the design system that you can update. Um, so instead of starting from scratch, this is a file with all the pre built classes that you will need.

which mimics the, the Figma, style guide. So if you've set up the Figma already, it's like essentially you do the same in a, in Webflow. So we have a style guide page, which I'll show you.

Cool. So on the style guide page, we have typography. It's just laid out a little bit different, but it includes, All the things that you would see, in the Figma file. it's not styled yet, so it's actually probably going to look more like a Y frame. But, I'd go ahead and I'd delete this. And then I'd go back to Reloom.

And I'd go ahead and I'd just press CTRL C or I could go copy to Webflow. And then I'm going to paste this in. we have the components all pasted in. But what's cool is I can go and publish that straight to the browser. And once that's published, I'll show you how it's like fully mobile responsive as well. Okay, so we have the menu, sort of works. Um, we have, you know, testimonials, accordions.

it's fully mobile responsive. So I have a mobile menu. I've chosen a mega menu for this, for this website, but we should have updated that. But yeah, as you can see, it's fully mobile responsive. See you. So you can imagine how quickly it gets you to an end result now that you have like the core structure just the foundations there and then Basically what you're left with is the fun part where you're putting together typography colors assets and yeah Working with with like a solid design system and applying that to to the y frame So that would be the most efficient way to use realist

Ridd: It's amazing. I mean, I have so many questions and we can kind of get into that from here, but just even taking a second to say, I knew that really was a big deal just based off of people I respect talking about it a lot. I played with it just a little bit, but. Man, this product and what you've built is quite robust.

Like it's a lot more capable than even I realized. So first off, I just want to say like, what you have is, is very, very special.

Adam: Thanks, man. Thanks. Uh, appreciate that.

[00:34:02] How AI tools like Relume evolve the design process

Ridd: So just watching you go through that process, it's very clear that AI is going to make the design process as we think of it today, much more efficient. I'm almost curious, like what that unlocks and maybe even how you see it. Evolving the way that we think about the design process.

Like how does that going to change or what is now possible when things just take way less time?

Adam: I mean, This is something that I think about a lot. you know, how the role of a designer is changing. Um, and so I think there are sort of like a few things that are worth pointing out, right? So the first would be like ideation is rapid, and it's also effortless. So unlike before with the design process, you would have to come up with a lot of the ideas or at least the starting point for a lot of these ideas.

And now you have an AI assistant that can. Suggest things for you. So I think it almost changes it from you're now Instead of doing the heavy lifting You're now critically or critiquing a design that the ai has has put forward to you Which is great because you're not having to do the laborious tasks and you're actually now having to think like a designer So I guess that changes at every point of of of the process One thing I want to do want to point out is that I think having AI as this frame of being an assistant is something that like we, we always think about.

and it's important to think about it in that way because we don't see AI being this, this thing that's just going to go ahead and like do the job for you definitely has its limitations. And it has its strengths too. And so learning how to use the AI as you're an assistant in an effective way is going to be super helpful.

And it's also the reason why we've built Reelin the way we have. It's not just generate an entire website from a prompt. We walk you through a process that should be guided by the designer. With the assistant of AI assisting you through that process, but that process is there for a reason.

It's there to guide a client through a journey of getting to an end outcome, that being a website, but also it's there so that the designer can, at certain stages, focus on the things that are most important at that, that site. So we call it like respect in the process.

Ridd: Yeah. I really liked the phrase respect in the process because I have played with other AI tools and sometimes it feels like it is taking this, this really complex, robust process and just. Condensing it down into one step. And when you do that, a lot of times the output suffers, but having it still exist on this process, that feels a little bit familiar, makes a lot of sense.

I do also appreciate how you called out this idea of like basically creating. Versions of a page or versions of like one sliver of the site map. And that's, that's another kind of idea that's spinning in my brain now, where it's like maybe designers are just not really doing that much from a blank slate in the future.

It's more about how quickly can I generate a spectrum of options and then know what to pull out of that spectrum to create where I'm going to actually land a plan.

Adam: Yeah. A hundred percent. A hundred percent. So I think that tap into like just ideation, being rapid and, and effortless. So tapping into that and trying to generate as much inspiration as possible. Another thing that's interesting with like the site map processes that the ai, because, because an A, the AI is trained on like a large data set, right?

It actually understands a lot more about an industry, that your client might be than you in the beginning. And so typically, what we would do, as, as like a, someone building a website for a client, is we'd go and do the research first, and then we'd go and design the thing. But now it's, now it's almost like you're doing the research and the design at the same time.

You're learning things. And you might be suggested things that you hadn't considered, before. So I think that's an interesting thing to think about. I'm not saying that you shouldn't, you don't need to do the research. But it is interesting to think that you're almost learning as you're creating as well.

Because again, it's always collaborative. you're collaborating with an AI that has knowledge of industries far greater than your knowledge. and that's sort of like an interesting point, thing to point out. so yeah, you're learning as you create, which is a bit of a shift from how we would traditionally approach, things.

Um,

Ridd: empowers designers to throw the ball further. From a copywriting standpoint to like, sure. The copy that was generated, it wasn't perfect. Like a UX writer is going to make it a little bit more unique and tasteful, but it was pretty good.

Like it was, I was really impressed by the quality of the copy. It was coming out. So it's clear, like that barrier has been lowered. You've also talked about how. specific phrase where you say good design is too important to be left solely to designers, which I want to talk about that a little bit, because it's not just copywriting that has having a lower barrier.

Now it's like, well, shoot, you know, my wife's downstairs. She's looking at that and probably was like, well, I could, I could do that. Like I could spin up a site map and interface with a client when a tool is doing that much of the heavy lifting. So.

[00:34:02] How AI tools like Relume evolve the design process

Ridd: So just watching you go through that process, it's very clear that AI is going to make the design process as we think of it today, much more efficient. I'm almost curious, like what that unlocks and maybe even how you see it. Evolving the way that we think about the design process.

Like how does that going to change or what is now possible when things just take way less time?

Adam: I mean, This is something that I think about a lot. you know, how the role of a designer is changing. Um, and so I think there are sort of like a few things that are worth pointing out, right? So the first would be like ideation is rapid, and it's also effortless. So unlike before with the design process, you would have to come up with a lot of the ideas or at least the starting point for a lot of these ideas.

And now you have an AI assistant that can. Suggest things for you. So I think it almost changes it from you're now Instead of doing the heavy lifting You're now critically or critiquing a design that the ai has has put forward to you Which is great because you're not having to do the laborious tasks and you're actually now having to think like a designer So I guess that changes at every point of of of the process One thing I want to do want to point out is that I think having AI as this frame of being an assistant is something that like we, we always think about.

and it's important to think about it in that way because we don't see AI being this, this thing that's just going to go ahead and like do the job for you definitely has its limitations. And it has its strengths too. And so learning how to use the AI as you're an assistant in an effective way is going to be super helpful.

And it's also the reason why we've built Reelin the way we have. It's not just generate an entire website from a prompt. We walk you through a process that should be guided by the designer. With the assistant of AI assisting you through that process, but that process is there for a reason.

It's there to guide a client through a journey of getting to an end outcome, that being a website, but also it's there so that the designer can, at certain stages, focus on the things that are most important at that, that site. So we call it like respect in the process.

Ridd: Yeah. I really liked the phrase respect in the process because I have played with other AI tools and sometimes it feels like it is taking this, this really complex, robust process and just. Condensing it down into one step. And when you do that, a lot of times the output suffers, but having it still exist on this process, that feels a little bit familiar, makes a lot of sense.

I do also appreciate how you called out this idea of like basically creating. Versions of a page or versions of like one sliver of the site map. And that's, that's another kind of idea that's spinning in my brain now, where it's like maybe designers are just not really doing that much from a blank slate in the future.

It's more about how quickly can I generate a spectrum of options and then know what to pull out of that spectrum to create where I'm going to actually land a plan.

Adam: Yeah. A hundred percent. A hundred percent. So I think that tap into like just ideation, being rapid and, and effortless. So tapping into that and trying to generate as much inspiration as possible. Another thing that's interesting with like the site map processes that the ai, because, because an A, the AI is trained on like a large data set, right?

It actually understands a lot more about an industry, that your client might be than you in the beginning. And so typically, what we would do, as, as like a, someone building a website for a client, is we'd go and do the research first, and then we'd go and design the thing. But now it's, now it's almost like you're doing the research and the design at the same time.

You're learning things. And you might be suggested things that you hadn't considered, before. So I think that's an interesting thing to think about. I'm not saying that you shouldn't, you don't need to do the research. But it is interesting to think that you're almost learning as you're creating as well.

Because again, it's always collaborative. you're collaborating with an AI that has knowledge of industries far greater than your knowledge. and that's sort of like an interesting point, thing to point out. so yeah, you're learning as you create, which is a bit of a shift from how we would traditionally approach, things.

Um,

Ridd: empowers designers to throw the ball further. From a copywriting standpoint to like, sure. The copy that was generated, it wasn't perfect. Like a UX writer is going to make it a little bit more unique and tasteful, but it was pretty good.

Like it was, I was really impressed by the quality of the copy. It was coming out. So it's clear, like that barrier has been lowered. You've also talked about how. specific phrase where you say good design is too important to be left solely to designers, which I want to talk about that a little bit, because it's not just copywriting that has having a lower barrier.

Now it's like, well, shoot, you know, my wife's downstairs. She's looking at that and probably was like, well, I could, I could do that. Like I could spin up a site map and interface with a client when a tool is doing that much of the heavy lifting. So.

[00:39:34] How the role of designer will change now that anyone can do it

Ridd: How do you think about how we define the role of a designer and how it fits into like a broader team now that these tools are so capable,

Adam: I think that the better design can collaborate with other disciplines. Yeah. You know, the better the outcome, I'm, I'm a product designer myself, but let's just focus on like a marketing website.

For me, a strong goal of mine is to help Reloom create a web that's just like more beautiful, is, communicates to an audience more effectively, and I think good design enables us to do that. whether it's for a business or for a cause or organization, whatever it is, if we can have nice looking websites that are more digestible, then that's just That's important.

And so I think part of that and what part of what makes that important is Inviting other people into the process like you're saying a copywriter I think a lot of designers are capable of writing copy but a having a good copywriting your team and inviting them into the process that understands the audience that you're speaking to Because at the end of the day, uh, a website's 80 percent text, then that's going to be useful.

And so what I think this does is it actually invites that perspective into the process and it's more accessible, I guess, for a copywriter to, to get involved and even like jump into, say, Reloom and start working with the designer, And focusing on how the copy works with the layouts because I think that's like the purpose of the wireframe phase And so yeah, that's where I say it's important.

I think Designers also i'm a big believer that designers should sort of Get outside of just design and start thinking about things outside of just look and feel and start understanding how this is going to work from a marketing perspective even from the tech side, , as well.

And so yeah, that's I'm trying to say around this idea of design being too important to just be left to the designer to do. Like inviting people into the processes is always going to result in a better outcome.

[00:39:34] How the role of designer will change now that anyone can do it

Ridd: How do you think about how we define the role of a designer and how it fits into like a broader team now that these tools are so capable,

Adam: I think that the better design can collaborate with other disciplines. Yeah. You know, the better the outcome, I'm, I'm a product designer myself, but let's just focus on like a marketing website.

For me, a strong goal of mine is to help Reloom create a web that's just like more beautiful, is, communicates to an audience more effectively, and I think good design enables us to do that. whether it's for a business or for a cause or organization, whatever it is, if we can have nice looking websites that are more digestible, then that's just That's important.

And so I think part of that and what part of what makes that important is Inviting other people into the process like you're saying a copywriter I think a lot of designers are capable of writing copy but a having a good copywriting your team and inviting them into the process that understands the audience that you're speaking to Because at the end of the day, uh, a website's 80 percent text, then that's going to be useful.

And so what I think this does is it actually invites that perspective into the process and it's more accessible, I guess, for a copywriter to, to get involved and even like jump into, say, Reloom and start working with the designer, And focusing on how the copy works with the layouts because I think that's like the purpose of the wireframe phase And so yeah, that's where I say it's important.

I think Designers also i'm a big believer that designers should sort of Get outside of just design and start thinking about things outside of just look and feel and start understanding how this is going to work from a marketing perspective even from the tech side, , as well.

And so yeah, that's I'm trying to say around this idea of design being too important to just be left to the designer to do. Like inviting people into the processes is always going to result in a better outcome.

[00:41:45] Improving your taste as a designer

Ridd: and the more conversations that I have about these topics, the more people bring up this idea of. Taste and how important that is going to be in a world where, yeah, the AI can do a lot of the idea generation for us. So do you have any practical ways that designers can grow that muscle and more effectively spot good ideas versus bad ideas?

Adam: I think taste is definitely something that for me is hard to define. Like what is good taste? the way I've always gone about it is, it's, it's, it's a little strange because I feel like I have good taste, but I might have horrible taste. But what I do know is that there's people out there in the world that I look at and I just think, wow, like what they've made is awesome.

And so I just try and find as many people out there in the world, whether that be, I think Twitter is a great way of doing it. And I try and consume as much of their work as I can. Um, and I feel like it's, it's sort of hard to describe and put in words what I mean by looking at someone's work and going, wow, that's like impressive or beautiful.

But a lot of it for me comes down to I try and surround myself with, with people and projects that are of a high standard. And, I almost make it like a habit to consume good design, those people are almost, that I aspire to, and the works that I sort of, the places I go to find those pieces of work, they're like the filter, um, That influences my taste long term if that makes sense.

Does that make sense to you?

Ridd: No, it

Adam: how I think about

Ridd: I think that's why I ask is because it's this, it keeps coming up conversationally, but it's really wishy washy thing. It's like, well, how do I invest in something that I don't even know how to define or quantify? But yeah, I do think it comes down to like, it's, it's visual reps.

It's seeing as much good design as possible and trying to understand the connections between why you like certain things. maybe we could even zoom out from taste a little bit and I want to toss a quick hypothetical your way, which is given your vantage point and an understanding of what AI is capable of and thinking deeply about how this might impact the role of a designer. Hypothetically, let's say that you are someone who is two, maybe three years into your career as a product designer. And you see this impending shift that is being spawned by AI.

[00:41:45] Improving your taste as a designer

Ridd: and the more conversations that I have about these topics, the more people bring up this idea of. Taste and how important that is going to be in a world where, yeah, the AI can do a lot of the idea generation for us. So do you have any practical ways that designers can grow that muscle and more effectively spot good ideas versus bad ideas?

Adam: I think taste is definitely something that for me is hard to define. Like what is good taste? the way I've always gone about it is, it's, it's, it's a little strange because I feel like I have good taste, but I might have horrible taste. But what I do know is that there's people out there in the world that I look at and I just think, wow, like what they've made is awesome.

And so I just try and find as many people out there in the world, whether that be, I think Twitter is a great way of doing it. And I try and consume as much of their work as I can. Um, and I feel like it's, it's sort of hard to describe and put in words what I mean by looking at someone's work and going, wow, that's like impressive or beautiful.

But a lot of it for me comes down to I try and surround myself with, with people and projects that are of a high standard. And, I almost make it like a habit to consume good design, those people are almost, that I aspire to, and the works that I sort of, the places I go to find those pieces of work, they're like the filter, um, That influences my taste long term if that makes sense.

Does that make sense to you?

Ridd: No, it

Adam: how I think about

Ridd: I think that's why I ask is because it's this, it keeps coming up conversationally, but it's really wishy washy thing. It's like, well, how do I invest in something that I don't even know how to define or quantify? But yeah, I do think it comes down to like, it's, it's visual reps.

It's seeing as much good design as possible and trying to understand the connections between why you like certain things. maybe we could even zoom out from taste a little bit and I want to toss a quick hypothetical your way, which is given your vantage point and an understanding of what AI is capable of and thinking deeply about how this might impact the role of a designer. Hypothetically, let's say that you are someone who is two, maybe three years into your career as a product designer. And you see this impending shift that is being spawned by AI.

[00:44:26] How designers can future-proof their career

Ridd: What are some of the things that you would be doing to future proof your career?

Adam: Great question. I personally hold the opinion that there are many aspects of design and being a designer that aren't about pushing just the pixels and it's about thinking and solving problems with a design thinking mindset.

And so I would be leveraging AI as much for ideation. It basically thinking about how we've approached reloom from a what's the the process you go through? What is AI good at doing? So for example, for reloom, it was, it's really good at like laying out content and writing copy and like just generating a bunch of ideas about that.

But it's actually not good at designing a component or building a component, hence why our product's been successful. Because we've combined our component library with, with what AI is good at. So, and that pairing has worked really well. So, I would sort of look at like the design process and wherever you feel like AI is, is complementary to that process, use it.

Try and use it as much as possible. Like, for instance, With product design. It's not there yet, but I think like synthesizing Customer feedback and stuff like that. Like that's an opportunity that I'm starting to think you know speak to a lot of customers or speak to a lot of users and Like there's all this information It'd be nice if a I could sort of just troll through that and like give me the key insights so like really thinking about how AI can assist you through that process, but I do not believe that AI is just going to like.

Come and it's going to replace the role of designer. I think the, the role of the designer is to understand and respond to human feedback. It's to take, tell the story and communicate that effectively with internally to a team or externally to a community or the market. It's to think critically about design and critique design.

it's to adapt and evolve with new trends. It's to think strategically about the goals of what you're trying to do. These are all things that Ai can assist you with but it's not going to Replace that anytime soon. I don't believe so. Yeah going back to what's my process? How can I leverage ai at what it's good at?

And focusing, you know your efforts Around that and of course, there's a side of design that's more ui focused Building things faster than ever Obviously ideation is faster than ever, but the pairing of those two can help you prototype and simulate designs. So I think one part of like being a great designer is designing a system that, , doesn't break or is effective across different, devices and mediums and languages.

So designing a visual language, for instance, I think AI can help you like simulate that out. And see how a design system can actually work across different breakpoints like you saw with with reloom Effectively, so yeah There's all these little parts of the process where i'd just be doubling down and trying to figure out how I can leverage ai But knowing that i'm still in the In the driver's seat here and ai is just my assistant

[00:44:26] How designers can future-proof their career

Ridd: What are some of the things that you would be doing to future proof your career?

Adam: Great question. I personally hold the opinion that there are many aspects of design and being a designer that aren't about pushing just the pixels and it's about thinking and solving problems with a design thinking mindset.

And so I would be leveraging AI as much for ideation. It basically thinking about how we've approached reloom from a what's the the process you go through? What is AI good at doing? So for example, for reloom, it was, it's really good at like laying out content and writing copy and like just generating a bunch of ideas about that.

But it's actually not good at designing a component or building a component, hence why our product's been successful. Because we've combined our component library with, with what AI is good at. So, and that pairing has worked really well. So, I would sort of look at like the design process and wherever you feel like AI is, is complementary to that process, use it.

Try and use it as much as possible. Like, for instance, With product design. It's not there yet, but I think like synthesizing Customer feedback and stuff like that. Like that's an opportunity that I'm starting to think you know speak to a lot of customers or speak to a lot of users and Like there's all this information It'd be nice if a I could sort of just troll through that and like give me the key insights so like really thinking about how AI can assist you through that process, but I do not believe that AI is just going to like.

Come and it's going to replace the role of designer. I think the, the role of the designer is to understand and respond to human feedback. It's to take, tell the story and communicate that effectively with internally to a team or externally to a community or the market. It's to think critically about design and critique design.

it's to adapt and evolve with new trends. It's to think strategically about the goals of what you're trying to do. These are all things that Ai can assist you with but it's not going to Replace that anytime soon. I don't believe so. Yeah going back to what's my process? How can I leverage ai at what it's good at?

And focusing, you know your efforts Around that and of course, there's a side of design that's more ui focused Building things faster than ever Obviously ideation is faster than ever, but the pairing of those two can help you prototype and simulate designs. So I think one part of like being a great designer is designing a system that, , doesn't break or is effective across different, devices and mediums and languages.

So designing a visual language, for instance, I think AI can help you like simulate that out. And see how a design system can actually work across different breakpoints like you saw with with reloom Effectively, so yeah There's all these little parts of the process where i'd just be doubling down and trying to figure out how I can leverage ai But knowing that i'm still in the In the driver's seat here and ai is just my assistant

Deep Dives

Get our weekly breakdowns

Insights + resources from top designers 👇

Lauren LoPrete

Director of Design Systems @ Cash App

David Hoang

VP of Marketing and Design @ Replit

Adrien Griveau

Founding Designer @ Linear

James McDonald

Designer @ Clerk

Femke

Design Lead @ Gusto

Join 10K+ designers

HC

HC

HC

HC

"

I've been binging Dive Club lately and the quality is nuts

Literally the only show about design I watch”

Eugene Fedorenko

"

I've been binging Dive Club lately and the quality is nuts

Literally the only show about design I watch”

Eugene Fedorenko

hello@dive.club

Ⓒ Dive 2024