The Document Foundation Wiki
 

Design/Whiteboards/LibreOffice Initial Icons

From The Document Foundation Wiki

Jump to: navigation, search
Wiki DesignTeam Logo WetPaint.png

As this page doesn't only show the basic information about the design but contains links to the present state of our work, everybody is invited to join our effort:

Subscribe to the design mailing list, comment presented proposals and pick an icon that still needs to be worked on. If you are interested in collaborative work and integration in a common design idea, your help is highly appreciated!

Contents

Goals and Timeline

The goal is to create an initial icon set for the LibreOffice 3.3 release. Rationale:

A release of LibreOffice 3.3 is expected from mid December to mid January ... the icons have to be provided at least approx. 5 days in advance.

Requirements and References

Note: Due to the time constraints, the requirements do only cover the most important points.

Requirements

Resources

Discussions and Decisions

Alternatives for New / Improved Icons


Advantages
Disadvantages
Comments
Complete New Icon Set
  • Own and harmonized visual identity
  • Much work
  • Less high-quality look (given the time and the resource constraints)
Create a completely new MIME type icon set on the basis of the LibreOffice branding guidelines.
Use of Tango Icons
  • "Ready to serve" solution
  • Availability of icons is unclear (license issues)
  • Icons might not satisfy the requirements on all platforms
  • LibreOffice main application icon has to be created (and might differ from the Tango style)
  • Completeness is unclear
Use the tango icons that are available on some platforms.
Rework ODF icons Set
  • Quick solution for a full set of icons, visual style is similar to current LibreOffice branding
  • High quality artistic work by Stella
  • Color improves distinctiveness
  • Availability of icons is unclear (license issues, also concerning shiping adapted icons)
  • LibreOffice main application icon has to be created

The ODF icons may be retouched to work on the most criticized point of being less distinctive. The application icons may be replaced by the corresponding document icons. The LibreOffice main application may be based on the TDF document symbol.

From the options given above, the Steering Committee decided to go for the "Complete New Icon Set" (see Steering Committee Meeting, 2010-12-11).

Decision List

The discussion concerning the icons takes place on the Design Team mailing list. The following table is an extract of some of the discussed issues.

Topic Question / Issue Answer / Discussion
Decision
Remaining time for the release? Christoph: Much much time is left for the icons to get included within LibreOffice 3.3? Not that much ... :-( (none)
Need for dedicated application icons? Bernhard: Is there a need for dedicated LibreOffice application icons? If the user executes one of the applications, then usually starts with an empty document.

Christoph: It's common on all platforms to distinguish between application (e.g. Writer, Draw) and document icons (e.g. ODT, ODG). Rationale:

  • One application usually supports more than one document type (e.g. image viewer).
  • The application icon is usually used to "promote" the software by the vendor.

But, LibreOffice and the different application modules are different from other software. Therefore we may go for a main LibreOffice application icon, and re-use the document icons for the corresponding applications.

Decision: After some discussion, sharing application and document icons do save some effort and also make some sense from the user's point-of-view. The decision may be re-visited for the next releases of LibreOffice.

Share application and document icons
Use of the LibreOffice document symbol? Bernhard/Christoph: Shall/may the LibreOffice document symbol be used for the icons?
  • Christoph: That's unsure, since the branding guidelines already state to keep the document symbol as it is (without any modifications within the icons). Thus, I'd propose to use the document symbol for the main LibreOffice icon, but not for the document / template icons.
  • Bernhard: The re-use of the symbol would greatly increase the visibility of the document symbol representing LibreOffice.

Implicit decision (by going forward on the mailing list without veto): Use the document symbol for the icons. This decision may be re-visited for the next releases of LibreOffice.

Use Document Symbol for Icons
Color update possible?
Ivan: When working with the icons, it seems that the branding colors might require some more tweaking. Is it possible to change them?
Christoph: The colors may already be used by others to come up with marketing material. But if it is required, some minor tweaks are possible of course ... even if we just do that within the icons. Furthermore, the update of the branding colors seem to be manageable (in terms of effort).
Open

Development

Document Symbolism

Note: Basic symbolism will be used for 16px and (partly) 32 px icons. If the icons are larger, then decoration elements can be added to make them more pleasing.

Icon Type
Document Name
Application Name
Symbol Main Color
Basic Symbolism
Decoration Elements Comments / Discussion
Main Application
(none)
LibreOffice
Gray
(none)
(none)
  • Christoph, comment: A symbol equivalent to the LibreOffice Document symbol will be used.
Document, Application
Text Document
Writer
Blue
A few lines representing text An image in the upper right corner (mountain behind a sea)
  • Bernhard: an image of a mountain behind a sea at the right upper corner
  • Christoph: okay
Document, Application
Spreadsheet
Calc
Green
A grid representing the cell grid
A bar graph chart
  • Christoph, comment: The bar graph chart is intended to be equal to the Chart application. See "Chart"
Document, Application
Presentation
Impress
Orange
  • A rectangle representing a lide
  • Bullet points and lines representing text
Line chart (mimicing positive market development)
  • Bernhard: a detailed slide (header, sub-header, a few bullet points and a chart?)
  • Christoph: Well, we don't support automatic sub-headers along with "normal" slide content ;-) And, I'd skip the chart ... to avoid misinterpretations with regard to Chart.
  • Bernhard: We can use different levels of bullet points instead...
  • Christoph: How about a line chart showing some very positive "market development"?
Document, Application
Drawing
Draw
Yellow
  • Drawing primitives
  • Green object handles used in Draw
(none)
  • Bernhard: a floor plan with measurements
  • Christoph: How about some drawing primitives? I want to show that it is a vector based application - the present symbol doesn't contain this at all.
  • Bernhard: 3D-Effects, wireframes: These are not the primitives you have in mind ? ;-)
  • Christoph, comment: The object collection of the LibO Basic IDE uses such primitives (red rectangle, blue triangle, yellow circle)
Document, Application
Database
Base
Purple
  • Stack of hard drive disks (mimiced)
(none)
  • Base: a relational database model
  • Christoph: Aehm, how does that look like? ;-)
  • Bernhard: Just the present symbol with some additional arrows, file stacks and other symbols (forms, reports) - something like this
  • Drew: Alternative metaphor (description) to clarify the intention of Base
Document, Application
Text HTML / Empty
Writer/Web
Gray
  • A few lines representing text
  • Globe representing "Internet"
Glowing lines on the globe to represent active connections

Document, Application
Master Document
(Writer)
Gray
4 miniaturied versions (2x2) of the "Text Document" symbolism (none)

  • Bernhard: 4 miniaturized Writer icons
  • Christoph: Yep. Or, 4 miniaturized versions of the symbolism (only.)
  • Bernhard: Depends on how they look like. If the symbols contain the cut-off corner, I'm fine with them.
Document, Application
Formula
Math
Gray
A simple formula
  • more complex formula elements
  • drawing lines/guides around/within formula elements
  • Bernhard: more mathematical symbols (integral, root, log ?)
  • Christoph: Fine with that - but we should somehow incorporate that it is only the visual representation and not the calculation. So how about adding "drawing lines/guides" around/within the elements?
  • Bernhard: I did never use Math for any real task, so please help me with the idea...
  • Christoph: Here is some (already outdated) proposal. We should also consider the "Insert -- Formula" symbol "sqrt{x}"
Document, Application
Chart
Chart
Gray
A bar chart
 ???
  • Bernhard: two or three different charts along with a small table
  • Christoph: Yep. But, I think it would be helpful to omit the table ... although it is based on structured data, most people won't be aware of the fact that Chart does incorporate own table data. So we focus on the visual representation ...
  • Christoph, comment: The bar graph chart is the default type when adding charts and the default icon (Galaxy Style). For Tango, there is a different icon (pie chart). What to use?
Document, Application
(Basic)
Macro
Gray
A gear wheel
  • another gear wheel
  • a command window showing syntax highlighted code
  • Bernhard: Macro: two gear wheels, a macro structured text window
  • Christoph: Might work - if the text window is distinctive with regard to the Impress symbol.
  • Bernhard: Should be - as the icon has grey borders, we could add the color coding from the macro window.
  • Christoph, comment: The tango icons don't use a gear wheel for the macros. Sometimes it looks like a stack of paper, a piece of paper with syntax highlighted code, or a rectangular "play" button.
Tools
(none)
LibreOffice Installer
Gray
Green downward arrow

 0/1 (bits) added to the arrow to represent "digital" information

  • Christoph, comment: Re-use the symbol of the current LibreOffice download icon. See the TDF website.
Tools
(none)
Printer Administration
Gray
A printer (next to the document symbol)
(none)

Feedback and Issues

Date, Author Symbol / Visual Item Criticism Discussion
Italien team 16px icons

In general, the smallest size it is very difficult to distinguish between document and template. It is impossible to see the spyral - a test: changing the colour of the small triangle seems to work well.

2011-02-11, Kendy and Michael Missing Items

As you can see, the Libre icons are more saturated than the Tango ones. It would be great when the user switches to Tango, to have the LibreOffice icons more fit the entire theme, ie. use the Tango palette in that version. For that, we would need separate copies of the icons that are using the other palette; but from that palette, of course colors that are closest to the original ones.

The second problem is that the big version of the icons is 26x26; and Tango theme is 24x24, and not even using the entire area. The result is that it looks as if the icon on the upper left hand side was much bigger than the rest of the icons in the toolbar.

2011-02-15 LibreOfficeInitialIcons ToolbarIssue.png
Additional image example by Kendy (showing the full drop-down list).
Mail by Kendy
2011-02-18, Sophie Quickstarter Icon Under GNOME, the quick starter icon doesn't appear to have a transparent background. An easy way to reproduce this behaviour is to set your GTK theme to New Wave and enable the LibreOffice Quickstarter in Tools > Options > Memory > Enable systray quickstarter. It would look a lot better if we removed the opaque background beneath the icon.


Reason why this happens
IIRC if a program uses EggTrayIcon or X11TrayIcon (or similar) instead of Gtk.StatusIcon, the icon does not contain a transparent background. All we need to do is change the code to use Gtk.StatusIcon (should be relatively simple).

Quickstarter-opaque-background-issue.png
2011-02-28, Several authors Quickstarter Menu Math icon is colored blue in the drop-down list of the QuickStarter Issue 34324
add add add add

Source Code Integration

Proposals

Present State of the Icon Design

LibreOffice icons 256.png

The present version of the icons has been released with LibreOffice 3.3.1.

Thanks to everybody having helped to make this happen!

Please update the table if you uploaded the icons. Thanks!

The source file contains the present version of all the icons - alternative proposals as different layers. (If the combined file can't be merged, when several people worked on different icons, we'll go back to individual files)

Icon Type
Document Name
Application Name
Document (DC)
Document (HC)
Template (DC)
Template (HC)
Team
Current Owner Latest Version
Comments / Work Status
Main Application
(none)
LibreOffice
Final Draft
Final Draft
Final Draft
Final Draft
Christoph, Paulo

source file

Document, Application
Text Document
Writer
Final Draft
Final Draft
Final Draft
Final Draft
Christoph, Paulo

source file

Document, Application
Spreadsheet
Calc
Final Draft
Final Draft
Final Draft
Final Draft
Christoph, Paulo

source file
<br
Document, Application
Presentation
Impress
Final Draft
Final Draft
Final Draft
Final Draft
Jaron, Christoph, Paulo

source file
alternative drafts in the source file
Document, Application
Drawing
Draw
Final Draft
Final Draft
Final Draft
Final Draft
Jaron, Christoph, Paulo

source file
alternative drafts in the source file
Document, Application
Database
Base
Final Draft
Final Draft
Final Draft
Final Draft
Bernhard, Christoph, Drew, Paulo

source file
alternative drafts in the soure file
Document, Application
Text HTML / Empty
Writer/Web
Final Draft
Final Draft
Final Draft
Final Draft
Bernhard, Christoph, Paulo

source file
alternative drafts in the source file
Document, Application
Master Document
(Writer)
Final Draft
Final Draft
not needed
not needed Bernhard, Christoph, Paulo

source file

Document, Application
Formula
Math
Final Draft
Final Draft
not needed
not needed Christoph, Paulo

source file

Document, Application
Chart
Chart
Final Draft
Final Draft
not needed
not needed Christoph, Paulo

source file
Re-use idea/graphics from Calc
Document, Application
(Basic)
Macro
Final Draft
Final Draft
not needed
not needed Bernhard, Christoph, Jaron, Paulo

source file
alternative drafts in the source file
Tools
(none)
LibreOffice Installer
Final Draft
Final Draft
not needed
not needed Christoph, Paulo

source file

Tools
(none)
Printer Administration
Final Draft
Final Draft
not needed
not needed Christoph, Paulo

source file

Earlier Proposals

Proposals by Bernhard

present version: Media:LibreOffice_Initial_Icons_Bernhard_draft_0-1.svg

previous versions (and mails)

Proposals by Ivan

Proposals by Christoph

Previous Versions:

Proposals by Jaron

Proposals by Paulo José

Proposals by Different Authors


Personal tools
Namespaces
Variants
Actions
Wiki
Navigation
Toolbox
donate