This Tool Tests your UI Design Skills

Can you spot bad vibe design? That's a very important question if you're not skilled in UI design because if you're just relying on the AI to spit out perfect design, you're going to have a bad time. I'm going to show you with this tool that I made a few years ago, which is more relevant than ever, how to determine if you're actually, you know, you have a good ability to determine what is good or bad design. This is 100% free. It doesn't even require an account. You can just click the link and start taking it. But, watch a couple of of these examples and me walking you through them so you understand how to do it. So, we'll take this one right here, drop-down menu. So, the way this works is there's a UI of some sort in this right canvas area. And then over here, we have six different UI fundamentals. We have white space, contrast, color, typography, scale, and alignment. Your goal is to choose the options that you think are incorrectly applied to the given design on the right. So, let's take this I step by step. White space. White space is the empty space around elements in your design. It's a fundamental. And if you don't understand what it is or how, you know, what what correct white space is, you're going to have a hard time. In terms of white space, I don't think there's any issues here. You know, nothing's spread out way too far, nothing's too close. What about contrast? Yes, contrast right here, risk management, black text on a dark gray background is bad. So, I'm going to click on contrast. Now, what's cool, you click on it, it lets you know if you're right. And if you are right, it will make an improvement to that contrast. We can see it's much better now. Now, what about color? I think color is fine here. What about typography? Bad typography. Why? Because Home Services of Fact is a condensed font, but the rest of this font right here is more of like an extended font. So, I'm going to click typography and notice how it updates that. Now, what else? Now, the way to know if there's something else to click is if it didn't complete the test. So, there's still something wrong. And so, the other remaining two are scale and alignment. Scale. All right, the size of things, the size of your topography. Does it make sense? Well, I think HomeAdvisor in fact is way too large compared to Crypto Company. So, one of them either has to shrink or the other one has to get larger for better scale. So, I'm going to click scale. And there we go. So, now if we zoom out, this is a much better interpretation. If you click on show more or show before rather, this is the original and this is after fixing things. So, now you can continue on to the next one. So, what about footer design? Okay, here's a footer, a very simple, maybe like a tablet-based footer. Any issues with white space? Nah, I don't think so. What about contrast? Nah, what about color? Yes. This purple against this shade of kind of like a bluish doesn't look It just looks terrible. So, let's click that. And now it updates that to the correct color. What about typography? I think that's all good. It's all consistent looking, the type itself. What about scale? I think that's good. We have good visual hierarchy between the typography. What about alignment? Alignment's probably the one that we want to look at because right here, why would there be this indent, right? This white space right here. It would be much better alignment just to put this on the same exact column established by the company brand logo right here. So, I'm going to put alignment. It's going to move that over. So, now we can see the before and after. Show before. Show after. Much better. These subtle changes make a big difference and especially when you add them all up accumulatively across an entire design, across multiple pages, this is what's going to kill the quality of your UIs if you can't spot this stuff. I'll do one more. Here's pricing comparison. Okay. Um pricing comparison. Right here, I would say color. Having this outline in red does not make sense. First, from a UX perspective, that means danger. That doesn't really make sense. So, I'm going to put color. It's going to update this to purple, which already looks a lot better um in terms of color. Now, what else is wrong about this? I mean, these can be really tricky. I If you look at this and you kind of like just zoom out and scale, what kind of makes most sense to me since the brown the bronze package and this personal hosting across all three of the this this this subtitle and the title is centered and then this stuff is kind of just pushed over here to the left. It might be better if we take alignment and we center those all of the sudden. So, we could do the show the before with the red stroke and left align here and then show after and it fixes both of those issues. So, I won't do any more because I think there's like 15 or 20 or something. And just see I go through these and there is a point system, so you can kind of score yourself. They're not very easy. Sometimes they can be a little bit subjective. I'm thinking about making more of these and making more modern, but figure out just do this and see how well you can spot bad design because it is more difficult than what you think. So, make sure to subscribe up here. Let me know if you want me to update these. I'll create more tests. Uh I think it could be fun and maybe we can create a system where other people can create their own tests in kind of like a cool system. Anyhow, I will see you all very soon and goodbye.