KDE Visual Design Group/KirigamiHIG: Difference between revisions

From KDE Community Wiki
Line 109: Line 109:


==Controls==
==Controls==
===Buttons===
===Edit Menus===
===Labels===
===Page Controls===
===Pickers===
===Progress Indicators===
===Refresh Content Controls===
===Segmented Controls===
===Sliders===
===Steppers===
===Switches===
===Text Fields===


==Extensions==
==Extensions==

Revision as of 01:20, 10 February 2018

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:

Architecture

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

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

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

Controls

Buttons

Edit Menus

Labels

Page Controls

Pickers

Progress Indicators

Refresh Content Controls

Segmented Controls

Sliders

Steppers

Switches

Text Fields

Extensions

Technologies

Resources

Implementation

For technical documentation, see the API documentation

Drafts