Channel 9 - Entries tagged with Design

Windows 8 UX Design: (13) The Windows Store

JeffKoch — Tue, 30 Apr 2013 00:05:58 GMT

This session provides an overview on the Windows Store and how to monetize and submit your App into Windows Store. Find out more on selling in a global market and the key to getting discovered.

[05:25] - Global reach
[17:39] - In-app purchase demo
[21:15] - Advertising
[36:19] - Publishing apps to the Windows Store

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (12) Globalization

JeffKoch — Tue, 30 Apr 2013 00:05:37 GMT

This module covers designing a global app for a global market and tips and tricks to make your app more successful. Since windows is used worldwide, is available in over 100 languages, and in over 200 markets, leveraging what Windows offers increases the audience for your app.

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (10) Animation

JeffKoch — Tue, 30 Apr 2013 00:05:16 GMT

Add beauty, energy, motion and personality to your Apps. This module focuses on how to enhance the user experience via animation.

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (11) Accessibility

JeffKoch — Tue, 30 Apr 2013 00:05:02 GMT

This session covers details on what exactly it is and how you can prepare your app to declare it as an accessible app in the Windows Store.

[08:06] - Assitive technologies in Windows 8
[25:42] - Testing for accessibility

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (08) Tiles and Notifications

JeffKoch — Tue, 30 Apr 2013 00:04:45 GMT

An app that is alive with activity entices users to be engaged. This section provides an overview on what users see, how they discern when the content on a tile is live and how to reflect your brand.

[05:01] - Different kinds of tiles
[23:01] - Secondary tiles
[35:50] - Tile badges
[40:00] - Toast notifications
[48:51] - Splash screen

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (09) Touch

JeffKoch — Tue, 30 Apr 2013 00:04:35 GMT

Learn it once and use it everywhere. Windows 8 touch language gives people a sense of confidence and helps you focus on what makes your app great and how you can manage this via the built-in platform controls.

[11:57] - Touch truths
[22:59] - Targeting
[29:22] - Mouse, keyboard and pen

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (05) UI Elements

JeffKoch — Tue, 30 Apr 2013 00:04:30 GMT

This section focuses on various surfaces, canvas, app bars, flyouts, context menus, message dialogs and charms. Windows 8 contains a lot of templates which you can leverage to help you organize command and decide what and what not to create.

[08:42] - Commanding surfaces
[23:33] - App bar design

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (06) Snap and Scale Beautifully

JeffKoch — Tue, 30 Apr 2013 00:03:29 GMT

Windows 8 is for all PCs. When designing you need to consider screen size, orientation, view state and pixel density. Pick up some additional tips and tricks in this module.

[02:15] - Considerations for app scaling
[07:57] - Screen size
[17:24] - Use templates and controls
[26:15] - Snap view
[33:25] - Design a snapped state
[42:37] - Pixel density

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (04) Layout

JeffKoch — Tue, 30 Apr 2013 00:03:04 GMT

Stay focused on what makes your app great and away from distractions (chrome) that weaken your app. This module focuses on how to simplify the experience by immersing people in what they love and by solving for distractions not discoverability.

[03:25] - Laying out content
[14:32] - Chaining
[21:39] - Grid layouts
[35:56] - Typography
[48:50] - Branding

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (01) The Microsoft Design Language

JeffKoch — Tue, 30 Apr 2013 00:02:24 GMT

In this module Chris and Brandy provide an overview on the Microsoft design principles - do more with less, pride in craftsmanship, be fast and fluid, authentically digital, and win as one. Learn how these principles inspires confidence, comfort and familiarity for our customers.

[13:46] - Microsoft design language
[32:44] - Windows 8 design principles
[46:20] - Authentically digital

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (03) Navigation

JeffKoch — Tue, 30 Apr 2013 00:02:19 GMT

Simple, intuitive navigation promotes discovery and fluidity, so focus on where you are and not where you can go. Learn more on how to help users focus on content through navigations patterns.

[02:33] - Navigation patterns
[09:51] - Hierarchical pattern
[16:41] - Hub page

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Windows 8 UX Design: (02) Less is More

JeffKoch — Tue, 30 Apr 2013 00:02:08 GMT

If it doesn't help you be great, it distracts from it - basically if the user didn't ask for it, they don't want it. This session covers how to design your Windows Store App by deciding what it does great and what is needed to support its greatness.

[02:28] - Create a "great at" statement
[05:28] - Choose the right user flows
[10:55] - Choose the right features

Full course outline:

Mod 01: The Microsoft Design Language
Mod 02: Less is More
Mod 03: Navigation
Mod 04: Layout
Mod 05: UI Elements
Mod 06: Snap and Scale Beautifully
Mod 07: Charms, Contracts and Extensions
Mod 08: Tiles and Notifications
Mod 09: Touch
Mod 10: Animation
Mod 11: Accessibility
Mod 12: Globalization
Mod 13: The Windows Store

Using Microsoft VDI to Enable New Workstyles: (05) Capacity Planning and Architecture

JeffKoch — Mon, 22 Apr 2013 20:55:51 GMT

Designing a large scale VDI architecture can be a challenge. In this section more details are provided on how to scale and analyze performance across different types of storage.

[11:13] - Design a large scale MS VDI deployment
[19:18] - 5000 seat pooled-VMs using Local Storage
[29:40] - 5000 seat pooled-VMs on SMB
[35:45] - 5000 seat mixed deployment

Full course outline:

Mod 01: Introduction to Desktop Virtualization
Mod 02: Optimizing the User Experience
Mod 03: Deploying Virtual Desktops with Windows Server 2012 and RDS
Mod 04: Hyper-V for VDI
Mod 05: Capacity Planning and Architecture
Mod 06: Leveraging Citrix
Mod 07: Microsoft VDI Licensing

TWC9: VS 2012.3 CTP1, Windows Azure IaaS, ALM VM's, NFC, UX resources and Kitties!

Clint Rutkas, Greg Duncan, Peter Dwersteg — Fri, 19 Apr 2013 23:41:30 GMT

This week on Channel 9, Peter and Clint discuss the week's top developer news, including;

[00:32] Visual Studio 2012 Update 3 CTP 1, Description of Visual Studio 2012 Update 3 CTP 1
[01:06] Windows Azure: General Availability of Infrastructure as a Service (IaaS) (Scott Guthrie)
[01:58] Microsoft.Bcl.Async is Now Stable (Immo Landwerth)
[02:35] What’s Visual Studio’s Code Map All About? (Richard Banks)
[03:43] List of all Visual Studio ALM Virtual Machines (http://aka.ms/ALMVMs), Visual Studio 2012 Update 2 ALM Virtual Machine and Hands-on-Labs / Demo Scripts Now Available (Brian Keller)
[04:19] Develop a cutting edge app with NFC (Priya Dandawate)
[05:15] UX/UI Design the benefits of building prototype, even if you have only initial sketches of your prototype. (Lee Stott )
[06:47] Where can I get some tips and guidance design resources? (Lee Stott)
[07:25] App Art (Jeremy Foster)
[08:16] Developer Must-Have: 125+ Apps for Office and SharePoint Code Samples (Ricardo Loo )
[08:58] WorldWide Telescope Sharpens it's Visuals with SharpDX (Jonathan Fay)

Picks of the Week!

Peter's Pick of the Week:[10:43] Kitty Radar Cat Detector (Lucy Black), http://harthur.github.io/kittydar/ (Heather Arthur)
Clint's Pick of the Week:[12:15] Xbox 360 “Achievement Unlocked” sound as a visual (Major Nelson)

Windows Phone Design Bootcamp 201: Composition

Jean-Christophe Cimetiere, Laura Foy, jaredtpotter — Wed, 19 Dec 2012 06:25:30 GMT

Windows Phone Design Bootcamp Overview:

Windows Phone Design 101 covers the philosophy, inspiration and visuals that are Windows Phone Design Language. Starting with the basic terminology of design, this boot camp will take you from its early origins to the Design Principles each screen in Windows Phone was measured against. From there, we will show you the design process that guided its creation. Lastly, we will discuss the larger Microsoft Design ecosystem including Windows 8.

In Windows Phone Design 201 focuses on the skills necessary to implement "pixel-perfect" Windows Phone UI. 201 will cover the "system" including basics of the phones navigation model, interaction with the shell and an overview of gesture system. Next it will cover "composition", which is about how to clearly define when it is appropriate to use a page template and when to use a particular animation or page transition or how to harness screen orientation. Lastly, we will cover, controls and APIs available for creating your own experiences and give tips on how to do simple prototyping.

Session 1: The System
[YOU ARE HERE] Session 2: Composition
Session 3: Controls & APIs

Boot camp presenter: Jared T Potter

Former Windows Phone Design Integration Lead for 3 years, Jared is now Principle Designer for SixThAveStudios.com. Jared's focus is to combine the most cutting edge design language, user experience and motion graphics into a complete mobile user experience. http://www.linkedin.com/in/jaredpotter

Useful resources

Windows Phone Design Bootcamp 201: Controls & API's

Laura Foy — Wed, 19 Dec 2012 06:07:53 GMT

Windows Phone Design Bootcamp Overview:

Session 1: The System
Session 2: Composition
[YOU ARE HERE!] Session 3: Controls & APIs

Boot camp presenter: Jared T Potter

Useful resources

Windows Phone Design Bootcamp 101: Windows Ecosystem & Cocktail Flow apps case study

Jean-Christophe Cimetiere, Laura Foy — Tue, 18 Dec 2012 19:28:18 GMT

Windows Phone Design Bootcamp Overview:

Session 1: What is Design
Session 2: Windows Design Language
Session 3: The Design Driven Product
Session 4: Windows Phone 8 Demo
[YOU ARE HERE!]Session 5: Windows Ecosystem & Cocktail Flow apps case study

Boot camp presenter: Jared T Potter

Useful resources

Windows Phone Design Bootcamp 201: The System

Jean-Christophe Cimetiere, Laura Foy, jaredtpotter — Mon, 10 Dec 2012 20:34:55 GMT

Windows Phone Design Bootcamp Overview:

[YOU ARE HERE] Session 1: The System
Session 2: Composition
Session 3: Controls & APIs

Boot camp presenter: Jared T Potter

Useful resources

Windows Phone Design Bootcamp 101: Windows Phone 8 Demo

Laura Foy, jaredtpotter — Fri, 07 Dec 2012 19:03:43 GMT

Windows Phone Design Bootcamp Overview:

Session 1: What is Design
Session 2: Windows Design Language
Session 3: The Design Driven Product
[YOU ARE HERE!] Session 4: Windows Phone 8 Demo
Session 5: Windows Ecosystem & Cocktail Flow apps case study

Boot camp presenter: Jared T Potter

Useful resources

Windows Phone Design Bootcamp 101: The Design Driven Product

Laura Foy — Thu, 06 Dec 2012 04:31:58 GMT

Windows Phone Design Bootcamp Overview:

Session 1: What is Design
Session 2: Windows Design Language
[YOU ARE HERE!] Session 3: The Design Driven Product
Session 4: Windows Phone 8 Demo
Session 5: Windows Ecosystem & Cocktail Flow apps case study

Boot camp presenter: Jared T Potter

Useful resources

Windows Phone Design Bootcamp 101: Windows Design Language

Jean-Christophe Cimetiere, Laura Foy, jaredtpotter — Tue, 04 Dec 2012 05:35:03 GMT

Windows Phone Design Bootcamp Overview:

Session 1: What is Design
[YOU ARE HERE] Session 2: Windows Design Language
Session 3: The Design Driven Product
Session 4: Windows Phone 8 Demo
Session 5: Windows Ecosystem & Cocktail Flow apps case study

Boot camp presenter: Jared T Potter

Useful resources

Windows Phone Design Bootcamp 101: What is Design?

Jean-Christophe Cimetiere, Laura Foy, jaredtpotter — Thu, 29 Nov 2012 17:12:57 GMT

Windows Phone Design Bootcamp Overview:

[YOU ARE HERE] Session 1: What is Design
Session 2: Windows Design Language
Session 3: The Design Driven Product
Session 4: Windows Phone 8 Demo
Session 5: Windows Ecosystem & Cocktail Flow apps case study

Boot camp presenter: Jared T Potter

Useful resources

Designing your Windows 8 app to be the best in its category

Roxanne Beaver — Mon, 22 Oct 2012 23:16:16 GMT

When starting to design a Windows 8 app, the most important thing to do is pick out a best-at statement. To create one, answer the question: "This app is the best app in its category at what?"

Take the time to come up with a great best-at statement because many of your decisions, from what features you build to how you lay out the content in your app will be based on it.

For more information on designing your app, please see:

Planning Windows Store apps

8 traits of great Windows Store apps

Roxanne Beaver — Thu, 18 Oct 2012 18:02:50 GMT

Learn the 8 traits of building great Windows Store apps including how to embrace the Microsoft Design Principles. If you follow these guidelines you'll not only build stunning Windows Store apps, but also delight your customers.

For more information on the Microsoft Design Principles, see the reference links here:

IWP40: UX Designer Jon Bell talks Common App Design Problems

Larry Lieberman — Thu, 04 Oct 2012 18:34:21 GMT

It's been a while since we've discussed building great user experiences for Windows Phone, so we thought we'd check in with designer Jon Bell, who works on the Windows Phone UX team. Jon's day job is designing the "communication experience."

Jon's made a lot of observations about the thousands of apps we see submitted to Windows Phone and had a lot of great points to share about what constitutes an outstanding app.

Here are a lot of other great resources to look through as you think about Windows Phone application design:

Windows Phone Official User Experience Guidelines

Jeff Wilcox's "Metro" Design Guide for Developers

Windows Phone Design Presentations

Windows Phone Design Assets

PSD Templates
PNG Grid (Useful in Blend)
SDK (contains Blend and icons – see prototyping video above)
Windows Phone Tool Kit (contains extra controls for prototyping)

... and finally, a great piece by Will Faught on how to use the animated transitions in the Toolkit.

Questions?

Tweet to @LarryALieberman