UI design for software developers. Part 1, Colors

UI design for software developers. Part 1, Colors

In this series of articles, I will show full process of creating a UI design for Batch Image Shrinker (Google play link) mobile application which I did by myself. As a software developer always I've been thinking that UI design is not for me, that it's complex and requires some art skill or something.

It's a myth and I will try to debunk it.

I will show you that UI design is for everyone, you just need to know some basic technics and a couple of tricks.

It's not going to be easy, but I promise you it will be very interesting.

Dominating color

With the dominating presence of dark-mode, I noticed that for me it was easier to work with darker colors as baseline colors than with brighter ones, and since I almost always use dark-mode of the applications, so I wanted to have something similar in my application. I was certain that I didn't want to use Facebook blue color and it's successors, so I had to find something more futuristic and brave than that. My choice fell on #464d77 which is a very intense dark blue, almost purple color.

Screenshot-2020-11-17-at-20.10.09

Common advice here will be not to use pure black or white colors, which, as perfectly described in the article, hardly present in the real-world color pallet. What a coincidence, I found a website with a perfect example of dark background color and great content to read.

Color palette

Of cause, just one baseline color will not be enough to build a feature-rich application. You will need a couple of colors for different types of components like buttons, checkboxes, radio buttons, etc. Another one or two colors will be needed for the text itself. Also, some gradients for several states of a component, such as "active", "disabled", "pressed". So before creating an actual UI, we will need to have a rich pallet of colors to work with. In my case, I ended up with 6 colors in total which was more than enough to create a simple yet interesting UI.

This step is much easier than the previous one, because here we will be either reusing or generating new color pallets using the baseline color from the previous part.

The generator which I was using is this. Here you could either put the color hex into a search bar or simply choose the pallet from the hundreds of pre-generated ones. If the color range is not enough for you, try to extend it with another good palette generator. Put on the left side the baseline color and select how many colors you will need.

Pro-tip, you can combine those tools to get even more combinations. As you can see here, I was using a baseline color on the right side and colors from the palette as values for the right side of the generator:

Screenshot-2020-11-16-at-23.50.31
Screenshot-2020-11-16-at-23.51.04

If you are not satisfied with the results try to get back to choosing the baseline color and repeat the whole process again. Since we are learning it's ok to do multiple roundtrips until your gut feelings tell you that that is it.

Once we are done with the color schema we are good to go to we move to the next step - choosing fonts, which will be covered next time.

Get the latest posts delivered right to your inbox.