User:Andrew/Presentation-VisualDesignGuide: Difference between revisions
(→Style) |
|||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
__NOTOC__ | |||
= Presentation = | = Presentation = | ||
| Line 6: | Line 7: | ||
== 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 == | ||
* [ | * [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 [ | * 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 | * 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
- Get to know the vision and principles that inform the visual design.
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.
- Use appropriate size and spacing to create breathing room.
- Follow the alignment guidelines.
- Treat typography with the same care as any other aspect of the visual design.
- Keep wording consistent and easy to understand.
- Take care about localization of your project.
- Do not apply capitalization except for titles and in case of sentence style.
- Apply standard control labels in your app.
- Use static text for main instruction and supplemental information.
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
- Try the mock-up toolkit to help with designing your application.
- Ask for help and share your visual design ideas on the KDE Visual Design Group forum.