[kde-guidelines] Visual Design Guidelines + HIG

[Heiko Tietze]

On Wednesday 19 March 2014, 16:51:35 Andrew Lake wrote:
> Heiko,
> 
> I put the first proposal for the Visual Design Guidelines on my userbase
> wiki here:
> http://userbase.kde.org/User:Andrew/VisualDesignGuide
Looks very promising already! Especially your wording matches with the 
existing guidelines. About formatting: All guidelines have a h2 (==) purpose 
section, h2 guidelines with * bullets, or ** if necessary, and a h2 best 
practice or implementation. Guidelines are split into h3 (===) right control, 
behavior, and appearance sections. I used italic font ('') in purpose but 
never bold. All pages are tagged with [[Category:Usability]] and others.

> To integrate with the HIG, we'd like to propose the following:
> 1. The definition of the HIG Presentation section on
> http://techbase.kde.org/Projects/Usability/HIG/About is the definiition of
> a visual design guide. Would it be ok if we replaced the Presentation
> section and its structure with the proposed VIsual Design Guide?
The about page presents the underlying model. We shouldn't change it. But why 
don't you add your page directly to the presentation > style section? For 
example:
* When discussing visual aspects follow the [visual vision].
* Make sure all [design principles] are met.
* Follow our [design patterns].
* Make use of the [mockup toolkit].

* Use the default [color set]. (I recommend to call it color set to keep the 
color guideline. It contains of some important advice that are not actually 
based on visual design.)
* Have a paper look on [background and edges].
* Use Oxygen as reference [typography|typeface].
* Provide a consistent look and feel by using on [icon set]. (It would be pity 
to remove the existing guideline, but maybe it is just consequent. But I'd 
vote to keep the part on metaphors.)

(Alignment and Spacing could be merged with the existing pages.

> 2. We received some early feedback from Thomas Pfeiffer that the Overview
> section of the proposed Visual Design Guide might be appropriate at a
> higher level in HIG. That's ok with us if it's ok here. Would it be ok to
> put a link to the Overview section or its contents (Design Goals, Design
> Principles) under the Introduction section?
I don't think it's a higher level that doesn't fit into the HIG at all, which 
would be the fact if you link it from the introduction or the about page. On 
the other hand, if you think about the Structure > Conceptual Model section it 
makes sense. You should take care that all information get interlinked well.

> 3. Thomas also mentioned that the Mockup Toolkit section might be
> appropriate at a higher level. Would it be ok to add a Mockup Toolkit
> section at a higher level?
I would add it to the layout section (as discussed above). In general, there 
are a lot of good reasons to use a toolkit for any project. And this guideline 
makes perfect sense.

> This is proposed for just an initial release of the guide. We intend over
> time to continuously participate in updating this guide (and other areas of
> the HIG) as time permits. :-)
Some of my cents:
* Color: In the last time, the Plasma Next calendar is often shown. Due to its 
transparency it is colored in light purple. It looks different to your color 
schema.
* Backgrounds: I like my dark Wonton soup theme. Does it match with your 
ideas? Perhaps it make sense to consider both light and dark themes.
* Spacing: Reading this guidelines, I wonder if different resolutions need to 
be considered. 4px is a lot in case of XGA but perhaps nothing in the future 
with kilo- or mega-ppi :-).
* Icons: "Avoid using text in icon designs; it may not scale well to smaller 
sizes"..., and does not localize, confuses with other controls, and interferes 
with label, etc. I would escalate it to "Never use text..."
* BuildingBlocks: "Note: Each element listed here will point to the existing 
HIG page for each UI element. We can update the visuals on those pages over 
time" This is the right way. Expand the pages by an appearance section, add 
mockups etc. Awesome!