I refactored over 500 UI designs in 30 days. Here's what people get wrong the most.
Published: 2022-02-06 15:08:43

---
title: I refactored over 500 UI designs in 30 days. Here's what people get wrong the most.
published: true
description: Designing great layouts is challenging. Let's take a look at the most common mistakes I see people making as apsiring UI/UX designers with before and after's. 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkdr3y7mq3pvl7fud245.jpg
---

Recently, I launched a custom platform in which I teach [UI/UX design](https://designcourse.com) on my site DesignCourse. Also, yes, I'm the guy behind the [DesignCourse YouTube Channel](https://youtube.com/designcourse).

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. 

<img src="https://media.giphy.com/media/e9hRgPKipZqgy8sYFP/giphy.gif">

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

![Better spacing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouhh6vn89rihof5m2xy6.jpg)

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

 ![Too many borders picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3eyt4r1i4fzexq0ebwz0.jpg)

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

![High contrast ui examle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyijqfycqlq2qv8hem0t.jpg)

Shadows are meant to be mysterious -- they're meant to be an afterthought. They're shadowy figures, lurking around the corner. Get it? 

<img src="https://media.giphy.com/media/7TUaMzjbQDtM4/giphy.gif">

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

![UI lacking white spcae](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkdr3y7mq3pvl7fud245.jpg)

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

![Bad textfield contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/591bl8a31dmvliigobiz.jpg)

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](https://www.getstark.co/) 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7rtb5qtexede9kytx8l.jpg)

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:

<img src="https://media.giphy.com/media/aNtt9T8SqGNK8/giphy.gif">

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](https://designcourse.com)! Check it out and the [YouTube Channel](https://youtube.com/designcourse).