UX Design Win 8 Apps, Part 1 of 3: Aesthetics and Design

Course description

Windows 8 changes the design pattern from previous versions of Windows in a grand way. This course will show the basics of Windows 8 aesthetics, how the look and feel of applications needs to be in order to look like they are part of the Windows 8 environment. The course will also show how to design applications for the touch interface. Then the course will show the design patterns for Windows 8.

Each LearnNowOnline training course is made up of Modules (typically an hour in length). Within each module there are Topics (typically 15-30 minutes each) and Subtopics (typically 2-5 minutes each). There is a Post Exam for each Module that must be passed with a score of 70% or higher to successfully and fully complete the course.

Meet the expert

David Kelley

David Kelley is a Silverlight MVP with over 10 years of experience building Targeted Customer eXperiences. He is currently the Principal User eXperience Architect for [wire] stone specializing in touch experiences such as digital price tags and Silverlight-based kiosks for retail. David publishes a blog called Hacking Silverlight and helps to run the Seattle Silverlight User Group and Interact Seattle, Seattle's Designer Developer Interaction Group.

Video Runtime

116 Minutes

Time to complete

214 Minutes

Course Outline

Windows 8 Aesthetics

Basic Windows 8 Aesthetics (36:01)

• Introduction (00:26)
• Design Philosphy (01:17)
• Problems of Windows Aesthetic (03:01)
• Elements of Good Windows8 Apps (01:39)
• Design example: App Silhouette (03:36)
• Demo: App Silhouette (01:09)
• Design: Content before Chrome (03:38)
• Design: Leverage the Edge (03:04)
• Fast and Fluid (04:07)
• Fast and Fluid: Touch Language (01:10)
• Press and Hold/Swipe to Select (00:23)
• Demo: Press and Hold/Swipe (01:46)
• Tap, Slide, and Pinch Actions (01:34)
• Demo: Tap, Slide, and Pinch (03:02)
• Rotate and Swipe (01:42)
• Demo: Swiping (04:10)
• Summary (00:10)

Windows 8 Aesthetics part two (22:02)

• Introduction (00:30)
• Snap and Scale (02:12)
• Use the Right Contracts (03:46)
• Invest in a Great Tile (02:12)
• Feel Connected and Alive (01:59)
• Roam to the Cloud (02:11)
• Embrace Modern App Principles (02:02)
• Discoverability and Touch (01:43)
• Designing for Touch (05:12)
• Summary (00:12)

Design and Patterns

Designing for Touch (28:59)

• Introduction (00:27)
• Touch Targets (01:49)
• Touch Posture for Interaction (01:08)
• Touch Posture for Reading (00:56)
• Touch Postures for Holding (01:09)
• Branding Patterns (02:36)
• Demo: Expression Blend Intro (01:39)
• Demo: Expression Blend XAML (03:04)
• Demo: Expression Blend HTML (02:16)
• Solution types and Languages (03:15)
• Multiple Screens and Devices (01:40)
• Demo: Solution Types (02:14)
• Demo: Split App in XAML (03:28)
• Demo: HTML Framework (03:00)
• Summary (00:10)

Patterns (29:47)

• Introduction (00:30)
• Navigation Patterns (00:52)
• Hierarchical System (00:54)
• Demo: Hierarchical System (01:33)
• Flat System (00:51)
• Demo: Flat System (01:18)
• Navigation Anatomy (02:49)
• Demo: Navigation Anatomy (01:36)
• Navigation Anatomy (cont.) (00:49)
• Navigating with edge swipe (00:24)
• Navigating with the header (01:11)
• Demo: Navigation Pattern (01:43)
• Filters, Pivots, and Views (02:57)
• Demo: Filtering (02:07)
• Commanding Patterns (02:36)
• The AppBar (01:15)
• Command Placement (02:22)
• Using the Canvas (01:03)
• Using Charms (01:03)
• Context Menus (01:29)
• Summary (00:16)