Frédéric Harper gave a presentation on Microsoft's Modern UI design in Windows Phone. He discussed the design style which takes inspiration from metropolitan signage. Programs on the phone should reflect this style. He outlined key Windows design principles such as being fast and fluid, doing more with less, and authentically digital. The Windows Phone SDK helps developers follow the design style through default elements, behaviors, and fonts. He demonstrated designing the navigation and layout of an app on paper before using tools. Project templates in the SDK map to different app styles.
2. Windows Phone
Design
2 Microsoft confidential 11/30/2012
3. The Windows Phone Design Style
• The Windows Phone team have taken a lot of trouble over the
look and feel of the phone
• They have created a design style, inspired by metropolitan
signage, to express this
• Programs on the phone should reflect this style
3
5. Principle: Pride in craftsmanship
Take care of the details
Make it safe and reliable
Uncompromising Sensitivity to Weight, Balance and Scale
Align to the grid
6. Principle: Be fast and fluid
Life is mobile
Delight with motion
Design for touch
Intuitive interaction
Be responsive and ready
Immersive and compelling
7. Principle: Do more with less
Be great at something
Focused and direct
Content before chrome
Inspire confidence
8. Principle: Authentically Digital
Don’t Try to be What It’s NOT
Cloud connected
Dynamic and alive
Beautiful use of typography
Bold vibrant colours
Motion
9. Principle: Win as one
Fit into the UI model
Reduce redundancy
Work together to complete scenarios
Tools and templates are designed to scale
10.
11. Windows Phone 8 SDK and the Windows Phone Design Style
• To make life easier for us the Windows Phone design style is “baked in” to the developer
tools
• The default appearance, behaviour and fonts of the user elements all match the style
• If you want to find out more about the Windows Phone Design Style you can read the
“User Experience Design Guidelines for Windows Phone”
http://msdn.microsoft.com/en-
us/library/hh202915.aspx
11
13. Design on Paper Before You Touch the Tools!
Contoso Cookbook
12:38 12:38 Shows recipes
CONTOSO COOKBOOK CONTOSO COOKBOOK CONTOSO COOKBOOK
grouped by regional
regions indian rec recipes ind style. User can view
recipes, also add
pictures and notes
Text Text
Text Text
Text
Text Text
Text Text
13 Microsoft confidential 11/30/2012 pivot
14. Design App Navigation Early!
12:38 12:38 12:38
12:38
CONTOSO COOKBOOK
regions
Regional recipes Recipe Detail Notes & Photos
Back Back Back
12:38
About
14 Microsoft confidential 11/30/2012
Back
15. Project Templates and Components
• Windows Phone SDK provides a
set of project templates
• Each of them maps onto a
particular style of application
15
The Windows Phone design styleMicrosoft created the Metro design, which is inspired by the clear signage you often see employed with metropolitan area public transit signage. Metro uses big, clear typography and features large text that catches the eye and runs off the page. The Metro design principles center on a look that uses type to echo the visual language of airport and metro system signage. The goal is to clearly direct end users to the content they want. Metro interfaces are supposed to embody harmonious, functional, and attractive visual elements. Ideally, good UI design should encourage playful exploration when interacting with the application and people should feel a sense of wonder and excitement. A clear, straightforward design not only makes an application legible, it encourages usage.Make the point that the Metro style is influencing many Microsoft products, and that it will play an increasing role in Windows products beyond the phone platform, such as in the UI for the forthcoming Windows 8.
Pride in craftsmanship-Take care of the details-Make it safe and reliable-Balance, symmetry, hierarchy-Align to the grid>> This principle is a reminder that designers and developers should take pride in what they create. They shouldn’t accept mediocre. It’s about ensuring balance and symmetry, and where possible aligning to the grid (12px for Windows Phone, 10x for Windows!). It’s also about building an intuitive interface where the user is free to explore without fear that they’ll accidentally break or delete something.
Be fast and fluid-Life is mobile-Delight with motion-Design for touch-Intuitive interaction-Be responsive and ready-Immersive and compelling>> With the continually increase in device capabilities it’s possible to bring a new dimension to applications in the form of animations. Windows has a number of predefined animations that can assist with consistency. Both platforms share a similar state and transition system which is powerful when designing for motion.
Do more with less-Be great at something-Focused and direct-Content before chrome-Inspire confidence>> The key to this principle is to focus on the core objective of the application. Too often this is not considered so it can appear that an application is an aggregation of a number of somewhat disparate components. When designing the structure of the application, ask the question “why has the user opened the application?”
Authentically Digital-Cloud connected-Dynamic and alive-Beautiful use of typography-Bold vibrant colours-Motion>> Both platforms make extensive use of bold, block, colours, which is a relatively flat style. There is a focus on allowing applications to breathe and not cramming everything onto a single page. There should be no attempt at skewmorphism - to make applications look like they belong in the real world – instead, embrace the digital world.
Win as one-Fit into the UI model-Reduce redundancy-Work together to complete scenarios-Tools and templates are designed to scale>> Windows and Windows Phone have a unique design language that runs through the core applications. It’s important that application developers respect the design of the platform (for better or worse) and where possible adapt their brand to compliment the design language. This ensures a consistent user experience which benefits the end user, application developer, device manufacturers and of course Microsoft (ie the whole ecosystem).
The result is the Windows Phone that you see today – great use of bold block colors, a clear uncluttered display and clear communication of the information the user needs.
XAML and MetroWindows phone uses a default font called Segoe WP. All the project templates and controls use this style by default. There are many other aspects of design that together make up the Windows Design Language as applied to Windows Phone, such as the spacing between UI items and the page layout.You can download the User Experience Design Guidelines for Windows Phone document from AppHub, or from the URL shown on the slide. The design guidelines are well worth reading. In fact you can’t call yourself a phone developer until you have read them.
Now, keeping those design messages in mind, we are going to go through the process of building an app, from the design concept right through to the completion of a functional, prototype. As we do so, we will learn how the tools help us to build great apps that adopt the Windows Phone style.
The first thing to note, is that it is rarely a great idea to break out the tools to start prototyping your app. Better to think carefully about what your app is going to do, and to do the first design exercise on paper. With any app, you should always be asking yourself: “What is it that the user opened this app to do?”. The app should have a clear purpose, be intuitive and pleasurable to use. You can bests achieve these goals by spending some time thinking about the different screens the user will see and what the information they communicate should be.Here we see the design for the Contoso Cookbook application, which is what we are going to build. The main page is a list of regional cookery styles, and after the user selects the regional style they want, the app displays a pivot consisting of an introduction page on the region, and then a list of recipes for that region. Then, when you select a recipe from the list, the app displays the detailed instructions of how to make the selected recipe.
As a part of this exercise, think carefully about how the user will navigate through your app. Is it a “hub and spoke” design (most are) where there is a recognisable “home page” and the user starts from there to go out along a spoke to achieve some goal, or is it a more free-form ‘magazine’ style of app, where the user can jump around from experience to experience? Think about this now, as it will influence how you build your app.
Project Templates and ComponentsThe Windows Phone SDK installs a set of different project templates which you use to create the starter design and code of your application. All the templates conform to the Windows Phone design guidelines, but address slightly different styles of application.Once you have picked your style you can then create an application based on that.