Market 2: Creating Visuals and a Logo

Market 2

Creating Visuals and a Logo

Learning Objectives:

In this module, you will...

  • Learn about logos, fonts and color schemes
  • Choose a color scheme and fonts for your brand
  • Create a logo for your brand

Color

You’ve already come up with a business name and have a sense of what your business’s ‘personality’ is, so it’s time to make some visuals for your brand! Visuals are how your brand looks to everyone. It includes your logo, color scheme, and font. It’s really important to keep your visuals consistent because it’s how people will identify your brand and recognize it when they see it. To start, let's begin with identifying some colors to help express your brand.

You may have a favorite color, but that doesn’t mean that it is the best color to use for your company’s brand! Did you know that colors have emotions associated with them and make people feel a certain way? This can be different for everyone, but it’s important to consider these emotions when you choose a color scheme for your brand. This next section will talk about color preferences and associations in the United States. Since these association vary in different countries or cultures, you should look them to see what they mean in your country or culture. Here are some examples:

RED Passionate, Aggressive, Important, Revolution
ORANGE Playful, Energetic, Cheap, Vibrancy
YELLOW Happy, Friendly, Warning, Wisdom
GREEN Natural, Stable, Prosperous, Honesty
BLUE Serene, Trustworthy, Inviting, Loyalty
PURPLE Luxurious, Mysterious, Romantic, Inspiration
BROWN Earthy, Sturdy, Rustic
BLACK Powerful, Sophisticated, Edgy, Formality
WHITE Clean, Virtuous, Healthy, Innocence
GRAY Neutral, Formal, Gloomy, Modesty

Watch this video to learn a little more about color psychology:

Choosing colors that complement and build on your brand's "personality" is a huge part of creating visuals for your brand! With the endless possible color combinations that could be used, this choice can be very intimidating. But, you do already have an understanding of your brand's personality, and now you know what emotions and qualities people typically associate with colors.

Activity: Choose a Color

With your team, identify one of the colors in the chart above that best represents your brand's personality. For example, if you want people to identify your product as being exciting and new, you might choose orange as the color that best represents your brand!

Color Schemes

Now you have a color! Congratulations! Don't start making all your visual materials yet, though. Colors tend to work best when they have friends! But, as with people, choosing the right friends is very important! Lucky for you and your chosen color, we have some tips!

To start, let's get a better understanding of how colors work together. You've likely seen a color wheel before, like this:

color-wheel4x

This color wheel includes 3 rows of colors. They are:

  • Hues, which are colors that have names like red, blue, green, orange, etc. These are found in the "middle row" of the color wheel.
  • Tints (hue + white) are found in the outermost row of the color wheel.
  • Shades (hue + black) are found in the innermost row of the color wheel.

As you can see, even though you've chosen a brand color, you'll have to choose a variation of that color—whether it's a fully saturated hue (no tint or shade), is mixed with another color (such as orange-red), or is a tint or shade!

This choice can enhance how well your chosen color expresses your brand's qualities. For example, a highly saturated orange hue might indicate excitement and adventure. If the orange hue is actually yellow-orange, then it will give a lighthearted, happy feeling. However, if you choose a shade of this same yellow-orange, it could look murky or even give a feeling of illness! A tint of the same yellow-orange will look bright and airy.

While making this choice, it's best to keep in mind how your color will work with others that you've chosen. Colors are usually paired in a handful of different ways, but here are the basics:

Complementary color combinations pair a color with it's exact opposite on the color wheel, as shown below. These can be the most vibrant color combinations, especially if both colors are fully saturated. These can be overwhelming when used in large doses, but can bring attention to things that you want to stand out.
comp2x

Split-Complementary color combinations are similar to complementary color schemes, except that one of the colors is replaced by the two adjacent to it on either side. This reduces the tension that can be present in complementary color schemes, while still having a lot of contrast.

slip-comp2x

Analogous color combinations are colors that sit next to each other on the color wheel. These combinations help give a sense of serenity and calm. However, when using these you'll need to be sure to create enough contrast so that your brand visuals are easy to read.

analogous2x

Triadic color combinations are made of 3 colors that are equally spaced on the color wheel. Even if you use tints or shades, these color combinations can be very bold and energetic.

triadic2x

Activity: Choose a Color Scheme

With your teammates, choose a color scheme. Use the color that you chose in the last activity as your primary color, from which all other colors will be chosen on the color wheel. Remember to consider different tints and shades, and keep in mind the meaning of the colors as well as which ones look nice together! Here are a few resources that can help make choosing colors easy:

Don’t worry about choosing a color that isn’t available in the presets in App Inventor. There will be instructions below on how to add new colors to App Inventor.

Tip: Stuck? Start with a photo! Find or take a photograph of something that helps identify your brand. It could be a location, an object, or anything else! This blog post has great examples!

Fonts

Fonts are also really important when establishing your visual identity. The examples we give apply most directly to fonts with Latin character sets (character sets for writing in English, Spanish, French, etc.), but some of the basic principles may be useful for non-latin languages (Arabic, Hindi, Chinese, etc.).

Just like colors, a font, or the way that text looks, can help express your brand's identity. Every font has a personality and historic meaning/context that people recognize and associate with it, even if they aren't aware of it! There are hundreds of fonts that you can choose from, so it helps to know a little bit about them in order to make the best choice. This section will go through some font basics to help you choose a fonts! Can you tell the difference between the two sets of letters below?

merriweather-serif2x pt-serif2x tisa-serif2x

 These red marks on these letters are called serifs, and fonts that have them are called serif fonts. It's fun to think of those extra marks as being little feet!

merriweather-sans2x pt-sans2x tisa-sans2x

 Fonts that don't have serifs are called sans-serifs.

Serif Fonts

The extra marks at the end of serif letters can look really different in different fonts. Some serif fonts have really small feet like Times New Roman, and some have really big feet, like this slab font! Take a look through the fonts you have on your computer. Can you spot any fonts that have serifs?

Serif fonts give a feeling of history, and often authority or formality. This is for a very good reason—the very first printed letters were a type of serif called blackletter! If you choose a serif font, you can expect it to carry some of this history with it, and a feeling of wisdom and age. However, there are some exceptions, including a family of fonts called slab-serifs, which are a much more recent development and so they carry some character similarities shared with sans-serifs.

Sans-Serif Fonts

Sans-serif fonts are a much more recent family. They represent youth and a new way of thinking. They were first developed to meet the needs of modern advertising and readability at a variety of sizes and distances. These are most likely what you'll choose for your brand. There are a variety of choices among sans-serif fonts. Look through your computer to find some that you like!

Here are some resources if you're curious to learn more:

Activity: Choose a Font(s)

Now, get ready to choose a font (or two)!  Here are some steps to help you pick out the best fonts for your brand with your team.

  1. Even if you don't have a thorough understanding of typography, you can likely identify fonts that express your brand's identity. A great way to do this is to test different fonts on a neutral phrase or word and see what voice it seems to have. For example, a thick, heavy font with tightly spaced letters such as Impact might speak in a loud voice, like a shout! Or, a thin and delicate font like Syncopate might seem to talk with a sophisticated whisper. List a few fonts that feel right for your brand. Try not to let your personal favorites influence your choice.
  2. Now, let's test the fonts you chose for readability. Test fonts in the words you want to at different sizes to make sure they are readable. Are there any that are hard to read in large sizes from a distance? Rule these out. Find the one font that works best. This will be your display font, used for headers and/or the logotype.
  3. Now, you'll search for a highly readable font for body text, or large sections of type. You'll want to be very careful in selecting a body text that complements your display text as fonts can clash just like colors can! Here are a few quick tips:
    1. Serifs can often be paired with sans-serifs successfully. Think of these as the type version of complementary colors—opposites attract!
    2. Contrast is good! Avoid pairing fonts that look too similar.
    3. Imagine the "voice" that the font speaks with, just like you did with the display font. Does it complement your brand and the display font?
    4. Consider readability. A font chosen for body text has to be readable at small sizes in paragraph form. Test this just like you did for the display font.
    5. Test the font next to your display font, just as you think it will be shown in your app.
    6. Take a look at the font choices App Inventor includes! If you're able to use one of these, it will make coding your app much easier!

Need some help? Here are a few great resources:

Once you've decided on a font or two, you may need to install them. Watch this video for Windows 10 or this video for Mac OS X.

Activity: Brainstorm a Logo

For this activity, each team member will need several small pieces of paper or index cards.

  1. Brainstorm some images that you think represent the problem you are trying to solve. Think about the people involved, the environment that is affected, and the solution you are proposing. Look at pictures on the internet as well as in books, magazines and anything else you have around you!
  2. Take 15 minutes for each team member to draw quick sketches in pen or pencil of what the logo might look like. The logo can be any of the types shown in the chart above (wordmark, icon, or combination). Try to make the sketches as quickly as possible, without pausing to think. Just draw and see what happens!
  3. After 15 minutes you and your teammates should have a large pile of sketches. If not, repeat step 1.
    • Together, look over the sketches. Choose a handful that are promising, or have qualities that could even be combined to create a stronger logo. Talk over these and sketch out 5 more logo ideas, this time more carefully and keeping in mind the way you want your logo to be used:Keep your logo simple. This will make it easy to discern at large and small sizes.
    • Think about how your logo will look on your app and where it will go.
    • Logos express an identity, so think about the things that define your business
    • Ask yourself, “What do I want people to think of when they see this logo?”
  • Try designing one or more of the logos on the computer. You can try using this free logo design tool!

Once you are done, send your logo, color scheme and font choice to your mentor!

Applying to your App

Now that you've choose a color scheme, fonts and created a logo, it's time to apply these to your app! Try different placements of your logo and colors to see what works best.

Tips for adding colors in App Inventor

Don’t worry if the colors you choose aren’t in App Inventor’s presets. Here’s how to make a new color in App Inventor: Make Custom Colors in App Inventor.  To make new colors in App Inventor, you’ll need to know the RBG value of the color. You may already have this value from the color scheme tools above, but if you don’t, use this tool to find out the RGB values of your colors: RGB Color Finder.

It is helpful to save the colors you choose as variables so you can use them throughout your app! Here’s an example of how to do that!

screen-shot-2016-11-09-at-4-27-53-pm

Another way to add colors in App inventor is by referring to this color list where a handful of colors are listed as number codes. We used the color code -8388652 to turn a button the color aquamarine:

color list blocks

Here is how our button looked on our display:

image18

Tips for adding fonts in App Inventor

Fonts can be trickier to add in App Inventor. Right now, App Inventor gives you a choice of three fonts, a serif, a sans-serif, and monospaced. If you leave the font as “default’ it will be the sans-serif. An easy way to use a custom font is to upload a picture of your text in the font you want. This works best for headlines and titles.

For large amounts of small text it will be easier to pick one of App Inventor’s presets. If you find yourself in this situation, test which App Inventor preset looks best with your headline and logo!

For example, we took a screenshot of "Headline" in our display font, Eagle Book, and then uploaded it in a horizontal arrangement next to our logo. We adjusted the height and width of the horizontal arrangement until it looked how we wanted! We then choose the default serif font to go along with our title.

Tip: To get some extra space above the logo and title, we added a blank label at the top of the screen and adjusted the size of the text in it until we got the amount of space we wanted.

image05-heading_0000_heading

↑ This text is an image,
which we placed into the app ↓

image05-edit

Reflection

Congratulations on making the visuals for your brand! The visuals will be a huge part of what people think of when they see your app! Complete the reflection activity below before moving on!

Show your brand visuals to someone who isn’t your mentor or on your team. Ask them what your logo, color scheme and font choices make them think of. Does their answer make sense with your brand? If it doesn’t, what changes could you make to have your visuals align more the goals of your company?

Additional Resources:

Bonus Section

Colors for Programmers

If someone told you that a color is “light blue green”, you would have an idea of the color they are talking about. However, computers can’t understand this, so they rely on something called a RGB values to know what a color is.

An RGB value uses three numbers to describe a color to a computer. The first number tells the computer how intense the reds are, the second tells how intense the greens are, and the third how intense the blues are. The numbers can be anywhere between 0 and 225. Let’s look at some examples!

 

Black

(0,0,0)

White

(255,255,255)

Gray

(128,128,128)

Red

(255,0,0)

Lime

(0,255,0)

Blue

(0,0,255)

Yellow

(255,255,0)

Purple

(128,0,128)

Teal

(0,128,128)

Green

(0,128,0)

Navy

(0,0,128)

Maroon

(128,0,0)