[kde-guidelines] Visual Design Guidelines + HIG

[Andrew Lake]

Hello Heiko,

As I'm working to integrating the visual design guidance with existing HIG
guidance, I was hoping you might be amenable to a slight update to the
structure under the Presentation section that might make it a little easier
to harmonize, as well as reflect some of the more recent considerations in
visual design guidance.

The current structure of the presentation section (
http://techbase.kde.org/Projects/Usability/HIG#Presentation) is:
Presentation
* Layout
* Style
* Text

In so much visual design these days layout, style, and text are all
interrelated in so many ways that it is near impossible to think about them
separately. This can sorta make it a touch challenging to figure where to
put (or look for) each guideline. Additionally, one of the sayings we often
encounter in design circles is "you have to know the rules to break the
rules". It's basically a way to encourage structured creativity while
ensuring that design goals continue to be met - don't throw out the entire
ruleset out every time you need to do something different. To this end,
more recently designs rules are often captured in sort of a hierarchy so
that when a different approach is needed in a specific case it can still be
validated against the higher level design objectives. This allows more
rapid iteration of the visual design while still satisfying the same
overall visual aesthetic.

Anyway, on my userbase wiki is a proposed structure for the Presentation
section that I'm hoping still satisfies your intent for that section,
preserve all of the guidance already there, while benefiting from some of
the more recent design guideline approaches. It's here:
http://userbase.kde.org/User:Andrew/Presentation-VisualDesignGuide. It also
identifies the how we might complete the remaining integration of the icon
design and color/color set guidelines. The new structure is basically:
Presentation
* Design vision and principles
* Style (including layout and text guidance)
* Building Blocks
* Tools (mockup kit, etc.)

For the "know the rules to break the rules" bit, if developers want to do
up a new UI control that's not in the Building Blocks, it should still
satisfy the Style guidance. If we want to introduce new typography, it
should still satisfy the design vision and principles. Presentation aspects
of new design patterns should satisfy the Style guidance (since it's a
collection of building blocks). If we come up with a new design principle,
it should satisfy the design vision. And so on...

Thanks so much for all your work the HIG. That work is providing fantastic
context for integration of our visual guidelines.

Let me know if this is ok and I'll go ahead and start this second phase of
integration.

Much respect,
Andrew



On Fri, Mar 21, 2014 at 9:43 AM, Andrew Lake <jamboarder at gmail.com> wrote:

> Thanks much for the response Heiko.
>
> I'll be sure update the guide with the formatting as you suggested. A
> minor clarification is that the proposal was to replace the entirety of
> Presentation section with the Visual Design Guide since it is intended to
> provide not just Style guidance, but Layout and Text guidance as well.
>
> No worries though, we can workout the ideal structure and content over
> time. For now, we'll just integrate under the existing Style and Layout
> sections based on your very helpful suggestions. We would just like to get
> something out there as a first release to support the visual design work
> already underway. We can always work together to improve it over time. :-)
>
> I hope to have this integration in place by the end of the day.
>
> Thanks so much for your help,
> Andrew
>
>
>
> On Fri, Mar 21, 2014 at 4:03 AM, Heiko Tietze <
> heiko.tietze at user-prompt.com> wrote:
>
>> 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!
>>
>> _______________________________________________
>> kde-guidelines mailing list
>> kde-guidelines at kde.org
>> https://mail.kde.org/mailman/listinfo/kde-guidelines
>>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.kde.org/pipermail/kde-guidelines/attachments/20140327/ea3d0abf/attachment.html>