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

LibreOffice gets a Motif

LibreOffice gets a Motif ... a what?

Okay, let's start from the beginning. Since quite some time we have been asked to provide graphic material that fits nicely together - you may remember our earlier effort concerning the LibreOffice Branding Guidelines.

Sure, the branding guidelines tell you in detail what to do (and to avoid) with regard to our logo, the fonts, ... but a recurring element was still missing. Until now, we used the "triangle pattern" you see in the LibreOffice splashscreen, for example.

Nik took the initiative and started the "LibreOffice Motif Design Task" ... so I'm mostly quoting or referring in this blog posting to other people's work. He explained what a motif generally means:

For our purposes (it has other industry-specific meanings) a motif is a Design element that is used to bring consistency to a range of Design artifacts and sets a "mood" or "atmosphere" visually without taking up too much attention. It is a support element and should compliment the contents of every Design. As such, it usually takes the form of a background-image/vector.

If it wants to set the "mood", it's not an easy task - because it has to fit to the community and the product. So we had exciting days (although things never go as quick as you like, of course) of creating proposals, discussing them, and rating them.

To make a long story short(er), we had:

• 12 proposals by 5 people
• 14 votes
• And a clear winner: Scatter by Nik (10 votes)

Here is the basic design, which is based on the document symbol "triangle":

To prove that it'll be working, Nik provided the Scatter motif in context - although the green is a bit different, you'll get the idea:

To me, this design is a perfect example for our community. It reminds me of the diversity of the different people (different orientation, slightly different color of the triangles) while trying to archive something great together (group of triangles). By the way, Nik told me that he put a lot of effort into making something "organic".


Fine, and now? For example, Drew started to refine a postcard which had been made by Nik as an example. Here is the front:

Want to see more? Have a look at the Existing Designs Wiki Page and find out that even a professional publisher picked the motif (Thanks to them!).


Finally, thanks to all the guys who participated in creating and supporting such the fine motif design piece ... My deepest thanks go to Nik, who took care about documentation and guidance. If you want to see more, e.g. all the motif proposals, then go to the Design Motif Wiki Page.

I'm looking forward to see how our project will get "motifated". Website, LibreOffice product artwork, marketing material, ...

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

Invitiation: Kicking-Off the LibreOffice Design Team

In our recent discussions, we became aware that it is finally time to kick-off the LibreOffice Design Team that wants to, "Make it just work, and look great, too!"

But, are we complete? I don't know, so I'd like to invite you to join - if you have interest, or even some background concerning one of the following areas:

• User experience: User experience considers the user's point of view even before and also during the use of LibreOffice. It aims for productivity, usability and enjoyment and targets both the the LibreOffice project's Web resources and the LibreOffice software. If you're interested in or have expertise in research, design and evaluation methods, we want to hear from you!
• Visual identity design: Visual identity design is about creating stunning artwork to be used in the LibreOffice productivity suite, in the LibreOffice project's Web infrastructure, and in the LibreOffice project's marketing material. It is also about improving the quality and consistency of the visual branding language, which represents our whole community.
• Accessibility: Accessibility is about making the software usable for everyone: people with and people without special needs. To achieve this challenging goal, we implement the laws and technologies that are that are widely-recognized requisites in the field.
• User support and training: This is about sharing your experience when providing support and training for end users. It helps us identify important areas for improvement and establish essential requirements.

Consequently, if you'd like to work on improvements that target both the community and our large end-user base, then the Design Team is the right place for you.

What to do now? If you are interested, then please subscribe to our Design mailing list. Within the following days, we will discuss on list how we'll proceed. Thanks!

Well, we are looking forward to see you!

Cheers,
Christoph

Disclaimer: The Design Team is not (yet) the right place for you, if you want to ask for an overhauled user interface, or to ask us to resolve issues that drove you mad (personally). At the very moment, it is about to get a team to finally work on such topics ... not so much the other way round :-)

LibreOffice Initial Icons - Milestone Number One

LibreOffice Design Team Effort

Hi all!

This post is - more or less - on behalf of the LibreOffice Design Team. Yesterday, we reached an important milestone considering the initial icons for the applications, the documents, and the templates. We now have final drafts for all six major LibreOffice applications.

As you may know from some older Design related posts, we've been working on the icons since about two weeks ... although we've started quite some time ago. And - to cite Bernhard - it seems that we kicked of a collaborative design effort we've never seen within OOo. And that just feels great. Plenty of feedback, and help - although we still need some more support (I'll explain that later.)

LibreOffice Icon Proposals

Let's have a look at the recent Calc icon proposal ...

If you had a look at previous versions, you might notice some changes - based on feedback we got. For example, the application/document icons (top row) now feature grayish background to convery the idea of "paper". Instead, the lower ones now feature more intensive "application colors".

But what are the main characteristics of these icons in general?

• Document symbolism that is unique among all the LibreOffice icons
• Different sizes that contain (hand-optimized) pixel perfect alignment and adapted symbolism details
• Versions for viewers with good eyesight, and versions for people with visual disabilities
• Based on the LibreOffice Branding Guidelines (here)

Okay, not avoid flooding you with too many details, let's compress the information and just highlight the 128px icons we've created so far ...

Progress and Next Steps 

Many icons are still missing, but the most important ones (a.k.a. visible for the user) are available. Now I'd say: "We will complete our mission!" :-) But ...

Help wanted!!! Sorry for shouting visually, but we currently lack a bit developer support to bring them into LibreOffice. Currently, the naming scheme, the packaging and the locations are unclear - so, developers, please join! Here is Bernhard's initial message.

The following table shows the current state of the icons - the most recent version can be found in the wiki.

By the way, the graphics within this blog post refer to the icons I have been working on. Of course, due to the incremental improvements, some contributors also offer slightly different / alternative versions - please refer to the table.

More Information

So what do you think? If you are interested in more information, then:

• Visit the LibreOffice Initial Icons wiki page
• Provide feedback on the Design Team Mailing List

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

Sort of "LibreOffice Portable"

I'm an ordinary member of the German non-profit organization OOoDeV that cares about free software; in our case this is LibreOffice. At the end of the year, they send some small presents to its members ... so a small package arrived at home.

What a surprise! A LibreOffice bag, a LibreOffice lanyard, and a nice Christmas card ... thanks to the creators for both the idea and the great items!!! Next stop: FOSDEM ;-)

Now, I'll pack another (bigger) bag - we will have some short vacation and I'll be back soon. Thus, please enjoy the first days within the new year ...

Happy New Year!!!

See you,

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

LibreOffice 3.3 Artwork Improvements

Hi all,

I do have some files with unfinished work "lurking" on my hard drive since quite a few days. I've spend the last evenings discussing interesting stuff like branding and artwork with some interested people ... not yet on the lists. But I hope this will change.

However, before the graphics data gets too old, I'd like to present the current progress ... and pick the "Splash Screen" (please click on it to see the original size).

So far, the following feedback / ideas have been incorporated:

• Marketing Team/Community: General update of the logo that moves the text closer to the document symbol. That required to move the progress bar a bit - I hope that this can still be considered by the development.
• Graham/Ivan/Others: Use of the new "Color Logo Contemporary" using gray instead of black for e.g. the text and the document symbol.
• Ivan/Christoph: Added a slight gradient for the logo elements.
• Marketing Team/Christoph: Minor update to now use the recently updated colors.
• Ivan: Using a very slight embossed effect (inner shadow) to make the logo a bit more 3Dish. Derived from here.
• Ivan/Christoph: Different kind of gradient for the background. This will only work here, due to the different technical implementation in the "Start Center".
• Christoph: Some "pixel-perfect" re-alignment of the items. Not ideal yet, but it should now appear much sharper than the old Splash Screen.

Okay, although some small refinements, I consider the perceived quality much better than the original one (LibreOffice 3.3 Beta 1). It seems that we are on a good way to finalize what we currently call "Initial Branding" ...

What do you think?

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