User:Andrew/Presentation-VisualDesignGuide: Difference between revisions
(→Style) |
(→Style) |
||
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 | * Use [[http://techbase.kde.org/Projects/Usability/HIG/Style/ColorSet colors]] consistently. | ||
* Ensure [[http://techbase.kde.org/Projects/Usability/HIG/Style/Backgrounds | * 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 | * [[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 | ** 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 | ** Follow the [[http://techbase.kde.org/Projects/Usability/HIG/Alignment alignment]] guidelines. | ||
* Treat [[http://techbase.kde.org/Projects/Usability/HIG/Style/Typography | * 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 | ** 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 | ** 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 | ** 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 | ** Apply standard [[http://techbase.kde.org/Projects/Usability/HIG/Labels control labels]] in your app. | ||
** Use [[http://techbase.kde.org/Projects/Usability/HIG/StaticText | ** 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:28, 27 March 2014
Presentation
Design Vision and Principles
- Get to know the [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.
- 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.
- 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.