In just four months, Microsoft has already sold over 60 million licenses of Windows 8. This new version of Microsoft’s flagship operating system creates new opportunities for designers and developers to reach vast numbers of users. Windows 8 applications are designed following the principles of the Modern UI style. In this webinar, Valentina will teach you the basics of designing Windows 8 applications that fit within the Modern UI paradigm while maintaining a strong brand and personality.

1. Introduction to Designing Windows 8 Apps

2. The Blink Story
• Established in 2000 in Seattle
• User Experience Specialists
• Domain experts in Human interfaces
• Research-driven design
• 35 Employees, including 9 PhDs

3. Clients

4. Our Panel and Agenda
Joe Welinske Valentina Ferrari Geoff Harrison
• Quick Intro to the Windows 8 UI
• A look at Windows 8 Design Principles
• Case Study Examples: Rhapsody and WalkSeattle
• Lessons Learned
• Q&A
4

5. Windows 8 and Modern UI Style
• Modern UI Style is the new
Microsoft design language
• It is comprised of a set of principles
that apply to Windows Phone,
Windows 8, and Xbox
• Navigation and interaction patterns
do differ between them
5

6. Blink and Windows 8
• Working with Modern UI for about a year
• Windows 8 Development Partner
• Presented design practices at Microsoft developer conferences
• Have designed new and ported existing apps to Windows 8
• Have a design principles reference site at blinkux.com/metro
6

7. Creating a Windows 8 App
• Have a perspective
- Elevator pitch
- What singular thing is it great at?
• Define the user activities
• Decide how it will make money
• Conform to the structure, but wear your own brand
7

8. Windows 8 and Modern UI Style
• Modern UI Style is the new
Microsoft design language
• It is comprised of a set of principles
that apply to Windows Phone,
Windows 8, and Xbox
• Navigation and interaction patterns
do differ between them
8

9. Modern UI Style and Windows 8 Basics

10. Five Principles
1. Pride in Craftsmanship
Pay attention to details.
2. Be Fast and Fluid
Use animations to make the application feel responsive.
3. Authentically Digital
Avoid skeumorphic design.
4. Do More with Less
Try to remove buttons and chrome from the screen.
Keep your application focused around your core task.
5. Win as One
Try to use the UI patterns created by Microsoft.
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx 10

11. Five Principles
1. Pride in Craftsmanship
Pay attention to details.
2. Be Fast and Fluid
Use animations to make the application feel responsive.
3. Authentically Digital
Avoid skeumorphic design.
4. Do More with Less
Try to remove buttons and chrome from the screen.
Keep your application focused around your core task.
5. Win as One
Try to use the UI patterns created by Microsoft.
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx 11

12. Screen Hierarchy
Hub Screen
Section Screen
Detail Screen
12

13. Navigation Patterns
Section Labels Header Menu
Charms Navigation Bar
13

14. Chrome and Navigation
Designing the Rhapsody app

15. Starting Point: Android App
Task
Redesign the Rhapsody
Android App to fit
Windows 8.
Challenge
Remain consistent with
other Rhapsody apps that
users are used to.
15

16. Design Process
1. Studied the Android application
2. Sketched layout and information architecture
3. Wireframes
4. Created and tested
paper prototype
5. Iterated on the wireframes
6. Visual Design
16

17. Three Key Problems
1. Reorganize the Navigation
2. Remove the Chrome
3. Achieving a 3-level hierarchy
17

18. Redesign the Navigation
Task
Reorganize the application
to use the Windows 8
navigation patterns.
Challenge
Make it easy to navigate
between various sections
of the applications, and to
return to the home screen.
18

19. Redesign the Navigation
Solution
1. Navigation Bar
2. Header Menu
19

20. Remove the Chrome
Challenge
Make sure that Rhapsody
users can easily access the
Music Player.
20

21. Remove the Chrome
Task
Hide the Music Player.
Solution
Place the Music Player in the Navigation
Bar so it is accessible from every
page, without always being on the
screen.
21

22. Remove the Chrome
Challenge
• All Rhapsody applications have a small add
button next to each track title
• In Windows 8, however, such buttons are
considered chrome.
Solution
We decided to remain consistent with other
Rhapsody applications and keep the button.
22

23. Achieving a 3-level Hierarchy
Home Challenge
The original Rhapsody app has both a wide
Radio Browse My Music Player
and a deep navigation structure.
Genre
Solution
Sub-Genre • Use a Header Menu or Navigation Bar
Album to make sure that the application is
easy to navigate from any level of the
hierarchy.
• Use filters at the category level to
remove some of the levels.
23

24. Beyond the Templates
Designing the WalkSeattle app

25. The Templates
• Created by Microsoft to help designers and developers design their apps
• Standard grid-based layout with rectangular items
25

26. Going Beyond the Templates
Why?
• A lot of applications follow the templates too rigidly resulting
in cookie cutter apps
• Going beyond them is creates a more unique experience and
a stronger brand
How?
• Follow the grid but play with shapes and layouts – not
everything has to be rectangular
• Make sure that your design still follows the principles
26

27. WalkSeattle – Version 1
• Started off following
the templates, with
the groups of
rectangles.
• But we wanted to
create something
different…
27

28. WalkSeattle – Final Version
• Starting position places content on the left and right
• Shapes that reflect the brand
28

29. Wrapping Up
Joe Welinske Valentina Ferrari Geoff Harrison
• We’ll send you a link to the recording and slides.
• We will be having another webinar soon about designing
with kids in mind.
• UX Tools Survey in Progress conveyux.com/ux-tools-survey/
29

30. 30

31. Windows 8 Resources
• Making Great Windows Store Apps
• Planning Windows Store Apps
• Navigation Design for Windows Store Apps
• Commanding Design for Windows Store Apps
• Touch Interaction
• PSD Resources from Microsoft
• UX Guidelines for Metro Style Apps
• Scaling to different screen
• Gestures
• Skeuomorphic Design
31

32. Thank You