Color is everywhere. Working with color is an essential part of any brand, and a modern interface strives for its recognition. Therefore, choosing and using colors to achieve business goals can be challenging for any designer.
The choice you make affects the look and impacts how the customer feels about your product and business. Here are my practical tips on creating a bulletproof UI color scheme to help you make the right choice.
Define your primary colors.
The primary color is the first thing you should decide on.
The primary color is displayed most frequently across your screens and is used to point users to UI’s focal actions. Ideally, you should have 1 to 3 primary colors easily associated with your brand or product. That’s it.
Find your whites and blacks.
The only rule here is not to use an absolute white or black.
Absolute black and white colors can exhaust eyes when reading or performing actions. White (#FFF) has 100% color luminance, and black (#000) has 0%. Such an imparity makes intense contrast, which is harder for human eyes to adapt when navigating and reading.
Avoid using pure black on pure white, especially on larger areas. The best thing would be to use a limited grayscale palette made from neutral black colors with added white tints. Here is a quick sample you can apply in your projects:
Use the same accent colors.
Consistency is the key. Use the same color for both your links and buttons. By doing this, you will help users to spot interactive elements and perform actions seamlessly.
Use semantic colors to highlight important information.
Semantic colors — are colors used to signal user information about success, error, warning. Use semantic colors if you want:
This technique comes from real-world design, but it perfectly fits digital products. The 60% + 30% + 10% rule works because it brings the feel of balance and helps the eye move smoothly from one CTA area to another, guiding your user through the interface.
The rule is super simple and goes like this:
You can use these proportions to find the right balance when matching and combining your colors without turning your UI into a colorful mash.
It is considered that these proportions are pleasing to the human eye because they allow one to perceive interior design and your screen's overall composition easily.
To better visualize, let us have a quick example with “60–30–10” in action:
You can also apply colors in a different order, and it will still work. Wow!
The key to a good UX is understanding your audience.
Color plays an important role here, as your choice impacts the user's feelings and emotions when interacting with your product.
Therefore, when choosing a color, it is essential to ask and answer yourself the following questions:
These questions may and should affect your choice, so keep them rolling when choosing the UI palette and discussing your team's choices.
One of the very cool tricks is to use nature or architecture to inspire your unique color scheme.
There are plenty of tools on the web that can help you generate a color palette from an image. Here are my personal favorites you can easily use:
Have fun, and take inspiration from things you like.
Use contrast based on your goals.
If you want to focus your user’s attention on a specific action, It’s a good idea to use high contrasting colors to help him find the focal point.
Such colors as blue, green, and red will quickly tell the context before the user reads the buttons’ text.
Contrast helps users to distinguish various text and non-text elements. Higher contrast makes the imagery more comfortable to see, and reducing contrast can give a more flat tone to images.
However, when dealing with UI design, a high contrast level can also be harmful if applied unwarily. If your text has too much contrast with the background, your UI will be harder to scan.
That why it's always a good idea to conduct a contrast check with the desaturation, evaluate the contrasting success, or just testing your design on different screens.
A tip to help you check the overall level of saturation with your designs.
Put a rectangle over your Frame or Artboard, click on show/hide through the night, to check and match your colors' overall contrast with your eagle eye. See if colors have or not the same level of saturation gamma.
Put a #000 layer with Saturation fill over your colors. Check your color's saturation pattern. See something no one else can see.
As a designer, you have to take care of your users, especially when working with color, since not all people perceive it in the same. According to recent research, about 285 million people worldwide are visually impaired: blind or suffering from other vision impairments.
So here are a few tips to keep in mind when designing digital products:
When using your colors within a design system, always provide an exact name for each color. Every member of your team should understand names without the additional hustle and easily refer to a specific color within the product.
Avoid using a color gradation in names such as Light Blue or Darker Blue. Instead, use functional words that best describe the color in UI purpose. e.g., Positive, Warning, Active, Primary-Blue.
Have you experienced the pain of starting a new project from scratch?
In this shifting world of design tools, Sketch and Figma compete and constantly introduce new features. It has become a real challenge to keep up with the pace and always have a reliable source of your projects' assets.
If you are a designer or developer, life always keeps pushing you to switch from one tool to another and from one type of project to the next. And so on, it’s normal and inevitable.
To help people like myself spend less time on this routine. I have founded buninux.com.
We provide UI kits, Wireframes, Bootstrap Templates, and Icons to help with your projects. We are continually working on new titles as well as keeping each entry growing.
Our goal is to provide a perfect toolset for product designers, developers, and any creative involved in designing digital products. We are not pursuing a number of products. Instead, quality is what most important to us.
You can get each tool individually with a lifetime license or receive access to all of them with Unlimited Access. Unlimited access is a yearly subscription that will help us grow and bring more usefulness to your life.
When creating products, we follow core principles to solve problems rather than create another set of buttons. Here are they:
We always strive to make each product functional and unique to the market, so it easy to recognize, get into, and hard to copy. 😎
Frames Kit is the first product I made back in 2016. Since then, many have changed, and Frames is now a complete set of Sketch web design tools.
Frames Kit has everything you need to make a website or build your own design system. It includes components, design blocks, website templates, style guides, charts, mockups, and custom icons, which together will serve you as a perfect project blueprint.
Plaster is a design tool that fills the gap between iOS & Android design.
It includes components for both platforms, mobile app patterns, and plugin integrations to help you efficiently design a mobile application with Sketch or Figma.
Replacer is a perfect tool to learn how to code and start making live web pages with Bootstrap.
With Replacer, you can create beautiful websites and landings. It features designed components, pages, templates, and documentation — everything to get into Bootstrap train.
I learned how to code, thanks to this product, and for me, using Replacer is much more affordable than using Webflow, Bubble, etc.
Slice Web is a web/mobile design kit primarily designed to be used in a team. Slice files are smartly partitioned into modules that can be used as separate Sketch or Figma libraries for maximum comfort in a shared group.
Slice Web provides powerful UI components, including navigation, cards, controls, and web blocks to serve you as a reliable foundation.
Root is the most minimal design kit you will ever find. Root palette includes only 8 colors but gives you a whole lot of fun and style.
Root is super easy to use, customize and perform experiments. It includes pre-designed components, web blocks, and a style guide to help you easily create awesome wireframes and presentations.
Pioneer is a set of bold 100px icons in 19 categories that you can use to beautify your websites, landings, and presentations.
SBI is a versatile set of icons specially designed to fit any UI type and provide a clear metaphor.
We are working hard to bring you more useful tools and news.
Stay tuned & subscribe. ♥
＊If you have a cool resource or product and interested in helping us grow, you can participate in the affiliate program. For more info, please message at [email protected].
I see a big trend among designers — posting carousels on Instagram. But I can’t get myself used to post there. So, I decided to do a bit of research and create a template for my future content to help myself.
So today, I want to share my small Carousel Kit for Sketch & Figma. 😊
The idea behind this freebie is to establish a workflow for preparing my own Instagram content. I hope you can find this template useful in making your approach to IG posts and carousels. ♥️
Instagram post — is a series of images with the text utilizing the slide gesture. They provide good user retention and can be a great solution for people looking for micro-blog content.
The carousel template is designed with a classy 4pt grid with predefined spaces for repeated elements, such as Header, Subtitle, Signature, and CTA.
To help myself decide about elements — I used booklets.io as the inspiration source and have developed a pattern based on how other people use typography elements and negative space in their posts.
Based on that, I have made a bunch of components to establish my header and footer sections. 👇
I thought that there would definitely be a profit in saving time on repetitive actions when preparing my content. So I decided that the latest features from Sketch & Figma can come in handy here.
To help myself with different types of steps. I decided to premade a small number of carousel layouts to copy, modify, and create new ones based on them to speed up the whole process.
You can use this template to showcase your amazing content on Instagram in a simple but beautiful way. Feel free to customize it and come up with your own unique style & voice. ✌️