The Art of UI Color Palettes for UI Begineers
The Art of UI Color Palettes
How to Choose the Perfect Color Palette for Your UI Design
Have you ever seen a color that has immediately reminded you of a particular brand? Maybe you’ve struggled to feel relaxed in a room that has a clashing color scheme, or returned an item of clothing you got as a gift because the color wasn’t quite right.COLOR THEORY :
Color theory is a framework of rules and guidelines for mixing and combining colors to achieve harmonious designs. It helps UI/UX designers craft interfaces that are aesthetically pleasing and user-friendly.
1. Color Wheel:
The color wheel is a circular diagram that organizes colors based on their relationships. It consists of primary, secondary, and tertiary colors:
Primary Colors: Red, Blue, Yellow
Tertiary Colors: Yellow-orange, red-orange, red-purple, blue-purple, blue-green, yellow-green (mixing a primary and a secondary color)
2. Color Harmonies:
Arguably the most crucial aspect of color theory, color harmony refers to the use of color combinations that are visually pleasing for the human eye. Color palettes can either promote contrast or consonance, but as long as they make sense together, they can still result in a visually satisfying effect.
When it comes to UI design, color harmony is what all designers strive to achieve. Based on the psychological need for balance, color harmony engages the viewer and establishes a sense of order. A lack of harmony in a color palette can either result in an interface being under-stimulating (boring) or over-stimulating (chaotic and messy).
3. Color Psychology:
Colors evoke emotions and can influence user behavior. Understanding color psychology helps in choosing palettes that align with the goals of the design:
Red: Excitement, urgency, passion (often used in calls to action).
Blue: Calm, trust, professionalism (widely used in corporate or tech environments).
Green: Growth, health, tranquility (commonly associated with nature and well-being).
Yellow: Optimism, energy, attention (used to grab attention, but in moderation).
Purple: Luxury, creativity, spirituality (adds a sense of sophistication).
Black: Elegance, power, modernity (often used for sleek, minimalistic designs).
White: Cleanliness, simplicity, openness (perfect for minimalistic and fresh designs).
Stick to UI conventions
When working with colors, it's easy to get carried away with aesthetics over practicality. Of course, it's great to be experimental—but challenging design conventions with edgy or trendy designs can end up giving your users a headache.
Some common UI design color conventions include:
Using a dark color for text to ensure legibility
Keeping light colors for backgrounds
Using contrasting colors for accents
Sticking to classic call-to-action colors—such as red for a warning sign
Sticking to these conventions will reduce the cognitive load for your users and allow them to navigate the interface intuitively.
Use the 60-30-10 rule
This popular interior design trick is a great way to keep your interface balanced. This formula dictates that:
60% of your website should be made up of your dominant hue
30% should be your secondary color
10% should be your accent color
Sticking to this formula will allow the eye to move comfortably from one focal point to the next.
4. Choosing imagery for your app
Putting imagery into your app screen isn't a requirement, but it's a great way to communicate your brand message. As with color, though, using images in your UI designs comes with a lot of consideration about your audience and what you want them to feel. Keeping images neutral, relatable, and diverse is a great way to increase engagement with your digital product.
Websites like Unsplash and Pixabay are useful resources when looking for free images for your UI design projects. Figma works with some great plugins to make adding images to your design process very easy.
If you think you need more specific or bespoke image, you could also try using an AI tool like Leonardo.ai that generates brand-specific images, pictures, product photography, and more. Just describe the desired image you’d like to feature on the welcome screen and Leonardo.ai will generate an option for you!
5. Working with colors and imagery in Figma
Now for the practical part! Let’s start with your Login button. Select the background shape of your log in button in the layers list in the left sidebar, or double click on it on the canvas.
Click on the color thumbnail under where it says Fill in the right sidebar. A small panel will pop up. Can you see a large colorful section? Well, that’s the Color Picker (remember, we looked at it in tutorial three?)
Clicking on any part of the Color Picker will change the color of a selected layer. You can also check the HEX code for your selected color under the Color Picker. We’ve made the button a shade of green with the HEX code #F30000 but feel free to add your own creative spin on it.
Next up is imagery. Adding an image to your design file is very straightforward; you can simply drag an image from your saved files right onto the canvas. However, this may cause problems, as the image you’ve dragged and dropped could end up anywhere on the page and will likely not be the right size.
To avoid this problem, you can first draw a rectangle on your design file and position it below the other layers by dragging it down to the bottom of the layers list (in the left sidebar). Think of this rectangle as a placeholder for your image. Adjust its size and position to fill about ⅔ of the frame.
Keeping this rectangle selected, follow the steps for changing its fill color, but notice the little image icon above the color picker. Select it then hover over the checkerboard preview until you see the button Choose Image. This will allow you to replace the fill with any image you have saved to your computer!
Since there is not a lot of contrast between the black text and the logo against the dark background image, let’s apply a colored mask overlay. This will help make the logo and app name stand out on the screen.
Simply click on the plus icon in the Fill area of the right sidebar to add another layer on top of the existing one that contains the image. From there, you can adjust the color and opacity of the new fill layer until you achieve something that works and looks visually appealing.
We’ve gone for a black fill at 100% opacity, then changed the color of the text and logo so that it stands out against the dark background. Check it out:
Comments
Post a Comment