The one thing vibe coding CAN’T fix about your website transcript

If I showed you this site, you'd probably say it's pretty well designed. It's got a clean layout, good animations, and decent visuals. By most people's standards, this is a good website. But, while it says who it's for, it doesn't really match the vibrancy and life that these sites have. So, instead of trying to make this look more modern or fancy, what we're going to do is dive deeper into the process behind creating sites that stand out among the bazillion-in-one softwares that are already out there.

And in the process, break down my entire design workflow from start to finish. So, why does this site feel a little soulless? After all, there are plenty of modern and minimal software websites that have a little more life to them that all have something in common. So, let's first start by taking a closer look at the site, which was submitted by one of our fellow viewers, Koa. So, thank you, Koa. We actually have really quite a clean, compact restaurant management software.

It wastes no time introducing us to the product and talking about the features. But, the thread that I want to pull on is that the site tells you directly that it's for restaurant owners and then goes on to design like it's never even heard of a restaurant. We're just describing how to set things up, and you'll notice throughout the entire website there are no images anywhere, which is a telltale sign that this was vibe coded and leads to a robotic-feeling website.

But, you hop into something like Actual, and they're immediately relating to freelancers and agencies with laptops and keyboards. And more importantly, they have a single, very actionable heading that promises exactly what their software does. So, that's the gap that we're trying to close here. Relating to the user and building trust in a way that a site like this just simply can't. So, if we actually want this to feel like it's built for restaurants, where do we really begin?

Since we're talking about the feeling of the site, let's start with the visual identity. To get away from the bright and sterile light modes and the flat and typical dark modes, let's start with a single image that's more moody, kind of like this. We crop it down, darken it, layer on some noise, and add in our brand name. Maybe you can start to see this come to life a little. Let's grab a few more images with that similar moody kind of vibe.

From that, we can pretty easily start pulling out some of those earthy tones from [music] the images themselves to build a bit of a simple color palette. I also want to make sure we have a few accent colors to play with. So, I'm going to grab those from this site called Anchor. With these darker colors, I want to get a bit of texture in here. So, perhaps a counter with some pots and pans and measuring spoons. Or to keep a little more on the software theme, a tablet like this.

Next, for fonts, I like the sans serif we have on the current site, but this monospace font is not working very well. So, instead, I want to mix in a serif font to add a little more personality to the website, kind of like a printed menu. [music] Using our accents, I'm going to add in a few icons, which will come to represent the main features of the product. And finally, we can finish it off with a few more images and our logo mark in the top right.

And I think one of the most important things about building out this identity is that none of this came from a formula. It's all about what conveys that feeling and really makes sense for the brand. So, we've nailed the feeling, but how do we take this and translate it into a well-built website? Well, to create something that resonates a little more, we get to do something called Frankensteining a site to work out our message and site flow.

For example, I like the hero of Actual, but we're going to go with restaurant items scattered around [music] to indicate who might use the software. Below that, we're going to have a quick ribbon of logos rotating similar to Better Stack. Then below that, we're going to have something similar to Superpowered, but I want to be less step-like, and these images should be way bigger. It should overall talk about how the product works and really use those background images to reinforce who would use our product.

Now, finally, we can get into some features. I like the full-screen color tabs that Miro has, but I'm thinking we make the image bigger and cut like 90% of this text. The logos we already have are nice, but typically it's good to have a little extra social proof. Something like Atios testimonials are great, but we'll [music] probably nix the lines and text up top and have this be less blocky than it is. Finally, for a CTA, something like Wise with heavy bold type, but the background will be an image and we're going to go ahead and left align things.

[music] When we add in a footer and zoom out, you kind of see what I mean when I say Frankensteining. Now, we're not interested in really anything other than the wireframe here, so we can pull that out and then toss the rest. But, if you are Vibe Coding and want a faster way to prototype wireframes and designs, that's exactly what Relume, the sponsor of today's video, does. You can plug into their entire component library, 1,000+ components built by real designers dropped directly into your editor.

Just add the MCP and sign into your Relume account. Describe what you need, like a hero for a restaurant SaaS, and it'll search the entire library, pull exactly what it needs, and start building on top of that, saving you time and tokens while also avoiding those generic AI patterns. Everything is also fully editable, fully yours to keep iterating on, and shares the same primitives, so things will look consistent throughout your site, which is tough to do when you're building from scratch.

[music] It's a part of any Relume paid plan, and there's a 7-day free trial. If you want to check it out, it'll be the very first link down below. So, how do we go from a pile of boxes to something like this? Let's first start with a background. [music] From the brand, we can have these main colors to work with or an image, so let's run with one of these. For the texture, let's add in a little bit of noise, which will also help with contrast for the text.

We could play it safe with all sans-serif, but let's split these lines just like the original. Then, I'll add in a bit of subtext to add some rounded buttons at at least twice the distance of the heading and subtext, since the large heading already has a good amount of distance between that baseline where the letters sit and the actual bottom. Then, layering in the image assets, we want things to feel scattered and random, but it's actually not at all.

Notice these larger elements below, smaller elements on top, and always maintaining that margin of safety around the text. Lastly, we'll darken the edges to really draw that attention to the center. And if we take that same process and apply it to the next section, we'd start with images as the background, stronger noise, and some mid-size text, and voila! It almost becomes formulaic with the wireframe that we already established.

Let's do it again for the features section. So, this time, I want a cream background with no noise, so we can lean into that clean software feel a little more. A graph paper-like texture, some large images that really dominate the page, and those icons that we put together from the brand deck. Continuing through the rest of the wireframe and the visual identity we've crafted, we start to see a cohesive and importantly unique landing page actually start to come together.

And the cool thing about this is because we spent so much time defining our layout and our visual identity, we can very easily swap out different identities into the same layout and get wildly different feelings when you land on the page, which is how you really master building engaging landing pages. Finally, animation is almost always an afterthought. So, what goes into making a fluid engaging interactions that also feel like they're part of the brand.

If we take a look at this Amigo AI website, we can see two main themes for their visual identity, which is this pull away as we scroll past the section, and these gradient animations between sections. These form the basis of their animation visual identity, since they don't just happen once, but are repeated throughout the website. When we're applying motion to any design, we want to think about directing the eye and the focal point.

Obviously, when we land on the hero, the focal point is the text. But, as we begin to scroll, we have a pretty hard break between the upper and the lower sections. So, to fix that, we can slide the elements off the screen and blur our text while sliding the new section over top, which makes the hero feel like it's part of the background. I think you can see the smoothness of these changes compared to the original, and we'll take that and apply the same idea in reverse to our CTA section below.

So, the bookends are looking great, but the middle is feeling a little dry. Since each of these four images is quite important, and we want to encourage the user to check them all out, let's have them on a timer rotating automatically. And on hover, we'll have a slight zoom in on the images themselves. And there we have my full process for a teardown and redesign of this website submitted by fellow viewer Koa from start to finish, including branding and animation.

If you are interested in checking out Relume, it'll be the very first link down [music] below, and the link to submit your work for a video like this, along with all of the Figma assets used in this video, will be down there, too. Thank you so much for watching, and I will see you in the next one.