Tag Archives: color

color psychology in design

Color in Design: Influence on Users’ Actions.

Every single day we’re surrounded by various colors from everywhere. If you take a closer look at the things around, they may surprise you with a number of colors and shades. People may not notice how colorful everyday things are but the colors have the significant impact on our behavior and emotions. Today our article is devoted to the science studying this issue called color psychology. Let’s define the meaning of the colors and review some tips on choosing suitable colors for the design.

 

tubik studio design

 

What is color psychology?

 

It’s a branch of psychology studying the influence of colors on human mood and behavior. The thing is that our mind reacts on colors while we usually do not notice it. The moment our eyes perceive a color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. These days a lot of research is conducted in order to study the peculiarities of these reactions and there are already many theories useful to learn. Color psychology is helpful in many industries including business, marketing, and design.

 

The success of the product depends largely upon the colors chosen for the design. The properly selected colors help put users in the frame of mind that compels them to take action. 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 basic knowledge of color psychology can be useful on the way of improved conversion for your product. Moreover, accurately chosen colors can advance usability of the product.

 

Meaning of colors

 

To convey the right tone, message and call users to make the expected action, designers need to understand what colors mean and what reaction they evoke. In one of our previous articles, we’ve demonstrated you the list of colors with brief descriptions of their meanings. Today we have prepared a bit more expanded list of color meanings in common use and in design.

 

Red

The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad states of mind and soul including love, confidence, passion and anger. In design, the use of red color is an effective way to draw users’ attention. Also, it’s recommended to use red sparingly to avoid the negative reactions.

 

toonie alarm mascot design tubik studio

Toonie Alarm app tutorial

 

Orange

It is an energetic and warm color bringing the feelings of excitement. Orange combines red’s power and yellow’s friendliness, so it may bring feelings of motivation, enthusiasm, and love to life. Designers use the color if they need to give the spirit of creativity and adventure.

 

logo design tubik studio

fOxygenic Logo

 

Yellow

This is the color of happiness which symbolizes the sunlight, joy, and warmth. Yellow is thought to be the easiest color to visibly see. What’s more, it has one of the most powerful psychological meanings. Users seeing yellow colors in the design can feel the inspiration and confidence. Although, you need to remember that too much yellow may bring negative reactions such as the feeling of anxiety or fear.

 

stardust_bikers_webpage_ui_tubik_studio

StarDust website

 

Green

It’s often called the color of nature, balance, and harmony. Green brings calming and renewing feelings. Also, it is a sign of growth and inexperience. It has more positive energy than most other colors but sometimes it associates with materialism. Design in green colors perfectly suits to the products connected with nature.

 

Big_city_guide_Stockholm_tubik

Big City Guide: Stockholm

 

Blue

It often represents some corporate images since the blue is the color of trust. It usually shows reliability, may give users calming feelings. However, as a cool color, it also associates with distance and sadness, so designers need to keep it in balance.

 

design_for_business_tubik_studio_book

Design for Business E-book

 

Purple

Long associated with royalty and wealth since many kings wore purple clothes, it’s useful for presenting some luxurious products. It’s also a color of mystery and magic. It mixes the energy of red and blue, so it has a balance of power and stability. A big concentration of the color may distract users’ mind.

 

night_in_berlin_event_list_ui_tubik

Night in Berlin App

 

Pink

It is the color of hope, sensitivity, and romance. Pink is much softer than red, so it creates the sense of unconditional love. Pink is associated very strongly with youthful femininity, so it may be an effective color if the target audience is mostly girls and young women.

 

tubik studio app design

Dating App

 

Brown

The color of security and protection like the mother Earth. Designers commonly use brown as a background color in a variety of shades, from very light to deep. It brings the feeling of warmth and comfort to the designs. Also, it may be used to show the experience and reassurance.

 

jewellery_e-commerce_app_concept_by_tubik

Jewelry E-Commerce App

 

Black

The color has a great number of meanings. It associates with tragic situations and death. It signifies a mystery. It can be traditional, modern, serious. Everything depends on how you employ it and which colors go with it. Black matches well with any other color, so it’s ideal for the background. Designers often use it to set contrasts.

 

Bakery website animation

Vinny’s Bakery

 

White

The color means purity and innocence, as well as wholeness and clarity. White often associates with a blank sheet of paper motivating people to generate new ideas. However, too much white can cause the feelings of isolation and emptiness. In design, white is commonly used as the background color especially for the resources for which readability is a vital part.

 

tubikstudio ui animation website design

Bjorn website

 

Color meanings in branding

 

Colors are a vital factor for not only the visual appearance of products but also brand recognition. Nevertheless, in branding, colors tend to have more direct meanings than in common understanding. They can be briefly described within a few words, so here is the list for you:

 

  • Red. Confidence, youth, and power.
  • Orange. Friendly, warm, and energetic.
  • Yellow. Happiness, optimism, and warmth.
  • Green. Peace, growth, and health.
  • Blue. Trust, security, and stability.
  • Purple. Luxurious, creative, and wise.
  • Black. Reliable, sophisticated, and experienced.
  • White. Simple, calm, and clean.

 

realli_logo_animation_tubik

Realli logo animation

 

Color Preferences

 

Visual perception is quite individual for everyone. Designers need to remember that the color effects may be different because of the factors such as age, culture, and gender. First of all, people’s preferences can shift during the life whatever the object is, let’s say, food, clothes, music, colors and plenty of other aspects. It is caused by both mental and physical changes that happen to us across the lifetime. For example, children like yellow color pretty much, but as we become adults it usually seems less attractive. Faber Birren explains it in his work Color Psychology and Color Therapy: “With maturity comes a greater liking for hues of shorter wavelength (blue, green, purple) than for hues of longer wavelength (red, orange, and yellow)”. One more difference between children’s perception and adult is that kids can change their favorite colors fast, while adult color preference is usually non-malleable.

 

Also, designers need to consider that there are many cultural differences and color perception is not an exception. Sometimes cultures define colors diversely, for example, in Western countries, white color means happiness and purity, while in some Asian countries it symbolizes death. You can find many examples of how different may the meanings be in countries but it would take a whole article to tell about it, so if you’re interested in the topic, follow our updates on the blog since the post on this issue is coming soon.

 

Another point on the color preferences is gender. Many color studies have been done over the years and a lot of them say that the color preferences of women and men significantly differ. The Color Assignment group has conducted a deep research on this topic and many designers already use the results in the creative process. We’ve defined the most notable things from the research to share with you.

 

Blue is the top color. Both men and women of all ages think of blue as the favored color.The shades of blue such as cerulean, azure, beryl, cornflower blue, and sapphire are popular among women.

 

Brown and orange are in dislike. The first one considered less favorable among men, the second — among women.

 

Cool colors are preferred. Men and women favor blue, green and their tints in general.

 

Women like tints. When men prefer pure or shaded colors, ladies are good with tints.

 

Men prefer achromatic colors. White, black and gray are neutral colors and men are keen to choose them.

 

Favorite colors

 

favorite color on gender

 

Least favorite colors

 

least-fav-colors-gender

 

Source of charts

 

It’s vital to consider color preferences of the target audience while creating UI and UX design since it helps to avoid negative reactions and associations.

 

Points to consider

 

Color psychology is rather complex to understand and learn. However, it may become an efficient tool in designers’ hands helping to understand users and their demands. Summarizing the article, here is the list of useful things to consider:

 

  • Choose the colors wisely. They have a deep influence on the users.
  • Make sure your design and its colors convey the right message and tune.
  • Learn your target audience. The color preferences and meanings depend on many factors including age, gender, and culture.
  • Some colors may look different on the screens of different devices. Additional testing never hurts.
  • It may be a good idea to test the UI colors with representatives of the target audience.
  • Try to make the color combinations wisely, in the best way for the users’ perception.

 

Recommended reading

 

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

Responding To Color

 

Birren, Faber., Color Psychology and Color Therapy.

 

Color Theory for Designers, Part 1: The Meaning of Color

 

Color Associations

 

Why Color Matters

 

The Psychology of Color in Marketing and Branding

 


Welcome to see the designs by Tubik Studio on Dribbble and Behance

tubik studio ui attachment

Light and Darkness in UI Design. Matter of Choice.

In one of our previous articles we have already mentioned that the issue of color is one of the major in design of user interfaces. It can greatly influence the level of usability as well as attractiveness of a mobile application or a website. And one of the first questions designers usually have to answer is what kind of general color scheme to choose: should it be dark-on-light or light-on-dark?

Here we are going to consider some points of importance about this significant stage of UI design.

 

tubik studio UI design

 

Aspects affecting the choice

 

Lots of discussions are raised here and there about the color scheme which is more effective in creating good interfaces. Although lots of participants of this big debate try to find a universal solution, here in Tubik Studio we suppose the cure-all does not exist. Every project in UI/UX design is highly individual and needs thoughtful approach weighing all pros and cons.

 

There are several vital aspects that should be taken into account on the initial stages of choosing the general color scheme for a website or application.

 

— Clarity

This aspect should include the ability of the user to clearly see and distinguish all the necessary details on the screen or page. The color scheme and combinations should support easy and intuitive navigation and make the most functional elements of the layout stand out effectively. Case when this aspect is not considered or not tested properly can bring to the products which make complete mess on the screen in which users do not see what they really should. One of the ways to check it is widely used “blur effect” when you look at the screen or page in the blurred mode and check if everything vital is easily and quickly observed.

 

— Readability

The choice of background for the screen usually influences the level of readability – the ability of users to read text easily. This aspect should be considered among the first, especially if an app or a website is text-driven. Poor readability level is the main reason why users miss important data or feel inexplicable tense using the product as all the way they have to struggle with the text which takes considerable effort to be read. No need to say that lack of readability can be a serious reason why users are not retained even with attractive products.

 

— Accessibility

In the sphere of UI/UX design, accessibility is mostly defined as the ability of the product to reach as many people as possible. That means that the decision “to use or not to use” should be mostly based on users’ needs and wishes but not on their physical abilities. Color scheme issue is among the main factors affecting this aspect. Taking it into account, designer should think over the users of different age, special needs, disabilities which can also determine the choice of color for the background and layout elements.

 

— Responsiveness

Designing app screens or webpages, it is also important to remember that users are going to use the product on different devices. That can make crucial effect on usability as often what looks slickly stylish, attractive and clear on high-resolution professional monitor can transform into a dirty stain on the small low-res screen. In every project, designers should take their time on checking their solutions on different devices and in various resolutions: that simple step enables to reveal the problems and fix them on the early stages of design. Color scheme, certainly, influences this issue among the first.

 

— Environment

One more thing to consider while choosing the appropriate color scheme and the type of background is potential environments in which users are going to use it regularly and frequently. In terms of constant use under natural light, dark background can literally create the effect of reflection, especially on glossy screens typical for tablets and smartphones. On the contrary, in terms of regular use in badly-lit environment, dark background can take the light away from the screen which has bad influence on navigation and readability. So, the issue of color combinations, contrast and shades draw big attention here.

 

Therefore, as we can see, choosing the appropriate background color for the layout is the vital step affecting such a key characteristic of any product as usability.

 

Steps to follow choosing the color scheme

 

Here is the short checklist of basic things to follow making solutions on general color scheme.

 
Clearly define the aim of the product
 

It is very important to define the most important useful points of the product which are going to solve user’s problems. This data will determine what kind of contents drives your product.

 

If it is a text-driven stuff like a blog app or e-reader for example, perhaps light background will be better choice. Light will create the feeling of more airy and spacious screen or page and it will be easier to concentrate purely on the text.

 

tubik studio blog app

 

However, if your product is visually driven and moves more round images rather than text, color scheme with dark or bright background for the interface can become an efficient solution as the colors of the images can fell deeper and the general layout if accomplished properly can get stylish and sometimes even luxury look.

 

tubikstudio ui design

 
Analyze your target audience
 

As we have mentioned plenty of times in our previous articles, defining and analyzing target audience is the first thing designer should do working over effective design solutions. Knowing who is your potential user and what they will want to get from your product is the solid basis for helpful, usable and attractive interface. Middle-aged and older people tend to like interfaces with light backgrounds as they find them more intuitive and navigable. Younger people can find well-performed interfaces with dark background more original and stylish and it can be the way to involve target users. Teenagers and children can be attracted with thought-out interfaces using bright backgrounds and funny details. Certainly, it deeply depends on the nature of the product functionality and content; however, typical preferences of target audience can also be a good clue to efficient decisions.

 

tubik studio_social_network

 
Research the competition
 

One more thing to remember is that your product is not going to appear one and the only on the market. It is going to participate in great and dynamic competition the prize in which is popularity and users attention. The choice of color scheme can be the way to make a product standing out of the crowd that can be crucial to enable the first wish of interaction from user’s side. Time spent on researching the existing products in the sphere can save much more time and effort on redesign of ineffective solutions.

 

juicy player UI Tubik Studio

 
Test as much as possible
 

All the aspects mentioned above should really persuade in one key thing to do: as the color is perhaps the most important tool affecting the level of usability and attractiveness of the product, every design solution should be tested properly, in different resolutions, on different screens and under different conditions. Testing proves strong and weak sides of your choice before the product goes out on the market, gets discussed and loses the chance of stunning first impression in case of inefficient design solutions.

 

ipad interactions animation

 

In practice, we have published earlier two practical case studies on UI design in which color schemes were redesigned in the process. In case of Echo App design it was made after the problems revealed via user testing, while in case of Tracking App it was determined by the issue of consistency for all the versions of product. Welcome to read the cases in detail.


Welcome to see the designs by Tubik Studio on Dribbble and Behance

tubikstudio illustration wallpapers

Color in UI Design. Look on the Bright Side.

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 vise versa – steal their power. It can share an emotion without anything said. It can become a great weapon in hand of a master.

 

No wonder, in the sphere of UI design color is among the key things of creating efficient result. 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 leading designers in Tubik Studio, Ludmila Shevchenko is literally a person staying on the bright side of life every single moment of a day. If you check her portfolio on Dribbble, you will definitely see that even creating interfaces she is the artist always keen to take everything possible from the color and 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. 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.

 

tubik studio design ui

Calendar App by Ludmila Shevchenko

 

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 to find great solutions being persistent and hard-working at this stage. This basic approach empowered with deep knowledge or art and readiness to search can bring out amazing and – what is more – efficient and user-friendly designs.

Tubik Studio

Ludmila working over a UI concept

 

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

 

Don’t be afraid of experiments

It’s not a secret that today designers have a 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 the 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.

 

wallpapers tubik studio

Free Colorful Wallpapers by Ludmila Shevchenko

 

Don’t set strict limits of 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, than this tip is not for you. 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 better presentation of design skills and higher chances of getting involved into 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.

 

tubikstudio UI stats concept

Stats Concept by Ludmila Shevchenko

 

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, in 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 for 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.

 

tubik studio graphic ui

Travel Notes App by Ludmila Shevchenko

 

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

Talking about interfaces, whose aim is not just to transfer visual message but also to enable easy and successful interactions with a product, a good way to check your solutions is 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

Great way to get inspired and transform this inspiration right into the 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 perspective of color choice and application and useful in 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.

 

artgallery ui tubik studio

Art Gallery App by Ludmila Shevchenko

 

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 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 the product that will heal their pain and make their life happier. So, in perspective of color choices and usage in UI, 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, use color to improve and speed navigation – there are so many aspects that can become much more efficient and user-centered just with the help of great power of color.

 

tubik studio app design

Entertainment App by Ludmila Shevchenko

 


Welcome to see other works by Ludmila Shevchenko on Dribbble and Behance

Welcome to see the designs by Tubik Studio on Dribbble and Behance