color choice — Design4Users https://design4users.com/tag/color-choice/ Wed, 13 Apr 2022 09:33:50 +0000 en-US hourly 1 https://design4users.com/wp-content/uploads/2020/06/cropped-favicon-32x32.png color choice — Design4Users https://design4users.com/tag/color-choice/ 32 32 Turn to Classics: Pantone Color of the Year 2020 Is Classic Blue https://design4users.com/pantone-color-2020/ Thu, 05 Dec 2019 08:51:09 +0000 https://design4users.com/?p=8293 Pantone announced the Color of the Year 2020: it’s Classic Blue 19-4052. The timeless and enduring blue hue is simple, classic and elegant. As Pantone mention, the color of the sky at dusk, it highlights the desire for a dependable and stable foundation on which to build as we cross the threshold into a new […]

Сообщение Turn to Classics: Pantone Color of the Year 2020 Is Classic Blue появились сначала на Design4Users.

]]>
Pantone announced the Color of the Year 2020: it’s Classic Blue 19-4052.

pantone color of the year 2020

The timeless and enduring blue hue is simple, classic and elegant. As Pantone mention, the color of the sky at dusk, it highlights the desire for a dependable and stable foundation on which to build as we cross the threshold into a new era. From the psychological perspective, PANTONE 19-4052 Classic Blue brings a feeling of peace and calmness, aids concentration and brings clarity, re-centers the thoughts.

pantone classic blue

As it’s given on the official website of Pantone, the Color of the Year 2020 can be found in the following color systems:

pantone color blue

Also, designers are given visual references for different spheres.

pantone classic blue
Classic Blue in Fashion

pantone classic blue
Classic Blue in Beauty

pantone classic blue
Classic Blue in Interior and Home Decor

pantone classic blue
Classic Blue in Graphic Design and Packaging

For over 20 years, Pantone’s Color of the Year has influenced product development in a variety of industries, including fashion, home furnishings, industrial design, product packaging, and graphic design. The Pantone Color of the Year selection process requires thoughtful consideration and trend analysis. To arrive at the selection each year, the color experts at the Pantone Color Institute comb the world looking for new color influences. That can include the entertainment industry and films in production, traveling art collections and new artists, fashion, all areas of design, popular travel destinations, as well as new lifestyles, playstyles, and socio-economic conditions. Influences may also stem from new technologies, materials, textures, and effects that impact color, relevant social media platforms and even upcoming sporting events that capture worldwide attention.

pantone colors
Earlier Pantone Colors of the Year 

Сообщение Turn to Classics: Pantone Color of the Year 2020 Is Classic Blue появились сначала на Design4Users.

]]>
UI Design: How to Choose Between Light and Dark Theme https://design4users.com/ui-design-light-and-dark-theme/ Fri, 08 Nov 2019 12:15:50 +0000 https://design4users.com/?p=8242 Our everyday life is an endless flow of choices. In both personal and professional life, we have to consider numerous oppositions and challenges, and it’s better when solutions are based on not only suggestions but also facts, experience, and knowledge. Today we are going to discuss one of the frequent choices UI designers have to […]

Сообщение UI Design: How to Choose Between Light and Dark Theme появились сначала на Design4Users.

]]>
Our everyday life is an endless flow of choices. In both personal and professional life, we have to consider numerous oppositions and challenges, and it’s better when solutions are based on not only suggestions but also facts, experience, and knowledge. Today we are going to discuss one of the frequent choices UI designers have to make project by project: which scheme is better for the interface, light or dark?

light dark UI design tips

Factors Influencing the Choice of Color Scheme

Be sure, there is no one particular choice which would work for all the aims. The solution heavily depends on numerous factors covering not only the user’s side but also business goals, market conditions, and current design trends. Let’s review the essential factors which have to be considered regarding the issue.

Readability and legibility

These terms are both directly connected to the perception of the content presented with text. Readability defines how easily people can read words, phrases, and blocks of copy. Legibility measures how quickly and intuitively users can distinguish the letters in a particular typeface.

These characteristics should be carefully considered, especially for the interfaces filled with a lot of text. Among many other factors, the color scheme chosen for the interface plays a crucial role in the effective process of text perception. For example, as well as with physical objects perceived on different backgrounds, black copy shown on white or light background seems to be larger than the white copy on a dark background. Poor readability results in poor user experience: users aren’t able to scan the data, even more – even if the data is relevant but not readable, users feel the inexplicable tense struggling with the text or may even miss the critical information.

Does it mean that interfaces with a light background are more readable? Not always. One of the famous gurus of user experience design Jacob Nielsen mentioned: «Use colors with high contrast between the text and the background. Optimal legibility requires black text on a white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted color scheme throws people off a little and slows their reading slightly. Legibility suffers much more in color schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.» So, any color scheme may be readable enough if the designer studies the peculiarities of copy perception on different backgrounds and works carefully on the font choice.

web design animated landing page
Museu landing page

hair beauty website design
Hair beauty website design

However, some scientific studies dating back to the 1980s show that big bulks of text light background appear to be a more effective choice for the majority of users. Studying how advertising carriers worked, D. Bauer and C.R.Cavonius shared their explorations in the paper “Improving the legibility of visual display units through contrast reversal” (1980). In particular, they found that participants were 26% more accurate in reading text when it was featured with dark characters on a light background.

Why may that be so? Jason Harrison from Sensory Perception and Interaction Research Group (University of British Columbia) explains this phenomenon the following way. People with astigmatism (which according to various stats present about 50% of the population) feel it harder to perceive white text on black than black text on white. Part of this has to do with light levels.  With a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens. With a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye. So, based on this, if the interface presents a lot of copy and suggests a long-reading experience, a light background may feel more user-friendly.

Gestalt Theory for UX Design Principle of Proximity in Interfaces

Accessibility

Accessibility is mostly defined as the ability of the web or mobile interface to reach as many people as possible and provide its functionality regardless of any discriminations. So, the decision “to use or not to use” has to be mostly grounded in users’ needs and preferences, not on their physical abilities. The color scheme is mentioned among the top factors affecting this aspect. Selecting the palette and color combinations, a designer needs to take into account the users of different ages, special needs, or disabilities which can also determine the choice of color for the background and layout elements. User research becomes a great help providing UX designers with data that helps to get closer to the target audience.

babysitting landing page
Landing page for a babysitting service uses the light background for all the parts with text content for a high level of readability

Clarity

Clarity defines the ability to see and distinguish all the core details on the screen or page. First of all, it deals with simplicity and intuitiveness of navigation: being able to scan the layout and find zones of information and elements of interaction, users don’t need to put much effort into getting what they need. If this aspect is not tested properly, it may lead to weak visual hierarchy and turn the screen into a complete mess. Contrast plays a big role here and color scheme becomes the foundation for it. To check, if the interface is clear and contrast enough, don’t forget about a good old trick of “blur effect” when you look at the screen or page in the blurred mode and check if everything vital is easily reached and noticeable.

landing page UI design
Landing page for the digital agency

Responsiveness

Responsiveness of the interface means that users get it usable and functional whatever it the device they use it on. What looks stylish and appealing in Sketch in the high-res professional monitor may transform into a dirty stain on the small low-res screen. Therefore, some color schemes looking nice at the design stage may lose their beauty in a variety of everyday conditions they are applied in. As color scheme directly influences color, shape, and copy perceptions, it should be tested on diverse devices before making the final decision.

forest camping website design
Responsive website design for the forest camping service

Environment

Web and mobile interfaces are used in environments that may be pre-supposed as typical if the target audience is researched carefully. For instance, concerning constant use under natural light, a dark background can literally create the effect of reflection, especially on glossy screens typical for tablets and smartphones. On the contrary, in conditions of the badly-lit environment, a dark background can take the light away from the screen which has a bad influence on navigation and readability. So, the issue of color combinations, contrast and shades draw big attention here.

mobile ui design case study animation

Slumber mobile app 

Checklist for color scheme selection

With the factors mentioned above, we offer here a short checklist of basic steps to follow while selecting a general color scheme for web or mobile interface.

1. Define the purpose of the interface. Having determined the core points of the interface utility and problem-solving capacity, you make the choice of the color scheme more reasoned. If the UI is text-driven (a blog, news platform, e-reader, etc.), light background tends to be an effective choice. Light makes the screen airy and spacious and it will be easier to concentrate purely on the copy. On the other hand, if the interface is visually driven and moves around images rather than text, a color scheme with a dark or bright background may be a good solution as the colors of the images feel deeper and the general layout gets stylish or even luxury look.

2. Analyze your target audience. Definition and analysis of the target audience are the primary things a designer should do. Knowing who is your potential user and what they will want to get from the website or app sets the solid basis for a usable, useful and attractive interface. Middle-aged and older people tend to prefer interfaces with the light color scheme as they find them more intuitive and navigable. Younger people often find well-performed interfaces with a dark background more original and stylish so that can be the way to involve target users. Teenagers and children are attracted to interfaces using bright backgrounds and funny details. The choice of color obviously depends on the nature of the interface functionality and content. But the preferences of the target audience are always a good clue to user-centered decisions.

nature encyclopedia app design

Nature Encyclopedia app based on dark background and contrast yellow and white for images and copy content

3. Research the competition. Another aspect to keep in mind is that your product isn’t going to appear one in a blue ocean. Vice versa, it will fight for user’s attention in conditions of great and dynamic competition. The choice of the color scheme also becomes the way to make an app or website outstand and lead to such a precious first wish of interaction from the user’s side. Time spent on exploration of the existing products in the segment saves time and effort otherwise wasted on the redesign of ineffective solutions.

4. Test, test, test. The points described above are convincing about a key thing to do: as the color belongs to the factors directly affecting usability and attractiveness of the interface, every design solution should be appropriately tested, in different resolutions, on various screens, and under diverse conditions. Testing reveals strong and weak sides of the color scheme before the product comes on the market, gets discussed and loses the chance of stunning first impression if the design solution is inefficient.

Mobile Motion 20 Bright Concepts of UI Animation

Compromise Solutions

Not wishing to stick to the strict color schemes, user interface designers sometimes find compromise solutions, like the following ones.

Dark interface, white tabs for copy

As we mentioned in the review of UX design trends, this trend got especially popular for interfaces based on the dark background scheme. It features one more approach to proper readability which is often the issue of debates: applying boxes or spaces with the light background for core data blocks, designers solve this problem and add elegant contrast to the screen or page. One of the cases, when it was applied efficiently, is Watering Tracker app designed by the Tubik team.

Design Case Study: Watering Tracker. Mobile UI for Home

Giving the choice of color scheme to the user

Another approach is giving users a choice of modes. That is what we did for Upper, a to-do list app that offers the user a selection of color schemes. On the one hand, it makes the product really friendly to users and makes a choice more personalized according to not only usability issues but also aesthetic preferences. On the other hand, it takes additional work hours for designers and developers to work out all the schemes.

Color choice in UI design

Useful Reading

Dark Side of UI: When Dark Is Good for Users
The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention
Visual Perception: An Introduction
Art and Visual Perception: A Psychology of the Creative Eye
Colour Choices on Web Pages: Contrast vs Readability
The Dos and Don’ts of Dark Web Design
Why light text on a dark background is a bad idea
When to Use White Text on a Dark Background
Design Glossary: Basic Color Terminology
How Color Influences User Behavior

Originally published in Tubik Blog

Сообщение UI Design: How to Choose Between Light and Dark Theme появились сначала на Design4Users.

]]>
Color Theory: Brief Guide for Designers https://design4users.com/color-theory-brief-guide-for-designers/ Tue, 11 Jul 2017 14:50:09 +0000 http://design4users.com/?p=3815 The article focused on the basics of color theory and color combinations in design: learn more about color wheel, RGB, CMYK and models of color harmony.

Сообщение Color Theory: Brief Guide for Designers появились сначала на Design4Users.

]]>
Many people think the choice of colors for UI mostly depends on the designer’s taste and sense of beauty. However, the process of color selection is more complicated than it seems and plays a significant role in the design. In one of our previous articles devoted to color psychology, we’ve found out that colors have a great impact on our mood and behavior. That’s why the success of the product depends largely upon the colors chosen for the design. The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. So, the appropriately chosen colors can be useful on the way of improved conversion for your product as well as advance usability of the product.

To create good design and employ colors more effectively, you need to understand how colors are formed and how they relate to each other. That’s why students at art schools, colleges, and universities study the science of color theory devoted to colors’ nature. Today, we offer you to remember (or maybe even learn) the basics of color theory about the color combination which can be effectively applied in your design creating process.

Color Wheel

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel which helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary, and tertiary colors. The primary are those three pigment colors that can not be formed by any combination of other colors. Combining primary colors, we get the secondary ones, and the mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet.

color wheel for designers

The color circle was created in 1666 by Isaac Newton in a schematic way and since then it has gone through many transformations but still remains the main tool for color combination. The main idea is that the color wheel must be made that way so colors would be mixed appropriately.

Color models

Before you start mixing colors you need to understand that color has two different natures: the tangible colors which are the surface of objects and the others which are produced by light such as the beams of TV. These types create two color models by which the color wheel is formed: additive and subtractive.

The additive color model considers red, blue, and green as primary colors so it’s also known as RGB color system. This model is the basis of all colors used on the screen. The combination of primary colors in equal proportions of this system produces secondary colors which are cyan, magenta and yellow, but you need to remember that the more light you add, the brighter and lighter the color becomes. Results obtained by mixing additive colors are often counterintuitive for people accustomed to the subtractive color system of paints, dyes, inks and other tangible objects.

The subtractive color model obtains colors by the subtraction of light. It consists of two color systems. The first is RYB (red, yellow, blue) also known as artistic system often used in art education, especially in painting. RYB was the basis for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed. It was mostly used in printing and when the photomechanical printing included black ink, the key component, the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown.

difference-between-RGB-and-CMYK

Source

Additive vs subtractive

You should remember the major difference between these two systems: additive is for digital screens and subtractive for print media. If the design project you are working on is meant to be printed, don’t forget the simple but crucial rule: colors you see on the screen never look the same in print. Additive color spectrum is wider than CMYK, which is the reason why designers are recommended to convert their projects to the subtractive system of colors before printing so that they could see the result close to what they would get. However, if you work with digital products, RGB color system is the wise choice because it allows creating amazing things with its wide color spectrum.

Color Harmony

The word “harmony” usually associates with something orderly and pleasing. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. When colors are organized, viewers feel pleased and calm, while disharmony in design gives the feeling of chaos and disgust. The color balance is vital in design since users make their impression of the website or application by the first look, and colors have a big influence. Designers distinguished the basic color schemes that work effectively.

Monochromatic

It is based on one color with various tones and shades of it. The monochromatic harmony is always a winning choice since it’s hard to make a mistake and create a distasteful color scheme.

deetu_business_card_illustration_tubik_studio

Deetu Business Cards

Analogous

To create analogous harmony, you need to use colors located right next to each other on the color wheel. This type of color scheme is used for the design where no contrast is needed including the background of web pages or banners.

night-in-berlin-ui-animation-tubik

Night in Berlin App

Complementary

The complementary scheme is the mix of colors placed in front of each other on the color wheel. This scheme is opposite to analogous and monochromatic since it aims to produce high contrast. For example, the orange button on the blue background is hard to miss in any interface.

buongiorno_roma_illustration_tubik

Rome Illustration

Split-Complementary

This scheme works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red. The contrast here is less sharp than in complementary scheme but it allows using more colors.

bebright_app_animation_tubik_studio

Be Bright App

Triadic

When the design requires more colors you can try triadic scheme. It is based on three separate colors which are equidistant on the color wheel. To save the balance in with this scheme, it is recommended to use one color as a dominant, the other as accents.

hallowen_animation_stickers

Toonie Halloween Stickers

Tetradic/Double-Complementary

The tetradic color scheme is for experienced designers since it is the most difficult to balance. It employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle. The scheme is hard to harmonize but if you do everything right, the results may be stunning.

ui illustration graphic design

MoneyWise App

Color theory is a complex science that requires more than one day to learn. However, it is vital to understand the basics so that you could create an effective design with the knowledge of what you’re doing.

Recommended reading

Here are some materials we could recommend for those who would like to get deeper into the topic:

Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Originally written for Tubik Blog

Сообщение Color Theory: Brief Guide for Designers появились сначала на Design4Users.

]]>
Design for Diversity of Cultures: Perception of Colors https://design4users.com/design-for-diversity-of-cultures-perception-of-colors/ Wed, 15 Mar 2017 15:51:30 +0000 http://design4users.com/?p=3480 The article giving insights into the issue of color choice for design projects in the perspective of cultural background and different color associations.

Сообщение Design for Diversity of Cultures: Perception of Colors появились сначала на Design4Users.

]]>
The tendency of user-centered design makes designers reconsider the approach to their work and go deeper into the understanding of the target audience. That’s why designers are recommended to learn some basics of human psychology so that they could comprehend users’ behavior and motivations. One of the branches helping to understand users better is color psychology studying the impact colors make on human mood and behavior. Each color has its meaning and special influence on people. The properly selected colors for the design can put users in the frame of mind that compels them to take action.

The color meaning can vary depending on the culture of the target audience. Moreover, sometimes one color may have absolutely opposite meanings in different countries. This is the reason for designers to acknowledge the specialties of culture’s color perception while creating the design for a foreign country. Today we’ll find out the meaning of basic colors and how they are interpreted in different cultures.

Western culture

Western culture is widespread around the world including European countries, the USA, and Canada. Many historical events have united these far and different countries into one big culture. The color meaning in Western culture was based on some common traditions and beliefs.

european-culture

Here is the list of the basic colors and the meanings which they are typically associated with.

Red. The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad feelings including love, confidence, passion and anger.

Orange. An energetic and warm color bringing the feelings of excitement.

Yellow. This is the color of happiness. It symbolizes the sunlight, joy, and warmth.

Green. The color of nature. It brings calming and renewing feelings. Also, may signify inexperience.

Blue. It often represents some corporate images. It usually shows calm feelings but as a cool color, it also associates with distance and sadness.

Purple. Long associated with royalty and wealth since many kings wore purple clothes. It’s also a color of mystery and magic.

Black. The color has a great number of meanings. It associates with tragedy and death. It signifies a mystery. It can be traditional and modern. Everything depends on how you employ it and which colors go with it.

White. The color means purity and innocence, as well as wholeness and clarity.

Big_city_guide_Stockholm_tubik

By Tubik

Eastern and Asian cultures

East and West are two opposite points of the world so no wonder that the traditions of these cultures are often contradictory. So, if you are creating the design for the Eastern countries, you need to keep in mind the fact that color meanings aren’t similar to the Western.

japanese-eastern-culture-design

Here is the list of the basic color connotations for the East.

Red. The color is associated with Eastern countries in the first place. Red is thought to be the most positive color bringing happiness and prosperity, so it is often used everywhere in the East.

Orange. It is a positive color as well as the red. In many Eastern countries, orange symbolizes courage and love.

Yellow. It associates with things like being sacred and independent.

Green. The color believed to bring health and eternity (religious).

Blue. In Eastern Culture, it represents wealth and the betterment of self.

Purple. Similar to the West, it is associated with wealth, nobility, and royalty.

Black. In many Eastern countries, it is the color of health and prosperity. However, in Thailand and Tibet, black is the color of evil.

White. Unlike Western culture, white is linked to death and mourning. People wear white clothes for funerals.

mount-fuji-graphic-design

By Nick Slater

Chinese culture

China is one of the biggest and ancientest Eastern countries. Its nationality is rich in traditions, myths, and beliefs. There are some peculiarities in the color interpretations in China which designers should consider.

chinese-culture

Red. It is a traditional Chinese color. People wear red on the biggest occasions such as the New Year and weddings. Red symbolizes good luck and long life to the people.

Orange. This color Chinese people associate with good health.

Yellow. An interesting fact is that yellow can be associated with vulgarity. When the Chinese say “yellow picture” or “yellow book” discussing types of publications or media, it’s in reference to this type of image and websites.

Green. Hats colored green for men in China mean the man’s wife is unfaithful.

Blue. While in Western culture it is a masculine color, the Chinese consider blue as feminine.

Black. It is the color of boys in China. Black associates with masculinity.

White. The color represents death and bad luck.

chinese-culture-design

Design project by Yi Mi Xiaoxin

Indian culture

Colors have always played a large part in the Indian culture and have deep significance for people. In Hinduism, colors are often related to certain gods and bring various associations. Proper use of the colors is vital for Indians because they are believed to create the appropriate environment to keep people cheerful.

indian-culture

Here are the meanings of colors in India.

Red. It’s the color of purity, so brides wear red clothes. Red is also associated with the goddess Durga who has a red tongue and almost red eyes. In Southern India, the red color stands for violence and disruption.

Orange. Orange is the most common color. Orange represents the “sacral chakra” according to the Hindus belief. The orange also is associated with courage and sacrifice.

Yellow. The color in the Hinduism symbolizes sanctity. Yellow also is connoted as the color of commerce.

Green. In India 30% of the population is Islamic and the green color is respected in Islam. Also, green has the connotation of a new beginning and happiness.

Blue. It is the color of Krishna, a central god in Hinduism. Blue symbolizes strength and is often used by sports teams.

Purple. It is the mix of red and ochre which symbolize wealth and nobility in India.

Black. This color is associated with a lack of desirability, negativity, and inertia.

White. Indians wear white at funerals and it’s the only color widows are allowed to wear. Similar to Western culture, it is the color of peace and purity.

indian-illustration

By Ranganath Krishnamani

Latin America

It is thought that Latin America and the USA have a lot in common since they are neighbors. Nevertheless, the only thing uniting these cultures is the word “America” in their names. The ancient civilizations and folks such as Maya and Inca have formed this culture with their myths and knowledge.

latin-america-culture

Here is how Latin Americans interpret the colors.

Red. It is often associated with war, especially in combination with black. In Mexico, red is a religious color.

Orange. It is the color of the sun and the earth (because of the reddish-orange ground color in many countries).

Yellow. In many Latin and South American countries, it is associated with mourning.

Green. The color is the symbol of nature, although in some countries it is the color of death.

Blue. For the Catholic population, blue is associated with religion (Virgin Mary’s robe and headscarf were blue). In Mexico, it is the color of trust and serenity, and, in Colombia, blue is the color of the soap.

Purple. In Brazil, purple has connotations of mourning and death.

Black. It’s the color of masculinity and it is often worn by men.

White. Similar to the USA, white means purity and peace.

latin-america-illustration

By MUTI

illustration-latin-america

By DKNG

Every culture is unique and has its specialties. So, if you are creating a design for a foreign country, you should learn more about its culture in order to avoid misunderstandings with the target audience.

Useful Articles

Color Theory: Brief Guide For Designers
Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Сообщение Design for Diversity of Cultures: Perception of Colors появились сначала на Design4Users.

]]>
Color in UI Design: How to Look on the Bright Side https://design4users.com/color-in-ui-design-look-on-the-bright-side/ Wed, 15 Jun 2016 12:51:02 +0000 http://tubikstudio.com/?p=1256 Color is a strong tool of creating efficient UI design. The article collects tips from Tubik Studio designer about using color in app and web interface design.

Сообщение Color in UI Design: How to Look on the Bright Side появились сначала на Design4Users.

]]>
In visual arts, it seems sometimes that color is the soul of everything, breathed in by the artist into a creation. Color is power, actually. It can change the mood of the image in a blink of an eye. It can encourage, warn, appeal, frighten, highlight, persuade, and so on and so forth. It can support the words or vice versa – steal their power. It can share an emotion without anything said. It can become a great weapon in hands of a master.

No wonder, in the sphere of UI design color is among the key things of creating efficient results. It is actually a multi-functional and diverse tool able to fulfill several needs simultaneously, such as the following:

  • supporting recognizability and brand awareness;
  • supporting readability;
  • strengthening call-to-actions;
  • satisfying aesthetic needs;
  • sharpening navigation;
  • enhancing intuitive interaction;
  • beautifying visual solutions;
  • creating clear and harmonic style.

One of the leading designers in Tubik Studio, Ludmila Shevchenko is literally a person staying on the bright side of life every single moment of the day. If you check her portfolio on Dribbble, you will definitely see that even in creating interfaces she is an artist always keen to take everything possible from the color and is never afraid to experiment. Certainly, it doesn’t matter that working on the projects, she never creates minimalist or airy-light designs – when it’s needed and required, it’s done also with thorough attention to even the smallest color accents. However, when she creates concepts or projects, she is always avid to use all the power of color and brighten the world around her. Today she has shared some of her ideas on using color in UI design based on her work on numerous design tasks for different target audiences.

calendar app UI design

Calendar App 

Working over the first variants of style for an app or a website often feels like a bit of magic and color choices and combinations are obviously the major part of this process. When asked what could be a fairy wand on this path, Ludmila says that she would make it out of four main components actually basic for any creative process: a good mood, a desire to transfer positive emotions and feelings, inspiration, and love for the job you do. This combination motivates her to find great solutions by being persistent and hard-working at this stage. This basic approach empowered with deep knowledge of art and readiness to search can bring out amazing and – what is more – efficient and user-friendly designs.

tubik studio UI UX designer

Ludmila working over a UI concept

Let’s look through some tips from the perspective of color choice and application in UI design.

Don’t be afraid of experiments

It’s not a secret that today designers have great support in color choice in the aspect of making color matches. One of such helpful traits is a huge number of ready-made pallets of various combinations, sometimes even featured in sample screens and pages. Software and tools enabling a designer to catch different harmonic combinations between one breath and the other are getting more and more sophisticated and highly functional so they become a great help, especially in cases of big workload and hot deadlines.

However, as usual, standing on the solid ground of ready-made solutions and standard well-checked combinations, designers should always be ready to add their own two cents as well as sometimes go far from the offered decisions. Don’t resist standard solutions; however, don’t see them as your Bible in design. Be ready and keen to experiment – this is a great way to develop your design skills and create something that is out of the box. Certainly, it doesn’t mean that this very moment you should start something revolutionary new, but still take your time for experimenting and thinking over new tricks. Stay wise but have no fear to let your creativity fly higher now and then.

UI design wallpapers

Colorful Wallpapers 

Don’t set strict limits on the color palette in your portfolio

Your portfolio is actually your design face for the customers who do not know you personally. And for sure it’s only you who decides what this face will express. If you want to show only one side of your design style, if you want your potential customer to see you only smiling, or only deeply serious, or perhaps childish, then this tip is not for you. A limited color palette of portfolio works is one of the fastest ways to do it. Nevertheless, practice proves that showing diverse color choices and combinations in the portfolio in a harmonic way enhances the better presentation of design skills and higher chances of getting involved in interesting design projects.

Try gradients

Sure, this advice, as well as all the others, should be used wisely. It has to be mentioned that in many cases designers today prefer to avoid gradients working out colors for their designs. However, gradients are able to liven the accomplished task and strengthen the potential of color in different design solutions.

stats UI design concept

Stats Concept 

Colors should feel clean in any combinations

Trying different color combinations and their functional features in creating user-friendly interfaces, it is very important to remember that in any case, even the most venturesome color matches and blends should feel clean. No dirt on a screen or a page. Clarity enhances usability rate, supports readability, and makes all the colors do their best in their interface.

Try using colors as a background, not only in the work itself

It often happens that presenting their works, designers concentrate on the work itself not paying too much attention to the background colors. However, in many cases background color can become one more way to liven up the main image or screen and make it look even more efficient and expressive. Don’t miss the chance to try, perhaps it’s applicable right in your case.

UI design tubik studio

Travel Notes App 

Check the efficiency of color choice via black-and-white

Talking about interfaces, whose aim is not just to transfer visual messages but also to enable easy and successful interactions with a product, a good way to check your solutions is the black-and-white look of the accomplished screen. Observing it, you will quickly understand if the elements, which have to be noticeable and functional, work like this or get lost without colors. Don’t neglect this easy way to check the efficiency of your design as it will not only reveal ineffective combinations but also will easily show you what are the potential problems of your interface for color-blind users.

Get inspired by the art

A great way to get inspired and transform this inspiration right into interface design is art. Classic art, modern art, digital art. Watercolors, oils, charcoals, pastels. Any kind of manifesto of artistic creativity which appeals to your heart strings. It is especially efficient in the perspective of color choice and application and useful in the case of creative block. Finding the sources of inspiration in works of artists who you like and admire is very helpful. Get inspired and try to create your interface like a piece of art. The results can be stunning not only for your clients but even for you personally.

art gallery app UI design

Art Gallery App

Keep attention to details

Famous American designer Charles Eames said: “The details are not the details. They make the design”. That is a key law of working over UI design for applications or websites, in particular when you choose and combine the color palette. Nothing should be left without your thorough analysis and attention. Color is one of the methods to make all the details visible and therefore efficient. Although, color shades and shadows become an effective way to strengthen the visual hierarchy of the elements and their interconnection.

Remember that usability is a key

Creating interfaces is never an act of pure creativity. It is the act of providing users with a product that will heal their pain and make their life happier. So, from the perspective of color choices and usage in UI, a designer should always remember that the interface should be highly usable and clear. All the slightest aspects of color choices should increase usability, utility, and harmony. Use color coding of categories, provide color markers, and use color to improve and speed up navigation – there are so many aspects that can become much more efficient and user-centered just with the help of the great power of color.

mobile app interface design

Entertainment App 

Useful Design Articles

If you are interested to learn more about colors in user interface design, this pack of articles may help.

Bright Colors in UI Design: Benefits and Pitfalls

Design Glossary: Color. Terms and Definitions

Color Theory: Brief Guide For Designers

How to Choose Between Light or Dark UI

Color in Design: Influence on User Behavior

Color Matters. 6 Tips on Choosing UI Colors

3C of Interface Design: Color, Contrast, Content

 

Originally written for Tubik Blog

Сообщение Color in UI Design: How to Look on the Bright Side появились сначала на Design4Users.

]]>