Introduction to Designing Windows 8 Apps
The Blink Story•   Established in 2000 in Seattle•   User Experience Specialists•   Domain experts in Human interfaces•   ...
Clients
Our Panel and Agenda      Joe Welinske   Valentina Ferrari   Geoff Harrison   • Quick Intro to the Windows 8 UI   • A look...
Windows 8 and Modern UI Style  • Modern UI Style is the new    Microsoft design language  • It is comprised of a set of pr...
Blink and Windows 8  • Working with Modern UI for about a year  • Windows 8 Development Partner  • Presented design practi...
Creating a Windows 8 App  • Have a perspective     -   Elevator pitch     -   What singular thing is it great at?  • Defin...
Windows 8 and Modern UI Style  • Modern UI Style is the new    Microsoft design language  • It is comprised of a set of pr...
Modern UI Style and Windows 8 Basics
Five Principles        1.      Pride in Craftsmanship                Pay attention to details.        2.      Be Fast and ...
Five Principles        1.      Pride in Craftsmanship                Pay attention to details.        2.      Be Fast and ...
Screen Hierarchy Hub Screen              Section Screen                               Detail Screen                       ...
Navigation Patterns Section Labels       Header Menu Charms               Navigation Bar                                  ...
Chrome and NavigationDesigning the Rhapsody app
Starting Point: Android App                              Task                              Redesign the Rhapsody          ...
Design Process  1.   Studied the Android application  2.   Sketched layout and information architecture  3.   Wireframes  ...
Three Key Problems 1. Reorganize the Navigation 2. Remove the Chrome 3. Achieving a 3-level hierarchy                     ...
Redesign the Navigation                          Task                          Reorganize the application                 ...
Redesign the Navigation                          Solution                          1. Navigation Bar                      ...
Remove the Chrome                    Challenge                    Make sure that Rhapsody                    users can eas...
Remove the Chrome                    Task                    Hide the Music Player.                    Solution           ...
Remove the Chrome                    Challenge                    • All Rhapsody applications have a small add            ...
Achieving a 3-level Hierarchy           Home                           Challenge                                          ...
Beyond the TemplatesDesigning the WalkSeattle app
The Templates• Created by Microsoft to help designers and developers design their apps• Standard grid-based layout with re...
Going Beyond the Templates  Why?  • A lot of applications follow the templates too rigidly resulting    in cookie cutter a...
WalkSeattle – Version 1                          • Started off following                            the templates, with   ...
WalkSeattle – Final Version• Starting position places content on the left and right• Shapes that reflect the brand        ...
Wrapping Up     Joe Welinske    Valentina Ferrari   Geoff Harrison  • We’ll send you a link to the recording and slides.  ...
30
Windows 8 Resources •   Making Great Windows Store Apps •   Planning Windows Store Apps •   Navigation Design for Windows ...
Thank You
Upcoming SlideShare
Loading in...5
×

Introduction to Designing Windows 8 Apps

1,386

Published on

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 Comment
2 Likes
Statistics
Notes
  • I Got The Full File, I Just Wanna Share to You Guyszz.. It's Working You Can The Download The Full File + Instructions Here : http://gg.gg/setupexe
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,386
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • Explain the separation between the style and Windows 8 itself. The style also applies to Windows Phone and Xbox.
  • Explain the separation between the style and Windows 8 itself. The style also applies to Windows Phone and Xbox.
  • Introduction to Designing Windows 8 Apps

    1. 1. Introduction to Designing Windows 8 Apps
    2. 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. 3. Clients
    4. 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. 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. 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. 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. 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. 9. Modern UI Style and Windows 8 Basics
    10. 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. 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. 12. Screen Hierarchy Hub Screen Section Screen Detail Screen 12
    13. 13. Navigation Patterns Section Labels Header Menu Charms Navigation Bar 13
    14. 14. Chrome and NavigationDesigning the Rhapsody app
    15. 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. 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. 17. Three Key Problems 1. Reorganize the Navigation 2. Remove the Chrome 3. Achieving a 3-level hierarchy 17
    18. 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. 19. Redesign the Navigation Solution 1. Navigation Bar 2. Header Menu 19
    20. 20. Remove the Chrome Challenge Make sure that Rhapsody users can easily access the Music Player. 20
    21. 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. 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. 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. 24. Beyond the TemplatesDesigning the WalkSeattle app
    25. 25. The Templates• Created by Microsoft to help designers and developers design their apps• Standard grid-based layout with rectangular items 25
    26. 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. 27. WalkSeattle – Version 1 • Started off following the templates, with the groups of rectangles. • But we wanted to create something different… 27
    28. 28. WalkSeattle – Final Version• Starting position places content on the left and right• Shapes that reflect the brand 28
    29. 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. 30
    31. 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. 32. Thank You

    ×