<p>Published on <a href="https://blog.prototypr.io/how-to-use-color-in-ui-design-wisely-to-create-a-perfect-ui-interface-6e524bd023bc?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Cherryhappygirl </p>
<p>Whenever found an interface that looks nice, clean and elegant, I save it. Now I have a collection of more than 100 <strong>UI interfaces</strong>. After learning, making use of or simply viewing it again and again, I finally realized something in common. It is always the color that steals my heart at the very first look. So here, I’d like to make a conclusion about <strong>how to use color in UI design wisely</strong>. A serious note first, what I wrote can’t turn you into an excellent UI designer magically, but I promise you’ll learn something here. If this is actually useful, please leave me a comment.</p>
<h3>1. The magic power of color</h3>
<p>Color can speak, as powerful as language. You just can’t argue me about that. Think back whenever you encounter a site or a product, it is the visual appearance, which largely depends on color, that always leaves you the very first impression.</p>
<p><strong>So, what color can do actually?</strong></p>
<h3>1) Reflect the personality ofa brand</h3>
<p>Color can set the basic tone,mood, connotation and conception of a brand or a product. A research made by CCICOLOR says that users only take 90 seconds to estimate products online, and between 62% and 90% of the judgment of their initial view is upon the colorscheme.</p>
<h3>2) Achieve better <a href="https://www.mockplus.com/designer/post/definition-of-ux-design/?r=cherry">user experience</a></h3>
<p>The right choice of color can support better readability of the information. Beside, it can increase usability sharply, such as strengthencall-to-actions, enhance navigation, stimulate intuitive interactions, satisfy aesthetic needs and visual solutions. In all, to create clear and harmonious style that meets users’ needs.</p>
<h3>3) Influence the purchasing decision</h3>
<p>According to Kissmetrics, the visual appearance of a product is the key factor influencing consumers’ purchasing decisions. Also, research from QuickSprout indicates that 90% of all product assessments have to do with color. Nowadays, many companies take Colors, especially color in UI design, as one of their marketing strategy.</p>
<h3>2. Fundamental concepts about colors</h3>
<p>Each color hasformed its unique meaning and connotation in the long run of human life. Read the meaning of each language, please have a look here.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/900/0*_Q3nXe_jwicagiq2.png"></p>
<h3>3. Tricks to use color wisely</h3>
<h3>1) Choose the right color in the right usage pattern</h3>
<p>We can’t say a color is “bad-looking”, only you use it wrong, then it may look bad. Imagine this, if Mcdonald’s uses gray and black instead of yellow and red, you still have a hungry appetite? Women wear black dress and red lipstick at party, why?</p>
<p>It looks sexy and charming, that’s it.</p>
<p>Different color conveys different meanings and senses. Use it wisely means hit the 5 “rights”: choose the right color, at the right time, in a right usage pattern, with the right users, and target the right goals.</p>
<p>If you want to use color in UI design wisely, please pay attention to the above chart, I am serious. Unless you would like to take a big risk to be unique.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/900/0*-KFDd1xByR1vHsWR.png"></p>
<h3>2) Pay attention to BLUE</h3>
<p>Why talking about blue?</p>
<p>Just have a look at your most commonly used Apps or sites, Facebook, Twitter, Microsoft, Safari, etc. What’s in there? Yes, you’ll see, they are all in blue. Various kinds of blue.</p>
<p>According the research, blue is the NO.1 color that women and men both like. Blue is like everywhere, in nature, in sites, in clothes, etc. and as I enter the words, I see the interface of Microsoft Word is in blue.</p>
<p>Blue is definitely a safe color that can cultivate user’s trust and be accepted, blue is a typical example of color in UI design. If you have no better choice, just use blue.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/900/0*HGCed-oILFQsf4gq.png"></p>
<h3>3) Color variations between the background and the elements</h3>
<p>Have a look at the following interface:</p>
<p><a href="https://www.mockplus.com/resource/post/20-free-beautiful-butterfly-creations-for-your-inspiration">Best UI/UX Design Materials for Free</a></p>
<p><a href="https://www.mockplus.com/resource/post/20-free-beautiful-butterfly-creations-for-your-inspiration/?r=cherry">DOWNLOAD</a></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/902/0*i7GWEoO9pcvELNDf.png"></p>
<p>Regardless of it’s blue again, let’s focus on the variations. The theme color is Blue, and the other elements are darker color variations and brighter color variations. But in all, they look good, harmonious and work with each other.</p>
<p>How to do it?</p>
<p>Just one simple golden rule:</p>
<p>“ Darker color variations are made by lowering brightness and increasing saturation. Brighter color variations are made by increasing brightness and lowering saturation.”</p>
<p>This is echoing what others have said, you can check this excellent observation at the <a href="https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e">source</a>.</p>
<h3>4) Golden ratio in color proportion — The Golden (6:3:1) Rule</h3>
<p>You can’t walk away from color combinations completely when doing UI interface design. To combine color in UI design is easy, but how to avoid chaos and overload? how to get rid of plain and stay on sophistication?</p>
<p>Remember in mind the 2 principles:</p>
<p><strong>The first is: 6:3: 1 rule</strong></p>
<p>The 60% + 30% + 10% principle is the best proportion to reach balance among colors. This criterion can work perfectly by cultivating a balance, neat, harmonious interface that brings pleasure to the users. Also, it can ease users’ eye to move comfortably from one point to the next.</p>
<p><strong>The second: max 3 primary colors</strong></p>
<p>This rules match with the The Golden (6:3:1) Rule. It’s also a good way to avoid chaos and keep in balance in your color scheme.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/900/0*9lzAC3QUgs3oroJm.png"></p>
<h3>5) Color combinations and Complement: clean and eye-friendly</h3>
<p>What matters when delivering a harmonious color scheme? There are several factor need to consider:</p>
<p><strong>First, Tints, Shades, and Tones</strong></p>
<p>based on a “hue”, you can create many changing variations on the color wheel. There is a trick: adding white then you can get a hint, black for a shade, and grey for a tone. And here, i suggest use single color scheme.</p>
<p><strong>Second, Contrast</strong></p>
<p>Color contrast is also a practical method of color in UI design. Contrast can evoke various emotional response from users. Colors on opposite sides of the color wheel can generate the strongest contrast, like black and white. Strong contrast can draw users’ concentration and tension; while light contrast can bring comfort and please by displaying a relaxing and casual design.</p>
<p>Be careful not to pile it on, or you are causing troubles and confusions to the user.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/900/0*g2lPnl7WjqPJBCjG.png"></p>
<h3>6) Black, white and elegant</h3>
<p>Black is the strongest of all the neutral colors, while white is the most used background color. As mentioned above, those two are the greatest level of color contrast. Adopt black with white properly, you can create a UI interface that looking elegant. This color scheme is mostly used in website. Black can give a feeling of sophistication, and white space can create a sense of freedom and imagination.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/900/0*xVY5ha7C8jJscL2X.png"></p>
<h3>7) Get inspiration from nature and art</h3>
<p>Nature and art are the main resources of color inspiration. Just go outside, look at the sky, you’ll see the most various and natural blue. Color in nature is the best choice to create a feeling of user-friendly and natural. To extract color from nature can ease users’ eye and bring them the magic power of beauty. While art is the direct reflection of nature, so just make the most of it.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/900/0*eZj6Kbi3oZ5kInbi.png"></p>
<h3>8) Color knows about gender</h3>
<p>It’s like born this way, women don’t like gray, orange, and brown. They like blue, purple, and green, while men don’t like orange, purple and brown. Men like blue, green, and black. It’s definitely a disaster if you doing a sporting design in purple. Just remember, whenever you are targeting to men, choose the color that convey maleness. Similarly, use female color to do the design that mainly used by ladies.</p>
<p>And one more, pink is not the universally-loved female color!</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/899/0*5LbJJZXJ63iCllbF.png"></p>
<h3>4. Tools and templates</h3>
<p>Tools and anything that can be useful can make things much easier. Here i picked some of the <strong>best UI design tools</strong> for choosing color palettes. They can be a big time saver when adopt color in UI design.</p>
<h3>1) <a href="https://coolors.co/">Coolors.co</a></h3>
<p>Coolors.co is a professional color picker. It allows you to lock your selected color and press space to generate palette. You can also upload images and then make a color palette from it. Coolors.co also provides you a picker to modify reference point.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/902/0*EfssIFPOn-0E2BKB.png"></p>
<h3>2) <a href="https://www.mockplus.com/blog/post/mockplus3-2/?r=cherry">Mockplus</a></h3>
<p>Mockplus is a smart tool to do UI interface design. You can import directly all kinds of sample projects and templates with nice layouts and interfaces. The coolest thing is that you can use the common functional page templates to quickly build some specific pages including homepage, sign in/up page, setting page, help/about page, search page, etc. Also, the color picker inside and various properties allows you create ideal UI elements.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/802/0*rzUZp16YJTx9O1fG.png"></p>
<h3>3) <a href="http://paletton.com/">Paletton</a></h3>
<p>Paletton is a good tool for to pick color. It’s kinda similar to Kuler but the good thing is that you are available to more than 5 tones. This tool is especially useful when you have picked your primary colors and want to generate extra tones.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/900/0*lzTH-AtwEmUeDqqT.png"></p>
<h3>4) <a href="http://www.checkmycolours.com/">Check my Color</a></h3>
<p>It is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/900/0*qiQ7R64_juPXYB2Q.png"></p>
<p><strong>A note: Do remember the usability is everything</strong></p>
<p>To use color in UI design wisely can create a gorgeous UI interface, but creating gorgeous UI interfaces is never the final destination. To achieve the excellent <a href="https://www.mockplus.com/designer/post/user-experience-goals/?r=cherry">user experience goal</a> that can make users’ life happier is the key. So, in perspective of color choices and usage in UI, designer should always remember that the interface should be highly usable and clear. What can do and what can’t in user-centered should always carry weight.</p>
<p>You may also interested in:</p>
<p><a href="https://www.mockplus.com/blog/post/best-ui-design-websites-for-inspiration-in-2017/?r=cherry">8 of the Best UI Design Websites For Inspiration in 201</a>8</p>
<p><a href="https://www.mockplus.com/blog/post/top-15-uxui-designers-you-should-follow-to-flow-out-inspiration/?r=cherry">Top 15 UX/UI Designers You Should Follow to Flow Out Inspiration in 201</a>8</p>
<h3><a href="https://www.mockplus.com/blog/post/mobile-app-ui-design-trend/?r=cherry">Top 9 UI Design Trends for Mobile Apps in 2018</a></h3>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=6e524bd023bc" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/how-to-use-color-in-ui-design-wisely-to-create-a-perfect-ui-interface-6e524bd023bc">How To Use Color In UI Design Wisely to Create A Perfect UI Interface?</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


How To Use Color In UI Design Wisely to Create A Perfect UI Interface?

Top Stories