QML by Design

Course Description

Course Availability: On-site; open enrollment
Duration: 3 days

Click here for mandatory computer requirements

The introduction of the iPhone, and later Android devices, forever changed the way people engage with devices and technology and raised expectations. Gone are the days when interacting with simple square boxes on a screen using a physical keyboard and mouse is acceptable. Today’s consumers demand elegant, graphical, intuitive, responsive applications.  

To achieve the sophisticated user experiences consumers clamor for, software design teams now include user experience (UX) designers and graphic designers -- visual communication experts who establish the look, the feel, and the behavior of the application before software engineers bring it to life.

Typically, designers provide engineers with mocked up images showcasing how the finished application should look and written specifications indicating how it should behave. But, there’s a problem. While images can capture the rich look of the application, the subtle interactive nuances are often lost in the written specification. It is not uncommon for software engineers to implement something that looks as the designers intended but behaves altogether differently. In some cases, designers may even specify an action or effect that is impossible for engineers to implement.

A better solution is for designers to provide software engineers with a working, interactive prototype as a live specification, rather than static images and frozen documents. QML by Design will teach you how to create these interactive prototypes.

QML by Design is a three-day course aimed at UX and graphic designers. You’ll learn how to create working prototypes that will act as functional specifications to show the development engineers what to build. Using QML, a user interface markup language, designers can generate responsive mockups that not only reveal the look of the final user interface but its key behaviors, as well. Rather than read about the transition from one screen to the next, software engineers can actually see the desired transition in action.

QML by Design covers the designer-to-engineer workflow and each party's role, as well as presents an overview of QML and examples of what can be done with this language. Through a combination of presentations and interactive labs, designers are guided through the process of creating interactive mockups, moving from simple to sophisticated over the three days.

Note: this is not a programming class. The prototypes produced during this course are intended as interactive specifications that show how end applications look and behave. Using these prototypes, engineering teams implement their own production quality code.

1. Introduction

   1. Overview of QML: What it is and isn’t

   2. Examples of what can be done using QML

   3. QML as part of the UX/graphic designer-to-engineer workflow

   4. Overview of course

2. In-Depth Look at the UX/Graphic Designer-to-Engineer Workflow

   1. Initial design

   2. Graphical mockups

   3. Exploring structure and flow using wireframes

   4. Pattern library and style guide

   5. Extracting the graphical assets

   6. Creating an interactive mockup with QML

3. Using QML

   1. Visual items and basic structure

   2. Designer workflow

   3. Layout tools and techniques

   4. Input and internal communication

   5. Creating components

   6. Animation

   7. Handling adaptive layout

   8. Best practices and debugging

   9. Advanced Topics

4. Wrap up

Download Course Description: QML By Design - PDF 

< Back to full list of training