The 3 basic principals of UI design

1. Using color correctly

Photo by Robert Katzki on Unsplash

using color correctly is very important to making a good design. Here’s an example of bad color.

Bad:

bad website design

Now here’s a version where i picked the colors using Happy Hues to select the colors.

Good:

It’s amazing what picking the right colors can do for a design. And all i did was copy and paste some hex color codes.

2. Hierarchy

Photo by Edvard Alexander Rølvaag on Unsplash

Hierarchy is a simple concept where more important elements are bigger and bolder than less important elements which are smaller and less obvious. Here’s an example.

Bad:

Bad hierarchy example

Here you can see an example of bad hierarchy where the elements that you want to look at are the smallest. And the least important elements are the biggest.

Good:

Good hierarchy example

As you can see this design is more aesthetically pleasing. Then the other design because the hierarchy is correct as you can see the “Today’s weather” text is the biggest, the date text is the smallest, and the Temp text is in the middle.

3. Alignment

Photo by Jeffrey Blum on Unsplash

Alignment can cause big problems in your designs. Without very many issues. Which is what makes it so treacherous. Here’s an example.

Bad:

Bad Alignment example

As you can see at a first glance this looks ok. But it if you look at it for a little bit longer it starts to feel out of place.

Good:

Good alignment example

Here you can see that this design is much better than the previous one. Because there are only 2 columns a left aligned one and a center aligned one. Which looks much better than a three column design where the columns are far apart and not aligned correctly.

Conclusion

I hope that you learned something from these various examples. And you take this information to make great designs in the future.