24 Weeks of Windows Phone Design Index
Good week everyone! Last week I traveled to Germany to speak at M-Days. It was a quick visit but super fun event with tons of people who participate in different segments of the Mobile industry. I learned a lot about the staggering growth expected for everything related to mobile, phones, tablets, devices. Because of the trip I didn’t have enough time to write the next article called 6 - Translating Information Architecture into a Windows Phone App Flow. So instead of failing at my commitment to post every week I decided to produce the 15 - Designing Windows Phone Icons post. How naive! this post turned out to be one of the longest ones! (and I’ve wrote some long posts already!) - so here it goes.
Designing Windows Phone Icons is one of those things that would seem straightforward but instead it can be something actually quite challenging for different reasons. Compared to other aspects of Windows Phone, designing icons is definitely more of an art than a set of rules or guidelines. We’ll certainly cover the guidelines but ultimately there will be some creative/artistic aspects to creating great icons. This applies not only to Windows Phone for any other platform. Designing icons for iPhone, Android or Windows is always a whole specialty on its own. Creating icons is such a specialty that there are companies and designers who are devoted 100% to designing icons like the popular Icon Factory.
Windows has a long tradition with icons since its inception and the Windows team has provided guidance for previous version of Windows. Windows 7 icon design basically shows the highest point in skeuomorphism (using physical world metaphors with realism to illustrate abstract concepts) for Microsoft. From there, we are now going to a very clean and minimal style with Metro.
Let me provide you with a useful resource right off the bat before we start going deeper into the topic of the day. A designer in the Studio provided me with a cheat sheet that includes different tips for designing Metro icons. This is the designer that has drafted most of the icons in the Phone or has helped other designers in the Studio do it as well. Here are a few of his tips:
- All icons are monochrome
- Use knock outs instead of drop shadows
- Transparency instead of shade
- Chisel arrow heads
- Use square corners instead of rounded
- Use square end caps instead of rounded
And here is a visual chart with his tips:
You know how I always take things deep right? 
So it won’t surprise you I will now want to talk to you a little about design history and where Metro icon style comes from. I think this will give you some context and will eventually enable you as a developer to look for the right designers to partner with. It should also help designers to pin point the visual style used in Metro for icons.
We’ve mentioned before that Metro is influenced by the International Typographic Style or Swiss Style which in turn learned also from the Bauhaus school of Architecture and Design. This whole movement was broad and global. With the continued globalization of the world in the early 20th century, many people realized that more common visual languages were needed to communicate with people of all sorts of different cultures and backgrounds.
Otto Neurath, a philosopher, sociologist and political economist defined the thinking behind something called the Isotype. His goal was to share political, economic and social data to people even when these were not experts on these disciplines or couldn’t even read. He is what I’d call, the father of Infographics - or at least the first one who really kicked of the idea of conveying complex scientific and economic/social data using only images. Neurath’s theories were put in practice when he partnered with Gerd Arntz, a designer. Arntz helped visualize Neurath’s ideas and craft an Isotype Collection that is now regarded as the early origins of all international communication, urban signage and transportation graphic iconography.
In Arntz Isotypes you can see how the concept of abstraction was present. Communicating a concept with as few elements as possible. No use of regional or extremely local aspects, textures or symbols but instead looking into represent concepts by observing a global understanding.
The Pictographic Corporation, founded by Rudolf Modley - designer, was the American wing of the thoughts and visual communication language that Neurath and Arntz started in Europe. Modley’s work, which represents American economics/communication aspects, demonstrates the same abstract, global visual expression from Neurath/Arntz.
One interesting visual aspect that Isotypes used was contrast. A masterful use of this tool allowed designers to produce and convey complex graphics in a single color. This would not only strengthen the idea of minimalism and clean design but it would also make printing cheaper. There was a strong social understanding from this visual design school of thought.
I found this concept of contrast has been applied in a couple different manifestations: Infographics and Illustrations.
From those years, 30s-40s, this visual language spread out throughout the world. The Second World War and its conclusion increased the need for a global language. Society had never had so many people traveling throughout the world. People from Asia came to America, and from America to Europe. People from Europe went to Africa, and from Africa to Asia. Globalization. With people from different cultures and languages, governments had the need to create universal visual languages to enable visitors to major cities like Paris, New York, London, Tokyo, Mexico, Munich. Throughout these years many designers addressed and produced symbols (icons) to address this need. Producing large amounts of graphics to convey instructions, warnings, guidance and information in communications, transportation, society/politics/economics and even sports primarily driven by the Olympics.
In 1974 the United States Department of Transportation (DOT) realized that just within the U.S, there were many different isotype collections being used. Multiple versions coming from different sources. Most of them would address the same concepts, for example, 21 different icons were found for Coffee Shop being used across different cities in the U.S.
The DOT commissioned AIGA (formerly the American Institute for Graphic Arts) to produce a single (”one rules all”) symbol (icon) catalog that address the visual needs across U.S. cities. This would basically unify the visual language in the country. It’s kind of ironic that a design style that’s supposed to convey universal concepts had SO MANY different versions of doing so! 
This topic could take us into a deep deep conversation about Metro (how there are many ways of doing things , not just one) but I’ll skip that discussion for now A number of designers including Massimo Vignelli, one of the most influential designers in the U.S. who brought the International Typographic Style to this continent.
This team of designers performed an extensive research and catalogued a huge number of symbols (icon libraries) used by different cities in the U.S. and other countries like Japan, France and the UK. Then they designed the “one rules all” symbol collection which is now used across the U.S. and many other countries. This symbol collection is available free of use in the AIGA website. Many of these icons would work great as Metro icons… some of them might not be readable at 26 x 26 pixels in an app bar but for in-app icons yeah, they could work.
This effort gave birth to what Ellen Lupton, prolific type and graphic designer described as “The Helvetica Man“. It is interesting to find similarities with Helvetica Man and with what we all know as Stick Figure which is kind of the simplest way to represent a person. Egyptians were already using this symbol back in the day. This just reinforces the lesson of today’s post: Abstraction. That’s all. See you next week.
…
Ok, not enough let’s go deeper
But really, when designing Metro icons we are not thinking too different from those Egyptians or from our friends Otto, Gerd or Rudolf and even from Master Vignelli. Abstraction… how can I represent this concept with the minimum set of visual elements possible and in a way that as many people from anywhere around the world can understand?
That’s the same question we have to ask ourselves every time we design an icon for a Metro app (same applies to Windows and Windows Phone of course).
The goal behind these design style is to illustrate a concept in the most abstract and universal way possible. Think of a taxi cab. Taxi cabs are different all over the world - in some places they are yellow and black, others are red and white, others are black. Some have a tiled texture, others have local ornaments depending on the culture. So creating a icons in 3D, with textures and details could make the icon “too local”. By abstracting those details and leaving only the essence of what a taxi cab is, we are able to communicate more globally. This is inline with the Metro principle, Content, Not Chrome. By reducing details and visual weight from the iconography in the phone we release our user’s eyes to focus more on the content - not the icons. Icons, along with typography, motion, and other UI controls form a sort of thing veil letting the content stand out. Like we’ve said before, this icon style is simply a different style from what we see in iPhone or even Windows XP or Windows 7. This style follows different design principles.
Here are some Metro icons to be used in the App Bar or within your App as UI elements. You will immediately recognize the same design style behind these compared to the work of the designers described above.
Let’s now jump from History Channel to DIY (Do it Yourself) Channel!
Designing icons for Windows Phone
Talking about Windows Phone icons, let’s start by defining the different contexts and scope in which “icons” can exist in Windows Phone:
Branding
- Start Screen Tiles
- Application Tiles
- Splash Screen
- In-App Branding
- Marketplace
User Interface
- App Bar
- Status Bar
- In-App Icons
As you can see from this list, there’s a lot to talk about but I can see a couple big different areas or contexts in which we need to design icons:
1. Branding of your app (we will cover this in a future post!)
2. User Interface Icons (below…)
Designing icons for your app is part of defining the identity of your app itself, your brand, your value proposition and even business model. Branding is a whole big area of conversation. It’s also about color, style, value proposition, identity and others aspects. We’ll talk about Branding in a future post.
So in this post I will focus on User Interface icons, meaning we’ll explore the following 3 types of icons:
1. Status Bar
2. App bar
3. In-App (UI) Icons
Status Bar Icons
Let’s start with status bar icons. The key takeaway here is there is no take away J You can’t do anything with status bar icons. They are pre-defined. Unchangeable. Fixed. So perhaps that’s the take away. There is no way to design a custom icon and put it in the status bar. The only thing we can do with the status bar as a whole is hide it while in our app (or show it). The status bar is 32 pixels high so a good tip is not to place any critical UI elements of your app up there so that if the user taps the upper portion of the screen to reveal the status bar, your UI gets obscured. 32 pixels is not a lot so you will usually not have this problem with UI controls but sometimes you want to take precaution depending on how you are incorporating branding or header-like elements up there. You might want to leave a buffer of 32 pixels or even push the branding/header down 32 pixels when the status bar is revealed.
This is a good article that describes every icon in the status bar.
App Bar Icons
Let’s start by killing a myth here. From a purist point of view, those icons we see in the Windows Phone app bar are actually buttons. I’m being a purist here. We tend to think that icons in Metro and Windows Phone need that circle around them. The reality is that the circle is a button control and not part of the icon itself. The icon is just the graphic. So formally speaking these are called App Bar Icon Button. Icon Buttons exist mainly in the app bar but you can also use them within the app space. Learning more about the app bar in general can help you understand better the context in which buttons exist. Jeff Blankenburg’s 31 Days of Windows Phone also has a good article on App Bar.
Icon Buttons in the app bar also use a small text label underneath them. This label is hidden until the user taps the ellipsis to expand the app bar. Theory says the icons should be self-explanatory but a label, which in this case acts like a website tooltip can be useful too.
The Best Metro Icon Design Tutorial - Templarian
The best Metro icon design tutorial out there is from Austin Andrews. This is a must follow designer - Austin shows us how to create an icon following the right dimensions (approximately 26 x 26 pixels for the icon which will be hosted in a 48 x 48 pixels circular button) and the right color (white). Note that we call it approximately 26 x 26 pixels because depending on the proportion of your icon, more vertical like a clip or more horizontal like say, a ruler, you might actually go a bit (2 or 3 pixels) bigger than the 26 either horizontally or vertically. You do not need to create a black version of the icons for the Dark Theme because the system will automatically invert the colors. Austin uses Expression Design for this tutorial. I love Expression Design and it is my number one tool. It’s like a mini Adobe Illustrator but the color picker is so much better because it’s big and always visible.
I really want to highlight Austin’s contributions to the Metro community here. Not only he provided an amazing tutorial but he has created a library of 300+ icons for you to use in your projects! You can even send him a tweet and he’ll create an icon and include in the next release of the library (just make sure the icon doesn’t already exist J).
Our popular friend Kirupa, Flash community God and Expression Blend Program Manager also has a good tutorial on creating Windows Phone icons with Adobe Fireworks. I personally don’t love the ‘k’ in the example (needs more weight) but nevertheless a useful tutorial.
The MSDN Library provides guidance on icon design as well. Here is some key design guidance:
Icon images should be 48 x 48 pixels in size. The foreground graphic for the button should fit in a 26 x 26 area in the center of the image so that it does not overlap the circle.
The circle displayed on each button is drawn by the Application Bar and should not be included in the source image.
Icon images should use a white foreground on a transparent background using an alpha channel. Windows Phone automatically colors the icon according to the theme selection (light or dark), and colored icons can cause this effect to display unpredictably.
Do not create a button that navigates backward in the page stack. All Windows Phones have a dedicated hardware Back button that should be used for backward navigation.
Keep Icon Button labels as short as possible. If the language of the device is English, labels appear on only one line, and are truncated if necessary.
Choose icons that have clear meanings when the phone is rotated. When the phone is in landscape orientation, the Application Bar appears on the side of the screen vertically. The icon buttons are rotated so that they appear upright to the user. It is possible for icon meanings to be confused when this occurs, particularly if two of the icons are mirror images of each other such as << and >>.
One thing to keep in mind here is that these guidelines kind of mix tips for icons and for icon buttons - they are not the same thing 
but useful anyways.
In-App User Interface Icons
The third way of using icons inside of a Windows Phone app is within the UI itself. I’d say we can classify the use of icons in:
1 - Notifications or Idle Icons
2 - Interactive Objects (usually inside of buttons or list items).
The same design principles reviewed in the previous section apply here except you are not restricted by a 26 x 26 pixel size because since you are stepping outside of the app bar well, size doesn’t matter. Note however that the 26 x 26 guideline is still “recommended” as you will see in the following examples. You can however depending on your design make icons bigger if you wanna push Metro beyond what comes out of the box
Notification or Idle Icons
These are icons that communicate a visual message without being actionable. They are not buttons or other interactive control - they are simply graphics. These icons will usually be floating without any container around them. They can piggy back on some other interactive element to provide this object with context. For example an email will display a clip icon indicating this item has an attachment but the icon itself is not tappable (clickable?) - the email item is.
Interactive Objects
Icons can also exist as part of interactive objects. Here the icons can sit to the sides, top or below an interactive element like a button or a listbox item. Check out Facebook for example which uses the icons people have grown to know well in their website next to their main Panorama menu. Icons could also exist inside of icon buttons. Icon buttons are those little 48 x 48 circular buttons we use in the app bar. Well, we can also use those outside of the app bar and within the app itself. In Metro you will always tend to wrap an icon that is meant to be interactive within a container of some sort to make it “feel clickable”. This is more of a guideline than a rule. I can see how you could create some nice apps using big tappable icons without a container.
One of the things to consider when using icons in your app either as notifications or as part of interactive objects is to make sure you are adapting to the user theme (light or dark) if you app is designed to respect this user choice. If you have decided to make your app not follow the user theme choice, that’s fine, you won’t have to make your icons adapt. If the theme is light then you want to make your icons black. If the theme is dark then the icons should be white. Here are a couple articles that will explain more how to do this (mostly for Developers).
Reacting to Themes to set the right icons…
How to: Change Icon Buttons and Menu Items Dynamically for Windows Phone
Tip: Do not use Tiles inside of apps! This is a classic. Everyone loves Tiles. I know I do. But we always see folks using Tiles as “tab controls” or simply as “icons”… so you’d have the icon inside a square (like a Tile)… No, let’s not that. Tiles are Tiles, and they are meant to exist “outside of the app context”. That’s precisely their value. So, remember, no tiles inside of apps, even if it’s tempting. Icons are usually used floating nicely without any borders or containers unless they exist within buttons.
Update: Someone named ‘contextfree’ left me a comment on this post with 3 really good things to consider if you do want to use tiles in your app:
- Do the tiles represent “content” that someone might care about? They shouldn’t be used for navigation or tools.
- Is the page with the tiles a kind of sub-Start-screen for the kinds of content your app deals with?
- Can you actually pin the tiles to the Start screen as secondary tiles? (If it doesn’t make sense to implement a pin-to-start feature for your tiles, it probably doesn’t make sense to present them as “tiles” to begin with.)
Here are a bunch of examples with annotations to highlight the type of icons we are using within these apps. Remember there are basically two types of In App Icons: Notifications and Interactive Objects.
Click Image for many more examples of icons in Windows Phone apps…
Tools to create icons for Windows Phone
App bar icons are required in PNG format (with transparency) so they are bitmaps, not vectors. Vector based icons simply don’t work in the app bar control. I received a question in Twitter about whether it was a good or bad idea to represent the user accent color in the icon buttons in the app bar. From a Metro point of view there’ s nothing wrong with changing the color of the icons to something other than white or black (look at Twitter for example). You provide icons in white with transparency (PNG) and then you can specify the foreground color of the App Bar - this foreground color will be applied to your icons magically! You could bind this foreground color to the Phone accent color or even pick a custom color based on your branding (i.e. Twitter app) - thanks @Asmodai42 for the clarification here!
Because of this the tools you will need for creating Windows Phone icons need to produce bitmap graphics which basically any graphic design tool will do. Now, here’s something important: even though the icons are to be saved as PNGs (bitmaps), I strongly recommend you use a vector graphic design tool to create them like Illustrator or Expression Design. Photoshop and Fireworks also support vector paths. The goal is to create your icons in vectors so you can easily scale them without losing quality. Once you are ready export them as PNGs. Creating your icons with vectors is like preserving the source code of an app - you can always go back and make any changes you want.
If you are a developer and don’t have these tools you might want to use Paint .NET (designers will cringe with this ) - it’s all good as long as you can adhere to the specs, guidelines and style we’ve described here.
Resources
Icons are one of those things that are produced by the thousands. We’ve found many free Metro icon libraries and some for sale. Here is a list of some of these libraries and I’m placing a little note on what I think about these. If you know of others please leave me a comment. If you disagree with my review let me know too J
Some of my comments will actually help you I think in getting a better idea of what’s good and what’s bad.
Windows Phone SDK - The SDK includes a number of icons produced by the Windows Phone Design Studio. I believe we have nearly 40 of them. These are great to use in many scenarios and in some cases can be modified. The icons also get automatically exposed in Expression Blend under Common Properties | IconUri Property (check out Kirupa’s tutorial). The physical path for the icons in your PC is: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons
Templarian - Amazing collection - amazing contribution to the community. @templarian
http://idsgn.org/posts/helveticons/ Let’s start with quality. These are simply to notch and also $279 USD No comments. They are just awesome.
http://www.iconspedia.com/search/windows%20phone%207/ Many good icons but watch out for some that have too much density and when scaled down for app bar usage will not be readable. Do not use icons with so much going on: Example 1 Example 2 Example 3. Another thing with these icons is that they are provided in blue and black. Ideally they be provided only in white. You don’t really need blue. Second thing I notice is these are all provided with a circle. The circle should not exist. Remember the icon is just an icon - a lot of people think Metro icons always need a circle but no, that is never the case. The App bar icon button are circle buttons with an icon inside. Finally the other issue I see is these icons are provided as PNGs which means you will have to edit them to remove the circle and change them to white. It’s not like it’s a lot of work but vector icons would be better (remember, create icons in vectors and save them as PNGs). All this said, showing the icons within a circle does help providing context on how the icons will look.
http://www.iconsforwindows8.com/free-windows-metro-icons/index.htm These are free icons that are good. I noticed a consistent issue when centering the icon in the circle (through remember the circle shouldn’t be there). If this misalignment is caused by some extra transparent pixels in the icons then that could be a problem when you add these to your app bar. It is better not to use the arrow icons in this collection. The arrows used in this set are not chiseled so formally speaking they are not Metro. You can always check icons against the AIGA collection which is the style we follow in Metro.
http://yankoa.deviantart.com/art/MetroDroid-200340391 I understand these are not really for Windows Phone - don’t get confused using these for Metro. Gradients and shadows, not Metro
http://yankoa.deviantart.com/art/MetroStation-183210118 These are some really good icons. Use these J There is one icon for a CD that when previewed showed like it was using two colors - black and gray but no, it was just black and semitransparent black. That’s perfect! You never wanna use two colors, only one - but you can use transparency. Good job!
http://metro.windowswiki.info/ Good icons. They look so similar to the ones we provide in the SDK that I wonder if they came from there J
http://graphicriver.net/item/metro-icons/1399780 Really good icons - for sale at $8. Provided in multiple formats so you can edit them if needed. While they present the icons in a circle they do so to show them in context of being used in an app bar.
http://msdn.microsoft.com/ja-jp/windowsphone/hh544699 These icons are provided by Microsoft but unfortunately they are not Metro icons. Even the icons shown there with a single “gray” color seem to come simply from changing colors in one of the full colored icons and not optimized to work well on small icon buttons in the app bar. Do not use these icons for app bar buttons or for in-app Metro UIs. These graphics are great for games but not Metro apps.
Icons and Localization
Turns out that text is not the only thing we need to localize. In many cases icons or graphics can have different meanings in different locales. Some interpretations of icons can end up being pretty rude! J So here are some tips for you to consider when choosing icons for apps that will be used in multiple countries and cultures.
Question for you: During the Windows Phone Design Day tour I heard at least a couple different comments from people saying that X or Y icon meant something different in China, India or Norway… do you guys have examples of these type of icons that you know have a different meaning (perhaps a bad one) in other countries? Drop me a comment here please J
Icons using fingers such as an OK sign or V-sign may mean different things to different cultures. Our Western symbols do not always mean the same abroad. An oft cited example is the representation of the house referring to a home page, or a letterbox to mail. The use of animals in logos can cause embarrassment and further problems. For example, pigs are considered unclean in the Middle East and cows as holy in India.
Avoid single-letter concepts, as confusion will be introduced through translation
Avoid graphic elements with text
Avoid graphics depicting human body elements and body language
Avoid graphics depicting humor, puns, and slang
Avoid graphics depicting physical environments
Avoid graphics depicting ethnic, racial, political, and religious environments
Avoid graphics depicting gender-specific elements
Avoid graphics depicting images of animals
Avoid graphics depicting sexual and violent elements
Avoid graphics depicting regional conventions, such as reading direction, date/time, and monetary elements
Avoid text and numbers in icons and images because they require localization.
Source
This is a good paper with more details on localizing images, considering cultural aspects and visual metaphors.
