User:Andrew/Presentation-VisualDesignGuide: Difference between revisions

From KDE UserBase Wiki
Line 6: Line 6:
== Style ==
== Style ==
The following style elements provide a palette to express your own unique vision while also being part of a shared community vision.
The following style elements provide a palette to express your own unique vision while also being part of a shared community vision.
* Use [[http://techbase.kde.org/Projects/Usability/HIG/Style/ColorSet colors]] consistently.
* Use [http://techbase.kde.org/Projects/Usability/HIG/Style/ColorSet colors] consistently.
* Ensure [[http://techbase.kde.org/Projects/Usability/HIG/Style/Backgrounds backgrounds and edges]] honor the design vision.
* Ensure [http://techbase.kde.org/Projects/Usability/HIG/Style/Backgrounds backgrounds and edges] honor the design vision.
* [[http://techbase.kde.org/Projects/Usability/HIG/Style/Icons Icon]] use should be consistent throughout the interface.
* [http://techbase.kde.org/Projects/Usability/HIG/Style/Icons Icon] use should be consistent throughout the interface.
* Layout visual elements to reduce clutter and ensure balance.
* Layout visual elements to reduce clutter and ensure balance.
** Use appropriate [[http://techbase.kde.org/Projects/Usability/HIG/Placement size and spacing]] to create breathing room.
** Use appropriate [http://techbase.kde.org/Projects/Usability/HIG/Placement size and spacing] to create breathing room.
** Follow the [[http://techbase.kde.org/Projects/Usability/HIG/Alignment alignment]] guidelines.
** Follow the [http://techbase.kde.org/Projects/Usability/HIG/Alignment alignment] guidelines.
* Treat [[http://techbase.kde.org/Projects/Usability/HIG/Style/Typography typography]] with the same care as any other aspect of the visual design.
* Treat [http://techbase.kde.org/Projects/Usability/HIG/Style/Typography typography] with the same care as any other aspect of the visual design.
** Keep [[http://techbase.kde.org/Projects/Usability/HIG/Wording wording]] consistent and easy to understand.
** Keep [http://techbase.kde.org/Projects/Usability/HIG/Wording wording] consistent and easy to understand.
** Take care about [[http://techbase.kde.org/Projects/Usability/HIG/localization localization]] of your project.
** Take care about [http://techbase.kde.org/Projects/Usability/HIG/localization localization] of your project.
** Do not apply [[http://techbase.kde.org/Projects/Usability/HIG/Capitalization capitalization]] except for titles and in case of sentence style.
** Do not apply [http://techbase.kde.org/Projects/Usability/HIG/Capitalization capitalization] except for titles and in case of sentence style.
** Apply standard [[http://techbase.kde.org/Projects/Usability/HIG/Labels control labels]] in your app.
** Apply standard [http://techbase.kde.org/Projects/Usability/HIG/Labels control labels] in your app.
** Use [[http://techbase.kde.org/Projects/Usability/HIG/StaticText static text]] for main instruction and supplemental information.
** Use [http://techbase.kde.org/Projects/Usability/HIG/StaticText static text] for main instruction and supplemental information.


== Building blocks ==
== Building blocks ==

Revision as of 18:30, 27 March 2014

Presentation

Design Vision and Principles

Style

The following style elements provide a palette to express your own unique vision while also being part of a shared community vision.

  • Use colors consistently.
  • Ensure backgrounds and edges honor the design vision.
  • Icon use should be consistent throughout the interface.
  • Layout visual elements to reduce clutter and ensure balance.
  • Treat typography with the same care as any other aspect of the visual design.

Building blocks

  • Building blocks help make it easier to design applications that satisfy the design vision without needing to always create your own custom UI elements.

Tools