Recently, I launched a custom platform in which I teach UI/UX design on my site DesignCourse. Also, yes, I'm the guy behind the DesignCourse YouTube Channel.
Mentorship is an optional part of the program, in which Mentor students submit a Figma prototype that attempts to satisfy the demands of 12 different challenges.
I've reviewed and revised over 500 submissions in the last 30 days.
I thought it would be beneficial to share some the most common problems I see aspiring UI/UX designers make.
1. Utilizing the space in your layout
One of the first challenges is to take a headline, and a subheadline, and situate them on a desktop. The only thing students can do is change the font sizes, and position of these 2 pieces of type.
I see many students not effectively utilizing the space they have available. This is primarily achieved by scale -- and if we're talking about typography, it's achieved by properly adjusting the font sizes along with word wrapping.
Notice in the "after" example, by making the text larger and wrapping the headline on 3 lines as opposed to one, it consumes more of the layout?
2. Too many borders
I also see this quite often: too many borders. Sometimes they're high contrast borders, which make matters worse. If you use borders in your layout, you want to use them very sparingly, especially if they're of higher contrast.
Otherwise, this creates an issue where the borders become a distraction against the important content.
In this case, I was able to ditch both borders and increase the contrast in the design by making the card backgrounds white. So much better!
3. High Contrast Drop Shadows
Shadows are meant to be mysterious -- they're meant to be an afterthought. They're shadowy figures, lurking around the corner. Get it?
If you make your shadows high contrast as in this example, you divert attention away from the important typographic elements in your design.
This throws off the visual hierarchy (more on that later), because you're unnecessarily directing attention to an element that has very little importance.
Notice how the content itself becomes front and center when I decreased the contrast in my revision? That's what you want!
4. Not enough white space
White space is the empty space in your design. Too many new designers like to squish things together, which clutters the layout. Just by adding more white space on the top and bottom of the gallery in the example above, the layout is improved substantially.
5. Form elements that you can't see
Whether it's poor color contrast applied to textfields (as in the example above), or background colors that don't contrast enough -- new designers sometimes find it difficult to design accessible form elements.
You want to ensure that you're using adequate contrast. If you're not using a background color, then your stroke needs to be of higher contrast.
There are a lot of great tools and plugins for determining whether or not your contrast adheres to WCAG guidelines. Stark Contrast for both XD and Figma are great options. While it's meant for type, you can also use them for other elements like borders and icons.
6. Color contrast
This is a challenge where a student needs to take a dark mode side bar and make a light mode variation.
Notice on the original (to the left) how the sidebar background doesn't contrast well with the box to the right? That's poor color contrast.
Being that the adjacent side is gray scale (devoid of color), I simply made the sidebar background a few shades darker. Now, it's much more cohesive.
There's a lot more mistakes..
And sometimes, they certainly elicit this reaction:
But these are the most common that I see at times. Understanding how to create great looking and functioning layouts first starts with understanding solid UI design fundamentals.
- Visual hierarchy
- Color & Contrast
- Scale
- Typography
- White Space
- Alignment
If you can understand the above, you will have a great foundation.
This is a part of what I teach at DesignCourse! Check it out and the YouTube Channel.
Top comments (2)
Oh this is pretty cool. I'm subscribing to the YouTube channel 🙂
In example #3 - I'd argue that the pictures of Nike shoes are far more important than the text besides it, so the contrasty shadows might have been a pretty good decision imho. Personally, I find them a bit too bold too, but I think they fit the brand/design.
As always there's something new to learn from you 💙✨