QML by Design

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

  • Skills associated with UI design or graphic artistry for UI design
  • Understanding of the concepts of style sheets, such as CSS 
  • Experience with JavaScript is helpful but not required

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 Qt Meta Language (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 Qt and QML

    2. How QML fits into a complete application

    3. How Designers fit in the QML development process

  2. Visual Building Blocks

    1. Rectangles & Color

    2. Images

    3. Text

    4. Basic QML file structure

  3. Tools for Layout in QML

    1. Controlling element position and size

    2. Anchoring one element to another

    3. Techniques for adaptive layout

    4. How to approach layout breakdown

  4. User Input

    1. Touch and Mouse input

    2. Text input

  5. Creating Reusable Components

    1. Simple component structure

    2. Adding customizable properties

    3. Component Normalization

    4. Defining different states for a component

  6. Animation

    1. Making elements move on screen

    2. Animated transitions between states

  7. Presenting collections of data

    1. Model/View concept

    2. Lists and Grids of data

Download Course Description: QML By Design - PDF