fbpx
WE CREATE BRANDS PEOPLE L♥VE
Share

How to use colors in UI


Tegra - December 13, 2019 - 0 comments

Practical tips and tools
How to use colors in ui

Courtesy of @uixlover

Bring your level of work with color to a new level ⚡️

Color matters. Colors are an essential part of the visual design language you use to communicate with your users. No basics. Here are some helpful tips and tools that I use regularly.

Thanks for reading! 🙌

Color tones  Use darker and lighter variations on a particular
theme color. Tiny trick making ui to feel more vivid

Color tones

Use darker and lighter variations on a particular theme color. Tiny trick making UI feel more vivid.

Shadows S Lights  Shadows are never black, and lights are never white
Be inspired by nature

Shadows & Lights

Shadows are never black, and lights are never white.
Be inspired by nature.

Balance  Colors should not be too
much. Use a neutral primary
color 50-90%. lf you make on
exception, make sure th#t the
content is reodable

Balance

Colors should not be too much. Use a neutral primary color 50-90%. lf you make on exception, make sure th#t the content is readable.

Color Accessibility  lt is important to remember people who perceive
colors in a different way than most of us (more info
in ios HIG / Material Design)

Color Accessibility

lt is important to remember people who perceive colors in a different way than most of us (more info in ios HIG / Material Design).

Saturatlon  lf the color is not working but you are unsure why the
culprit may be saturation. But for accent colors this
choice can be great

Saturation

lf the color is not working but you are unsure why the culprit may be saturation. But for accent colors, this choice can be great.

Other tips  Alwoys add colors to styles or symbols
This will allow you to change the color in the entire
project in 2 clicks and save you a lot of time.  Don't ignore standards
At the beginner level, guidelines #re a great opportunity
to ensure the right choice of color and to be confident in
your choice.  Limit the number of colors
ldeally, you should have a small number of approved
primary colors and a sufficient number of accent colors

Other tips

Always add colors to styles or symbols
This will allow you to change the color in the entire project in 2 clicks and save you a lot of time.

Don't ignore standards
At the beginner level, guidelines #re a great opportunity to ensure the right choice of color and to be confident in your choice.

Limit the number of colors
ldeally, you should have a small number of approved primary colors and a sufficient number of accent colors.

Bonus — 4 tools that may be useful in your designer way:

Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *