in Apps

How to make an app logo that doesn’t suck

storelogo.scale-180storelogo.scale-180storelogo.scale-180storelogo.scale-180storelogo.scale-180storelogo.scale-180

Your app logo is the impression you give people of your app the first time they find it, and every time they launch it. First you need to come up with a brand, a good concept that fits it, make it look good, and then you need to save it to all of the right sizes for tiles, splash screens, store logos, badge and notification logos. Finally, if you want it to look crisp and not blurry on high DPI screens like the Surface 2 and the devices of the future, you need to create images for each of the scale factors. For many apps, that can be as many as 30 images!

In this post, we’ll walk through creating an app logo from beginning to end for a fictional app, Coffee Finder, that lets you find the best coffee shops in your local area. In three acts, I’ll share some of my experience creating logos for the apps I’ve created, and my experience on the Windows product group making logos look good on high DPI screens. We’ll talk through how to come up with a concept, design it using SVG vector graphics, and finally we’ll use an app I wrote, Vector, to automate the export of all the different image sizes for Windows 8.

Act 1: Sketch out a concept

Many of us independent app devs don’t have a full time designers on staff that we can rely on to create our app’s assets for us. Usually, it is up to us to put something together. Just because you’re not an expert graphic designer, or can’t afford one doesn’t mean it’s not worth a little bit of your time thinking through the details of your logo.

Finding inspiration

A good place to start is to look for inspiration. Look at the apps with logos you like and other brands that stand out to you. System glyphs are also a great place to look for inspiration, as they are often designed by professionals, iconic, which follows the Windows 8 design style, and most users will recognize them from seeing them elsewhere. The Windows 8 AppBar reference also, has a list of glyphs and their meanings.

image
System glyphs are a great place to look for inspiration. In Word, go to Insert > Symbol

A note on brand differentiation

When you’re designing your logo you’re essentially designing the brand for your app. So you’ll have a natural inclination to want to differentiate your logo to help position your brand from other apps in the store. There’s nothing wrong with differentiation, but as with most aspects of design, it’s often harder to practice reduction and constraint than it is to add more and more to your design.

Rather than adding more color, gradients, borders and glyphs, think about what is absolutely essential to hint at your app’s unique value. Any additional points of differentiation you add are likely to dilute your brand and hurt your design. If you don’t believe me, take a look at some of the most memorable and iconic brands.

Most of your app’s differentiation will come from having a great experience inside of the app. The logo is just the signpost that reminds people of what’s inside.

Think it through

Before you start drawing out sketches for what your logo should look like, take the time to write down some of your thoughts about the app:

  1. What is the essence of what you’re trying to convey with your logo?
  2. What is the one image or metaphor that people should associate with your app?
  3. What visual style are you looking for (iconic glyphs, photography, rendered, whimsy, typography, etc.) ?

clip_image001[8]

Sketch out a few ideas

After you have a sense of the concepts that you want to convey and some potential visual elements to best represent them, draw a few sketchy pictures to play with the ideas. When you’re looking at the pictures, think about which ones best represent the concept, as well as represent the brand you want to create.

clip_image001[12]

Evaluate and re-sketch

You can make as many or as few sketches as you want to, or have time to make, and then take the time to evaluate them. In this case we only had time for a few: different coffee cups, a map, and an old-timey espresso machine. I like how recognizable the coffee cups are, and the map conveys the local concept. The espresso machine is the coolest image, but not everyone will recognize it as a coffee machine.

After evaluating, make a few more sketches that take the elements that you like about the different sketches and brings them together. In our case, we’re going to use the nice coffee cup, and tie that into the map.

clip_image001[16]

Act 2: Design your vector art

Now that we have a concept drawn that we like and some inspiration, the next step is to translate our sketch into something digital that we can manipulate. Rather than drawing it in MSPaint, or Photoshop, we want to use a vector drawing tool, like Adobe Illustrator. Using vector graphics allows us to to create a drawing that can be any size without losing any fidelity.

image

I use free vector drawing tool called InkScape. It’s free, has many of the tools that Illustrator has, let’s you save to SVG. If you’ve used Illustrator, PowerPoint or other design tool, it should be familiar to you.

Build your basic primitive shapes

image

I usually start by pasting in some sort of bitmap to trace as a starting point. In this case, we’ll just use our sketch. Then, build up your primitive shapes on top of it. Here, I build the basic cup shape out of some ovals and a trapezoid. Don’t get too fancy here, just try to establish the basics.

image

Tweak the paths to make it look right

One of the coolest parts of vector graphics is that you can take any object and turn it into a path, who’s individual points can be edited. You can even take multiple paths and merge them together in one simplified path. In order to make our cup lid look right, we’ll convert it into a path, and edit the lines.

image
With your objects selected, choose object to path.

When you have multiple paths, you can then use union to merge them into one simplified path. Then you can go ahead and tweak the path vertices to make the cup shape.

image

Simplify, then add only what is needed

cup image  path5175  rect4199

Now that we have our shape created, we want to reduce and flatten it to it’s most elemental shape, by removing all the distractions and all the colors. In this case, we’ll just make it one color.

Then, we go back and add only what is necessary, and nothing more, to make the shape recognizable. In the case of the cup, we’ll add a few lines to show the lid, and the drink hole.

Once we finish the coffee cup cup concept, we need to add the map to reflect the local concept. Adding a map behind the cup could be possible, but it may add too much clutter. Instead, we’ll add the map glyph.

Invert the color and save

It’s important that you’re logo work on any background with potentially different colors, from tiles, to splash screens, to being embedded in your app. For this reason, you want to make sure the foreground color is white, and the background is transparent so it can work on any background.

rect5335

Finally, just go ahead and save your logo as a .svg file. The SVG format will embed all of your design primative information and allow for it to be scaled to any size without losing any fidelity.

image

Act 3: Export ALL THE IMAGES

Now that we have our SVG that we’ve designed to work on any background, our next step is to export it to all of the sizes for our Windows 8 app. Inkscape has some great tools for exporting PNGs at different sizes, but it can be a lot of manual work to get all of your images exported at the right size and aspect ratio for Windows 8.

Vector for Windows 8 is your friend

Vector to the recue. After made one app and I went through the arduous process of exporting all of the tile and splash screen images to the right sizes, I decided to make an app to automate that for me. Vector is a super simple app, that lets you take any SVG and export up to 30 different PNG files for your Windows 8 assets.

promo4
WindowsStore_badge_en_English_Green_large_120x462

Place your logo on the color plate

Exporting all the images in Vector is super easy. First, just click, choose svg, and pick your SVG file using the file picker. In this case we’ll choose cup.svg. The logo auto-centers itself on the color plate, but you can use your mouse or touch to place it how you want it. I usually keep it centered, and make it a bit bigger.

Screenshot (48)

Preview your background color

Even though your exported images won’t contain any color, you can look at your logo on different background colors using the background color button. Once you find a color you like, you can take the color HEX value and paste it directly into your app manifest.

Screenshot (50)

Choose export settings

The next step is to choose which logo sizes you want exported in the settings pane. I usually just check them all, and only copy over the ones I need. Note: it also provides an option to ‘export all scales.’ This option takes your SVG file and exports the scale-140 and scale-180 images that will be used on high pixel density screens like the Surface 2.

screenshot_01282014_135304

Once your settings are set, click the export button and choose a folder to export all of your images. All of your images will be exported to a folder there with the same name as your SVG file.

Add your images to your app

Once your files are exported, you just need to drag and drop them into your images folder in your Visual Studio solution.

image

When you are editing your application manifest file in Visual Studio, you can just type the name of the file without the scale-140, and it will auto-populate all of the images for that image type for you.

image

All done

Now we have a logo that doesn’t suck for our Coffee Finder app! Feel free to download the svg file and all the exported images here. Somebody might have to go make an app for it. I’d love to hear about what works for you when you create your app logos. Go ahead and add a comment or tweet me @dwcares.

Screenshot (51)

Update: Get feedback

1/29/2014: Based on feedback, we made the logo better. See how: Get feedback on your logo

Screenshot56.png

Write a Comment

Comment