Speaker A
I've spent years making bad designs, so I can tell you exactly what makes something look like it was made by a beginner.
Learn 7 common UI/UX beginner mistakes and how to fix them with practical tips using a recipe app redesign.
Key Takeaways
- Plan user flow carefully to avoid missing key navigation and interaction options.
- Less is more with visual effects; subtlety improves clarity and professionalism.
- Consistent spacing and components unify the design and improve usability.
- Use well-matched icons and provide labels or tooltips for clarity.
- Interactive feedback is essential to communicate system status and user actions.
What the video covers
- Mistake 1: Poor user flow, missing search and skip options disrupt user experience.
- Mistake 2: Overusing visual effects like gradients and harsh shadows creates clutter.
- Mistake 3: Inadequate spacing can make UI feel cramped; use grids and auto layout.
- Mistake 4: Inconsistent components such as varied corner radii and styles reduce polish.
- Mistake 5: Poor icon usage slows browsing; use consistent icon libraries and labels.
- Mistake 6: Redundant UI elements add unnecessary clutter and should be removed.
- Mistake 7: Lack of interactive feedback makes the interface feel unresponsive.
- Bonus Mistake 8: Over-designed charts can be unreadable; simplicity conveys data better.
- The video uses a real recipe app redesign to demonstrate each mistake and improvement.
- The Figma file with examples is available via the video description link.
Full Transcript — Download SRT & Markdown
Speaker A
By the end of this video, you'll be able to spot those mistakes instantly.
Speaker A
and fix them just as fast. We'll look at real examples, before and afters, and easy ways to improve UI without starting from scratch.
Speaker A
We're going to redesign this simple recipe app, one mistake at a time until it looks polished and production ready.
Speaker A
Mistake number one: User Flow.
Speaker A
Let's start with something that quietly ruins your UX: user flow.
Speaker A
Here's our allergy screen with six preset options, but no search bar if someone's allergic to something else.
Speaker A
We also don't have a skip button either.
Speaker A
What if the user doesn't have any allergies?
Speaker A
These are things you will miss if you don't plan out your flow, but users, they'll feel it instantly.
Speaker A
So, even something as simple as sketching boxes on paper helps you catch major gaps early on.
Speaker A
And it's not just all about big stuff; little touches like a filter icon on the search bar or a save button up top go a long way.
Speaker A
The most commonly missed elements: navigation links, hidden states, and dynamic interactions, like button hovers or micro-interactions.
Speaker A
Mistake number two: overusing effects.
Speaker A
Early on, I was addicted to visual effects.
Speaker A
Shadows, glows, gradients, you name it.
Speaker A
But the truth, overusing them can make your designs feel cluttered and amateur.
Speaker A
Let's start with the gradient here.
Speaker A
It's blue and green.
Speaker A
And it's just not working.
Speaker A
If you really need a gradient, stick to variations of the same color, like a darker or lighter green.
Speaker A
But honestly, this would look way cleaner with no gradient at all.
Speaker A
And that's usually the case.
Speaker A
Now, let's talk drop shadows for a second.
Speaker A
These Figma defaults are way too harsh.
Speaker A
Instead of just lowering opacity, I changed the entire shadow color, usually to a light gray, and increase the blur significantly.
Speaker A
Or, once again, remove the shadow completely.
Speaker A
Because most of the time, less visual noise equals a better design.
Speaker A
Mistake number three: spacing.
Speaker A
Most beginner UIs are packed way too tight, like my old app design.
Speaker A
So, we'll use two tools here: grids and auto layout to make it so much better.
Speaker A
First, we'll set up a three-column grid for this screen and two-column grid here with these measurements.
Speaker A
Now, just align elements to the grid as closely as possible.
Speaker A
If something needs to break the grid slightly, like these elements, just leave it as is if it still feels balanced.
Speaker A
Next, for stacked content like this, increase the vertical spacing to let things breathe and group naturally.
Speaker A
Especially on mobile screens, you'll need more space than you think.
Speaker A
Now, check out these cards and chips.
Speaker A
The layouts are pretty wonky.
Speaker A
Perfect time to use auto layout.
Speaker A
Turn off vertical trim for pixel-perfect control and adjust spacing like this.
Speaker A
Repeat this across your UI to keep spacing consistent and clean.
Speaker A
Which is a perfect segue into the next mistake most designers make.
Speaker A
Mistake number four: inconsistent components.
Speaker A
Like spacing, this one kills me since it's just so easy to fix.
Speaker A
You'll notice throughout our design, we have all sorts of different corner radiuses and components, like this back and skip button.
Speaker A
That are exactly the same but designed differently, which just makes the design feel amateur.
Speaker A
Instead, let's make a few changes.
Speaker A
First, we'll make the two search bars identical, other than the prompting text.
Speaker A
We'll set the corner radius of all smaller components to be 10 pixels.
Speaker A
This is an important one that most designers miss.
Speaker A
And of course, we'll update the skip button and back button to match in size, corner radius, and style.
Speaker A
Being consistent means using styles for colors, variables for measurements, and components for UI elements to really bring your design together.
Speaker A
Mistake number five: icons.
Speaker A
I think people underestimate how much good icons do for a design and how detrimental bad icons are.
Speaker A
First of all, we have no icons on these cards here, which forces users to read more and slows down the browsing process.
Speaker A
Let's add in some good icons and replace the save text.
Speaker A
Then up above, we have icons, but they're mismatched in fill, line width, and style.
Speaker A
We can fix this by using the same library of icons, like Flat Icons.
Speaker A
On their website, select interface icons and then sort by stroke width and corner to get some consistent results.
Speaker A
Make sure when you download to grab SVG for the best results.
Speaker A
If you want to choose a Figma plugin instead, I like Phosphor Icons and Feather Icons.
Speaker A
Finally, we have a fair amount of icons down here without labels.
Speaker A
If the icons are well known enough, like the house, bookmark, and user, then you don't need to have anything.
Speaker A
But for these two, a tool tip pop-up could make the onboarding process much smoother.
Speaker A
Just try not to have bizarre icons everywhere.
Speaker A
Finally, this is a very pro tip.
Speaker A
But interestingly, it is okay to have different styles of icons in the same design, but only if they're visually separate.
Speaker A
For example, these nav bar icons are slightly different than the food icons, and those are different than our recipe icons.
Speaker A
But it all works together since they're in separate areas of our design and used for different things.
Speaker A
Mistake number six: redundant elements.
Speaker A
Having redundant elements is actually a really common mistake, especially as the trend of having stuff everywhere takes over.
Speaker A
Looking at this screen, we can get rid of this arrow since we'll be able to swipe on mobile.
Speaker A
And same idea down below.
Speaker A
We can also get rid of this arrow since it's really just visual clutter and dim down the color of the button.
Speaker A
You could probably argue that these arrows aren't needed either.
Speaker A
But we are going to keep those.
Speaker A
Finally, the stroke on these elements is really not needed.
Speaker A
If you are worried about contrast ratios, dimming it down significantly is a good option too.
Speaker A
But we'll just rip them straight out.
Speaker A
Mistake number seven: interactive feedback.
Speaker A
We've covered overusing effects, so now let's cover the underuse of different interactive effects.
Speaker A
For example, if we're navigating through a flow, but it takes a split second longer for the next screen to load, it looks like we haven't even clicked on the button at all.
Speaker A
But if we make it grayed out when we click on it, we've added some interaction and it shows the user that the next screen is coming.
Speaker A
Even better, we could add a loading wheel if it's really taking a long time.
Speaker A
Another good example is clicking on the save icon.
Speaker A
Filling it in is a great first step, but we could also add a red dot to our save tab, so when we click on the icon, we get it filled in.
Speaker A
And it's clear to the user that there's a new recipe added to the save tab.
Speaker A
We've actually made an entire video just about interactive feedback and micro-interactions.
Speaker A
So, check out that video afterwards to see some really smooth animations.
Speaker A
Bonus mistake number eight: charts.
Speaker A
This is a bonus tip since it has nothing to do with our recipe app.
Speaker A
But charts are so often messed up by over-designing that thing that I thought I should make a point to mention it.
Speaker A
I have two charts here.
Speaker A
Which one do you think I got from Dribbble?
Speaker A
The one on the right.
Speaker A
Yes.
Speaker A
And it's basically impossible to read without any vertical axis.
Speaker A
And even if we had a vertical axis, it's hard to tell where the bar ends with a rounded top.
Speaker A
And then there are 16 bars here, but only seven days of the week.
Speaker A
Why would you do that?
Speaker A
Whereas the one on the left is simple, definitely less aesthetic, but conveys so much more useful information to the user.
Speaker A
And that is everything you'll need to start spotting and correcting beginner mistakes.
Speaker A
The Figma file with the mistakes and the full app is in the link in description.
Speaker A
Other than that, thank you so much for watching.
Speaker A
And I'll see you in the next one.
Topics:UI designUX mistakesbeginner UI tipsuser flowvisual effectsspacing in UIconsistent componentsicon designinteractive feedbackFigma tutorial
