Let’s make our Windows Phone apps look great, ok?
I am not a designer. I am not a developer-designer. I am a developer and spend my days coding. But I love the concept of “metro” design and believe that it has the potential to bring a beautiful story to Windows Phone, and potentially millions of people. This is Microsoft moving beyond battleship grey buttons for its developer base, and all we need is just a little extra help to get there.
I don’t have a design background, my app is not the most beautiful app ever, but I’m fairly confident in what I would regard as a “80%-accurate” metro implementation. I’m trying to mimic the core Windows Phone operating system’s design, and in return users are getting a consistent interface, and one that respects their desires for how their phone should work.
Over time we can all work together to make all the apps beautiful by default, it doesn’t need to be a special exception to the rule.
If metro was inspired by transportation, just remember that there’s some awful looking transit out there. A few misaligned margins and your app’s going to look like a rusty bus. Just a little maintenance every time you create a page, check-in a page, or look over your app before submitting to the Windows Phone Marketplace will not only yield a good-looking app – but will probably get you some good recognition, too.
This is my first attempt to share just a few things that I’ve learned while developing a few Windows Phone applications, as I feel that developers just love rules, so maybe having suggested rules will help. We love to fight about code style guidelines, and this whole “metro-design-thing” is really just more of that. Please, let’s get some comments flowing on the topic, start a discussion, and I hope to revise this kind of thing and publish again. I started this list in December and am very happy to share it!
I’m talking about
simplicity
ease of use
discoverability
conformance
the right alignment & spacing
using the proper styles
other random tips and suggestions
Scott Barnes has previously covered a lot about the potential of metro for developers, calling it the first real compromise between developers and designers. He goes on to say “Metro simply put feels like I am shoplifting design. It’s not a lot of work and the main focus I have is controlling myself from adding too many elements to the screen or keeping the typography unbalanced.”
I read that to mean “copy what the phone does! it is simple and works!” – I’m also focusing here just on the Windows Phone user interface, but it could apply more openly to other apps and platforms in some situations.
I created these tips while building 4th & Mayor. It’s almost like a checklist, I s’pose. Originally ported from my OneNote notebook… and sorry, not enough visual examples.
“Metro” rules for coders
In no particular order…
Metro 100
Resources and Styles exist for a reason
The default Windows Phone styles exist to help you make your application fit in with the intended visual design and appeal of the Windows Phone. You should use styles with text, and consider using the static resources for margins, spacing, brushes, and more.
You’ll find the file with these special resources defined here on a 64-bit machine:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design\
Understand what margins you get with styles
Styles may bring in a margin. If you have a StackPanel with both a text block and a button, you should have:
The TextBlock requires a style such as PhoneTextNormalStyle or PhoneTextSmallStyle
The button has no style (the default style is already appropriately setup for use in all phone apps)
If you do this properly,you will notice that the button and text are properly left-aligned.
Read more: Jeff Wilcox
Posts
0 comments:
Post a Comment