Date: prev next · Thread: first prev next last
2010 Archives by date, by thread · List index


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 ***

Context


Privacy Policy | Impressum (Legal Info) | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the Creative Commons Attribution-Share Alike 3.0 License. This does not include the source code of LibreOffice, which is licensed under the Mozilla Public License (MPLv2). "LibreOffice" and "The Document Foundation" are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our trademark policy.