Vollständiges Transkript anzeigen (3.398 Wörter)
Hey guys, so Relume Publish is here and I wanted to get a real local business website that looks like it's trapped in the past and redesign it with Relume Publish and show you the entire process of actually creating a brief out of this existing URL, then getting AI to create a sitemap for you, that then creates a wireframe that is completely editable, which then leads to a whole new way of designing with AI, designing real sites with AI, by not just relying on prompting, but by adjusting and maintaining the fundamental branding building blocks of this brand to build a brand new site for this local business. All right guys, so this is Publish by Relume, and if you're someone that has been in the web design space for a couple of years already, you know Relume from the Webflow days. They started off as just a component library for Webflow, and ended up being the best component library with the most components for Webflow developers. And it's just now crazy to see them build something like this, where you can go from context to design, basically bringing in images, briefs, or even actual URLs of existing sites, and Relume can actually use their component system behind 2 million websites. And now, in order to get started, you want to go to relume.ai/sites, and over here we're starting from brand new, all from scratch. So, I'm going to click on Create Site, and this takes us to our prompt intake page where we can dump everything we've got, and Relume will first turn it into a brief. So in this case, I'm going to go ahead and attach specific files. And in today's video, we're actually redesigning this website. It's actually a local business, it's a spa and salon in Miami Beach. And if we scroll, they have a, you know, very, very simple website, a lot of context, but not a lot of visuals, not very appealing for what it truly is. And first things first, I actually asked ChatGPT to help me create a little brief of what this website is about. It's basically like a markdown file of the colors, the information, everything about it. We can attach this file to this prompt box. I can also attach different images from this specific business, from let's say a new photoshoot, to add to this new website redesign. And I can also paste in the original URL of the website and it automatically adds it as a extra file to this prompt box. And then I can add an extra prompt, basically describing the business in a very simplified way, stating the different services that it provides, when it's open, and some of the contact information. And then down here it says Skip to Design, but actually before we do that, I want to start from a brief. So once this is done, I'm going to go ahead and submit this. And now what we get is we get this new view where we have, you know, similar to a lot of other product builders, we get over here on the left the context of what we've written, what we're going to write, and if you're used to using Relume, up here on the top, you can see a very similar tab selection where we can go from brief, to sitemap, to wireframe, to design. And then at the end over here, this is what we're going to do a little bit more when we're finished with our or when we're satisfied with our design, eventually, export that. And then under Libraries, we can see the different assets that we uploaded. And so now what Relume provides us with is a new project brief with goals, target audience, key requirements and other supporting docs. And so, for example, down here, we can go to Brand & Style Guide, and this is a doc more about the brand visuals. And it's obviously very important to review all of this, because this is the source of truth that the AI uses down the road when it comes to designing your site. And if you ever want to change something, you can always click on Edit File, these are all like markdown files, which are very easily editable. And if you want to also add your own markdown files like I did, you can also do that as well. And you can always go back and forth between this in this tab. And so now, once you review that brief, you can go ahead and click on Sitemap, and we can then go ahead and generate a sitemap, and basically what this does is that the AI is now creating a sitemap, which is more of like an informational blueprint of what it's supposed to build. And again, if you've used Relume in the past, you're kind of familiar with this, but this is going to start automatically generating by itself. As you can see, we have this first home page, and we also have these additional other pages where we can then, you know, go ahead and click on Add a New Section, we can add a for example, a page header over here, then a new thing, and then for example, over here, we can, for example, add a call-to-action, and we can move that all the way down here if we wanted to. And if you're still struggling with what you want, you know, we can, for example, delete this, and I can ask AI, help me think of sections for this page. Click on it and on send, and it creates those different sections for you, and then you can again, do that for these other pages as well. So I can access out, and then you can do that with other pages as well. So, again with the nails, can repeat that process, and you can also add other pages if you wanted to as well. In this case, I'm just going to keep it like this. And then as you can see over here, when you're ready, we'll move to wireframes and start filling in the home page with real components and copy. So, let's go ahead and do that. So as you may probably have guessed it, all we have to do is go up here to this wireframe tab, click on Generate Wireframe, and since this is your first time using it, you're always going to have to click that button, but as you saw with that pop up, for the next project, it's going to do that automatically once you click that tab. And now, if I kind of scroll out and zoom out over here, we have the wireframes being generated with all of these different sections that we saw in the sitemap. Everything very structural, step-by-step. And the reason why Relume does it this way is because it doesn't want you to get all lost in the visuals, it wants you to first focus on the informational part of the website that you're building. And I can start zooming into one page, for example, this this home page, going into the hero section, and I can select this hero div, and over here we start getting these different styling properties. And you can also go deeper into other divs like the paragraph, heading, the buttons, the images, and now once the wireframe starts actually getting generated with the actual text and spacing and layouts etc, we can now, for example, select a specific section, and this is one of my favorite parts about using Relume Publish is that when you select a specific section, you can go over here, and you can replace this component with any of the hundreds of different components, or maybe thousands of different components that Relume has in their database. And now, when, you know, when you're building with AI, a lot of the things kind of change by surprise, and you can't really make very quick fixes like this, and this is also like a very big benefit of using wireframes because you just get like the wireframe first and then you can focus on the visual once you're actually satisfied with the actual layout. So in this case, we can probably choose something like this, I can go ahead, choose the navbar, replace the navbar with something else, maybe we can choose this one which is more centered. Again, go maybe to this section, do the same thing. And another special thing about using wireframes here is that you can go over here to the left side and there's something called the site structure. When you click on this, and when you click on any design over here, we now have a layers panel where we can collapse different layers. So for example, we can select this hero section, and I can just collapse everything, and we can do the same thing to the other sections. And then all of these different blue-colored components over here are basically called slots. And so for example, if we go over here to this hero eyebrow, I can select it, and then I can replace these very specific smaller components with other smaller components. So we can click on Replace, and we can choose this announcement banner, which might be more interesting, and then we can change the trailing icon to something else, we can link it to a specific page. There's also certain things that are hidden, so for example, if we unhide this, we can add specific logos. And then we can unhide this, and we have some more text over here. I can select this, I can make this one column instead of two. I can go ahead, and maybe select this again, and hide it hide this again. I can also select the parent container and change the alignment to be more centered if I wanted to. We can also make images have a different format like larger, more thinner. So you can use this site structure functionality to go even deeper into your wireframe and not just use the default components but actually tailor them to your needs. And now once we feel comfortable with the wireframe, we can then go ahead to this design tab, and it starts loading, and voila, we get our design, and I can just zoom in to the home page like this, looking beautiful. And so basically what the AI did here was create a style guide. So I can go ahead over here, click on Styling and we have theme one, but we also have this other theme over here, and under theme one, we also have different color schemes. So right now we have like this dark mode, but we can also choose this one over here, which is, has this, has this more of, of a cream feeling, we have this one that's more of a white tone. I can click on Sage for example and we get something completely different in terms of the font, in terms of the spacing, in terms of the colors for specific things like the icons and the cards, and again we have different schemes for this specific theme. So I can for example, choose this over here and change the scheme to be more, more green-toned or more of this second one. I I for example really like this dark mode, but you can change these schemes uh throughout all of the different sections, basically. And now, if I had to choose between theme one and theme two, I would prefer theme two, I like it a little bit more. So what I can do is I can click on this brand button over here and I can upload my logo for light mode and for dark mode. Relume is automatically going to know which one is for which. So I can upload the light version and then the dark version like so, and you can then, edit your brand colors if you wanted to. I like it like this for now, I also like this for now, we might change this in a in, you know, in a bit. But let's go ahead and click on Save, and we now have our logo placed throughout our site. And so now to keep on editing this, I'm going to go go ahead and open up this typography tab, and I can go ahead and choose a new brand font for this. So instead of Manrope we can choose something else like, we can go ahead and actually choose a font like, I like this one, Archivo, click on Save. And now we have this Archivo font. I might want to decrease the size of this, I might want to adjust the font weight to be maybe regular. We can make this all caps, but honestly, I just want to make it like this. Letter spacing, we can make it tight, line height, we can increase it, decrease it, text width as well, decrease this. And this is just for the heading, we can go ahead with the body, body with the same font size, we might want to decrease this, decrease the line height, decrease the text width. Then we can go ahead with spacing, container, we would probably want to increase the spacing or decrease it since the text is smaller, so everything is a little bit more compact, as you can see. Now let's scroll down here to the card padding. Um I would say maybe something like with compact card padding would would look good. In terms of spacing, vertical, we can make it extra spacious, I would say. Horizontal, we can maybe keep it compact. Then we can scroll down here to check out the radius and stroke and I might want something with probably not so much of a strong radius, maybe maybe something sharp like this. We can adjust the stroke weight to be very thin. So all of these different things that you can adjust, so now we have the icons, for example, we can give a border radius to the icons so it's extreme, the further down you go, and the more you kind of adjust these different settings, the the nicer your site ends up looking at the end. And then we can go up here to the buttons, for example, we can add more padding to the buttons, we can give the buttons, we can make them circular, but the cards are more, you know, uh, angular like this, font size can be small or large, let's keep it like in a regular. And then we have inputs like this, so we can click on inputs, we can make them filled, we can adjust the color of the fill to be something related to the brand if we wanted to. And then for example with taglines, we can adjust this to be a different color, have a fill or not, have more padding, radius if we wanted to, font size, we can make it extra small, font weight we can make it thin. And then once you're done with the branding, you can go back to, let's say, insert component and insert more components, or you can even go to the agents and select specific sections and say like, hey, let's change this to another component or let's adjust the spacing over here. But also, just like in the wireframe, you can adjust the alignment, make this, you know, like a card or edge to edge, whatever you want, you can work with all of these final details, even with like a button component, you can give it a trailing icon if you wanted to. You can replace, uh, certain things. So instead of with the logos, we can choose Google Reviews, or we can choose, like, um, review summaries from different people. And honestly, like this, now the more again, the more effort you put into editing these final details, the better the design is going to look like. And since you edited all of these styling properties, everything that you're going to change is now going to adapt perfectly to whatever you want to build. And then before you, you know, publish this or share this, whatever, you can preview this, and scroll through everything to check if you like it, you know, you can also check to see it's completely mobile responsive, everything works with the mobile. Everything looks nice and fancy, just like this brand wanted, which is great. And then once you're done, you can go ahead and click on Publish. Relume is going to create its own Relume domain for you, you can click on Continue, and you can add your social preview, you can add a favicon if you wanted to, you can edit your SEO search appearance, your meta title and meta description, click on Continue. It's then going to review your site, as you see, it's 67, so some improvements are suggested, but you're safe to publish, so you want to like add links, placeholder, text and so on. Then we can click on Publish. And once this is published, we can then click on this link and boom, we have our site now live here as a Relume site.ai subdomain, and this is great, right? So I can go down here, I can, for example, click on hair, it takes me to the hair page, everything is working just as intended. Nails takes me to the nails page and so on and so forth. Now, something else to keep in mind is that after you publish your site, you can go back here to the editor, and up here on the very top, there's a button which indicates analytics. And Relume has a full-on analytics tab just for you where you can track page views, sessions, even live users. And so Relume lets you track your analytics for the past 7, 30, 90 days and all time. And apart from this, I can go back to publish, and over here you can see that my site health there's 3 issues being detected. There's no favicons, there's several links that are not set, and there are some placeholder text and over here as you can see it says, Fix issues with agent. So, I'm going to go ahead and click that, and now going back here at the very top left we have this agents tab, and automatically Relume tells the agents to look into these different issues. And while this agent does its work, I can go back here, and we essentially have a team of different agents for different tasks. So we have analyst, we have designer, we have strategist, we have copywriter. And so for example, I can click on the copywriter, and maybe scroll down to this book and appointment section and select this header and ask the agent, how can we make this header text more convincing to click on? And so we can send this, and then we can that then go back here and as you can see, our different agents are running at the same time. So we can talk to the copywriter, and we can talk to the strategist and the designer, and all at the same time. And now the copywriter, as you can see is she's doing her work, "Book your free consultation", much more convincing than "Book an appointment", because now we have the word "free consultation" in it, so it's more convincing to click on this button. And going back to that initial agent work, we can see that it generated an a favicon for us, it cleaned up our home page. So guys, not only did Relume build like a full on site builder, but they actually created like a web design agency for you made out of AI agents. So yeah guys, that's pretty much it, really, really cool new tool on the block. Let me know what you guys think about them. If you've built something with them, please let me know down in the comments below. And like always, thank you all so much for watching, hope to see you next time, goodbye.
Video
Video
