KDE Visual Design Group/KirigamiHIG

Kirigami Human Interface Guidelines

This guide will provide you with insight and examples to use for any designers using Kirigami. Kirigami is a convergent UI framework used in mobile and desktop applications. They are also convergent.

These guidelines help you to make optimal use of the Kirigami Components, as they reflect the design ideas behind the components. If you have any questions, please contact the KDE VDG (vdesign [at] kde [dot] org)

These guidelines are for Kirigami-specific aspects of user interface design. For general recommendations on design concepts, see the concept page in the general KDE HIG. The Kirigami HIG are separated in three parts: Design Principles, UI Patterns and a Styleguide for KDE Applications.

KDE has a long tradition of providing user interface components beyond the basics that are offered in Qt itself. With KDE Frameworks 5, these have become more easily available for Qt developers who are not part of KDE. Now, with KDE's focus expanding beyond desktop and laptop computers into the mobile and embedded sector, our QWidgets-based components alone are not sufficient anymore. In order to allow developers to easily create Qt-based applications that run on any major mobile or desktop operating system (including our very own existing Plasma Desktop and upcoming Plasma Mobile, of course), we have created a framework that extends the touch-friendly Qt Quick Controls: Welcome Kirigami UI!

Kirigami UI isn't just a set of components, it's also a philosophy: It defines precise UI/UX patterns to allow developers to quickly develop intuitive and consistent apps that provide a great user experience. Some concepts are: Actions are available in two drawers and additionally through some shortcuts (buttons or swipes); actions and options are distinguished into global ones and contextual ones, put in two different drawers in the opposite vertical sides of the screen; app's content is organized in pages that you can browse through with horizontal swipes. The Kirigami Components for smartphones are optimized to allow easy navigation and interaction with just one hand, making it ideal for using applications casually "on the move". Kirigami UI is not only for smartphone applications, however: It will allow to create convergent applications, which are not simply the exact same user interface scaled to different sizes, but morphing between optimized interfaces based on the input method and screen size, changing as the context changes (e.g. flipping over a convertible, docking a phone). Another important concept is non-invasive pop-ups to undo an action, rather than confirmation dialogs.

As Kirigami aims to seamlessly integrate with the basic sets of controls offered by QtQuick, such as QtQuickcontrols, it does not duplicate the effort to provide essential controls such as buttons and text input fields, but provides ready to use, high level controls to implement its design philosophy and UX guidelines.

Why the name Kirigami? Kirigami is a Japanese art of papercraft. It is derived from origami, but adds cutting as an additional technique to folding. The reason we chose it as the name for our UI framework is that different layers or "sheets" in the UI are an important element in its design philosophy. Navigating through screens and the pop up of the drawers are like flicking through sheets of paper.

The first real-world application implemented using Kirigami Components, Subsurface-mobile, has recently been released for Android, a version for iOS is currently in the works, and the cool thing is: The two versions share most of their code! The Subsurface mobile team (which is lead by Intel's Chief Linux and Open Source Technologist Dirk Hohndel and has a certain Linus Torvalds as one of their core contributors) and their group of enthusiastic beta testers have worked closely with the developers and designers behind Kirigami to improve both the framework and the application based on their real-world experiences.

The Kirigami Components are planned to become part of KDE Frameworks 5, but will initially be released stand-alone around the end of April. They are aimed to be a Tier 1 framework, meaning they have no other dependencies apart from Qt, and therefore won't increase your application's size any more than necessary.

If you're planning to build a mobile or convergent mobile/desktop application using Qt and would like to give your users easy ways to navigate through pages and access functions, be sure to give Kirigami UI a try!

Overview

These are the basic principles guiding Kirigami design:

Direct: NEED INFO

• When creating convergent UIs, optimize the UI separately for each device class

Convergent: NEED INFO

Ease of Use, Navigation: NEED INFO

• Optimize your application for use with one hand\
• Allow for a clear and predictable navigation

Content Oriented: NEED INFO

• Make as much space available for the content as possible

UI Patterns

Here you find patterns for solving specific design problems with Kirigami Components:

• Navigation Patterns - Patterns for navigating through content or between different "Screens" of an application
• Command Patterns - Patterns for executing commands

Architecture

UI Accessibility

Loading

Modality

Navigation

Onboarding

Requesting Permission

Settings

User Interaction

Audio

Authentication

Data Entry

Drag and Drop

Feedback

File Handling

Gestures

Undo and Redo

System Capabilities

Multitasking

Notifications

Printing

Quick Look

Ratings and Reviews

Screenshots

Visual Design

Adaptivity and Layout

Animation

Branding

Color

Terminology

Typography

Styleguide

Kirigami UI isn't just a set of components, it's also a philosophy: It defines precise UI/UX patterns to allow developers to quickly develop intuitive and consistent apps that provide a great user experience. Some concepts are: Actions are available in two drawers and additionally through some shortcuts (buttons or swipes); actions and options are distinguished into global ones and contextual ones, put in two different drawers in the opposite vertical sides of the screen; app's content is organized in pages that you can browse through with horizontal swipes. The Kirigami Components for smartphones are optimized to allow easy navigation and interaction with just one hand, making it ideal for using applications casually "on the move". Kirigami UI is not only for smartphone applications, however: It will allow to create convergent applications, which are not simply the exact same user interface scaled to different sizes, but morphing between optimized interfaces based on the input method and screen size, changing as the context changes (e.g. flipping over a convertible, docking a phone). Another important concept is non-invasive pop-ups to undo an action, rather than confirmation dialogs.

This guide helps to create applications in line with the KDE user interface style

• Colors - Guidelines for use of color, including the Breeze color palette
• Typography - Guidelines for font usage and typography
• Animations - Guidelines for design and use of animations
• Text Guidelines for the written, language-based elements of the interface. Includes guidelines on wording, capitalization and localization.

Icons and Images

Image Size and Resolution

App Icon

• Icons - Guidelines for icon usage and design

Custom Icons

Launch Screen

System Icons

Bars

Navigation Bars

Search Bars

Status Bars

Tab Bars

Toolbars

Views

Action Sheets

Activity Views

Alerts

Collections

Image Views

Maps

Pages

Popovers

Scroll Views

Split Views

Tables

Text Views

Web Views

Implementation

For technical documentation, see the API documentation

Drafts

• Details in the context drawer