May 15th, 2021

Web Designer Secrets For Creating a More Professional Brand​

These past couple weeks I’ve been working with one of my website design clients, making updates to the original brand and website I created a while ago.

As I’ve revisited fonts and tweaked colors, I’ve found myself using designer knowledge and experience that I’ve learned over the years.

I decided to share a few designer secrets with you in this post.

​​I decided to share a few designer secrets with you in this post.

Whether you are designing your own brand and website or hired a designer to create these elements for you, this blog will be helpful for you to discover how to create a more cohesive and professional brand.

How to Use a Logo Font

Truth be told, a logo is one of the most recognizable elements of a brand. Most often it is the center and of your website. It is used in business cards, and it is a focal point you have with prospective clients.

​And if I had to guess, your primary logo font is probably distinctive.

As a brand and web designer my goal is to choose a logo font that stands to create a brand recognition with your audience and to differentiate your brand from any other brands in the industry.

For the sake of being cohesive, you may have used that same logo font for things like website headers and blog post graphics.

But the more your logo font is used outside of your logo, the less distinctive it becomes. For this reason, experienced designers often refrain from using logo fonts for anywhere else.

Consider some of the most recognizable brands like COCO CHANEL and Tiffany & Co. Very rarely you will see their logo fonts anywhere heir logo fonts on any of their other graphics? Very rarely, if ever.

Does that make it any less recognizable? No! In fact, it makes the logo stand out even more.

The brand fonts for headers and body text are consistent throughout the rest of COCO Chanel, but logo fonts aren’t used anywhere else.
​
The same should be true for your primary logo font. Make it stand out more by refraining to use it anywhere else!
​

---

---

​Choose Contrasting Fonts

Knowing which fonts pair well all boils down to one major component: contrast. The best font pairings are usually those that are very different from one another.

The contrast doesn’t need to be extreme, but it should be noticeable. Your body text could be either be a simple serif or sans serif font. It should be easy to read.

You can have a little fun with header fonts by pulling in a display or script font, increasing the weight of the font, or simply by making it all in caps.
​
These contrast rules category, weight, and size aren’t just for your headers and body text; they also apply to the fonts that are included in your logo.

Utilize Structure

Our brains are naturally wired to rank items of importance when we view a design.

Every time you look at a website or a menu, you look at the elements of a page in a certain order based on visual cues, probably without even realizing it!

This ranking is called hierarchy, and good designers intentionally use it to call your attention to the things they want you to look at first, second, third, etc.

There are five primary design principles that help create hierarchy in a design:
​

• Scale - Larger objects attract more attention than smaller objects.
• Color - Our eyes are immediately drawn to bold, contrasting pops of color.
• Proximity - Objects that are close in proximity are often related.
• Contrast - Dramatic shifts in size and color or size signal a change and in turn, grab attention.
• Alignment - Order is created through alignment; because our eyes naturally follow lines.

​

​Anytime I’ve designing anything for a brand, whether it’s a blog post graphic, content upgrade, or a website page, I consider which items I would like for people to see first, second, third, etc.

Then, use at least one of the five principles above to call more attention to the most important elements of your design.

Pay Attention to Negative Space

When designing graphics for a brand, there are many instances where it necessary to find a place for a text on the image.

​Placing a text in the open space surrounding the subject of your photo will create a professional look. Not only does it make the text more noticeable, but it also makes it easy to read.

It seems so simple, but paying attention to the negative space with a website design can make a big difference in creating either an amateur or a stand-out graphic.

Maintain Consistency

Don’t frequently switch up the core elements of your brand.
​
You might get the itch to add in a new brand color or change up your fonts, especially if you’re in a creative field. Truth be told, brand recognition is formed by using the same design elements over and over again.

So make up your mind and stick to it. You’ll have a much more cohesive, professional brand as a result!

Making seemingly small changes like utilizing hierarchy and negative space may seem insignificant, but they can have a big impact on how your brand and website design is perceived.

When developing a brand, most of us are not sure how many colors to include and how to use the colors together.

Do these struggles sound familiar? If so, I have some great news for you. Coming up with a distinct color palette doesn’t require too many special skills.
​
All you need is a basic understanding of color psychology, a little creativity, and the following four steps!

Common Color Associations

Yellow is a go-to color for happiness, warmth and positivity. If you ever need an attention grabber, use this color. This color is attention-grabbing. This is the reason why taxis are yellow. ​

Men usually perceive yellow as a lighthearted and childish color. This is the reason, why you don’t see it very often in expensive product advertising for car manufacturers or men’s clothing stores. Yellow is also viewed as spontaneous.

Some common associations with yellow include sunshine, warmth, cheerfulness, curiosity, happiness, joy and playfulness.

Blue is perceived as serene, trustworthy and loyal. It’s a popular color with financial institutions such as IBM, Bank of America, Citibank and Chase. No wonder, that social media sites such as Facebook, Twitter, LinkedIn communicate through this color its message of stability and trust.

Blue is also a popular color for promoting products related to cleanliness such as water purification filters, detergents. Not to mention, air and sky airlines, air conditioners, sea cruise lines, and bottled water.

This color is usually avoided in restaurant logos and food packaging because it’s said to suppress appetite. Studies have also shown that blue is the preferred color of men.​

Some common associations with blue include confidence, authority, dignity, loyalty, security, serenity, and success.
​
Green is the color of nature. It symbolizes freshness, growth, serenity, and healing. It also brings strong emotional relation to safety and balance. Darker greens are closer related to money, banking, and wealth. At the same time lighter greens have more calming effect.

Some common associations with green include friendliness, harmony, freshness, harmony, health, eco, healing, inexperience, money, and nature.

Red color is often associated with energy of action of adventure, drive, energy, excitement, love, passion, and vigor, nut sometimes war and danger. This is also the color passion, desire, love and power.

This powerful color is an emotionally intense color. It allows for very high visibility, and is often used to grab viewers’ attention.

Think red tag clearance sales and “Buy Now” buttons. Red has also been known to stimulate appetite, so it’s frequently used by food industry brands like McDonald’s, Frito Lay, Nabisco, Kellogg’s, Heinz, and Chick-Fil-A.
​
Orange is less intense than red but still packs a lot of punch; it’s energetic and warm. Like yellow, orange is also associated with joy, sunshine, and playfulness. You often find it used in logos to stimulate emotions or even appetites.

Some common associations with orange include creativity, enthusiasm, lightheartedness, and youth.
​
Purple is color closely associated with royalty, luxury, nobility and extravagance. It is a very rare color in nature, many relate it to creativity and mystery. ​

Other common associations with purple include mystery, fantasy, nobility, royalty, and sophistication.
​
Pink is a feminine color that conjures feelings of delicateness and innocence. It is worth noting that bright and vibrant shades of pink often evoke a modern appeal. Overall, pink is known to be light-hearted and friendly.

Common associations with pink include romance, gentleness, softness, gratitude and appreciation.

Brown indicates nature and utility. This color is often used in logos related to law and construction. It is simple, simple and warm.

Common associations with color brown is earthiness, depth, roughness, richness, and utility.

Black represents authority, elegance, and power. It’s associated with intelligence, but it’s also associated with evil and grieving. It’s a serious color that evokes strong emotions.

​Common associations with black include class, authority, distinction, mystery, formality, seriousness, elegance, and tradition.

Tones, Tints and Shades

Tones, shades and tints, also have an effect on how the color is perceived.

Tones are created by adding white and black to the main colors. When you hear that the color needs to be “toned down,” what it means is that its intensity needs to be dropped.

By adding different amounts of white and black to a color subdues its intensity.

Tints of color are created by mixing a choice of color with white. They convey more peaceful, lighter, and less energetic feel. It is considered more feminine.
​
Shades of color could be created by mixing adding a shade of black to the pure color. This adds a mystery and a darker feel. They’re often considered to be more masculine.

Now that we have learned about the color psychology, let’s put this knowledge into practice. Where do we start? Let’s figure out how to choose a color palette for your brand.

Here are three helpful steps:

Step 1: Let’s Gather Color Inspiration

Now that we know so much about the psychology of colors, you probably have an idea of one or two colors that would be fitting for your brand.

With these colors in mind, what you can do is to create a secret Pintrest board and collect images that incorporate them. This will allows you to collect images on the board that represent the look and feel you want for your brand to evoke.

As you play with pictures and images, look for color similarities. You’ll be more than like me see a trend in the colors you gravitate toward.

Shades of gray, white, and gold are consistently seen throughout her Pinterest board, and they were all very appropriate for her ideal clients and the overall aesthetic of her brand. Check out The Yellow Cape Code brand:

Once you’ve gathered inspiration, gather at least six colors for your color palette.

I love creating color palettes in Adobe Illustrator, but it is also could be completed through Adobe Color CC, but I love creating color palettes in Adobe Illustrator. The eyedropper tool is especially useful for pulling colors from inspiration photos!

Shades of gray, white, and gold are consistently seen throughout her Pinterest board, and they were all very appropriate for her ideal clients and the overall aesthetic of her brand.

If you’re having trouble coming up with your initial colors, you can also take a look at Adobe Color CC and Designspiration.net.

Adobe Color CC is a fantastic tool that allows you to glance through preexisting color palettes for inspiration, look through different color rules, create and save color palettes. I prefer to look through the Most Popular categories under the Explore tab.
Designspiration.net is a great site for both design and color inspiration. You can search for designs that include certain colors by clicking “color” at the top of their website. Truth be told, it is so easy to get sucked in and lose track of time on there.

If that’s the look you’re going for, you might consider using a monochromatic color palette, too. However, be cautious and use an array of light and dark tones to create contrast if you go in this direction.
Analogous color palettes is helpful in exploring colors that sit next to each other on the color wheel. They show a family of colors and they create a pleasing and relaxed palette. Analogous color palettes usually include all cool colors or all warm colors.

For example, if brand primarily uses analogous colors: orange, green and black. They’re all warm colors from the same side of the color wheel.

However, this analogous palette is a little less relaxed than most because of the pop of contrast added by their use of black.
​
Depending on the look and feel you’re trying to achieve with your brand, you might choose to add a complementary color if your six colors are analogous. This will allow your brand stand out and become more distinct.
​

A strong palette includes a balanced mix of dark, medium and dark tones, regardless of whether it uses a monochromatic, analogous, or complementary color scheme.

Be sure to have at least one dark shade in the mix? If not, add black to one of the colors to create a darker shade or replace one of your existing colors with a darker color.

Do you have at least one light color in the mix? If not, add white to one of the colors to add a lighter shade or replace one of your existing colors with a lighter color. ​

Complementary colors are opposite each other on the color wheel, so complementary palettes often include both warm and cool colors. I usually strive to create complementary color palettes when I’m designing a brand. Not only does this type of color combination create more dimension, but it also creates balance.

For example, the colors of this brand by MaeMae & Co. include both cool colors (shades of green and mint) with warm colors (shades of peach, orange, and pink).

These complementary colors create dimension and interest because they’re opposite each other on the color wheel; the hues one color family has, the other lacks and vice versa. They create a nice balance.

Think about your color combination you’re currently starting with. Is it monochromatic, analogous, or complementary? Does that work for the overall direction of your brand? If not, make adjustments as needed.

If your is colors are monochromatic, consider adding colors that are next to your main color on the color wheel to transform it into a relaxed, understated analogous palette or add colors that are opposite your main color on the color wheel to transform it into a balanced, vibrant monochromatic palette.

If your six colors are all warm, analogous colors but you’re hoping for a creative palette with dimension, add a cool color from the other side of the color wheel. And vice versa.

And if your six colors are complementary but you’re going for a less-vibrant, understated, and refined brand, you might consider taking out some colors from one side of the color wheel so that they’re all warm or all cool colors.

Step 2: Include Both Light and Dark Tones
​
One of the largest issues that I see when selecting a color I see among inexperienced brand designers is the use of a color palette that lacks contrast. ​

New Step 3: Choose Dominant and Accent Colors 

Now that you’ve settled on a color combination and a good mix of light and dark tones, it’s time to decide on 1-3 dominant colors and 3-5 secondary colors.

You usually won’t use every color in your palette for each collateral item, logo variation, or page of your website, so determine which colors will be used most often and which will be used as accents.

Make adjustments to your palette to ensure that the colors you’re using include an array of dark and light tones. This adds contrast and versatility to your brand and website.

Do you have to use six colors? Of course not - you’re free to add more or less colors depending on the aesthetic you’re trying achieve.

However, knowing the fundamentals of color combination, contrast, information about dominant and accent colors is helpful in being intentional about your brand that could be used for in social media and website design. It allows for the marketing process to be streamlined and versatile.

Call Swift Digital Marketing Agency today (216) 339-6041.

Atlanta
Austin
Baltimore
Boston
Charlotte
Chicago
Dallas
​Denver
New York