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

0:00If I showed you this site, you'd

0:01probably say it's pretty well designed.

0:03It's got a clean layout, good

0:04animations, and decent visuals. By most

0:07people's standards, this is a good

0:09website. But, while it says who it's

0:11for, it doesn't really match the

0:12vibrancy and life that these sites have.

0:15So, instead of trying to make this look

0:16more modern or fancy, what we're going

0:18to do is dive deeper into the process

0:21behind creating sites that stand out

0:23among the bazillion-in-one softwares

0:24that are already out there. And in the

0:27process, break down my entire design

0:29workflow from start to finish. So, why

0:32does this site feel a little soulless?

0:34After all, there are plenty of modern

0:36and minimal software websites that have

0:38a little more life to them that all have

0:40something in common. So, let's first

0:42start by taking a closer look at the

0:44site, which was submitted by one of our

0:46fellow viewers, Koa. So, thank you, Koa.

0:48We actually have really quite a clean,

0:50compact restaurant management software.

0:52It wastes no time introducing us to the

0:54product and talking about the features.

0:56But, the thread that I want to pull on

0:58is that the site tells you directly that

1:00it's for restaurant owners and then goes

1:02on to design like it's never even heard

1:05of a restaurant. We're just describing

1:06how to set things up, and you'll notice

1:08throughout the entire website there are

1:10no images anywhere, which is a telltale

1:12sign that this was vibe coded and leads

1:14to a robotic-feeling website. But, you

1:17hop into something like Actual, and

1:19they're immediately relating to

1:21freelancers and agencies with laptops

1:23and keyboards. And more importantly,

1:25they have a single, very actionable

1:27heading that promises exactly what their

1:29software does. So, that's the gap that

1:31we're trying to close here. Relating to

1:33the user and building trust in a way

1:35that a site like this just simply can't.

1:38So, if we actually want this to feel

1:40like it's built for restaurants, where

1:42do we really begin? Since we're talking

1:44about the feeling of the site, let's

1:46start with the visual identity. To get

1:48away from the bright and sterile light

1:50modes and the flat and typical dark

1:52modes, let's start with a single image

1:54that's more moody, kind of like this. We

1:56crop it down, darken it, layer on some

1:58noise, and add in our brand name. Maybe

2:00you can start to see this come to life a

2:02little. Let's grab a few more images

2:04with that similar moody kind of vibe.

2:06From that, we can pretty easily start

2:08pulling out some of those earthy tones

2:10from [music] the images themselves to

2:11build a bit of a simple color palette. I

2:13also want to make sure we have a few

2:15accent colors to play with. So, I'm

2:16going to grab those from this site

2:18called Anchor. With these darker colors,

2:20I want to get a bit of texture in here.

2:22So, perhaps a counter with some pots and

2:25pans and measuring spoons. Or to keep a

2:27little more on the software theme, a

2:29tablet like this. Next, for fonts, I

2:31like the sans serif we have on the

2:33current site, but this monospace font is

2:35not working very well. So, instead, I

2:37want to mix in a serif font to add a

2:39little more personality to the website,

2:41kind of like a printed menu. [music]

2:43Using our accents, I'm going to add in a

2:45few icons, which will come to represent

2:47the main features of the product. And

2:49finally, we can finish it off with a few

2:51more images and our logo mark in the top

2:53right. And I think one of the most

2:55important things about building out this

2:57identity is that none of this came from

2:59a formula. It's all about what conveys

3:02that feeling and really makes sense for

3:04the brand. So, we've nailed the feeling,

3:06but how do we take this and translate it

3:08into a well-built website? Well, to

3:10create something that resonates a little

3:13more, we get to do something called

3:14Frankensteining a site to work out our

3:17message and site flow. For example, I

3:19like the hero of Actual, but we're going

3:21to go with restaurant items scattered

3:23around [music] to indicate who might use

3:25the software. Below that, we're going to

3:26have a quick ribbon of logos rotating

3:29similar to Better Stack. Then below

3:31that, we're going to have something

3:32similar to Superpowered, but I want to

3:34be less step-like, and these images

3:36should be way bigger. It should overall

3:38talk about how the product works and

3:40really use those background images to

3:42reinforce who would use our product.

3:45Now, finally, we can get into some

3:47features. I like the full-screen color

3:49tabs that Miro has, but I'm thinking we

3:52make the image bigger and cut like 90%

3:55of this text. The logos we already have

3:57are nice, but typically it's good to

3:59have a little extra social proof.

4:01Something like Atios testimonials are

4:04great, but we'll [music] probably nix

4:05the lines and text up top and have this

4:08be less blocky than it is. Finally, for

4:10a CTA, something like Wise with heavy

4:12bold type, but the background will be an

4:14image and we're going to go ahead and

4:16left align things. [music] When we add

4:18in a footer and zoom out, you kind of

4:20see what I mean when I say

4:21Frankensteining. Now, we're not

4:23interested in really anything other than

4:25the wireframe here, so we can pull that

4:27out and then toss the rest. But, if you

4:29are Vibe Coding and want a faster way to

4:32prototype wireframes and designs, that's

4:34exactly what Relume, the sponsor of

4:36today's video, does. You can plug into

4:38their entire component library, 1,000+

4:41components built by real designers

4:43dropped directly into your editor. Just

4:45add the MCP and sign into your Relume

4:47account. Describe what you need, like a

4:49hero for a restaurant SaaS, and it'll

4:51search the entire library, pull exactly

4:54what it needs, and start building on top

4:55of that, saving you time and tokens

4:58while also avoiding those generic AI

5:00patterns. Everything is also fully

5:03editable, fully yours to keep iterating

5:04on, and shares the same primitives, so

5:06things will look consistent throughout

5:08your site, which is tough to do when

5:09you're building from scratch. [music]

5:11It's a part of any Relume paid plan, and

5:13there's a 7-day free trial. If you want

5:15to check it out, it'll be the very first

5:17link down below. So, how do we go from a

5:20pile of boxes to something like this?

5:22Let's first start with a background.

5:24[music] From the brand, we can have

5:25these main colors to work with or an

5:27image, so let's run with one of these.

5:30For the texture, let's add in a little

5:32bit of noise, which will also help with

5:33contrast for the text. We could play it

5:36safe with all sans-serif, but let's

5:38split these lines just like the

5:39original. Then, I'll add in a bit of

5:41subtext to add some rounded buttons at

5:43at least twice the distance of the

5:45heading and subtext, since the large

5:47heading already has a good amount of

5:49distance between that baseline where the

5:51letters sit and the actual bottom. Then,

5:54layering in the image assets, we want

5:56things to feel scattered and random, but

5:58it's actually not at all. Notice these

6:00larger elements below, smaller elements

6:03on top, and always maintaining that

6:05margin of safety around the text.

6:07Lastly, we'll darken the edges to really

6:09draw that attention to the center. And

6:11if we take that same process and apply

6:13it to the next section, we'd start with

6:15images as the background, stronger

6:17noise, and some mid-size text, and

6:19voila! It almost becomes formulaic with

6:22the wireframe that we already

6:24established. Let's do it again for the

6:26features section. So, this time, I want

6:28a cream background with no noise, so we

6:30can lean into that clean software feel a

6:32little more. A graph paper-like texture,

6:35some large images that really dominate

6:37the page, and those icons that we put

6:38together from the brand deck. Continuing

6:41through the rest of the wireframe and

6:43the visual identity we've crafted, we

6:45start to see a cohesive and importantly

6:47unique landing page actually start to

6:49come together. And the cool thing about

6:51this is because we spent so much time

6:53defining our layout and our visual

6:55identity, we can very easily swap out

6:58different identities into the same

7:00layout and get wildly different feelings

7:02when you land on the page, which is how

7:04you really master building engaging

7:06landing pages. Finally, animation is

7:09almost always an afterthought. So, what

7:11goes into making a fluid engaging

7:14interactions that also feel like they're

7:16part of the brand. If we take a look at

7:18this Amigo AI website, we can see two

7:21main themes for their visual identity,

7:23which is this pull away as we scroll

7:25past the section, and these gradient

7:27animations between sections. These form

7:30the basis of their animation visual

7:32identity, since they don't just happen

7:34once, but are repeated throughout the

7:35website. When we're applying motion to

7:37any design, we want to think about

7:39directing the eye and the focal point.

7:42Obviously, when we land on the hero, the

7:44focal point is the text. But, as we

7:46begin to scroll, we have a pretty hard

7:48break between the upper and the lower

7:50sections. So, to fix that, we can slide

7:52the elements off the screen and blur our

7:54text while sliding the new section over

7:57top, which makes the hero feel like it's

7:59part of the background. I think you can

8:01see the smoothness of these changes

8:03compared to the original, and we'll take

8:05that and apply the same idea in reverse

8:07to our CTA section below. So, the

8:10bookends are looking great, but the

8:12middle is feeling a little dry. Since

8:14each of these four images is quite

8:16important, and we want to encourage the

8:18user to check them all out, let's have

8:20them on a timer rotating automatically.

8:22And on hover, we'll have a slight zoom

8:24in on the images themselves. And there

8:27we have my full process for a teardown

8:30and redesign of this website submitted

8:33by fellow viewer Koa from start to

8:35finish, including branding and

8:37animation. If you are interested in

8:40checking out Relume, it'll be the very

8:41first link down [music] below, and the

8:43link to submit your work for a video

8:45like this, along with all of the Figma

8:47assets used in this video, will be down

8:49there, too. Thank you so much for

8:50watching, and I will see you in the next

8:52one.