One of the most important components when building a digital product is its UI. The first interaction your users will have with your product will be with its UI. A good UI plays a crucial role in the success of your product and makes it easy and enjoyable for users to interact with. In this blog series I will walk you through the steps I take when designing a visually consistent UI. Let’s get started with the most noticeable UI style, color.
Color
Color in your UI is very important, it helps increase brand recognition, and helps increase user engagement. Here are the basic colors every UI should have.
- Brand Colors
- Primary Brand Color
- Secondary Brand Color
- Success and Failure Colors
- Greys
- Tints and Shades
- Final Color Palette
Brand Colors
Brand colors define your brand and should be immediately recognizable to your users. Let’s start by choosing 1 primary brand color and 1 secondary brand color. For our web app, I picked out yellow for its primary and a blue for its secondary brand color.
Success and Failure Colors
Next we will add success and failure colors. Success and failure colors are a common design pattern in digital products used to communicate to the user that they have successfully completed an action or have failed to complete an action. Green and Red are the most common colors used, but blue, yellow, and black could be used based off your brand’s colors.
Greys
The next colors every UI needs is grey. A good UI needs to have at least 4 of the following greys.
- A light grey for backgrounds.
- A slightly darker grey for borders, lines, strokes or dividers.
- A medium grey for subheadings and supporting body copy.
- A dark grey for main headings, body copy and backgrounds.
Tints and Shades
The last thing I do to complete my UI color palette is create tints and shades of all the colors I’ve defined. Tints and shades can be used for various components throughout the UI such as button hover states, active states, backgrounds, etc.
Final Color Palette
Now you have the basics of a consistent UI color palette! Connect with us if your website needs a design refresh.
Thanks for reading and stay tuned for the next part on Designing A Consistent UI: Choosing A Font Family.
