From The Document Foundation Wiki
Jump to: navigation, search


This wiki page will summarize the work status of the Design Team and related major design topics up to the end of January 2011. About four months ago, we announced The Document Foundation among with LibreOffice Beta. Since then, many things have happened - some were more visible, others were less visible. To provide an overview - to get you on track and the Design Team working together as a real group - we want to shed some light on these activities.

They are listed below in more-or-less chronological order ...

LibreOffice and BrOffice Product Artwork

It all started with our announcement of The Document Foundation. The name "LibreOffice", you might remember, was meant to be a temporary / backup name until all the issues concerning the trademark use would have been clarified with Oracle. Since one of our main goals was to provide a real software product starting with day one, we had to have adequate product artwork ready.

Ideation started within the TDF members team, and we decided to go with what you know today - the document symbol and the color green. Here, product artwork refers to the splash screen, the about box, the startcenter, and some other places (like the Windows or Mac OS X installer). With the initial version, we went public.

During the beta phase, and with the help of some well known guys like Ivan, we iterated the artwork ... and it gained a lot, from my point-of-view. Finally, we also provided the images required for the BrOffice guys (this is the name of LibreOffice in Brazil).

Missing pieces are, at the moment, a full set of high-contrast versions of the artwork.

The artwork is currently linked from within the Design/Work Items page (Finalize and Publish Product Artwork).

DesignTeam Kick-Off Step2 ProductBrandingExample.png

The Document Foundation Website

In order to "go live", we also needed a website that considered the basic visual design language that had been created for LibreOffice Beta. Within the TDF team, we designed both the content and the structure of the page. Some time ago, I posted the initial design file - you may want to look at it.

Unfortunately, a few items were still missing - a lack of time and the use of basic HTML lead to some constraints. But, it worked like a charm! We got plenty of good feedback, and - being a static page - the infrastructure survived all the load peaks after the announcement.

Besides the TDF website, we also provided icons and artwork for the Wiki, and the Planet.

You can find all the elements of the initial page on the Design/Work Items page (Create and Publish Website Artwork).

LibreOffice Branding

LibreOffice Initial Branding

LibreOffice-Initial-Artwork-Logo  Guidelines   Spacing.png

The LibreOffice branding refers mainly to the Visual Identity of LibreOffice. This visual language should be used and adapted throughout the project. However, this meant that we had to come up with documentation and downloadable files rather early to enable everyone in the project to provide harmonized and good looking content.

As you may have guessed, the large parts of the available documentation (see link below) had been created by today's Design team members. They include: a basic branding description, spelling and pronounciation of the names, key visuals, logos, font use, colors...

The logo and the colors section particularly gained a lot by the iterations we made. At the time, lacking a dedicated mailing list, discussions took place on the Marketing list. In general, what really helped here was the experience of people who already worked on the branding guidelines and for the Art team in the past.

Finally, please have a look at Marketing/Branding - especially the "Usage Examples" sections. There are many blog postings and examples to be found that provide even more insight in what we did - and why. The wiki page is still a bit incomplete and requires some updates ... most of the missing items are listed in the Open Points section.

LibreOffice Community Branding

You might guess that beginning with a visual design that had been started before the initial announcement of the Document Foundation might be considered strange for an open community like LibreOffice aims to be. I agree. At the beginning, there was a need to have something in place that just works, so that anybody will know: "Oh, that's LibreOffice!" Personally, I really think we achieved this very well ... especially due to the many iterations and improvements that went into the material.

Despite this, there is also a wish to have branding that grows out of our community ... we call that the "LibreOffice Community Branding". Some time ago, the team decided to keep the initial branding for a few releases, so that we create a stable environment for both the creators of material (marketing stuff, LibreOffice itself, ...) and our end-users.

The advantage of this approach is that it will leave us with sufficient time to work on the Community Branding. And this is required, because the branding derives from the strategic goals by the community, the intended user base of LibreOffice, and the creative power of the Design Team members. Of course! Some people even started to ideate the visual identity briefing which will be a great starting point ... once the more urgent topics are finished.

You can find more information on the Community Branding topic on the Design/Work Items (Create / Refine Branding Roadmap), and some ideas on the pages mentioned below.

Ideas, Ideas, Ideas

Well, even with an "initial branding" you can't hinder creativity :-) So there have been numerous proposals during the last months being documented on the following pages:

Marketing Material

Some of the marketing material originated also from those, who are currently part of the Design team. For example, we provided an Impress Presentation Template (Draft) that mimics the LibreOffice style. Although already a bit outdated, and featuring some serious issues, it is the only one available at the moment. Something we really should work on ... some conferences to come :-)

You'll find it on the marketing Marketing/Ideas page. And, of course, on the famous Design/Work Items page (Official Presentation Template).

LibO CommunityAnniversary 10years 300x300.png

LibreOffice Website

PROP InterimSiteHomepage 101222NS.jpg

Initially, there was no LibreOffice website - just The Document Foundation website. This site was - and still is - run on static HTML. For the LibreOffice website, a content management system (CMS) would be required and, after many discussions and proposals, Silverstripe was chosen.

There was an urgent and pressing need to create a comprehensive website before the first major release of LibreOffice (3.3) and this included an improved website design, in addition to content, screenshots, information architecture...

Nik's design proposal was chosen as the basis for the new theme and was implemented (that is, adapted for Silverstripe) by David and Ivan in early January. Due to time constraints, most of this initial Silverstripe work was done by a very small group of people without much mailing list discussion. On January 10, the new theme was launched and a wider range of contributors on the website list have worked together to make further improvements. To support this effort, the Steering Committee appointed four contact persons for a trial period of two months (until mid March 2011). From our side, Ivan will help with design decisions, and Christoph will care about user experience topics.

It is not anticipated that the website design will change significantly before the Community Branding process (described above) is complete. Current work is focused on small design improvements, documenting Silverstripe templates and creating of a broader range of styles for content editors to use on pages so that our text-heavy content is nicer to look at.

LibreOffice Design Team

As already stated, some of our members already worked on design topics right from the start - although there was no explicit structure. Moreover, the original aim of the TDF group was to limit the number of isolated activities to improve the cooperation that was needed that time. Thus, design related topics were mostly discussed with the marketing guys. For that reason, many of the ideas and activities are still to be found within their wiki pages and on the marketing mailing list.

When the design aspects became more visible (literally), some of us discussed how to incorporate these topics into the new LibreOffice project. Since we had some experience from within, and we discussed different structures with other open-source projects (e.g. OpenUsability, Fedora Design Team), we proposed the Steering Committee to go with the Design Team. Why?

Within the project, there had been several rather independent activities that dealed with those topics now being addressed by the Design Team: the rather internal Visual Design activity, the community based Art Project, and the User Experience Project. The problem: Rather independent activities that did not benefit from each other that much ... although there have been great things. The former issue is something we wanted to change.

So, now there is the idea of the Design Team, that covers "User Experience Design", "Visual Identity Design", and some parts of "Accessibility" as well.

I'm sure that the experience we've gained over the years within will be helpful, too. How to incorporate workflows, tools, ideas, ... that is something we might talk about later. And, sooner or later, we really should have a look at how to cooperate with, or what to learn from the other guys - e.g. the Fedora Design Team, the Ubuntu Desktop Team, the KDE Usability Project, the OpenUsability project, the ... you get the point. Some time ago, David already asked some other FLOSS teams to join our project, so we already do have some experienced guys with us - which is cool!

But now, we are asked how we can bring some more benefit to the LibreOffice project.

You can find some information on the Design/Work Items page (Cooperation and Collaboration).

Wiki DesignTeam Logo WetPaint.png

LibreOffice Icons

The "topic" application icons and the document icons caused a lot of worries in the last months. In one of the previous versions, the colored icons had been replaced by highly artistic but - at the same time - equally looking ones that aimed to promote the document format ODF. Many people considered this a major usability problem, since the icons itself were hard to distinguish from each other. Thus, for the LibreOffice Beta release, we decided to roll back the icons and use the "Galaxy" style originally created for This was a solution, but only a temporary one - the Galaxy icons contain the Sun S-curve branding and the characteristic seagulls which interferes with our aim to provide a consistent visual experience with LibreOffice.

Thus, we started (although a bit late), to work on a set of application and document icons. The "we" is important in this case - this was the very first collaborative visual design approach that we know about since a long time. Thus, I'm proud that we made the decisions together, and provided feedback or graphics that lead to iterative improvements. I have been told that people in the French community followed the progress closely, and Drew pointed out that each new icon improvement was "measurable" on Twitter. That was possible, because we provided information and progress on a dedicated wiki page, in blog postings, and some photo sharing websites.

To make you understand why this has been a major achievement - although we restricted ourselves to only provide the most essential ones, we talk about over 130 icons that are hand optimized (computer display pixel grid, visual disabilities compensation). However, to ensure high quality by testing, and meeting the release date, the icons have not been included into LibreOffice 3.3 - but this will change for the upcoming 3.3.1 minor release.

Something I still consider unique is, that Paulo - a new guy to this community - stepped in and made up the missing 256px icons (can also be used for marketing material) and polished many of the 128px icons. It was a great pleasure to see this enormous team spirit! Finally, have a look at the icons below ...

LibreOffice Initial Icons-Paulo-3-comparacao.png

More information can be found on the Design/LibreOffice Initial Icons wiki page.

LibreOffice Development Support

In general, there haven't been that much activities between the LibreOffice Design Team and the Development - although there had been numerous requests to join. But first we had to focus on the Website, the Branding, and the Icons - not to forget our Kick-Off :-) Consequently, this is something we really have to change.

The only exception: Cedric and Björn have started to rework the fields dialogue in LibO Writer as there has been a request from development (Cedric) to add some new features. While thinking about how to integrate them, we found some better ways to actually handle the 'add a field'-task in general. Once there are results I will add a link here.

A smaller request came from Kohei (and is still open), to work on the small document icons which shows the "document changed" in the status bar. Similar to such small but important improvements, we've been asked several times to provide so called EasyHacks for the development - tasks that help developers to get comfortable with the code. Still something to do.

But, of course there have been (sometimes quite fruitful) discussions on the development lists - people started to refer to User Experience related topics by adding "[UX]" to the subject. You may want to scan some of those posts via the mailing list search for "UX". That also means, that some of of us "linger around" on the developer mailing list - to pick and to forward some topics. So our proposal is to subscribe there as well (see Get Involved, Development). Same for the developers, only some are subscribed to our list - at least we asked a few weeks ago.

Next Steps

This has been a rough overview of what has happened until now. Still interested, then stay tuned for the next steps to finalize our Design Team Kick-Off! And if you have questions or proposals how to improve this page, then please send them to the Design Team mailing list (see Design Team Communication).