5 steps to a new brand identity

Today, I helped an OpenSim entrepreneur, known to the metaverse as Minethere Always, come up with a visual style for her ads and website, using a super slimmed down version of the branding process that an agency would use. She might decide to go into a totally different direction, which is fine with me, because the process itself makes for a useful illustrate exercise for anyone looking to improve their visual marketing.

Pick your primary color

Have you ever gone into a store, picked out something that catches your eye, brought it home, and discovered that it doesn’t go with anything else you own? I do that all the time. Finally, I just decided to stick with black for almost everything, and then have accent pieces, like blouses, in bright jewel colors, like a dark ruby red. Now, I can even get dressed in the dark and will look presentable.

That’s the same approach I recommend for visual design. Pick your one key color, and do everything else in black and white — or very very close to black and white.

Now, the big companies hire expensive color consultants to figure out what their main color should be. Let them do that. Then, you can just swoop in at the end and take advantage of all their big-budget research.

Start by taking a look at the color logo chart below. Where would your company be on this chart? By picking a color, you’re not only creating an emotional mood for your customers, but also subtly reminding them of other brands that share the same color.

Color Emotion Guide

(Image credit: Explore more visuals like this one on the web’s largest information design community – Visually.)

I, for example, am anything but peaceful. I definitely see myself in the “bold” category, and my main color is a slightly dark shade of red.

Minethere Always identified more with the bright yellow, optimistic and warm brands. So that was our starting point.

Plus, a quick Google search for yellow logos led us to a couple of websites that used that color in a really effective way, including Yellow Pages and Nikon.

Nikon uses its yellow brand color very strategically for accents, like the little yellow navigation button at bottom right.

Nikon uses its yellow brand color very strategically for accents, like the little yellow navigation button at bottom right.

The yellow color is also used throughout the site on buttons, headings, and icons.

Notice that links are in blue -- yellow wouldn't show up well on a white background.

Note that links are in blue — yellow wouldn’t show up well on a white background.

Aside from the yellow accent color, the rest of Nikon’s site is almost all black, white, and shades of gray, allowing the images of its products to really pop off the page.

In fact, most shopping sites have a similar approach to their design. They’ve spent a lot of money on figuring out what works, and what works is when the design of the site doesn’t distract away from the stuff you’re trying to sell.

Meanwhile, take a look at Minethere Always’ current landing page — reproduced here with her permission:

The site itself might have changed since I wrote this article -- Minethere is in the process of redesigning, and I caught this site at its awkward intermediate stage.

The site itself might have changed since I wrote this article — Minethere is in the process of redesigning, and I caught this site at its awkward intermediate stage.

There’s a lot of different colors there. A few shades of purple, some reds, blues — and there used to be a lot more before she simplified. Plus lots of distractions in the sidebars to take the focus away from the main point of this particular page — to sell terrains for $5 each.

Create a palette

If your color is bright blue or red, all you need to complete your palette is darker and lighter versions of the same color. You can use your key color for links, for example, and the darker version of the color when you mouse over the link. And you can use a lighter version of the color for backgrounds on boxes — the lighter the color, the bigger the box you can have.

A good, free online tool for turning a single color into a whole set of is Colors on the Web.

A starting color scheme.

A starting color scheme.

Another nice site for generating a color theme palette is Adobe’s Kuler, which makes it easier to adjust individual colors in the palette by more than a dozen different sliders. I like adjusting by hue, saturation, and brightness, for example which makes it easy to get a lighter or darker version of the same color.

Here’s the same palette run through Kuler and tweaked a little bit:

The key color is in the center.

The key color is in the center.

Some websites that have yellow as their main accent color have a second color for links, since yellow doesn’t show up well on a white background.

Here is a color palette from Colors on the Web, this time using the “tetradic” combination instead of the previous, monochromatic one.

This shade of blue would make for a good color for links, while still matching our main color.

The blue on the far right would make for a good color for links, while still matching our main color.

Now, only two more colors are needed to round out the palette — the color for the main text background, and the main text color.

You can’t go wrong with black and white for these. But you can also go with an off-white color — the litest possible shade of your main color that you can still see — or an off-black color, or the darkest share of your main color that you can distinguish from black.

And that’s your color palette. Use it everywhere, until just the colors alone remind customers of your brand.

Choosing fonts

The final stage of your visual identity is picking fonts.

For your main body font on the web, pick a sans-serif font that appeals to you. If you’re using standard Web fonts, that means Arial, Helvetica, Verdana, Tahoma or Trebuchet. If you have Google Fonts installed, Open Sans, Roboto, Ubuntu, PT Sans, Droid Sans, Noto Sans and Source Sans Pro are also good alternatives.

The body font on this site is Ubuntu, and not just because I like the operating system.

For your headings, if you want to switch fonts, a good rule of thumb is to pick a serif font, like Times or Georgia. On Google Fonts, you can also look at Droid Serif, Noto Serif, Vollkorn, Bree Serif,  Sanchez, and Domine.

In print, the opposite is true — you would use a serif font for the body, and a smooth sans serif for the headings.

Finally, pick a cute font for your logo font. It can be cursive, like Coca-Cola’s, or futuristic, or completely stylized. Since you’re using in a graphic like a logo, you can use any fonts you’d like, including Google’s entire collection of 635 fonts, or any of the fonts that come with your word processing or graphics programs. Click on the “display” category on Google’s font site for some unusual fonts. You can even type in your own logo text at the top of the page, and see how it will look in any of the fonts.

In the description for each font, Google suggests other fonts that go well with it.

Do not use this fancy font for anything except your logo. All the actual text on your site should be in either your main text font, or in your heading font.

Which of these MetaMarias is the most meta?

Which of these MetaMarias is the most meta?

Finally, one last note about styling text — do not use underlines, do not use italics, use bold extremely sparingly. When you do use a special style, like boldface, do it consistently — for all your headings, for example.

The result should be a site that allows your content to shine through, either the information you’re trying to present, or the graphics that go with your products.

Creating the first ad

Currently, the ads on Hyperica are free. So Minethere Always wanted to create an ad that would draw people to her landing page. The ad needed to use her primary color, and be simple and clear enough to stand out and get her message across.

This was the original graphic on Minethere’s Kitely Market store:

Her old masthead

The ad below uses Open Sans as the main font, with Segoe Script as the fancy font, carried over from the image above.

Miney's terrains Sample Ad -- OpenSans

 

 

The sunset is a public domain photo, colors adjusted to match her color theme. The foreground mountains are just simple cut out shapes.

I set it up as an animated GIF by creating a GIMP image with four text layers and six layers that were just the background. I saved it so that I could edit it later, then merged each of the text layers down with one of the background layers — I alternated the two types of layers then right-clicked on the text layers and chose “Merge Down.” Then I arranged the layers so that the one I wanted to come up first was at the bottom, and exported it as a GIF with “Animation” checked and a 1,000 millisecond delay.

There’s some controversy about which ads work better — animated ones or static ones. I’ve seen reports that say the animated ones do 12 percent better, but for some advertisers, the static ones do better. The answer, of course, is to run both types of ad at the same time and see which one performs better with your customers.

Another approach which might work well with this ad is to have the text be fixed in place, while the sun slowly sets behind it. You know, because time is running out to get the special deal. That’s a little beyond my artistic skill, but Minethere might be able to accomplish it. For example, mentioned actually shooting the visuals for the ad in-world, using an actual island terrain. In that case, she can simply advance the time forward and get actual footage of an in-world sunset.

Then the same images were used to create a new banner for her Kitely Market store.

Miney's terrains Kitely Banner

Brand name

The brand name is only sort of part of the visual identity of a brand, but I want to touch on it for a second anyway.

The ideal brand name should be unique, not a combination of generic worlds.

Say, for example, you offer housekeeping services, and you name your business “Housekeeping Services.” When anyone tries to Google it, lots of other companies offering housekeeping services will come up.  Calling it something like “Jack’s Housekeeping Services” differentiates it from the other companies out there.

That isn’t a problem for Minethere, for now at least, because she dominates the first page of search results for “region creations.” This may change, however, as more people go into the region creation business.

Finally, I want to thank Minethere for being a good sport about all of this! It can’t be fun having someone critique your site, your brand and your advertisements and make you redo them over and over and over again!

maria@hypergridbusiness.com'

Maria Korolov

Maria Korolov is editor and publisher of Hypergrid Business. She has been a journalist for more than twenty years and has worked for the Chicago Tribune, Reuters, and Computerworld and has reported from over a dozen countries, including Russia and China.

  • lol!! It’s been fun for me so all is good;) It is really some good ideas for anyone to look into more. And, yea, I am still tweaking it and just did some more…

  • I didn’t add in the Yellow Pages image because the site changes based on the time of the day (whooo?!) and I couldn’t get the really great shot I wanted when I was writing up the story. But I grabbed it just now.

    The site is well worth scrolling through, because it’s an usual color combination, and they really pull it off: http://www.yellowpages.com/

    The only quibble I have with their site is that when they have white text on a multi-colored background, it’s hard to read. They do have shadowing on the text, which *normally* helps, but the font they chose is so thin and light that it just fades into the background.

    As a rule of thumb, whenever you have light-colored text on a dark-colored background, make it thicker than you normally would, or pick a naturally heavier font.

    Yellow Pages uses Proxima Nova Light — an extra-thin version of an already pretty light font. It’s also a premium font, available from Typekit: https://typekit.com/fonts/proxima-nova

    Proxima Nova is one of the most popular commercial fonts on the Web. If you’re looking for a free alternative, try Montserrat from Google Fonts. http://www.google.com/fonts/specimen/Montserrat

    If you do use Montserrat, Droid Serif is a good match for your headings.

    PT Sans and Open Sans are also good alternatives to Proxima, and have more weights available than Montserrat.

    Here are nice previews of all three fonts:

    http://typecast.com/preview/google/Montserrat

    http://typecast.com/preview/google/PT%20Sans

    http://typecast.com/preview/google/Open%20Sans

  • woopeee! remember me telling you, Maria, that I could not figure out how to remove italics? Well, I just figured it out!![not the dullest knife in the knife block but not the sharpest either]