Improved Download Page Proposal

Hi everyone,

the last time I blogged about the parental leave ... still enjoying that time. But, sometimes I'd like to continue supporting LibreOffice and among different stuff in the last weeks (e.g. in the issues, or the libreoffice-ux-advice mailing list), I had a look at the Download section of our main website.

The Issue
It has been reported several times that end-users are unaware concerning the release scheme of LibreOffice and may experience problems with X.X.0 releases. Converning the latter, this is also a problem of users who download the software on external pages unrelated to TDF - the corresponding warning/information might be missing.

Furthermore, there have been complaints that the TDF LibreOffice Download page is too complex for normal users. Consequently, the LibreOffice Download Experience has to be improved.

Here is the download page how it looks today:

Although everything works, it seems a bit crowded, very complex and sometimes even misleading (as reported by users).

The Proposed Solution
Since everybody likes pictures, here is are just two mockups.

First, a mockup that demonstrates how the initial website will look like for a Microsoft Windows user.

Second, a mockup that demonstrates the website for a user who decided to go for the "Latest Features" version using a Linux based operating system. Moreover, the user already expanded the Download Options area.

You know, mockups miss a lot of information ... so don't forget to read the Download Page Whiteboard page telling you all the details ... please read that page before raising any concern ;-)


Thanks!

A "thank you" to all who helped to shape these proposals ... the earlier discussions on different mailing lists helped a lot (especially Nik who provided great thoughts). Furthermore, I'd like to thank Christian who helped to collect some of the requirements for a revised page design.


Personally, I hope you like the propsal. I'll announce it at the website mailing list, so join the discussion - or much better: help with the implementation.

Cheers,
Christoph

No Light Without Shadow

Hi all!

A German saying tells us "Wo Licht ist, ist auch Schatten" - this may be translated with "No Light Without Shadow". Well, since I perceive a lot of light with regard to the amazing progress of LibreOffice, there needs to be shadow as well.

Some of you might have noticed some "document border" discussion weeks ago. Sébastien already implemented a much friendlier document shadow for Writer (see here) on the basis of Andrew's idea in bug (or better: Easy Hack) 31251.

Since there had been some intensive discussions, I finally spend some time on this topic and wrote my first (more or less) serious specification for all the LibreOffice applications: Document Background

In short, here is the outcome if an improved document outline, a slightly revised shadow, and a gradient get combined ...

Sébastien replied that he'll working on an improved Draw/Impress shadow at the moment. I'm curious whether we can beautify and harmonize all components of LibreOffice. So far, a big thank you to Sébastien!

Back to the "Light / Shadow" topic. What if we add some more decoration - maybe some some Document Triangles ...

Where do these triangles come from? Something to blog about later ... maybe another Design Team guy will talk about it.

That's it so far ...

Cheers,
Christoph

Design Team Kick-Off Step 3: We are the Design Team

Hi all,

a while ago I summarized the Design Team's current status of work - now I'd like to talk about the members of the Design Team. Who are they, what are they interested in, and how do they look like? Here we go ...

To get to know each other, we've asked everybody for some insights like "What are you interested in?", and compiled the Design Team member list. On this list, you'll also find some links to user pages with even more stuff you ever wanted to know (or maybe not).

What I can say is, that I'm pretty amazed who we are ...

• Some members have a professional usability and/or user experience background
• Highly skilled artists are with us - also with professional background
• There are new faces with lots of fresh ideas, and also long-term community members

Not to forget the "lurkers" who are subscribed to our mailing list. Some of them mentioned they want to follow our work first ... of course! I consider them more than important, since I hope they'll help us to keep some connection across the mailing lists (e.g. mentioning not to be missed topics on the development mailing list, or on the local mailing lists). By the way, the number of subscribed users is 106 (2011-02-07)

If you want to know more, see Kick-Off Wiki Page: Introducing the Team Members.

Well, it seems we are getting ready for some serious work ... :-)

Cheers,
Christoph

Not even included, but already improved!

Dear marketeers, dear visual design loving people!

You may have noticed that the new LibreOffice icons "missed the boat" for the LibreOffice 3.3 final - as one of the developers said. Fortunately, they will be included in the upcoming minor release (see ReleasePlan).

But although the icons are not even included, there have been vastly improved - already. The guy who did that is the same person who initially led to the rumors concerning "interesting mockups" that have been extensively discussed on the TDF mailing list. Well, now he joined the Design Team and did not only provide deep insights in usability aspects, but also in his great design skills.

So this is what "Paulo" did for LibreOffice ... first, he improved the 128px icons (left side shows the old version, right side the improved one).

Next, he created the missing 256px icons that now provide a richness in detail, so that they can easily be used for marketing material. Click on it to see them in full size ... worth the effort :-)

Personally, I'm deeply impressed how much the icons gained - by keeping the metaphors. Now, I'm even more curious what the design team will come up with in the future. Both concerning making LibreOffice more usable, and caring about visual details.

And before I forget this: Thanks to both Paulo and the whole team for doing such great stuff! As Florian would say ... You all rock!

Cheers,
Christoph

Icon as con I can #2

Calc Icons

This night, I've already presented a proposal for the Writer Icons - here is the next iteration for Calc and spreadsheet documents in general.

The right place for discussion and volunteer offers is - as already mentioned - the Design Team mailing list :-)

I already got some feedback for the Writer icons - this will lead to better recognizability for the small versions, and less visual noise for the large template graphics. Kudos to Ivan, and Mirek!

Home (Office), Sweet Home (Office)

Painting all day long - it somehow fits, even the color matches somehow the LibreOffice branding language. Today, I've started to decorate one of the walls in our workroom ... second coating to come.

Cheers,
Christoph

Icon as con I can

Writer Icons

The title of this blog posting may sound a bit weird to you ... that is how I currently feel with the different work topics :-) But here, I just wanted to show a recent proposal for "own" LibreOffice icons that we are currently working on.

The "we" refers to the LibreOffice Design Team that collected ideas an already went through some iterations for the icon design. Unfortunately, we got stuck a bit (Christmas and vacation time, few volunteers ...), so that it is unsure whether the icons may get included into the upcoming official LibreOffice release.

Nevertheless, I thought it might be interesting for you ...

The picture shows both default color and high contrast icons for the application Writer and its documents (top), and the Writer document templates (bottom).

More Bits and Pieces

Discussions currently take place on the Design Team mailing list, and there is a dedicated Initial MIME icons wiki page - a bit outdated, but it provides an overview.

And here is an older draft I once made to show how the tiny 16x16 icons could look like. Just guess the applications :-)

Finally, this is a good opportunity to say "Thank you!" to Bernhard, Ivan, Jaron, Björn, ... anybody who wants to join?

Cheers,
Christoph

It's (sometimes) all about Design!

Just to spread the news - there is now a dedicated mailing list for design topics. More precisely, it'll become the home of the LibreOffice Design Team that cares about User Experience Design (make it just work ...) and Visual Identity Design (... and look great).

How did we get there? We got more and more traffic on the Marketing mailing list. A huge part of those discussions covered Branding aspects and Visual Design. Furthermore, you may have noticed some ideas how to improve the user interface. And, the number of questions by developers increased - they asked for some User Experience (utility, usability, ...) support.

After some discussion, I asked the TDF Steering Committee for a dedicated mailing list. Here it is:

• design@libreoffice.org
• Subscription: design+subscribe@libreoffice.org
• Digest subscription: design+subscribe-digest@libreoffice.org
• Archives: http://www.libreoffice.org/lists/design/
• Mail-Archive.com: http://www.mail-archive.com/design@libreoffice.org/
• GMANE: pending

At the moment, we discuss the relationship between the already existing teams and how to support each other with regard to cross-sectional topics (on a different list). We also talk about how to set up a dedicated "work space" in the wiki. But the most important thing might be, to simply say hello to each other.

Consequently, please expect some changes ... We will report about our progress.

Looking forward to make LibreOffice just rock!

Cheers,
Christoph

LibreOffice 3.3 Artwork Improvements ... going on :-)

Hi all,

since I will leave soon to visit my family, just a short life sign. Okay, maybe not that interesting for you ... but here is one of the most recent artwork elements that got updated. It is the "Side Pane Graphics" for the welcome page of the LibreOffice installer for Windows.

And, I felt free to propose something to the BrOffice guys ... let's see if they like it :-)

Cheers,
Christoph

LibreOffice Logo Resources

Hi all,

just to mention that "anywhere". We now have an improved LibreOffice logo download location which incorporates the latest changes and also provides a revised SVG source file.

EPS upload is not yet supported / allows by the wiki, so this is work in progress. And, graphics which have been created for the special use on websites will be uploaded soon (those graphics are optimized, pixel perfect, for the use in a given size).

Cheers,
Christoph

Website Progress ... And Looking Back!

To me, it is quite fascinating how things progress at the moment within the LibreOffice website team. Here, I just want to pick a message by Michael who talks about the "Drupal LibreOffice CMS Development Site". Many people already contribute to make up the framework, plan the workflows, document requirements.

Parts of the site development are also artwork and branding related. And since I was involved in the very first design, I thought it would be nice to share what design was planned. We had to make some compromises with regard to the fidelity - caused by technical constraints (compatibility for rather old browsers) and time. So here is the original visual design "one-pager" ...

Maybe you find it interesting and (even more) maybe you want to look for the tiny differences :-) Maybe your last chance, since I hope the visual design for the whole project including the website will continue to progress.

So, thanks to the whole website team for your great engagement! Go on :-)

Cheers,
Christoph

1001 Document Icons

Document

The Document Foundation. Well, it seems about documents and their creation ... but how to make that visible? How to come up with both a rather unique symbol and something very familiar?

We've seen so many icons on the different operating systems - most of them are based on a common metaphor: a sheet of paper with a folded edge (a so called "dog-ear").

Triangle

You already know that our document symbol is different. We thought: Why not unfold the edge? Make it an unique triangle!

Of course, we had a lot more thoughts ...

First, the triangle is shaped like an arrow. It is directed to the upper right and therefore indicates positive progress. Next, the triangle isn't enclosed - it is somewhat open, or even a bit libre.


Additionally, we do not only want to create paper based documents, we are already able to work with many kinds of documents of the digital age. So we somehow fixed the old metaphor and made it compatible with the future :-)


As already said, it is also a very distinctive symbol in comparison with the usual "document icons". Distinctiveness means being unique and providing a good recognizability.

Finally, the shape and the simple layout makes it easy to work with. Have a look at my last blog post that deals with some qualities of good logos.

Well, as always (in life) you may agree or disagree ...

Key Visual


The triangle is also a great "key visual". Being straight and clean, it can be re-used to visualize the intended message. Examples?

Let's have a look at the LibreOffice artwork. More specifically, let's have a look at the splash screen ...

The triangles form a pattern in two of the corners. You may notice that the triangle of document symbol itself is aligned with the pattern and that all the triangles point towards the same direction.

Completely different is the "10th community anniversary" graphic. It re-uses the triangles to form ... just guess :-) And still, same direction.

Well, I hope this little "document symbol" journey was interesting for you. Now I can safely go on to add this item to our growing LibreOffice branding page. Tomorrow, of course.

Cheers,
Christoph

Colorful and Pretty

A few days ago, somebody wrote on the LibreOffice marketing list:
"In any case, when you're designing the new logo graphics, can you
please make them colorful and pretty? The OpenOffice logo was a bit corporate, conservative and... dowdy... :-)"

I would like to add some thoughts here. And more specifically: What helps to turn an image into a good logo?

Let's start with the hypothesis, that "enhancing a clean and simple design is much easier than simplifying a complex visual design". Why is that important? Let's look at some questions that help to decide if something is a well designed logo ...

Questions

Can the logo be easily recognized?

If used in context, a logo needs to be recognized really quickly. One thing you can do is to provide a very clear shape that doesn't need much additional "visual explanation". For example, the STOP sign being octagonal and red can be easily recognized with a glimpse (to be honest, we are trained to recognize it, but it is much easier since the shape is very simple).

By the way, one of the next blog posts will discuss the Document Foundation logo in more detail.

Can the logo be used on different backgrounds?

A versatile logo can be used on different backgrounds - background colors. Well you might say, why not simple adapt the colors? Sometimes you have to adapt the colors, but if you do that, then the impact of the logo is reduced, too.

Is it possible to scale down the logo without much loss?

Logos used in different ways - within the product, on conferences, on websites, ... so the logo design itself has to be very flexible. For example, it should both work well when used on a gigantic banner and when used in the installer. Here is some example for the real Windows Installer (103 x 58 pixels) ...

You see, if you use text withing a logo, then the font has to be very clear. If one decides to use "joyful" fonts, then you will run into serious trouble when scaling :-)

Does it look good when displayed in one color only?

We may assume that everybody owns a color display - so displaying color is neither a huge problem on websites nor in the product (except: people with color blindness).

But, if you start to pay for T-Shirts or for large scale printings, then "monochrome" logos are a huge advantage. Or maybe you want to use flock-finishing ..

Does the logo allow to be used in different contexts?

As already said, a logo is used in different places ... also in the software itself. So a question should be whether it distracts when people do "real work" (e.g. when it is displayed in the StartCenter).


Examples

Please not that these examples do not (yet) consider any special guidelines. I just wanted to show what is possible with the current LibreOffice logo ... Please decide for yourself if the questions above can be easily answered.

What to wear? Timeless and simple ...

Or a more elegant alternative ...

Where to go for the developers? I mimicked the style of an old computer terminal ...

Carry on! Some bags, e.g. for the next trade fair.

Business card as un-usual. Some distinctive shape for a business card ... people will remember, I'm sure.

More Color, More Art

Having a very clear logo design, it is rather easy to derive a set of more creative graphics ... you might remember the 10th community anniversary graphic. So my proposal is to first get the basic tool right, and then using them with a lot of creativity. Go on!

By the way, Bernhard talked about product branding at the OOoCon some years ago - have a look: Visual Identity of OpenOffice.org Now and in Future - Logos, Icons and other branding bugs in OOo2 and OOo3 (OOoCon 2006)

Bye,
Christoph

And now some additional ideas ...

Fontastic! How LibreOffice got its font ...

Two days ago, I talked about the LibreOffice colors and the reasons of the intermediate branding. Today, I picked a small but very important topic ... the font for the LibreOffice writing.

The Font

The two main requirements: look serious but modern, being available for all the contributors to create additional artwork. Simple, isn't it?

Within the OpenOffice.org branding initiative, a small team of well known contributors started a discussion concerning fonts. Thus, there is a very helpful compilation of different fonts and their use. After trying some of them, I decided to go for "Vegur". It just fits, I think.

Libre vs. Office

Focusing on the typographical emphasis, I had to make some decision whether we want to put emphasis on Libre, or Office, or both. Of course, we wanted to highlight the "Libre" part, so we used bold characters for that (next to the LibreGreen color). The default "Office" remains unchanged and therefore - hopefully - keeps a minimum of elegance and non-obtrusiveness.

Typographic Tweaks

A logo is a bit different from body text, therefore there was a need to tweak the font a bit. When using Vegur out of the box, then each of the characters sticks out at the intended size. To make it more compact, to let it appear as a whole, the letter-spacing had to be changed (distance between the letters). The good thing is, that decreasing the letter-spacing does also lead to fake ligatures (the straight connection between the two 'f').

Well, that's the story covering the font ... what will be the next? Don't know yet, but stay tuned! Or just tell me :-)

Cheers,
Christoph

United Colors of Liberty

Why green?

Looking back some days, since the Document Foundation idea and LibreOffice has been announced, there have been both many questions and many proposals. But - as far as I remember - nobody ever asked: "Why green?"

Maybe our FAQ makes it very clear, LibreOffice is an intermediate name until all trademark questions are resolved. But since we had to use another name, we also had to substitute all the branding elements within the software. Despite being meant as a placeholder, we put - given the available time - a lot of effort into the branding you can now see in LibreOffice Beta, on the Document Foundation website and other locations.

Interested? I would like to explain how we came up with the visual design, the message "behind" the graphics. So let's start with the first blog posting ... let's start with "United Colors of Liberty" :-)

Base Color

The base color is a saturated green - why? When we thought about a new logo for LibreOffice, one member within our group presented a draft using this color for the term "Libre". Although we had also other proposals, I started to like the idea and also worked out a rough design proposal with the elements you already know (the document icon, the LibreOffice text, ...).

I picked some green and checked how "versatile" it was, how it behaved on different backgrounds. This is something I missed a bit with regard to the OpenOffice.org branding refresh. The bright and friendly blue is a bit picky with regard to the background color ... "Open" is rather bright and "Office.org" is black. Both have to be presented on the same (bright) background. For LibreOffice, I reduced the luminance to make it a bit more versatile.

But does it fit to our project? Each color has a certain meaning depending on the cultural background. The most common one for green seems to be "nature"; and that is what we want to achieve ... a friendly and natural evolution. Moreover, our friends at BrOffice.org already use green in combination with blue. In my point-of-view, it fits very well.

But nothing decided yet ... it was still a proposal. We discussed all designs during a phone conference and when people decided to continue with the LibreOffice design you know now, I've asked whether they prefer green (the new color), or blue (the OpenOffice.org color). Interestingly, all participants agreed to go for green. It appeared to be a good choice.

So, we had the base color #18a303 (R24 G163 B3)  - a more friendly name might be LibreGreen :-)


Background Colors

A very easy task ... for the background we chose either white or rather bright gray, because it is very neutral. But might this be too boring? Maybe ...

Accent Colors

For several reasons, we needed some accent colors that nicely match with LibreGreen. The great little application Agave helped me to come up with three additional color proposals.

I repeated the steps in Agave several times until having a set of colors featuring different intensity (brightness). Those colors were good, but still needed some further polish. So I tweaked saturation and brightness until having a more or less balanced palette. One of those colors, LibreBlue, is also intended to build a visual bridge to OpenOffice.org.

Especially one of the brighter LibreBlues has been used to provide a fresh look to both our website and the planet, e.g. for the bullets. All have been used to beautify the download buttons - have a look.

What I missed to do was some more research concerning color blindness issues like I did for the Notes2 (improved comments in Writer) colors. But that should be okay, the Libre colors are just meant to be accent colors and don't represent a palette for e.g. icon creation. Nevertheless, I assume that they don't perform that bad ...

Closing Words

I hope you enjoyed this first story covering the colors we are now able to chose from ... primarily. As I said, it is a temporary branding / name, but there was no reason to pick just "anything" without thinking. What do you think?

If you want to know more, just write a comment or contact us via our mailing lists. Next time, we might dig into the mysteries of the document icon, the arrows, or even the font/text creation. Let's see ...

Cheers,
Christoph