Designing A Consistent UI Part 1: Color Palettes

by | May 5, 2017 | UI/UX Design

Recently at Wide Open Tech, we’ve been busy designing and developing a proprietary digital product. It’s called Brewfully, and it’s a web app that let’s you pre-order beer online to pick it up in the taproom.

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.

meetup

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.

meetup

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.

meetup

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.

meetup

Final Color Palette


Now you have the basics of a consistent UI color palette! Connect with us if your website needs a design refresh.

meetup

Thanks for reading and stay tuned for the next part on Designing A Consistent UI: Choosing A Font Family.

Share This