AKA: How to design your own Windows Phone Application UI, using Photoshop, Expression Blend and a little touch of Magic.
When it comes to being an indie-app-developer, you usually find yourself being the Jack of All Trades. You are the developer, designer, tester and marketer.
This really isn’t easy, besides being good in each of these fields, and usually you are not, you need to familiarize yourself with various tools, each for it’s own role in creating the application.
The most confusing of all to the common developer is usually designing the application UI.
“If it works well, why the heck does it also need to look good!?” Is a common thing to be heard from frustrated software developers, when given a UI design assignment.
But here is the thing, when it comes to Applications built for a mobile platform, Great UI is key for the success of an application.
It doesn’t matter how amazingly fast your app algorithms run, if they don’t come in a pretty package, No one will download it!
The good news are that together with Visual Studio and Expression Blend, Microsoft provides you with a fairly good suite for easily creating your very own beautiful Windows Phone Applications. And best of all, these tools play beautifully well with Adobe Photoshop and Illustrator.
No, they will not magically turn you into an amazing UI Designer, I’ll give you that, but they will make your life much easier.
So lately I have been working on a small project I call “Vintage Booth”.
Basically it’s a very simple Windows Phone Application that will enable you to take vintage looking pictures and share them with your friends.
Yes I know, it’s an amazingly original idea, patent pending.
The thing is, I’ve started this project mostly as an experiment in application UI design. I wanted to see if I could create exceptionally great application design, while not necessarily sticking to the Metro UX Concepts, and most importantly, do it all by myself.
This is the story of how I did it.
Creating the page design using Adobe Photoshop
The first step was creating the Application Pages (4 of them ) using Adobe Photoshop.
The native resolution of a Silverlight Windows Phone Application Page is 480×800, so I started by creating a new canvas of that size and worked my way from there on my Main Menu Page.
Ending up with this design:
Several things you should consider when designing the page:
1) Use folders to group layers that relate to the same control or part of the screen.
As you will later see, these folders will turn into Canvas Controls in XAML.
2) Prefer using Vector Graphics and Text Layers as oppose to just using plain images.
They will turn into Paths and Labels later, and will enable you resizing and manipulation
without losing quality.
3) Some layer blending modes and layer styles are not supported in Expression Blend.
You will be notified upon importing as you will later see, but you might need to merge
and flatten some of these layers to maintain the same look.
4) If you are using 3rd party fonts, make sure you have the rights to use them.
The same goes for all source images you are using.
Importing The Design To Expression Blend
Next I opened my already existing project that I’ve created in Visual Studio. If you don’t have one you can simply create a new project from within Expression Blend.
Next I went ahead and opened my MainPage.xaml, removed all existing controls in it, and proceeded to import my PSD file.
In the menu simply select File –> Import Adobe Photoshop File…
Next the importing window will open up displaying all the layers in the PSD file.
Here there are several things you need to notice.
Each layer has a check box enabling you to add or remove it from the list of layers that will be imported.
In case you wish to merge several layers you can select them and use the “Merge layers” button. It is preferred to merge layers that have no reason being separated, for example in this design, the layer of the album and the layer of the images over the album.
The reason for this is that each layer will turn into an element in the Visual Tree, and this can dramatically affect performance. So basically the less layers and effects you eventually import the better.
As I said before, not all the features in Photoshop are supported in Blend.
You will be notified for this by an exclamation mark icon near the layer or folder. When hovered over, a tooltip will present the unsupported feature.
For now you can handle this and still maintain the looks by choosing to import the layer as a flattened bitmap.
Eventually I ended up like this:
As you can see, all my layers have translated into images and all the folders into canvases.
Should I have imported the text layers as text and not as a flattened bitmap, I would have been able to see the text as an editable label, basically enabling me to change it in runtime.
Making The Design Interactive
So now you have your design and you can display it as a pretty image on the phone. Time to make it Interactive.
This can mean various things, depending on your application.
In my case I needed to make the Menu Items reactive, and this meant two things: Converting them into buttons and adding animations.
You can convert images into buttons in several ways. You can create an Image Button Control and replace the image that was created with it, while maintaining all properties. You can catch the touch events from the image control itself, or do the lazy, yet affective, thing that I did and simply place an invisible button on top of the image.
Next I added the click animations. I won’t go into details on How to create animations using Expression Blend, you can check out the link for that. But all I did was simply creating a scale change animation so that the images will create the feeling of being pressed, and attached that to the button press event.
Obviously you can do much more complex stuff, do cool animations for when the page loads, animations that run continuously in the background making it dynamic, whatever you wish.
Eventually what you will end up with is a fully functioning interactive design, that mostly does nothing. You can “Test” your design by pressing F5 to run the project.
Building the Application Using Visual Studio
Now came the inevitable part of actually creating the application.
After saving what I created in Blend I opened the Solution in Visual Studio.
At any time you can go back to Expression Blend and change the design while developing, just make sure you save your changes.
I really can not stress enough the Save part.
Visual Studio and Expression Blend play beautifully together, even with source control in the middle. But if you don’t save your changes in one of them, they will not update in the other.
Not paying attention to this can cause you to override unsaved changes, and in the process lose an hour worth of work, leading to RAGE AND DESTRUCTION!
So learn from my mistakes and save often.
Besides that, this is the point where you add your code or link the pages to existing code you already have.
As you can see, if you work with other people you can actually have the code written simultaneously to creating the design, integrating the two in the end.
For doing it properly you can look at more advanced Design Patterns such as MVVM.
That’s it for now.
For questions, pointers and incoherent jibber-jabber,
please leave a message in the comment section bellow.
And until next time, don’t forget:
Beauty is only skin deep, but ugly goes clear to the bone .