<div dir="ltr">Hello Heiko,<div><br></div><div>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.</div>
<div><br></div><div>The current structure of the presentation section (<a href="http://techbase.kde.org/Projects/Usability/HIG#Presentation">http://techbase.kde.org/Projects/Usability/HIG#Presentation</a>) is:</div><div>
Presentation<br>
* Layout</div><div>* Style</div><div>* Text</div><div><br></div><div>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.</div>
<div><br></div><div>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: <a href="http://userbase.kde.org/User:Andrew/Presentation-VisualDesignGuide">http://userbase.kde.org/User:Andrew/Presentation-VisualDesignGuide</a>. 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:</div>
<div>Presentation</div><div>* Design vision and principles</div><div>* Style (including layout and text guidance)</div><div>* Building Blocks</div><div>* Tools (mockup kit, etc.)</div><div><br></div><div>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...</div>
<div><br></div><div>Thanks so much for all your work the HIG. That work is providing fantastic context for integration of our visual guidelines.</div><div><br></div><div>Let me know if this is ok and I'll go ahead and start this second phase of integration.</div>
<div><br></div><div>Much respect,<br>Andrew</div><div><br></div></div><div class="gmail_extra"><br><br><div class="gmail_quote">On Fri, Mar 21, 2014 at 9:43 AM, Andrew Lake <span dir="ltr"><<a href="mailto:jamboarder@gmail.com" target="_blank">jamboarder@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Thanks much for the response Heiko.<div><br></div><div>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. </div>
<div><br></div><div>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. :-)</div>
<div><br></div><div>I hope to have this integration in place by the end of the day.</div><div><br></div><div>Thanks so much for your help,</div><div>Andrew</div><div><br></div></div><div class="HOEnZb"><div class="h5"><div class="gmail_extra">
<br><br><div class="gmail_quote">
On Fri, Mar 21, 2014 at 4:03 AM, Heiko Tietze <span dir="ltr"><<a href="mailto:heiko.tietze@user-prompt.com" target="_blank">heiko.tietze@user-prompt.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div>On Wednesday 19 March 2014, 16:51:35 Andrew Lake wrote:<br>
> Heiko,<br>
><br>
> I put the first proposal for the Visual Design Guidelines on my userbase<br>
> wiki here:<br>
> <a href="http://userbase.kde.org/User:Andrew/VisualDesignGuide" target="_blank">http://userbase.kde.org/User:Andrew/VisualDesignGuide</a><br>
</div>Looks very promising already! Especially your wording matches with the<br>
existing guidelines. About formatting: All guidelines have a h2 (==) purpose<br>
section, h2 guidelines with * bullets, or ** if necessary, and a h2 best<br>
practice or implementation. Guidelines are split into h3 (===) right control,<br>
behavior, and appearance sections. I used italic font ('') in purpose but<br>
never bold. All pages are tagged with [[Category:Usability]] and others.<br>
<div><br>
> To integrate with the HIG, we'd like to propose the following:<br>
> 1. The definition of the HIG Presentation section on<br>
> <a href="http://techbase.kde.org/Projects/Usability/HIG/About" target="_blank">http://techbase.kde.org/Projects/Usability/HIG/About</a> is the definiition of<br>
> a visual design guide. Would it be ok if we replaced the Presentation<br>
> section and its structure with the proposed VIsual Design Guide?<br>
</div>The about page presents the underlying model. We shouldn't change it. But why<br>
don't you add your page directly to the presentation > style section? For<br>
example:<br>
* When discussing visual aspects follow the [visual vision].<br>
* Make sure all [design principles] are met.<br>
* Follow our [design patterns].<br>
* Make use of the [mockup toolkit].<br>
<br>
* Use the default [color set]. (I recommend to call it color set to keep the<br>
color guideline. It contains of some important advice that are not actually<br>
based on visual design.)<br>
* Have a paper look on [background and edges].<br>
* Use Oxygen as reference [typography|typeface].<br>
* Provide a consistent look and feel by using on [icon set]. (It would be pity<br>
to remove the existing guideline, but maybe it is just consequent. But I'd<br>
vote to keep the part on metaphors.)<br>
<br>
(Alignment and Spacing could be merged with the existing pages.<br>
<div><br>
> 2. We received some early feedback from Thomas Pfeiffer that the Overview<br>
> section of the proposed Visual Design Guide might be appropriate at a<br>
> higher level in HIG. That's ok with us if it's ok here. Would it be ok to<br>
> put a link to the Overview section or its contents (Design Goals, Design<br>
> Principles) under the Introduction section?<br>
</div>I don't think it's a higher level that doesn't fit into the HIG at all, which<br>
would be the fact if you link it from the introduction or the about page. On<br>
the other hand, if you think about the Structure > Conceptual Model section it<br>
makes sense. You should take care that all information get interlinked well.<br>
<div><br>
> 3. Thomas also mentioned that the Mockup Toolkit section might be<br>
> appropriate at a higher level. Would it be ok to add a Mockup Toolkit<br>
> section at a higher level?<br>
</div>I would add it to the layout section (as discussed above). In general, there<br>
are a lot of good reasons to use a toolkit for any project. And this guideline<br>
makes perfect sense.<br>
<div><br>
> This is proposed for just an initial release of the guide. We intend over<br>
> time to continuously participate in updating this guide (and other areas of<br>
> the HIG) as time permits. :-)<br>
</div>Some of my cents:<br>
* Color: In the last time, the Plasma Next calendar is often shown. Due to its<br>
transparency it is colored in light purple. It looks different to your color<br>
schema.<br>
* Backgrounds: I like my dark Wonton soup theme. Does it match with your<br>
ideas? Perhaps it make sense to consider both light and dark themes.<br>
* Spacing: Reading this guidelines, I wonder if different resolutions need to<br>
be considered. 4px is a lot in case of XGA but perhaps nothing in the future<br>
with kilo- or mega-ppi :-).<br>
* Icons: "Avoid using text in icon designs; it may not scale well to smaller<br>
sizes"..., and does not localize, confuses with other controls, and interferes<br>
with label, etc. I would escalate it to "Never use text..."<br>
* BuildingBlocks: "Note: Each element listed here will point to the existing<br>
HIG page for each UI element. We can update the visuals on those pages over<br>
time" This is the right way. Expand the pages by an appearance section, add<br>
mockups etc. Awesome!<br>
<div><div><br>
_______________________________________________<br>
kde-guidelines mailing list<br>
<a href="mailto:kde-guidelines@kde.org" target="_blank">kde-guidelines@kde.org</a><br>
<a href="https://mail.kde.org/mailman/listinfo/kde-guidelines" target="_blank">https://mail.kde.org/mailman/listinfo/kde-guidelines</a><br>
</div></div></blockquote></div><br></div>
</div></div></blockquote></div><br></div>