Three classes, 23 modules, for Designing and App Development for Modern (aka Metro) UI and Devices

Designing for Modern UI

This curriculum contains 11 modules that provide tutorials on how to design for the Windows 8 UI METRO language. The content is 100 Level and can be used as part of a UI/UX class or for self-paced independent learning. The focus of the content is on METRO style design. This material is suitable for any college student, including business, social sciences, liberal or fine arts, students who may have little or no computer programming background

This curriculum provides tutorials on how to design for the Windows 8 UI METRO language. The content is 100 Level and can be used as part of a UI/UX class or for self-paced independent learning. The focus of the content is on METRO style design.

This material is suitable for any college student, including business, social sciences, liberal or fine arts, students who may have little or no computer programming background. There are no programming skills required and the early modules start from basics and build skills required for more advanced topics.

Because this content can be used as part of an Academic class it includes background information, describing problems that are being solved, and provides background information as well as terminology that relate to Human Computer Interaction (HCI).

The material contains an Instructor Guide and video files that accompany the exercise files.

Learning Objectives:

Module 1: The Metro Design Solution

Module 1 includes an overview of the Windows 8 platform, and how Metro style apps fit into the user experience. This module introduces components to designers that not only should they be aware of but that they should integrate into their own application designs.

Module 2: User Experience Design Fundamentals

In this module, your students learn the fundamentals of the user experience design process. This session explains and navigates your students a typical process that a UX designer might follow when creating any app. It is important that you frame this module as a precursor to creating Metro style aps. Metro style apps are rooted in good user experience and are the key to building apps that are successful.

Module 3: Applying User Experience Process to Metro Applications

In this module, your students take the principles covered in Module 2, “User Experience Design Fundamentals,” and apply them to building their own Metro style app. They can choose to build the app from one of the example concepts provided, or build from their own concept. Students will spend a considerable amount of time in the planning stages of creating a Metro style app, which might be different than any experiences that they have had in the past with building apps. The benefit to this planning is that development time should proceed more efficiently, due to their planning and preparation.

Module 4: Introduction To Metro Design Principle: Do More with Less

This module builds on the exercise in Module 3 where students created a “best-at” statement and then created scenarios that followed situations that the user might be in when using their application. In this module, students will start recognizing the relationship between the user experience process, discussed in Module 3, and how it relates to the features and organization of content in a Metro style app.

Module 5: Organizing Features To Fit The Scenario

In this module, students discover the relationship between the scenarios that they have created in Module 3, “Applying User Experience Process To Metro Applications,” and the related features they created in Module 4, “Introduction to Metro Design Principle: Do More With Less.” Students discover how to organize features as commands on the canvas, or in the App bar. The App bar is a unique method for presenting features in a Metro app that is only available in the Windows 8 platform.

Module 6: Introduction to Metro Design Principle: Pride in Craftsmanship

In this module students learn how the grid is used in Metro style design and how type is handled using the typographic grid and the type ramp. By the end of this module participants will feel confident in their understanding of the guidelines for using both the grid and type in Metro style applications.

Module 7: Being Fast and Fluid, and Authentically Digital

In this module students learn about two major components of Metro style apps: Animation and designing for touch interaction. These two components are part of a larger concept called “authentically digital.” Students discover how removing the traditional physical metaphors of application design allow them to create new and useful experiences for users.

Module 8: Winning as One: Using and Charms Contracts

In this module students discover how their users can take advantage of charms to enable unique integrated experiences between their app and the Windows 8 platform. Students also find out how charms are enabled by implementing contracts, agreements with other apps and the system UI. After this module, students will be able to create and implement scenarios where their app’s users can integrate with other apps or services on the platform. Students will also discover how they can design experiences for the results of those interactions.

Module 9: Introduction to Live Tiles and Notifications

In this module, students learn the role of live tiles in a Metro Style application and discover why it is important to invest in a tile on the Start menu. They also learn about the Metro templates that are available for use as well as the various features of the Live tile, such as peek and cycle. Additional topics covered include branding, badges, and notifications.

Module 10: Designing for Multiple Screens and Resolutions

In this module, students discover techniques used for designing an app that looks great and works great on all screens. They also discover how to take advantage of snap and portrait, new views that are unique to Windows 8 and the tablet form factor.

Module 11: App Submission Process

In this module, students learn about the Windows Store and how to submit apps for sale and distribution. Trial versions, monetization options, and the certification process are reviewed.

App Development for Modern UI

This curriculum contains 9 modules that provide an overview of Metro style app development using JavaScript and HTML/CSS. The scope of this curriculum covers the fundamental concepts of developing Metro style apps using JavaScript. This material contains an Instructor Guide and video files that accompany the exercise files.

This curriculum contains 9 modules that provide an overview of Metro style app development using JavaScript and HTML/CSS. Ideally, the lessons will be taught in order, since a common app is built; progressively starting with Module 4. However, you can use each lesson independent of the others if needed, as there are “starter” solutions for each module.

The scope of this curriculum covers the fundamental concepts of developing Metro style apps using JavaScript. Throughout the curriculum, you will find references to more advanced topics that are suitable for follow-up assignments.

This material contains an Instructor Guide and video files that accompany the exercise files.

Learning Objectives:

Module 1: Components of HTML5 and CSS3

In this module, students learn about core concepts of HTML5 and CSS3 as used in Metro apps, including layout models, styles, and animations. Specifically, they examine page layout using regions, grid layout, flexible box layout, multiple columns, text-wrap, and media queries. They also explore 2D & 3D transforms, transitions, animations, gradients, box and text shadow, border-radius, inline SVG and canvas.

Module 2: Creating App Layouts and Design Using HTML5, CSS, and JavaScript

In this module, students learn to create and modify page layouts of a Metro style app. Specifically they learn how to modify the rows and columns of a Grid Layout using Blend as well as to open a Metro style JavaScript project in Visual Studio.

Module 3: Advanced Adaptive Layout

In this module, students learn about the different views supported by Metro style apps, including Full Screen, Snapped, and Fill. They learn to use CSS styles to support these multiple views, and how to respond to View State changes in their apps.

Module 4: App Development Essentials

In this module, students learn the structure of a JavaScript based Windows Metro Style Project. They explore the tools used to create Metro Style Apps, look at the different templates available, and create a simple Grid app.

Module 5: Using JavaScript in Metro Apps

In this module, students learn how to add logic to their apps using JavaScript, how to create custom data entry forms, and how to use Metro-specific controls such as the Application Bar and Flyout control.

Module 6: Working with Files

In this module, students learn about the special security restrictions in Metro apps, how to configure the App Manifest to allow access to files, and how to use File Pickers to access user files. They also explore how they can use the StorageFolder class to save application specific data.

Module 7: Accessing and Displaying Data

In this module, students learn how to access data from web services, and display that data in a Metro Grid App project. They learn about the WinJS.xhr function, which makes it easy to call services in an asynchronous manner.

Module 8: Using Contracts and App Lifecycle

In this module, students learn how to implement contracts in our applications, such as the search contract. They will discover how to respond to lifecycle events so that users get the best experience when performing app switching.

Module 9: Selling Through The Windows Store

In this module, students learn about the Windows Store and how to submit apps for sale and distribution. Trial versions, monetization options, and the certification process are reviewed.