Just make sure they are consistent throughout. Your black could be a deep navy blue or you white could be a very subtle beige. Note that these do not have to be a pure black and white. Let’s get started! Steps to creating a monochromatic UI palette Step 0: Light and Dark Modeīefore you do anything, if you plan on creating a light and dark mode, make sure you establish what those look like.Įven if you are not creating two modes, this is essentially establishing your “black” and “white.” I also offer tips on the uses for each color.
“White” (high contrast neutral for dark mode). “Black” (high contrast neutral for light mode). In fact, sticking to a monochromatic scheme can help your designs look cohesive, clean, and sophisticated.Īnd the best part? Once you learn these few tips, it takes no time at all to create your palette.Īt the end of this process you will have an easy to use a palette that consists of: However, when it comes to UI, it doesn’t take a slew of colors to create beautiful designs. In color theory, there are a number of different harmonies that you can work with to create various color palettes. Thanks for reading and stay tuned for the next part on Designing A Consistent UI: Choosing A Font Family.Image from Unsplash. Now you have the basics of a consistent UI color palette! Connect with us if your website needs a design refresh. Tints and shades can be used for various components throughout the UI such as button hover states, active states, backgrounds, etc. The last thing I do to complete my UI color palette is create tints and shades of all the colors I’ve defined. A dark grey for main headings, body copy and backgrounds. A medium grey for subheadings and supporting body copy. A slightly darker grey for borders, lines, strokes or dividers. A good UI needs to have at least 4 of the following greys. Green and Red are the most common colors used, but blue, yellow, and black could be used based off your brand’s 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. Next we will add success and failure colors. For our web app, I picked out yellow for its primary and a blue for its secondary brand color. Let’s start by choosing 1 primary brand color and 1 secondary brand color. Here are the basic colors every UI should have.īrand colors define your brand and should be immediately recognizable to your users. ColorĬolor in your UI is very important, it helps increase brand recognition, and helps increase user engagement. Let’s get started with the most noticeable UI style, color. #BLUE COLOR UI DESIGN SERIES#
In this blog series I will walk you through the steps I take when designing a visually consistent 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. The first interaction your users will have with your product will be with its UI. One of the most important components when building a digital product is its UI. 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. Recently at Wide Open Tech, we’ve been busy designing and developing a proprietary digital product.
0 kommentar(er)
