One of my favorite steps in the app development lifecycle is the creation of the artwork. I'm not stellar at creating original artwork, but I definitely recognize when things look just right, and sometimes I stumble upon it. I must also have a little bit of marketing in me, because it's my constant effort to brand things.

The artwork and branding is important, because an app developer must live in a constant state of capturing the user amid so much noise. An app needs to say "here's precisely what I do and how it adds value to your life". It takes a lot of design thought and effort to cut through the noise and reach your audience.

Good messages to communicate are: clean, simple, creative, elegant, and fluid.

I'd like to walk you through my process of creating artwork for an app called Everyview. Everyview is webcam viewer that attempts to implement well the design principles of Windows 8. It's intended to feel like a breath of fresh air. There are plenty of apps for viewing web cams and it's nothing that can't be done in the browser too, but it's seldom a consolidated and elegant experience. As of this writing, Everyview is not yet published to the Windows Store, but by the time you read it, it may be. Try searching for Everyview.

My artwork for Everyview started with the creation of a symbol. The symbol had to represent every image that could possibly come through the eye of a camera and so I simply chose to represent the eye of a camera. I didn't want to make the app subject to aging by choosing a specific camera though, and I didn't want to specify a still camera or a video camera. So I created a camera lens. The icon doesn't determine absolutely that you're looking down the barrel of a DSLR, an amateur video camera, a high-end video camera, or any other specific model. It's an agnostic character of a camera.

Looking into the eye of a camera invokes a bit of a "live" feeling, as if you're on the air. I chose not to embellish the icon with a lot of gradients and or other attempts to make it look more realistic. As long as it says "camera" to the user, that's enough. I did, however, ad a lens glare that identifies it without doubt as a camera lens.

Let me show you how I created this image.

I used CorelDRAW because… well, because I always use CorelDRAW. Use your graphics package of choice, but don't restrict yourself to a bitmap editor. Creating images in a vector-based graphics package has serious benefits and will make exporting to the various required app graphic sizes a breeze. Creating images in a bitmap package will inevitable find you needing a size larger than what you designed for. I recorded a primer on using CorelDRAW and you can access it at http://aka.ms/coreldrawprimer.

Before I show you how I created that image, let me show you how I set up CorelDRAW for creating images for Windows 8. Choosing File | New in CorelDRAW by default will start you out with a document the size of a piece of paper. CorelDRAW is very good at creating artwork for print, but we're concerned here more with pixels than we are with inches, so let's change the defaults and save it for future use.

I created a preset called Win8 App that uses the base Windows resolution of 1366 x 768 pixels. I also chose a color mode of RGB since the results are to be rendered to a screen rather than a printer. When you're working with documents of a designated pixel width/height, the resolution I mostly irrelevant.

If you'd like a nice place to start, try downloading the template I created at http://codefoster.com/w8tiletemplate.

Now, with a new document, we can go about creating our camera lens graphic.

Creating the lens graphic

Create a series of concentric circles like so. You do this by creating the largest and then resizing it with the CTRL key held to resize about the object's center and hitting the right mouse button when you have your next circle to create a copy.

Use the second largest to trim the largest by clicking first the second largest and then holding shift and clicking the largest. Then hit the trim button on the toolbar. Then delete the second largest circle. Setting the fill color of all objects to black and removing the outline color should leave you with something like this…

That's nice and simple and we have only to create the lens glare, which is only slightly harder than what we've done so far.

Make another couple of circles inside the smallest. I like to give them a red outline (right click on red from the color palette) while I'm working so they're easily discerned.

When you draw an ellipse (in this case a circular ellipse) in CorelDRAW, you have an ellipse, which is different from a custom curve. Ellipses have the property that you can grab their little vertex using the shape tool and drag to reduce the ellipse to an arc. Use the shape tool (F10) to do just that and work your way to something like this…

And then use some trimming and intersecting to end up with this…

Designing the tiles

Now it's time to design yourself some tiles. At a minimum, you'll need a standard app tile (150 x 150), a small logo (30 x 30), a store logo (50 x 50), and a splash screen (620 x 300). Additionally, you can design a wide logo (310 x 150) and some additional promotional images in case the Store finds your app worthy of being featured. It's recommended that the wide logo only be used if you're going to implement a live tile.

Let's start with the main app tile. Here's what I came up with for that…

Obviously, the tile incorporates the symbol we just created, but I also add a stylized app title below that. I chose a fairly bold font, condensed it, used different colors for the words and even shoved them together and created a little notch. Little design choices like this are somewhat arbitrary, but will end up becoming your brand and how people recognize your app. Finally, I added a soft gradient behind the entire title. You have to be careful with gradients in modern apps, but a shallow, gray gradient here seems to add a sort of dreamy, modern, cloud feel to the app.

Next, I'll elaborate a bit on the standard logo design when creating the wide logo and the splash screen which I tend to make rather similar. Here's what I came up with.

Now with more horizontal space than vertical, we stretch the brand elements out left to right and I like to add a little subtitle that describes without a doubt what the purpose of the app is – it's a webcam viewer. Like the notched v in view, I notch the E with the camera lens and keep all of the graphics tight and bold.

The last step is the creation of the store and small logos.

The Store logo

The store logo is used for your apps dedicated detail page in the Windows Store. It's common practice to just shrink the app tile down from 150 pixels to 50 and call it good, but that's unfortunate because it's rare that the app's main tile will look so good at this size. Take a look at the Bing app's Store logo captured from its page in the Store…

You want this image to be even simpler than the main app tile, to use most of the 50 x 50 pixel space, and to have a transparent background.

For my Everyview app, I stuck to the basic, original symbol. In CorelDRAW if you want to render something out a certain size even if the elements inside don't quite fill up that size, you just create a bounding rectangle the size you want and then give it no fill and no outline. I have rendered this bounding box orange below for visibility only. To export this image, you simple set the bounding box's outline color to none (invisible), select the entire group (bounding box and symbol together), and then export (CTRL + E) it.

Here's how that would be rendered, however.

Notice a few things about this:

• The image has been rendered to pixels custom made for the export size chosen (it could be rendered absolutely huge and would still look great)
• The bounding box is not visible, yet it is responsible for the overall size and shape of the exported image
• The background is transparent (designated by the checkerboard pattern) but the lens glare is always white
• The transparency is 24-bit which means it has various levels of transparency around the edges to make it blend perfectly with the background
• There is a little bit of space around each edge of the symbol
• The symbol is large enough to capture all the quality we can in this restricted space

The small logo

The small logo is used to represent your app when the user semantically zooms out of their start screen. Try it and see.

You can use the exact same techniques to create the small logo as you did for the Store logo. The small logo (30 x 30 pixels) is even smaller than the store logo (50 x 50 pixels) so it becomes that much more important to be intentional about simplifying your image.

That's as far as I'll take this for now. Of course, you would continue your design effort into the app itself so that the entire effort is unified and consistent.

I'd like to point out one of the advantages to Microsoft design principles that ends up being highlighted by the content of this article. No part of the splash screen or the tiles or even the app itself are contributed to by Windows. The entire space falls under the responsibility of whoever wears the design hat in your organization (even if you are your organization and you wear all the hats!). The app tiles as well as the app's main design surface because a truly empty canvas and 100% of the pixels are there to deliver your brand, deliver your functionality, and delight your user.

Have fun with this. It's fun stuff for sure.

I just finished reading Jakob Nielsen's article Windows 8 - Disappointing Usability for Both Novice and Power Users where the summary reads…

Hidden features, reduced discoverability, cognitive overhead from dual environment, and reduced power from a single-window UI and low information density. Too bad.

First of all, I think Jakob's article is pretty well written and rather honest as well. I don't think he's trolling or begging for clicks. I do want to offer some extended thoughts on the matter, however.

Jakob's second point is Windows 8's reduced discoverability. I couldn't agree more, but we can no longer work from an assumption that discoverability is king. We used to worship it and we ended up with a thousand commands on our design surface all conveniently a single click away. We had bloated navigation bars with submenus inside of submenus that all activated on hover (a gesture shackled to the mouse). In short, we had huge swathes of real estate dedicated to things the user might do and places they might go. No more. Now the user enjoys his content and brings up the charms bar when he wants to.

That simplicity comes at a cost though. As Jakob said, Windows 8 amounts to a reduction in discoverability. You may have seen the internet video of someone's poor old dad left to discover Windows 8 on his own. He found his way to the desktop but couldn't find his way back. All he had to do was move his mouse to any corner of the screen or hit the Windows key on his keyboard, but he didn't know that. I think it's safe to say he hadn't discovered all the features yet. If you put a caveman in front of Windows 8, how long would it take him to figure out that he can swipe from an edge of the screen (unless he cheated and watched the introductory animation while setting up his profile).

If you can surmount that hurdle (and a few more) then you'll be well on your way to enjoying your UI and I hope you'll appreciate that it's not trying to put everything front and center. Just for fun, I'd like to make a list of things the caveman (or any of us actually) would not know without being told.

• Swipe in from the left to browse other Store apps
• Swipe in from the right to access charms
• Swipe from the top or bottom to access app bars
• Your preferences are in the Settings charm
• If you want to search your app, you need to go to the Search charm
• To print, you go to the Devices charm
• To select something you swipe down on it (or swipe right if you're in a vertical scroll)
• You can just start typing on the start screen to find things
• Cut, Copy, and Paste are hiding behind a hold gesture
• (and there are likely more)

You know what's way longer than that list? The growing list of things a computer can do, and they can't all fit on the screen at once nor should they. I say leave the interactions for when the user is interested in interacting and requests them, otherwise just show him his content.

As for the remaining points in Jakob's article.

There's no question there are hidden features. When you open a photo and there's nothing on your screen except your photo, you can bet there are hidden features. When your primary user interactions (e.g. app bars, charms bar) are off screen, you can be sure there are hidden features. Once again I want my features to be hidden. Until I want my features. If I have to learn where they are, so be it, but that happens once and doesn't mean I want to look at them on the first page of my app for the rest of my life. I can't agree with cognitive overhead from dual environment because I've never felt any brain pain over the fact that there's a desktop back there. I love it in fact that I have access to all of the legacy features and functions. Reduced power from a single-window UI? Actually, it's not a single-window UI. The desktop is still there and you can use your windows and resize them and everything still. And low information density? Yep, and I really appreciate it too!

You want your app to be successful and to be successful, you must think about the user.

Windows 8 thinks about the user through and through. It puts the user in control of what shows up on their start screen, when the app bar and charms bar appear over their content, and what apps have the capability of doing on their machine.

When you're working on your app, consider that the user is not always just launching your app and then closing it when they're done. They may be using your app as one in a series of apps involved in a single usage scenario.

Consider this usage scenario...

Your app helps users make restaurant dinner reservations.

Your user may use your app on its own, but more likely your user…

• steps onto an escalator at the airport
• checks their trip management app to find their hotel's location
• checks for restaurants in the hotel's vicinity
• picks a restaurant based on user reviews
• makes a reservation at the restaurant (with your app!)
• sends the reservation confirmation to a colleague
• and then steps off the escalator

That user is a delighted user. He has not just used an app. He has accomplished something significant in very little time. All during the escalator ride, the complimentary and informative animations were important, all of the thought that went into the UX of each app was very important, and the app-to-app sharing was crucial.

Keep that in mind as you formulate your app idea, as you design your app, and as you implement the Windows 8 contracts.

If you attended the Gen Appathon in Redmond last week and attended the Windows 8 Design 101 breakout session lead by Valentina and Christina, you know that they promised slides, and here they are: http://www.slideshare.net/valeaseattle/windows-8-design-101

A big thanks to both Valentina and Christina for delivering excellent design content at a time when good design is more important than ever.

Attached is a worksheet that might help you when you’re brainstorming the design of your Windows 8 app.

It encourages the 3-tier navigation structure that’s common with these apps. The grid units are 1 unit (20 pixels). There are rules for the top and left margins (5 units and 6 units respectively) as well as for an app bar (88 pixels) and for snapped view (16 units).

If I modify it, I will replace the attachment here so that you can always come back to this post to download more sheets. It helps to have a few of these printed out and stashed in your computer bag.

Hope it helps.

Windows 8 App Design Sheet.pdf (152.25 kb)

I'm in a Microsoft building today that I've not been in before. There are a lot of them since I'm a relatively new employee. This one houses a lot of the work that goes into the Windows Phone 7 operating system, and that's pretty cool.

I arrived early for my conference and decided to spend some time meandering. A 3rd floor native told me I should visit the Windows Phone design studio on the 2nd. The design studio looks like a bunch of art supplies, flowers, and rainbows blew up. It's very cool actually.

I'm a propeller head for sure, so it's important to me that a system functions correctly, but I want never to forget that art matters. It matters because it's human like your users. When I picked out my SCUBA gear, for instance, its ability to sustain my existence while I'm under water was certainly high on my priority list, but it was also an assumption for the most part. SCUBA gear wouldn't likely make it to the consumer shelf if it wasn't well tested. So I essentially set that aside and look for gear that I enjoy looking at - gear that makes me feel like  Navy Seal Ninja.

Know that your users are making the same assumptions that your application is going to function as it's intended, and they are going to choose it, keep it, and pay for it based on its art. Is it beautiful? Is it smooth like butter? Is it inspirational.

Likely you’ve read the Metro style design principles, but you haven’t seen the counter principles yet (because I made them up). Here we go...

1. Show Shame in Mediocrity

To really show shame in mediocrity, just look at about 80% of the apps in any major app marketplace. These apps may get a users attention with a catchy title or a promise to solve some problem, but then they fail to add any value to anyone’s life. Even if they are not devoid of functional value they fail to provide any user joy.

• Ignore the little things
• Do something different in every little user interaction so you can keep them on their toes
• Embrace chaos
• Deviate slightly from the grid so the user knows something is wrong even though that can’t see it

2. Flow Like Peanut Butter

To be clear, peanut butter doesn’t flow. Even creamy peanut butter doesn’t flow. To meet this counter principle, perform actions synchronously, use while loops that peg the processor, and only use the UI thread.

• Add some offset between the user’s finger and the registered touch point
• No transitions or animations... all straight cuts
• Add boring graphics and boring interactions.
• Embrace lag and jitters

3. Be Faux Analog

It’s 2012, but give the user a solid 1994 experience by rendering an actual real-life scene and hope they’ll figure out which drawer their word processor is in. Even though there’s no actual need for a spiral binding, let’s add one. It’s nostalgic.

• Show a desk or a lobby or some other loose analogy to your navigation model
• Firmly draw your limits at real life paradigms and scenarios
• Expand on the success of Microsoft Bob^©

4. Do Less With More

Pack that screen. You have millions of pixels at your disposal. You can use some for navigation, some for commanding, and if there's room left over you can even include your user’s content.

• Assure that users can orient themselves to your views within 7.5 minutes
• Adhere to a strict 45 button limit per view
• Give users a sense of adventure as they discover your application

5. Die Alone

• Assume the user is only concerned with doing whatever it is that your app does.
• Assume they don’t have friends to share your content with.
• Assume they don’t need to find anything of your content
• Assume the user what’s to do one thing at a time... always... ever... only

It has never been a good idea to jump right into development without putting time into the design of your project. It’s tempting to attribute your progress to the time when you’re actually typing the code into the computer, but application design like never before is more than fluff. It scopes and directs your efforts and saves you from real hours spent on divergent, throw-away work.

This is still true in Windows 8 development, but a lot of work has already been done to support application developers in creating Metro style applications. There’s a lot of design philosophy in the platform. The effort of which is to create an application ecosystem that has some consistency and thus some predictability and thus user joy.

Here’s a video I recorded that will walk you through the design philosophy – the 8 traits of Metro style design. Enjoy. Happy designing.

Design Before You Develop