We’ve been hearing a lot of talk about Metro, which is code name for a design language for Windows 8, Windows Phone 7, X Box and other Microsoft software. What’s Metro about anyway?
Metro draws from classic Swiss design, with its emphasis on simplicity, typography leading navigation and way-finding graphics found in transportation hubs. The bold, clear lettering and iconography are key to helping commuters find their way to subways and air travelers navigate to their boarding gates.
The key element in this design language is to allow users to focus more on the content that is delivered, rather than the various frames that we are used to.
With its’ straight lines and rectangular tiles, it might appear that Metro design is easy to implement for apps, but the reality is that Metro was made for motion and content. The animations, content make a big difference when it comes to attracting attention to your applications.
Simply put, the content and images draw you to the application itself, while the animations help you bring it alive.
How do you go about designing an awesome Metro App? Here is a list of tips and resources you can refer to.
1. Get the tools to prototype.
MSDN has a good repository of templates, icons and styles that you may refer to. These include:
- Base layout: templates for fill, snap, full, portrait views (.psd )
- Project templates: dark and light theme page layouts (.psd)
- Common controls: dark and light theme controls (.psd)
- Common components: contracts, notifications, tiles, and keyboard (.psd)
2. Think Grid
The grid system is a design tool that helps achieve visual unity across different applications and features, while providing a structure for variation and maintaining user interest. The grid system is built into the developer templates.
Using the Windows 8 grid, type patterns, and layout patterns helps align your application with the rest of Windows 8. Controls and collections for Metro style apps are created with the grid system in mind. The grid system provides a fast and fluid experience for the user.
3. Think Touch
The Windows 8 Metro UI will run on touch devices. This allows developers to think about how to integrate touch into their apps and make it more fun to play around with!
A. Responsiveness is important – every action must have a specific effect on the device. Gestures must take effect immediately.
Bi. Keep it consistent – ensure a good ‘transfer of knowledge’ and standardize actions.
C. Be Forgiving – when there is direct manipulation, there will also be accidental manipulation. Developers should remember that some people with stubbier fingers (like myself) have a harder time pushing buttons. That calls for forgiveness, which includes providing an undo, good visual feedback and allowing users to correct mistakes easily.
4. Start prototyping.
It is so important to prototype. Shane Morris, Director at Automatic Studio shared some great benefits of prototyping at #MSCampfire.
Prototyping allows you to:
- Validate the concept in concrete terms.
- Try out ideas at low risk.
- Identify issues before it’s too late.
- Sell the vision to stakeholders and investors.
- Bring the team together with a common vision.
Prototypes, Prototypes, Prototypes
Essentially, “its the journey between pages or screens, not the pages and screens themselves, that can cause the most problems for users. Problems with the journey are the most expensive problems to fix. Design the journey between states first, before designing the states.”
Do some user testing before you start doing any sort of coding!
5. Start Development
Along with the new release of Windows 8 Consumer Preview, development tools that contains Visual Studio 11 Express Beta and Blend for Visual Studio are available. These are the tool to build Metro style apps for Windows 8. It includes the Windows 8 SDK, templates and enables access to Windows 8 APIs.
Microsoft Visual Studio 11 Beta has a new, simpler, refreshed UI, and it includes fully featured code editor, a powerful debugger, a focused profiler, and rich language support that you can use to build apps that written in HTML5, JavaScript, C++, C# or Visual Basic. Visual Studio 11 Express Beta for Windows 8 also includes a device simulator that you can use to test Metro style apps on multiple form factors.
The quick start by clicking on the Grid Application view lets you easily create an application!
Check out other interesting Design case studies here:
Design case study: iPad to Windows 8 Metro style app
Design case study: Website to Metro style app
We’re constantly thinking about how to make it easier for developers to get started with Windows 8 Development, so if you have any questions or tips, do comment and let us know what you think! Do share your development woes, wins and hacks with us as well.
Have fun with Metro and hope to see you for our Windows 8 Dev Camp tomorrow!
Follow