KDE Visual Design Group/Plasma Mobile: Difference between revisions

From KDE Community Wiki
(Added link to bottom bar design)
(Updated links, fixed spelling)
 
Line 1: Line 1:
==Concept==
==Concept==


See [https://techbase.kde.org/Projects/Usability/HIG KDE HIG] for guidelines on this design approach.
See [https://hig.kde.org] for guidelines on this design approach.


===Plasma Mobile Vision===
===Plasma Mobile Vision===


Plasma Mobile aims to become a complete software system for mobile devices. It is designed to give privacy-aware users back the full-control over their information and communication. Plasma Mobile takes a pragmatic approach and is inclusive to 3rd party software, allowing the user to choose which applications and services to use. It provides a seamless experience across multiple devices. Plasma Mobile implements open standards, and it is developed in a transparent process that is open for the community to participate in.
Plasma Mobile aims to become a complete software system for mobile devices. It is designed to give privacy-aware users back the full control over their information and communication. Plasma Mobile takes a pragmatic approach and is inclusive to 3rd party software, allowing the user to choose which applications and services to use. It provides a seamless experience across multiple devices. Plasma Mobile implements open standards, and it is developed in a transparent process that is open for the community to participate in.


===Personas===
===Personas===
Line 15: Line 15:
==UI Patterns==
==UI Patterns==


Plasma as a UI/UX set is intended to be interconnected between desktop usage and phone usage. Due to this the general Human Interface Guidelines are written to give both use cases room to unify them avoid two separate tracks of design and implementation.
Plasma as a UI/UX set is intended to be interconnected between desktop usage and phone usage. Due to this, the general Human Interface Guidelines are written to give both use cases room to unify them avoid two separate tracks of design and implementation.


That means that you as a developer should read the Plasma Human Interface Guidelines in the their entirety. But since these are early days, during construction of the Phone sections of the HIG we will post links to them here as well.
That means that you as a developer should read the Plasma Human Interface Guidelines in their entirety. But since these are early days, during construction of the Phone sections of the HIG we will post links to them here as well.


===Navigation Patterns===
===Navigation Patterns===
Navigation Patterns depend on the structure of the application content. Navigation patterns can be combined with command patterns and content patterns to design the complete layout for your application. [https://techbase.kde.org/Projects/Usability/HIG/Patterns/NavigationPatterns#Patterns_for_phone_user_interfaces]
Navigation Patterns depend on the structure of the application content. Navigation patterns can be combined with command patterns and content patterns to design the complete layout for your application. [https://hig.kde.org/patterns/navigation/index.html]


===Command Patterns===
===Command Patterns===
Command patterns are determined by the command structure chosen for the application. A command is any function performed by the application based on user input. Commands that perform similar functions may be grouped together. The collection of commands and command groups make up the command structure of the application.
Command patterns are determined by the command structure chosen for the application. A command is any function performed by the application based on user input. Commands that perform similar functions may be grouped together. The collection of commands and command groups make up the command structure of the application.
Command patterns can be combined with navigation patterns and content patterns to design the complete layout for your application. [https://techbase.kde.org/Projects/Usability/HIG/Patterns/CommandPatterns]
Command patterns can be combined with navigation patterns and content patterns to design the complete layout for your application. [https://hig.kde.org/patterns/command/index.html]


==Layout Design==
==Layout Design==


The specific fundamentals of the design is directly based on visuals from the Plasma Desktop and all mockups created from the same artefacts and elements as the main desktop. [https://techbase.kde.org/Projects/Usability/HIG/Style]
The specific fundamentals of the design are directly based on visuals from the Plasma Desktop and all mockups created from the same artifacts and elements as the main desktop. [https://hig.kde.org/style/index.html]


All use the same toolkit as base as well as the same colour themes, icon rules and typography rules.
All use the same toolkit as base as well as the same color themes, icon rules, and typography rules.


==Shell Design Proposals==
==Shell Design Proposals==

Latest revision as of 22:38, 5 February 2019

Concept

See [1] for guidelines on this design approach.

Plasma Mobile Vision

Plasma Mobile aims to become a complete software system for mobile devices. It is designed to give privacy-aware users back the full control over their information and communication. Plasma Mobile takes a pragmatic approach and is inclusive to 3rd party software, allowing the user to choose which applications and services to use. It provides a seamless experience across multiple devices. Plasma Mobile implements open standards, and it is developed in a transparent process that is open for the community to participate in.

Personas

Scenarios

Organization

UI Patterns

Plasma as a UI/UX set is intended to be interconnected between desktop usage and phone usage. Due to this, the general Human Interface Guidelines are written to give both use cases room to unify them avoid two separate tracks of design and implementation.

That means that you as a developer should read the Plasma Human Interface Guidelines in their entirety. But since these are early days, during construction of the Phone sections of the HIG we will post links to them here as well.

Navigation Patterns

Navigation Patterns depend on the structure of the application content. Navigation patterns can be combined with command patterns and content patterns to design the complete layout for your application. [2]

Command Patterns

Command patterns are determined by the command structure chosen for the application. A command is any function performed by the application based on user input. Commands that perform similar functions may be grouped together. The collection of commands and command groups make up the command structure of the application. Command patterns can be combined with navigation patterns and content patterns to design the complete layout for your application. [3]

Layout Design

The specific fundamentals of the design are directly based on visuals from the Plasma Desktop and all mockups created from the same artifacts and elements as the main desktop. [4]

All use the same toolkit as base as well as the same color themes, icon rules, and typography rules.

Shell Design Proposals

Implementation Targets