User:Andrew/Presentation-VisualDesignGuide: Difference between revisions

From KDE UserBase Wiki
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
__NOTOC__
= Presentation =
= Presentation =


== Design Vision and Principles ==
== Design Vision and Principles ==
* Get to know the [[http://techbase.kde.org/Projects/Usability/HIG/Presentation/DesignVisionPrinciples|vision and principles]] that inform the visual design.
* Get to know the [http://techbase.kde.org/Projects/Usability/HIG/Presentation/DesignVisionPrinciples vision and principles] that inform the visual design.


== 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. ''(Merge into existing [[http://techbase.kde.org/Projects/Usability/HIG/Color color]] guidelines)''
* 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. ''(Merge into existing [[http://techbase.kde.org/Projects/Usability/HIG/IconDesign icon design]] guidelines)''
* 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.
Line 20: Line 21:


== Building blocks ==
== Building blocks ==
* [[Projects/Usability/HIG/Style/BuildingBlocks|Building blocks]] help make it easier to design applications that satisfy the design vision without needing to always create your own custom UI elements.  
* [http://techbase.kde.org/Projects/Usability/HIG/Style/BuildingBlocks 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 ==
== Tools ==
* Try the [[Projects/Usability/HIG/MockupToolkit|mock-up toolkit]] to help with designing your application.
* Try the [http://techbase.kde.org/Projects/Usability/HIG/MockupToolkit mock-up toolkit] to help with designing your application.
* Ask for help and share your visual design ideas on the [http://forum.kde.org/viewforum.php?f=285| KDE Visual Design Group forum].
* Ask for help and share your visual design ideas on the [http://forum.kde.org/viewforum.php?f=285 KDE Visual Design Group forum].

Latest revision as of 21:06, 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. (Merge into existing [color] guidelines)
  • Ensure backgrounds and edges honor the design vision.
  • Icon use should be consistent throughout the interface. (Merge into existing [icon design] guidelines)
  • 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