[libreoffice-design] "LibreOffice Menta" Design proposal

I'm going to give a name to the design proposal... "LibreOffice Menta" :D We
are currently at the third iteration, version 1.20.

This are the links:

http://wiki.documentfoundation.org/File:DrupalFrontpage120.png
http://wiki.documentfoundation.org/File:DrupalGeneral120.png
http://wiki.documentfoundation.org/File:DrupalTheme_Changelog.odt
http://wiki.documentfoundation.org/File:DrupalIA.odt

I'm copying the valuable comments from Christoph Noak to continue the
discussion here:

2010/11/23 Christoph Noack <christoph@dogmatux.com>

> Drupal Frontpage ...
>
> Information Design
>      * Visual Hierarchy
>              * The most important element (Download) button is hard to
>                locate. It misses the "conventional" design being green
>                and at a prominent position.
Just to be sure, we're talking about "DrupalFrontpage120.png". There is a
prominent big button for download on the header, which is one of the first
elements we can see when the website loads, IMHO, this is the most prominent
element of the website, on a privileged position. We can make it green, no
problem, but how can we make it prominent or not hard to locate?

Actually there is 3 links for download:

1. Main frontage button. Located on the header. <-- This is the most
important
2. Link to download section on the navigation menu.
3. Download block, step 2 of the "What to do" blocks.

             * The groups/elements miss space to get better separation.
>                As people say "space is information".
Which groups/elements? It's hard to talk about and image :P Anyway, taking
note and adding to the TODO. I think we can more space between the "What to
do" blocks (I want a tour, [...], I want to join the community). Could you
please be more specific on what need some "fresh air" :)


>              * The header graphics (colorful) moves away the attention
>                to the more important stuff. It also seems to be
>                animated ... so please either keep the site as clean as
>                possible and keep the larger header graphic, or remove
>                the visual intensity of the header graphic.
Ok. The current image is just an example, but anyway, good remark. That
header type/style is an idea taken from http://www.ubuntu.com/ (please visit
to know the expected behavior). Just to be sure, what are the "more
important stuff"? The download button? The "What to do" blocks?


>              * The text and element sizes are somehow unusual. Some of
>                the text is very large, some of the text is tiny.
+1
Yes, as I stated on the first email I wrote, this is one of the areas I've
put less time a can be improved. I know you had little time, and thanks for
those quick comments, but I kindly ask you if you can specify which text are
to big and which are small, so I can correct them, please.

The standard text should be Liberation Sans 14pt, but I need to normalize
this on all the page, actually it varies from 12 to 14. Navigation menu
items are Liberation Sans 17pts.


>      * Editorial Content
>              * Text like "I need help" may be true, but only few users
>                want to hear that they are helpless :-)
jejeje :P


>              * The "I ..." have been a matter of debate for a long time
>                on the OOo website. The "I ..." doesn't add value and
>                doesn't help to feel "part of the community".
Graham Lauder gave us that suggestion and the text was changed for 1.20. I
really don't care, my English is not good enough to make some kind of
suggestion on this :P


>              * The Web 2.0 stuff (great idea...) seems a bit scary with
>                the square brackets. And, it seems to use a lot of
>                space ...

I'm using 32x32px icons and 16pt text... I'll try to use 14pt text and test
with the 32px and 24px pixels. About the brackets... parentheses? A pipe
between them?


>  Layout

     * The layout requires intensive scrolling - some of the
>        interesting items for those who are not aware of the activity
>        within the community, might miss the news and the blogs.

       Although I do like its presentation.
>
Again, just to be sure, we are talking about "DrupalFrontpage120.png". In
that page that was designed more as a feature than a bug :P The blogs and
news were put there so new users can ignore them and focus on the more
important ("What to do" blocks) information above, and not
be overwhelmed with all that information on their first visit. And, on the
other hand, more regular visitors/members could find it useful :D

The general design (not the frontpage) was designed with a small header
specially to reduce the scroll need. Your comment apply to that page too?

     * Some items are visually connected to others, although there is
>        no information link - e.g. the search box connected to the front
>        graphics.
That's right, I did not notice that.

"Some":
1. Header and search box.
2 ...

Suggestions? Remove the graphical link?


> Visual Design
>      * The visual design doesn't fit together ... for example, the logo
>        at the top got some mirroring (why?), but the remaining items on
>        the page show drop shadows - with light from directly above. the
>        other items show shadows with light direction "front". Some more
>        items are just flat. The text in the header graphics shows
>        shadows with light from the right side ... it doesn't create a
>        harmonic and consistent impression. Another example: Some of the
>        object edges are rounded, some are "sharp".
Mmmm you're right :( I'll strike this in the next version.


>      * In most cases, websites (and UIs) do look good, if they are
>        aligned to a certain grid. Within the current proposal, most of
>        the item groups are unrelated / not aligned with other items.
>        This would create more "visual stability" and predictability
>        (where to look for what).
I really don't know how to address this :(


> Accessibility:
>      * Elements sometimes do have limited contrast. For example, the
>        text in the header graphic is hard to read (white on bright
>        green). The "breadcrumb navigation" is black (small font) on
>        gray background.
I'll try to find a better example image. I'll also address the breadcrumb
legibility on the next iteration.


> Okay, time is up :-) I hope this criticism is perceived to be helpful
> instead of annoying.

Not at all! Thanks for your time reviewing the design and for the feedback!
:D


> However, I'm looking forward to see some more
> information with regard to the community goals, and thus, the visual
> language.
We had a discussion earlier about that. The discussion was if we wanted more
a community site or a product site. I said we needed both. A dedicated
community portal (for example "community.libreoffice.org", not in design
proposal), and the frontpage to be a product oriented page.


> By the way, maybe I have discussed some things not being meant for
> discussion.

Like what?


> I recommend to use the "Fidelity Matrix" to improve such
> kinds of discussions. I blogged about it here:
>
> http://uxopenofficeorg.blogspot.com/2010/05/picture-is-worth-thousand-words.html

Ok, I'll read that now.

Bye,
> Christoph


Kind regards

-- 
Carlos Jenkins
http://www.cjenkins.net/
http://csl-tec.softwarelibrecr.org/

-- 
Unsubscribe instructions: E-mail to design+help@libreoffice.org
List archive: http://www.libreoffice.org/lists/design/
*** All posts to this list are publicly archived for eternity ***