KDE Visual Design Group/KirigamiHIG
Kirigami Human Interface Guidelines
Welcome to the Kirigami Human Interface Guidelines (HIG)! The goal of this document is to help anybody who designs user interfaces for mobile or convergent mobile/desktop applications which will be implemented using the Kirigami Components.
They 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.
Overview
These are the basic principles guiding Kirigami design:
Direct: NEED INFO
Convergent: NEED INFO
Ease of Use, Navigation: NEED INFO
Content Oriented: NEED INFO
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
Accessibility
Loading
Modality
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
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
- Icons - Guidelines for icon usage and design
Image Size and Resolution
App Icon
Custom Icons
Launch Screen
System Icons
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
Controls
Buttons
Edit Menus
Labels
Page Controls
Pickers
Progress Indicators
Refresh Content Controls
Segmented Controls
Sliders
Steppers
Switches
Text Fields
Extensions
Custom Keyboards
Document Providers
Home Screen Actions
Messaging
Photo Editing
Sharing and Actions
Widgets
Technologies
Resources
Implementation
For technical documentation, see the API documentation