Have you been wondering if color can enhance your designs? Many designers simply use their intuitions to produce some wonderful design projects. However, this may not be possible if you are working under tight deadlines.
By understanding the essence of color, color theory, and white spaces, you can take the guesswork out of your designs. Read ahead to know just how you can choose a color for design projects.
Table of Contents
Communicating Visually
Before you look at color in design, here are some other areas that affect design hierarchies. In design, elements have to be organized in certain ways for them to communicate effectively with your audience.
Visual Hierarchies
This is done through visual hierarchies. To understand this, consider the basic layout of a blog. It has a header at the top of the page. This contains the blog name, logo, and navigation buttons.
(Source : Google Images)
Below this, you will find the main content area. Here, you will find specific blog titles and metadata. You will also find the bulk of the content here.
On the right side, you will often find the sidebar. This will have a call for action, important dates, and the like. Finally, the page will have a footer at the bottom. You will find any additional information like the address, copyright notice, and ‘about us’ right there.
The hierarchy differentiates the purpose and intention of each piece of information on the blog. Like the blog, there are several other kinds of web hierarchies that great design can help distinguish.
A simple visual hierarchy is found in HTML. Here headings like H1, H2, and H3 can help create a progressive hierarchy on a page. This may be the simplest way to induce hierarchy. However, elements like color and typefaces can help you do the same.
This does not mean that you need loud colors to define a hierarchy. Delicate design tactics can do this just fine. This can be done very well through the subtle white space.
White Space and Alignment
One of the best options is to use negative or white space as an important part of your design. One way to incorporate white space effectively into your designs is by using the ‘1+1 = 3’ rule popularized by information design expert Edward Tufte.
This rule simply implies that white space can arrange elements in a hierarchy in a sophisticated manner. For instance, just by aligning your content according to particular proportions in your live design area, you will be able to define a hierarchy.
A good example is a table that simply needs to be aligned for it to make sense. You don’t need the table’s body to separate elements, as the white space will do it for you. Removing the horizontal and vertical black lines from a table may seem like it will now make no sense.
This, however, is not true. What instead happens is that white space takes its place. It also establishes an aligned relationship between the elements in the table. Your table will remain the same, just without the clutter of the black lines.
How can you manage your white space? The great idea is to use a grid. You can use the grid to use similar alignment for content that means the same thing and has the same purpose. You can align other content in different ways.
For instance, every consecutive bullet point can be aligned on the same left column on the grid without using bullet points or a ruled line to define it.
Font Weight
Another key factor that can induce a hierarchy in your design is the font-weight. This can be layered over the white space to draw the eye of the viewer to important content. This can add richness to your content.
Using a higher font-weight for areas higher up in the design, the hierarchy can make a great difference to the design. For instance, you can add a higher font-weight to the main content in your blog. The title can be in all caps for increased visibility.
Font Size
Similarly, picking font sizes that are related to each other can establish a clear hierarchy. In general, using a ¾ ratio between font sizes is a good idea. How can a definite ratio benefit you?
This keeps a specific font progression in your arsenal. Whenever you need to pick font sizes, you won’t have to spend too much time on it. Instead, you can simply use a ¾ ratio to pick between font sizes and set hierarchy.
You can use both font size and weight together to create an interesting hierarchy. You can make the heading bold, large, and all caps.
One of the most important rules here’s to never set all the fonts in all caps. This can add a necessary balance to your design.
Visual Ornamentation
This refers to design elements like lines that you can add to enhance the hierarchy. Many designers get very excited about this aspect and add unnecessary boxes and lines to fill the space.
It is better to keep the ornamentation simple. Yes, less is more. A single dividing line on a page can be an elegant approach to ornamentation. It may also be better to use ornamentation only after the page has been first defined using other elements discussed above.
Color in Design
So far, we’ve discussed the fundamentals of white space, font size and weight, and ornamentation. What happens if you add color to all of these? Even a little bit of color on the smallest font can make a difference to the hierarchy.
Before you use color to define hierarchies, it is important to understand it.
Color theory is present in all areas of design, even when you design a chatbot.
Understanding Color
At its core, color is simply electromagnetic radiation. Human beings can only see those colors that fall within the visible spectrum.
In the visible spectrum, violet has the shortest wavelength and red has the longest. When these colors reach your brain, it plays a few tricks that help you perceive it. For instance, consider the concept of color constancy. For instance, if there is a continuous color before you, your brain will gauge that the color is the same all through.
This applies to the parts of the color that are in sunlight and those that are shadowed.
Human eyes have three kinds of color receptors called cones that process small parts of this visible spectrum. Here are the cones outlined.
S Cones
These are the cones that sense short-wavelength blue light. These are also called blue cones.
M Cones
These sense medium wavelength light best. They are sensitive to green light and are also called green cones.
L Cones
These are the long-wavelength cones. These are sensitive to yellow-green light.
By using these three cones, our eyes can see about 10 million different colors. The same is true for animals who use different cones to see other colors.
Some people have colorblindness, which prevents them from seeing some colors. This can be due to dichromacy. This means that one cone is not working well or is absent. Another type of color blindness is the red-green kind that one in ten men tend to have.
Color blindness can be a good reason to tweak the design. In this case, just color cannot do the job. For instance, traffic lights have a cross or right shape in many places on their colored red and green, respectively. These are colorblind people-friendly designs.
(Source : Google Images)
Many applications can also use this knowledge to adjust colors for colorblind people. For instance, Photoshop’s colorblind preview feature allows this.
Color and Technology
There are various color systems like the Munsell system, HSB model, and the LAB model that represent colors for our use. Here is a description of each.
Munsell Color System
In this system, colors are defined just as they appear to the human eye. The hue describes the color, say green or blue. Value describes how dark or light a color is. Chroma defines just how intense a color is.
This is not a very popular color system, but it is accurate to human perception.
HSB Color System
(Source : Google Images)
The HSB model is used in CSS. It uses indicators like hue, saturation, and brightness to define colors. It breaks down each color into ranges from 0 to 100 for each indicator. It is an extremely easy to understand model but is not an accurate representation of all the colors present.
For instance, red and white may have the same 100% brightness on HSB, but it seems to the human eye that white is much lighter than red. A factor defines this called luminosity that this system does not track.
LAB Color Model
This model represents luminosity much better than the HSB system. It has an indicator L that tracks luminosity. Another indicator tracks whether the color is more red or green. A third indicator b will tell you whether the color used is more blue or yellow.
This model is a great option for showing qualitative and quantitative data in pie graphs and maps. The luminosity can differentiate statistical density much better. However, it may be difficult to find the color in your mind by switching between the ranges on each indicator.
The web mostly uses the HSB model. How can you pick distinguished colors then? You can simply use tools like ColorBrewer that can help you manipulate color luminosity, saturation, and the like much better. This can lead to colors that are differentiated much better.
(Source : https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3)
With this in mind, we can take a look at colors and emotions.
Color Theory
With color theory, you can go ahead and choose the right colors for the right emotions. This is used frequently in marketing to induce the right emotions in an audience when they see a product.
Historically, red has been associated with urgency, sex, food, conflict, and danger. This can be dated back to the primary instincts of human beings across time. There have been studies that have shown that red can contribute very well to tasks that require accuracy.
In addition, red can hinder complex tasks like creative thinking.
Blue, on the other hand, is associated with safety, relaxation, and calmness. Historically, this can be traced back to human beings’ primal search for water that led to food, housing, and safety. Blue can also contribute to tasks that require creativity.
Colors and Brand Icons
These two colors are seen in several brand icons. For instance, several food apps like Seamless and Yelp tend to have a red background. Colors related to red, like yellows and oranges, are also seen in food logos.
(Source : Google Images)
Blue, on the other hand, is also associated with rotten food. Hence, you won’t usually see it on food apps.
Context of Color
This is another important aspect of color theory. A good case in point is the car rental company Uber. In the beginning, Uber has a deep and dark blue logo. This was when they offered sophisticated town cars as a way for people to get around. This logo was just perfect.
(Source : Google Images)
If they soon entered the ride-sharing market. The dark colors on the logo were now interpreted as dark and not very friendly. This can be contrasted with the bright and friendly logo of Lyft. This ride-sharing platform uses a friendly logo to indicate safety in a stranger’s car.
Here’s some tips for picking the right color for your website
Color Conventions in Web Design
Darker colors are used for sophisticated design concepts and lighter ones for warm and inviting concepts. A few primary colors can indicate some key color conventions in web design. For the longest time, red has been used for critical information like alerts, warnings, or urgent event notifications.
On the other hand, yellow is used for intermediate alerts or event notifications that can wait longer. Green is used for confirmation or success alerts and messages. Color theory can be seen to be at play, even in applications like tinder.
For instance, tinder uses a green heart to swipe right. A red cross on the left lets you dislike a person.
(Source : Google Images)
For user-generated content, simple colors like grey can do a lot. For instance, Evernote uses a grey interface to communicate with its audience. This also works for image platforms like Instagram and Pinterest that use a few colors in their interface. This keeps the focus on the colorful images instead.
Colors and Their Interaction
Good color interactions can either make your design stand out or just simply lay flat. The color interaction that we understand today comes from the painter Monet and those influenced him who developed a technique called pointillism.
(Source : Google Images)
This included painting with colored dots to understand the relationships between colors. It was also understood that the colors on the cool half of the color wheel and the warm half could interact to produce various effects.
Cool colors like blue recede while warmer colors like red tend to approach you. Cool hues tend to appear farther from the viewer than warm hues that appear closer and pop.
Even tints and shades of the same color react. Tints are lighter variants of the same hue. Shades tend to be darker variants of the hue. As a rule, the tints of a hue approach you, and shades recede.
Some colors don’t react very well, and their combination may just look flat. This knowledge can be used in typography to make the most important text float forward. Colors that interact well can create rich text or you.
Color Schemes
Color schemes refer to whole color configurations that can create just the right feel for your webpage or any other design. By giving your designs an overall sense of darker colors, you can make the page look mysterious. It can make the design look like it is letting viewers in on a secret.
You can also use an active color configuration to bring some excitement and freshness to your product. This configuration is used by Spotify, where a bright color is set against a darker background to get the audience excited.
(Source : Google Images)
You can use a muted color scheme for a calm effect, which goes very well with stationary. This color configuration also emanates quiet confidence. You will also find a natural color configuration. This uses hues and tones that are used by products that are largely natural with earthy colors and found in nature.
There are a few common color schemes that are used frequently. These are mainly just guidelines, and deviating a little from them works well. You can also opt for monochromatic color schemes that use variations of a single hue. They work well for content-focused designs.
The other option is the analogous color scheme. These use a variety of colors without too much contrast, hence keeping the colors harmonious. There are complementary color schemes that use two contrasting hues. These are not very popular in web design today.
These, however, look great on professional sports logos. You will also find split-complementary schemes provide more color options than a complementary scheme does.
With these in mind, you can incorporate just the scheme that fits your design aesthetics best.
Typefaces
Now that you know about color, they can help you play around with fonts to make a lasting impact. Font typefaces are an important aspect of understanding fonts for design. Read ahead to find out more about them.
The Humanist typefaces like Gill Sans and Palatino look great for non-profit and healthcare messages. Geometric typefaces like Bodoni, on the other hand, are used by fashion houses.
(Source : Google Images)
You can also mix two typefaces for two fonts of different sizes on a page. It is best not to use two serif or sans serif fonts simultaneously on a single page as a general rule. By harmonizing or contrasting two fonts, you can get just what you need.
The texture, x-height, and character width can help you pick the right fonts for your design.
Typographic Etiquette
This is an extremely important part of typography that you should consider. A few principles can let you use just the right typography. Read ahead to find these.
Typography and Communication
The primary purpose of using typography is to communicate language. This has been true for several centuries.
Respect the Typeface
It is very important to respect the design of your typeface. Some designers have worked on certain typefaces for their entire lives. By respecting their design, you will be bringing cohesiveness to yours.
Now that you know the principles of various fonts, it is good to keep an eye out for any fonts’ fake variants. In CSS, you will be able to find a bold or italic version of a font you like.
If it is not available, it simply means that the designer may not have created it in the first place. There are also several fake small caps out there that are made by scaling down the regular letters. Be wary of these.
To adhere to the principle of respecting the font made by the designer, it is a good idea to try and not distort it. There are various real condensed versions available that you can take advantage of.
Even Texture
It is a good idea to keep the blocks of text you use of the same texture. With even texture, the essential forms of the letters come through to the audience.
At times, you may even find the need to outline the type. This is especially needed if you are placing your font over textured images. Google Maps uses outlining to ensure an even texture. Outline the text in a way that does not distort the typeface.
(Source : Google Images)
Justifying your text can also mess with the texture. It can make the text look like clocks of cheese. People tend to read better when line lengths are different. You should also look for commas and apostrophes that curve. This can make your text look appealing.
Endnotes
Color can sustain the viewer’s eye and lead them to the right spot in your design. If you are designing a blog page, color, and white space can create a powerful design that defines a visual hierarchy.
Coupled with fonts and typefaces, color can be your secret to great marketing design. Using color theory, you can associate the right emotions with your brand and allure to people’s primal instincts.
If you would rather hire a professional to take care of this and all of your other design needs, find out why we’re the best alternative to Design Pickle and similar services.
