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.

In case you haven't heard, Microsoft has an incentive going on right now where any app you create, you can get $100 for. That's not bad considering how easy it is to make an app. Well, not all apps are easy. Some apps take quite a substantial bit of time, but if you're just trying to get a good app into the Windows Store quickly (like say for $100!) there are some tricks you should know. There's a template at w8templates.codeplex.com, for instance, that you can customize with a few search terms and RSS feeds and in a matter of minutes, you've got a data and media rich app all about the topic of your choice.

I just made an app using this template. It's called The Sailing App. One of the tasks you'll have to complete if you go down this road is to create your own graphics for the app tiles, splash screen, etc. Well, I don't know about you, but I'm a big fan of CorelDRAW, so I made a template and I'm posting it here for you. By the way, if you'd like your very own free copy of CorelDRAW X6 Essentials, just join a ZERO260 event. We're giving them away.

Here's that template. Have fun!

App Tiles Template.cdr (39 kb)

Hello. I wrote a little book (my first actually) called CSS for Windows 8 App Development published by Apress. It's available at aka.ms/cssbook. All of the code listings from the book are available in a Windows 8 app that I have created, and you can download all of the source code for this app at cssbookcode.codeplex.com. The code is not polished yet as the book is still in alpha, but it should build and run and you're welcome to take a look as early as you like. Thanks for reading my book. I wish you lots of fun and success in developing apps for Windows 8.

Of course now that you've seen my post title, you're going to have the Bee Gees stuck in your head for the foreseeable future. Sorry about that. I'm actually not talking about the song at all, but rather about getting your Windows 8 app to tell the system that something happening and it should not go to sleep.

You have to use good judgment here for obvious reasons. Keeping your users system alive is obviously going to peg their battery and may disappoint. Often times, however, it's exactly the functionality the user wants. Who wants to start a video and then have the system lock 5 minutes in?

The app I'm working on that this applies to is called CamView (http://aka.ms/camviewapp). It shows a web cam, and my wife and I use it to keep an eye on our 10 months old son as he sleeps. When we bring him up on the big screen TV, we don't want the system to lock. We want it to stay alive. So there's our use case and the solution is simple. I'll show the implementation in JavaScript of course, but the C# is practically identical.

First of all, I add this in my default.js page outside of the immediate function so it's available to my entire app.

var app = WinJS.Application;

Then on the page that shows the webcam image I do this…

app.dispRequest = new Windows.System.Display.DisplayRequest;

This line takes advantage of the dynamic nature of JavaScript and adds the dispRequest property to the app object though it didn't exist before. It then instantiates the dispRequest to a new instance of the DisplayRequest from the Windows namespace.

In the page's ready method, then, I can call…

app.dispRequest.requestActive();

Which will tell Windows that my app is currently doing something that should block the default locking behavior and stay alive.

The "being a good citizen" part starts here. You've told Windows when to stay alive, but you also need to tell Windows when you're done staying alive. You would do this anytime the user leaves the screen with video, anytime the video stops or pauses, or generally anytime you can. My webcam view page doesn't have any kind of stop or pause, so I'm just disabling the requestActive as soon as the user navigates away from the page. I put that in the unload event for my Page object, and it goes like this…

unload: function() {
    app.dispRequest.releaseRequest();
}

It's yet another simple task that helps add up to great user experience. It's a matter of sweating the small stuff and considering every little nuance of your app that might delight the user. Now let's hope I make my millions off of CamView so I can retire.

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.

My colleague Michael Palermo and I are scheduled to present two Jump Start video series on Channel 9. The first will cover basic HTML, CSS, and JavaScript development, and the second will cover those web technologies as they apply to creating Windows 8 apps.

You can get a lot more information about this content and register to attend by going to http://aka.ms/Win8Dev-JS.

Thanks to everyone that showed up to last Friday's session on JavaScript game development in Windows 8. I really appreciated the information and demonstration that Jake and Sam presented. I hope it was as helpful for you too.

I said I'd post the sample code that they used, and here it is. You will need to go to impactjs.com and purchase the library if you'd like to use this, but if you're actually making games then it's a small cost to consider.

Enjoy!

BlockMover.zip (346.49 kb)

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)