• Save
Introduction to Designing Windows 8 Apps
Upcoming SlideShare
Loading in...5
×
 

Introduction to Designing Windows 8 Apps

on

  • 1,519 views

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 ...

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.

Statistics

Views

Total Views
1,519
Views on SlideShare
986
Embed Views
533

Actions

Likes
2
Downloads
0
Comments
1

2 Embeds 533

http://conveyux.com 447
http://stefansuxblog.wordpress.com 86

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Introduction to Designing Windows 8 Apps Presentation Transcript

  • Introduction to Designing Windows 8 Apps
  • The Blink Story• Established in 2000 in Seattle• User Experience Specialists• Domain experts in Human interfaces• Research-driven design• 35 Employees, including 9 PhDs
  • Clients
  • 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
  • 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
  • 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
  • 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
  • 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
  • Modern UI Style and Windows 8 Basics
  • 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
  • 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
  • Screen Hierarchy Hub Screen Section Screen Detail Screen 12
  • Navigation Patterns Section Labels Header Menu Charms Navigation Bar 13
  • Chrome and NavigationDesigning the Rhapsody app
  • 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
  • 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
  • Three Key Problems 1. Reorganize the Navigation 2. Remove the Chrome 3. Achieving a 3-level hierarchy 17
  • 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
  • Redesign the Navigation Solution 1. Navigation Bar 2. Header Menu 19
  • Remove the Chrome Challenge Make sure that Rhapsody users can easily access the Music Player. 20
  • 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
  • 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
  • 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
  • Beyond the TemplatesDesigning the WalkSeattle app
  • The Templates• Created by Microsoft to help designers and developers design their apps• Standard grid-based layout with rectangular items 25
  • 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
  • WalkSeattle – Version 1 • Started off following the templates, with the groups of rectangles. • But we wanted to create something different… 27
  • WalkSeattle – Final Version• Starting position places content on the left and right• Shapes that reflect the brand 28
  • 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
  • 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
  • Thank You