Colors and Typography : Basis of Design.

The choice of colors really matters in creating a beautiful User Interface Design, it is what attracts the users.

On the other hand, your choice of typefaces and how it works with your layout, grid, color scheme and so on will make the difference between a good, bad and great design.

In this article, I will put you through how to choose good color combination for your design and choosing a good typography.

Colors

Different meanings are attributed to different colors and you can use these different colors to achieve different things.

1. Red : has been traditionally attributed to love,danger, heart etc.
2. White : has been traditionally attributed to confidence.
3. Green : has been traditionally attributed to peace,success….etc

Our minds are so fixed on the meanings given to some colors, so we are always reluctant to use some colors for our design. Choosing a color scheme is not all about advertising and attention-grabbing, though. It’s also about selling your product and appealing to certain instincts or desires that people have.

How to combine colors.

Obviously, you are not going to use one color everywhere in your design. You’re going to need combinations of color that complement with each other and are pleasant to look at.

One of the ways I have learnt to combine colors is through photography. A beautiful photo definitely has a good color combination.

1. Nature Inspired Color Schemes

Desert landscapes are full of dramatic contrasts, and so is this color scheme. for an unexpected color combination that is more toned down than bright and garish, try this pairing featuring shades of plum and reddish-orange.

Monochromatic color schemes (made up of the various tints, tones, or shades of one color) are extremely versatile. While this palette may not qualify as monochromatic according to the technical definition, for visual purposes, it creates a similar effect. With a color as multipurpose as blue, this combination could be used just about anywhere.

The bluish shades at the top and bottom of this selection have gray undertones, which makes them almost neutral — a great foundation for playing with more daring tones like the lime green.

2. Food Inspired Color Schemes

Neutral colors like the shades of gray and tan here are very versatile and can be paired with almost anything. A color scheme of all neutrals, however, can be quite nice, too. Depending on how you apply it to a design, it can be upscale and sophisticated (think branding for a hotel) or calming and comfortable

Shades ranging from light to dark make it easy to apply this color palette to a design. There’s enough contrast that you can choose a background color, a text color, and an accent color or two just from these four.

3. Travel Inspired Color Schemes

White, black (or in this case, very dark navy), red, and yellow is a very common combination. But with these saturated shades, it certainly isn’t boring. if you’re looking for a bold palette that doesn’t mess around with unusual colors but that still makes a strong, eye-catching statement in your design, this type of color scheme is an easy one to apply.

4. Everyday Item Inspired Color Schemes.

Red or blue might be common pairings for basic black and white, but here, a deeper red along with a brighter turquoise blue gives a fresh twist to a familiar combination.

I have shown you different color schemes you can use for your design through beautiful photos. You can get pictures from unsplash to create your own color schemes.

You can also use coolors to get good color combinations you can use for your design.

Typography

Typography plays a crucial role in the success of a design.

The beauty of type lies in its utility ; prettiness without readability serves neither author nor reader

Typography often provides that at-a-glance impression that people gauge and judge the rest of the design by — so your font choices need to be purposeful and appropriate.

Difference between Font and Typeface

The typeface is the design; the font is how that design is delivered.

Typeface + style + size = font .

A font is what you use; a typeface is what you see.

Font Families/ Classifications

1. Serif: Serif fonts have little “feet” or lines attached at the ends of their letters. They’re generally thought to look more traditional.
2. Sans-Serif: It literally means “without serif” — these fonts don’t have the extra lines on the ends of letters.They’re generally thought to look more modern and streamlined.
3. Script: Scripts are what we might think of as cursive- or handwriting-style fonts. They generally have connecting letters.
4. Decorative / Display: When you hear a font categorized as decorative, display, or novelty, it all means the same thing — that font is meant to get your attention.

Difference between serif and sans serif

How to choose a good Font for your design

Your first concern in choosing a font for a project should be that it matches the message or purpose of your design. This is important because every typeface has its own mood or personality. Maybe it’s serious, casual, playful, or elegant. You’ll need to determine what a particular font is saying to you, and whether that fits with your design.

King Bebas; FourthCanvas publication

This is a playful context…. (King Bebas; FourthCanvas publication)

Consider context and audience.

Where and how your design will be viewed should also figure into your font choices. For instance, a business card design will need a font that’s easily readable at a small size.

King Bebas; FourthCanvas publication

As you can match two or more complementary colors (either variance in value or saturation) in a design, as so you can match more than one font family in your design. Appropriate matching of more than one typefaces in a design is a factor of how well you know about font families. As stated earlier that fonts can be serious, casual, playful, or elegant, if it is not well utilized the intended passive feeling will be crushed.