Commit b0016b88 authored by Fabian Riethmayer's avatar Fabian Riethmayer

Merge branch 'master' into qmlgrabber

parents 2865924c 76907bbe
This diff is collapsed.
......@@ -48,38 +48,34 @@ Design Vision
KDE's design vision focuses on two attributes of KDE software that connect its
future to its history:
- **Simple by default** - Simple and inviting. KDE software is pleasant
to experience and easy to use.
- **Powerful when needed** - Power and flexibility. KDE software allows
users to be effortlessly creative and efficiently productive.
Design Principles
-----------------
The following design principles are used in support of the Design Vision.
- **Simple by default**
- *Make it easy to focus on what matters.* - Remove or minimize elements
not crucial to the primary or main task. Use spacing to keep things
organized. Use color to draw attention. Reveal additional information or
optional functions only when needed.
- *I know how to do that!* - Make things easier to learn by reusing design
patterns from other applications. Other applications that use good design
are a precedent to follow.
- *Do the heavy lifting for me.* - Make complex tasks simple. Make novices
feel like experts. Create ways in which your users can naturally feel
empowered by your software.
- **Powerful when needed**
- *Solve a problem.* - Identify and make very clear to the user what need is
addressed and how.
- *Always in control.* - It should always be clear what can be done, what is
currently happening, and what has just happened. The user should never
feel at the mercy of the tool. Give the user the final say.
- *Be flexible.* - Provide sensible defaults but consider optional
functionality and customization options that don't interfere with the
primary task.
**Simple by default...**
^^^^^^^^^^^^^^^^^^^^^^^^
*Simple and inviting. KDE software is pleasant to experience and easy to use.*
- **Make it easy to focus on what matters** — Remove or minimize elements
not crucial to the primary or main task. Use spacing to keep things
organized. Use color to draw attention. Reveal additional information or
optional functions only when needed.
- **I know how to do that!** — Make things easier to learn by reusing design
patterns from other applications. Other applications that use good design
are a precedent to follow.
- **Do the heavy lifting for me** — Make complex tasks simple. Make novices
feel like experts. Create ways in which your users can naturally feel
empowered by your software.
**...Powerful when needed**
^^^^^^^^^^^^^^^^^^^^^^^^^^^
*Power and flexibility. KDE software allows users to be effortlessly creative
and efficiently productive.*
- **Solve a problem** — Identify and make very clear to the user what need is
addressed and how.
- **Always in control** — It should always be clear what can be done, what is
currently happening, and what has just happened. The user should never
feel at the mercy of the tool. Give the user the final say.
- **Be flexible** — Provide sensible defaults but consider optional
functionality and customization options that don't interfere with the
primary task.
.. note::
Note: KDE encourages developing and designing for customization, while
......
......@@ -67,13 +67,13 @@ CentOS/RHEL ``sudo yum install git make``
.. code-block:: sh
sudo pip install -r requirements.txt
sudo pip install -r HIG/requirements.txt
...or in your home directory:
.. code-block:: sh
pip install -r requirements.txt --user
pip install -r HIG/requirements.txt --user
If you install it in you home directory, make sure you have the
installed packages in your path by adding it to your .profile:
......@@ -87,6 +87,7 @@ CentOS/RHEL ``sudo yum install git make``
Now you are ready to contribute to the HIG! To preview changes on your local
machine, do the following:
#. Enter the HIG directory with ``cd HIG``
#. Run ``make html`` to create the HTML pages
#. Open ``build/html/index.html`` in your browser (e.g. run
``firefox build/html/index.html``)
......
This diff is collapsed.
Action and Status Icons
=======================
Action icons visually reinforce their control's action, and are commonly seen
on push buttons, tool buttons, and menu items. Status icons display the current
status of software or hardware and generally live in the System Tray.
Both action and status icons always use the `monochrome style \
<index.html#monochrome-icon-style>`__ and come in two sizes: 16px and 22px. They
use the standard monochrome icon margins.
Action items should use Shade Black as much as possible:
.. image:: /img/Breeze-icon-design-action.png
:alt: Action icons
Status icons can use a bit more color in their composition to connote status
information:
.. image:: /img/Breeze-icon-design-status.png
:alt: Status icons
Action and status icons dynamically change their colors when the user changes
the system's color. To accomplish this, a special CSS stylesheet is embedded
in the SVG, and then the actual shape definitions are tagged with the
appropriate class. For technical information regarding how to do this, read the
`workflow tips on how to create an icon \
<https://community.kde.org/Guidelines_and_HOWTOs/Icon_Workflow_Tips>`_.
Application Icons
=================
.. figure:: /img/icon-applications.png
:alt: Colorful category icons
Application icons
Application icons hey always use the `colorful style \
<index.html#colorful-icon-style>`__ and come in a single size: 48px. They have
4px margins on the top and bottom:
.. figure:: /img/icon-margins-app.png
:alt: Colorful Places icons
Margins for 48px application icons
3rd party app icons
~~~~~~~~~~~~~~~~~~~
When creating a Breeze theme version of an existing app's icon, is critically
important that the icon's existing brand and visual style be preserved. The
goal is to create a Breeze version of the icon, not something completely new
and different. For example:
.. figure:: /img/icon-3rdparty-GIMP.png
:alt: Breeze version of 3rd-party GIMP icon
Breeze version of 3rd-party GIMP icon
.. figure:: /img/icon-3rdparty-writer.png
:alt: Breeze version of 3rd-party LibreOffice Writer icon
Breeze version of 3rd-party LibreOffice Writer icon
Category and Preferences Icons
==============================
.. figure:: /img/icon-category.png
:alt: Colorful category icons
Category icons
.. figure:: /img/icon-preferences.png
:alt: Colorful preferences icons
Preferences icons
Category and Preferences icons are commonly seen in System Settings,
Applications' settings windows, and launcher menus. They always use the
the `colorful style <index.html#monochrome-icon-style>`__ and come in a single
size: 32px. They have 2px margins on the top and bottom:
.. figure:: /img/icon-margins-category.png
:alt: Margins for 32px category and Preferences icons
Margins for 32px category and Preferences icons
Emblem Icons
============
Emblems icons are used to badge other icons and convey some type of status that
pertains to them. They come in three sizes: 8px, 16px, and 22px, and always use
the `colorful style <index.html#colorful-icon-style>`__. However, their color
palette is limited to that of the
monochromatic style. Unlike other icons, they are drawn with zero margins and
touch the edges of the canvas.
Emblem icons always have a colored background shape and a monochrome foreground
symbol. Because of the extremely limited space available, it is critical that
the foreground symbol be aligned to the pixel grid:
.. figure:: /img/Breeze-icon-design-emblem.png
:alt: Pixel-perfect emblem icon
Pixel-perfect emblem icon with zero margins
16px and 22px Emblems get a 60% opacity outline to ensure adequate contrast
against whatever icon they are drawn on top of:
.. figure:: /img/Breeze-icon-design-emblem-16px.png
:alt: 16px emblem icons
16px emblems
.. figure:: /img/Breeze-icon-design-emblem-22px.png
:alt: 22px emblem icons
22px emblems
8px emblems don't have an outline, because there simply is not enough room:
.. figure:: /img/Breeze-icon-design-emblem-8px.png
:alt: 8px emblem icons
8px emblems
Icon Design
===========
.. toctree::
:caption: Contents:
:titlesonly:
:hidden:
action_status
application
category_preferences
places
mimetype
emblem
* :doc:`action_status`
* :doc:`application`
* :doc:`category_preferences`
* :doc:`places`
* :doc:`mimetype`
* :doc:`emblem`
Purpose
-------
Icons are pictorial representations of functions and objects. They convey
meaning that users perceive almost instantaneously and are an important part of
a program's visual identity.
Well-designed icons strongly impact users' overall impression of the design.
Consistent use of icons also improves usability by making programs, objects,
and actions easier to identify and learn.
.. note::
See the `workflow tips on how to create an icon \
<https://community.kde.org/Guidelines_and_HOWTOs/Icon_Workflow_Tips>`_ if
you are interested in designing icons for your application. Or you can
ask the `KDE Visual Design Group \
<https://community.kde.org/Get_Involved/design#Communication_and_workflow>`_
for help.
General Guidelines
------------------
- Use icons from the system icon theme whenever possible. Avoid using custom
icons. New icons should be added to an icon theme.
- Design icons with a small number of metaphors that are understandable
independent of language and culture. Apply metaphors only once (e.g. don't
use a brush twice for different actions).
- Simplify, but don't go overboard.
- Avoid using text in icon designs; it cannot be localized and tends to look
bad at small sizes.
- Many icons come in multiple sizes. Each version should be visually optimized
and pixel-perfect for its particular size. Larger sizes offer more
opportunity for detail and visual pizazz, while smaller version should be
stripped of everything not absolutely necessary.
Monochrome icon style
---------------------
.. image:: /img/HIGMonoIcons.png
:alt: Monochrome icons
Monochrome icons come in two sizes: 16px and 22px. 16px monochrome icons are
commonly seen in menu items, tabs, and push buttons that have a raised,
buttonlike appearance. 22px monochrome icons are used in ToolButtons. Monochrome
icons at both sizes are used to represent small file types and entries in the
Places panel in Dolphin and file dialogs.
Don't use the monochrome style for larger icon sizes.
The Monochrome style is used for `Action, Status, <action_status.html>`_
small `Places, <places.html>`_ and small `MIME type <mimetype.html>`_ icons.
Colors
~~~~~~
The monochrome style relies on distinct shapes and outlines instead of fine
details and vibrant colors, and employs an intentionally limited color palette:
#. |shadeblack| :doc:`Shade Black <../color/index>` (``#232629``): Used for
icons in a normal state and non-destructive actions: back, forward, ok,
home, etc.This is the most commonly used color. When in doubt, choose
Shade Black.
#. |iconred| :doc:`Icon Red<../color/index>` (``#da4453``): Used for icons
that depict negative or destructive actions: "delete," "remove," "stop,"
etc.
#. |bewareorange| :doc:`Beware Orange <../color/index>` (``#f67400``): Used
for icons that involve warnings and user input of some kind.
#. |plasmablue| :doc:`Plasma Blue <../color/index>` (``#3daee9``): Used for
icons that involve the action "select" or "insert".
#. |noblefir| :doc:`Noble Fir <../color/index>` (``#27ae60``): Used for icons
that involve positive or successful actions: "connected", "secure", etc.
.. |shadeblack| image:: /img/Breeze-shade-black.svg
.. |iconred| image:: /img/Breeze-icon-red.svg
.. |bewareorange| image:: /img/Breeze-beware-orange.svg
.. |plasmablue| image:: /img/Breeze-plasma-blue.svg
.. |iconyellow| image:: /img/Breeze-icon-yellow.svg
.. |noblefir| image:: /img/Breeze-noble-fir.svg
Margins and alignment
~~~~~~~~~~~~~~~~~~~~~
16px monochrome icons should not use the top or bottom 2 pixels, and 22px
monochrome icons should not use the top or bottom 3 pixels:
.. figure:: /img/icon-margins-monochrome.png
:alt: Colorful Places icons
Margins for 16px and 22px monochrome icons
It is recommended to keep monochrome icons perfectly square. For some types of
icons described later (e.g. Places icons) this is a hard requirement.
Because monochrome icons are so small and simple, it is important that they be
pixel-perfect, with their lines and objects aligned to a regular grid:
.. image:: /img/Breeze-icon-design-1.png
:alt: A pixel-perfect "image" icon on the canvas.
.. image:: /img/icon-monochrome-dolphin-toolbar.png
:alt: A pixel-perfect "image" icon in the app.
Pixel-perfect icon: On the canvas and in the app
Adding Emblems to monochrome icons
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Because monochrome icons usually depict actions, many include status or action
emblems. These are always located in the bottom-right corner. The emblem should
be a minimum of 5px wide and tall, and there must be 1px of blank space between
the emblem and the rest of the icon.
.. Figure:: /img/icon-action-emblem.png
:alt: Design for a 22px or 16px icon with an emblem in the bottom-right corner
A perfect monochrome icon with an emblem in the corner
Colorful icon style
-------------------
.. image:: /img/Sample_color_icons.png
:alt: Colorful icons
Colorful Breeze icons make full use the
:doc:`Breeze color palette <../color/index>`. They are **not** "flat" and
incorporate shadows and smooth linear gradients going from darker on the bottom
to lighter on top. Don't be afraid to add detail, vibrancy, and depth!
This style of icon comes in three sizes:
- 32px: `Category, Preferences, <category_preferences.html>`_ `MIME type, \
<mimetype.html>`_ and `Places <places.html>`_ icons
- 48px: `Application <application.html>`_ icons
- 64px: `MIME type, <mimetype.html>`_ `Places, <places.html>`_ Devices, and a
few `Status <action_status.html>`_ icons
At all sizes, colorful Breeze icons generally consist of three parts:
First part: background
~~~~~~~~~~~~~~~~~~~~~~
The background is a container and gives structure to the icon. It can have any
shape or color in the Breeze color palette. Don't be afraid to get creative with the background shape!
.. figure:: /img/Breeze-icon-design-creative-backgrounds.png
:alt: Creative backgrounds
Colorful icons with a variety of creative background shapes
Second part: foreground symbol
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The foreground symbol offers contrast with its background and works with it to
provide the bulk of the icon's meaning. The foreground symbol is optional; feel
free to omit it if the background provides enough meaning on its own.
Third part: shadows
~~~~~~~~~~~~~~~~~~~
If present, the foreground symbol casts a long shadow angled 45°
towards the bottom-right corner. This shadow always has the same gradient and
takes up the whole object.
.. image:: /img/Breeze-icon-design-10.png
:alt: Using the grid for shadows
In addition, colorful icons have a 1 px hard shadow on the bottom:
.. image:: /img/Breeze-icon-design-12.png
:alt: 48px icons can have more details
MIME Type Icons
===============
MIME type icons are used to depict documents and files. They come in four sizes:
16px, 22px, 32px, and 64px. MIME type icons use the `monochrome style \
<index.html#monochrome-icon-style>`__ for 16px and 22px sizes, and the
`colorful style <index.html#colorful-icon-style>`__ for 32px and 64px sizes.
Monochrome MIME type icons
~~~~~~~~~~~~~~~~~~~~~~~~~~
Unlike other monochrome icons, Monochrome MIME type icons are drawn with the
primary color of the large colorful version rather than following the general
monochrome icon color guidelines:
.. image:: /img/Breeze-icon-design-mimetype-small.png
:alt: Small monochrome document MIME types
Margins for monochrome MIME type icons are the same as most other monochrome icons:
.. figure:: /img/icon-margins-mimetype-monochrome.png
:alt: Margins for monochrome MIME type icons
Margins for 16px and 22px monochrome MIME type icons
Colorful MIME type icons
~~~~~~~~~~~~~~~~~~~~~~~~
Like Places icons, the colorful versions consist of the monochrome icon used as
a foreground symbol on top of a background. Margins are small, with only 2px on
the top and bottom for the 32px icons, and 3px on the top and bottom for the
64px icons:
.. figure:: /img/icon-margins-mimetype-32.png
:alt: Margins for monochrome MIME type icons
Margins for 32px monochrome MIME type icons
.. figure:: /img/icon-margins-mimetype-64.png
:alt: Margins for monochrome MIME type icons
Margins for 64px monochrome MIME type icons
The background style depends on the file type.
For archives, packages, compressed files, and disk images, the background is a
square with a zipper going halfway down:
.. image:: /img/Breeze-icon-design-mimetype-archive.png
:alt: Large colorful archive MIME types
For images, the background is a horizontal rectangle with the top-right corner
folded over, and the fold casts a shadow:
.. image:: /img/Breeze-icon-design-mimetype-image.png
:alt: Large colorful image MIME types
For video files, the background is a horizontal rectangle that looks like a
filmstrip:
.. image:: /img/Breeze-icon-design-mimetype-video.png
:alt: Large colorful video MIME types
For audio files, the background is a CD sleeve with a CD partially visible:
.. image:: /img/Breeze-icon-design-mimetype-audio.png
:alt: Large colorful video MIME types
For documents and everything else, the background is a vertical rectangle with
the top-right corner folded over, and the fold casts a shadow:
.. image:: /img/Breeze-icon-design-mimetype-document.png
:alt: Large colorful document MIME types
As with the Places icons, the foreground symbol does not cast a shadow.
Places Icons
============
Places icons are used to depict folders, network locations, and other places.
They come in four sizes: 16px, 22px, 32px, and 64px. Places icons use the
`monochrome style <index.html#monochrome-icon-style>`__ for 16px and 22px sizes,
and the `colorful style <index.html#colorful-icon-style>`__ for 32px and 64px
sizes.
Monochrome Places icons
~~~~~~~~~~~~~~~~~~~~~~~
.. image:: /img/Breeze-icon-design-places-monochrome.png
:alt: Small monochrome Places icons
Places icons are monochrome for their 16px and 22px versions. For these
versions, the whole icon depicts the place itself or its typical contents, and
the icon must be perfectly square, with consistent margins on all sides.
Beyond that, simply follow the general monochrome icon guidelines for 16px and
22px icons--but remember that there are are margins on all four sides, not just
the top and bottom.
.. figure:: /img/icon-margins-places-monochrome.png
:alt: Margins for monochrome places icons
Margins for 16px and 22px monochrome Places icons
Colorful places icons
~~~~~~~~~~~~~~~~~~~~~
.. image:: /img/Breeze-icon-design-places.png
:alt: Colorful Places icons
For the colorful versions, the monochrome icon becomes the foreground symbol on
top of a background depicting a folder. The foreground symbol's color is a
darkened version of the background folder's color, and can consist of 1px lines,
or filled-in areas. The foreground symbol should be centered within the folder
background and take up 10x10px for the 32px icon size, and 20x20px for the 64px
size.
Note that for places icons, the foreground symbol does **not** cast a shadow.
.. figure:: /img/icon-margins-places-32.png
:alt: Margins for monochrome places icons
Margins for 32px monochrome Places icons
.. figure:: /img/icon-margins-places-64.png
:alt: Margins for monochrome places icons
Margins for 64px monochrome Places icons
......@@ -8,7 +8,7 @@ Style
color/index
elevation
icon
icons/index
imagery
theme
typography
......@@ -18,7 +18,7 @@ The Style layer is concerned with emotion, tone, and visual vocabulary. Because
* :doc:`color/index`
* :doc:`elevation`
* :doc:`icon`
* :doc:`icons/index`
* :doc:`imagery`
* :doc:`theme`
* :doc:`typography`
......
Brand Names
===========
Purpose
-------
Brand names are catchy, easy-to-remember names that provide identity and an
emotional connection to KDE's software. They are read and written publicly and
serve as part of a project's public face.
What needs a brand name?
------------------------
- Each app's name is automatically a brand name.
- Major non-app projects should have their own brand names. For example,
*Plasma*, *KWin*, *Baloo,* and *Kirigami.*
- Individual features within apps are not brand names and should be
:doc:`labeled descriptively <labels>`.
Creating a good brand name
--------------------------
- Brand names should be catchy, easy to remember, and fun-sounding. Avoid
negative language.
- Use only a single word, preferably one related to the app's purpose--even
just tangentially.
- Don't simply add a "K" onto the beginning of an existing word. It's
acceptable to choose a brand name with a K inside it, or even replace a "C"
with a "K" (e.g. *Falkon*, *DigiKam*), but don't force it. Not all KDE brand
names need to have a K (e.g. *Dolphin*, or *Plasma*).
- Don't use common words like "Files" or "Videos." If your brand name is too
generic, its identity will be diluted and users will have a hard time finding
it in web searches.
- Each brand name needs an :doc:`icon or logo </style/icons/index>`. The logo
should reinforce the name. For more abstractly-named brands, the logo should
provide visual information regarding the software's purpose that is not
contained within the name (e.g. Dolphin's logo looks like a folder, providing
a clue that it's a file manager).
Examples
--------
.. image:: /img/app-brand-names.png
:alt: Brand names and logos for Dolphin, Okular, and Spectacle
......@@ -9,7 +9,7 @@ Writing
capitalization
contraction
labels
static
brandnames
localization
placeholder
......@@ -19,6 +19,6 @@ Text includes all the written, language-based elements of the interface. This in
* :doc:`capitalization`
* :doc:`contraction`
* :doc:`labels`
* :doc:`static`
* :doc:`brandnames`
* :doc:`localization`
* :doc:`placeholder`
......@@ -4,99 +4,115 @@ Labels
Purpose
-------
Common controls should behave ‘common’ and look like everyday controls.
Therefore, it is much recommended to use standard font. Bold or italic
font should not be applied to control labels.
Labels clarify technical features of the software. It is therefore of paramount
importance that they be human-readable, comprehensible, and descriptive.
Guidelines
----------
- Keep labels short; be aware that :doc:`translated <localization>` English text can
expand up to 30% in some languages.
- Don't shorten your labels to the point of losing meaning. However, a
three-word label that provides clear information is better than a
one-word label that is ambiguous or vague. Try to find the fewest
possible words to satisfactorily convey the meaning of your label.
- Craft labels based on user goals and tasks, not on the underlying technology.
- Keep labels short; be aware that :doc:`translated <localization>` English
text can expand up to 50% in some languages.
- ...But don't shorten your labels to the point of losing meaning. A three-word
label that provides clear information is better than a one-word label that
is ambiguous or vague. Try to find the fewest possible words to
satisfactorily convey the meaning of your label.
- Use the default systemwide font, size, and styling. Avoid using bold or
italic text in controls' labels. Nonstandard styling is only ever appropriate
for title or header text, and even then, must be used sparingly to avoid
overwhelming the content.
- When the label is associated with another control, like a line edit,
be sure to set the the line edit as the
`buddy <https://doc.qt.io/qt-5/qlabel.html#setBuddy>`_ of
the label.
- Avoid *static text*: long instructions or explanations within the user
interface. Being tempted to add static text is a good sign that the
software's user interface is too complex and should be simplified.
Dialogs
~~~~~~~
Labels in Dialogs
~~~~~~~~~~~~~~~~~
- If a dialog is user-initiated, identify it using the command or
- If a dialog is user-initiated, title it using the command or
feature name.
- If it is application- or system-initiated (and therefore out of
context), label it using the program or feature name to provide
context), title it using the program or feature name to provide
context.
- Don't use the title to explain what to do in the dialog – that is the
purpose of the main instruction.
Menus
~~~~~
- Prefer verb-based names; Avoid generic, unhelpful verbs, such as
*Change* or *Manage*.
- Use singular nouns for commands that apply to a single object,
otherwise use plural nouns.