Design/Whiteboards/DocumentBackground

TDF LibreOffice Document Liberation Project Community Blogs Weblate Nextcloud Redmine Ask LibreOffice Donate

• Wiki Home
• Development
• Design
• QA
• Events
• Documentation
• Website
• Localization
• Accessibility
• Marketing
• Diversity
• Wiki Help

• Design Home
• Whiteboards
• Development Blueprints
• UX Principles
• UX Guidelines
• Artwork Resources
• Branding Guidelines
• Meetings

This page was marked as inactive and is retained for historical reference. Either the page is no longer relevant or consensus on its purpose has become unclear. To revive discussion, seek broader input via a forum such as one of our mailing lists.

Summary

Status

Analysis

Call for Proposals

Shaping Tentative Design

Blueprint

Implemented

The idea is to improve the impression of both first time and experienced users by modernizing the look of the document border and the application background. Currently, the elements look very outdated due to the use of both plain colors and simple shapes.

Current Status: After an initial implementation by Sébastien (see screenshot). Thanks!!! :-), he continues his work to harmonize the OOo Impress/Draw shadow and the Writer on (see also Development). This page is kept for future use.

Requirements and Constraints

Source of the idea: Bug 31251 EasyHack: Make the default page look better

• Must: The size of the bitmaps to create the shadow have to be: 1x10px for bottom shadow, 10x10px for corner and 10x1px for right shadow. (Note: Only 3-side shadow explained here.) Rationale: Avoid overlap of the shadows with the documents if the zoom level is very small.
• Must: The performance for document operations has to be acceptable. (performance: perceived speed of working with LibreOffice; document operations: especially when scrolling/zooming; acceptable: at least as fast as today). Note: This may be checked via subjective evaluation or performance testing.
• Wish: The document background should respect the setting "Application Background" provided either by the operating system or LibreOffice Appearance settings.
• Wish: The visual impression should be harmonized across all LibreOffice applications.
• Wish: The changes should balance visual attractiveness and unobtrusiveness. Rationale: The main goal of an office suite - working with documents - should not be kept.
• Idea: Apply the freshly chosen LibreOffice motif "Scatter" if possible.
• Constraint: Keep most of the current application behavior. Rationale: Limit the implementation effort.

Discussion

• LibreOffice Development List: Thread Starter "PATCH [https://bugs.documentfoundation.org/show_bug.cgi?id=31251 tdf#31251 - Improve default page layout"]
• LibreOffice Design List: Thread starter PUSHED [https://bugs.documentfoundation.org/show_bug.cgi?id=31251 tdf#31251 - Improve default page layout]

Specification

Visual Design and Behavior

Overview

Preview	Name
2011-04-02 DocumentBorder Idea 1 Plain.png	LibreOffice 3.3 Default (for comparison)
2011-04-02 DocumentBorder Idea 1 Plain DocumentShadow.png	Item "Document Border"
2011-04-02 DocumentBorder Idea 1 Plain DocumentShadow ApplBackground-Gradient.png	Item "Application Background, Gradient"
2011-04-02 DocumentBorder Idea 1 Plain DocumentShadow ApplBackground-Gradient-Motif.png	Item "Application Background, Motif"
2011-07-13 Writer Background Dark.png	Item "Application Background, Dark"
2011-07-13 Writer Background Dark plus Motif.png	Item "Application Background, Dark plus Motif" See here and here.

If you want to alter the examples above, then here is the source file: Design Development DocumentBackground.svg (Note: The document uses layers and masked objects.)

Item "Document Border"

The document border refers to all items that surround the document page (incl. e.g. notes pane) being connected to that page.

Visual Design Changes:

• The document outline color is changed and now uses "Text Boundaries (General)" (usually: light gray). It is kept to provide sufficient differentiation between page and application background.
• The document shadow is now "soft" and visible behind all four page edges, whereas slightly shifted to the right and to the bottom (realized by a dark blurred rectangle in the graphics program).

Design Rationale: The new shadow respects the [http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines Tango Icon Theme Guidelines), since these are the current default icons for LibreOffice. This especially refers to:

• Perspective, Flat / On The Shelf Perspective: "This style resembles looking at an object on a shelf at eye level, looking at an object from above, or laying on surface."
• Lighting: "[...] lit from above, with the light source slightly to the left. Icons with on the table perspective may cast a fuzzy shadow on the surface as if the light source came from the position of the observer."

Behavior:

• The shadow size doesn't change when the document is zoomed.
• The shadow has to respect the Notes2 Design Notes Side Pane.

Todo: Define and export the required shadow images (top left, top, top right, right, bottom right, bottom, bottom left, left)

Item "Application Background, Gradient"

This specification extends the Item "Document Border".

The application usually shows a plain background color that is inherited by the operating system or to be set by the user via the appearance options ("Application background, General").

Visual Design Changes: The document background is a vertical color gradient with the "top color" at the top of the rectangle, and the "bottom color" at the bottom of the rectangle ...

• Top Color: Derived by "Application background, General", increases the luminance value of this color by "5" (assuming 0 ... 255 value range, final value limited to 255 if required).
• Bottom Color: Derived by "Application background, General", decreases the luminance value of this color by "5" (assuming 0 ... 255 value range, final value limited to 0 if required).

Example: The "Application background, General" is set to "f7f5f3" (Ubuntu) --> HSL: 21 (H), 51 (S), 245 (L) --> Top Color: 245 + 5 = 250 (L) ; Bottom Color: 245 - 5 = 240 (L)

Behavior: This change shall only be applied if LibreOffice is shown normally; it should not be applied if "high contrast / accessibility" is active.

Design Rationale:

• The system/user given color for the application background is - generally - respected. Due to the (usually) symmetrical gradient, this color is shown in the middle of the rectangle. Thus, no "artificial" color setting is used.
• For all known operating systems, everything is lit from "above" - the color gradient respects this by starting with a slightly brighter "top color".

Item "Application Background, Motif"

This specification extends the Item "Application Background, Gradient".

Visual Design Changes: A motif (visual pattern) is added to the application background.

Behavior:

• The motif fills the whole application background area with a sub-area of the complete motif graphic.
• It is not scaled / zoomed / stretched for different application background sizes (which itself depends on the LibreOffice window size, active toolbars / task panes, ...).
• The motif background is not dependent of the document zoom level.
• This change shall only be applied if LibreOffice is shown normally; it should not be applied if "high contrast / accessibility" is active.

Design Rationale:

• The motif is based on the recently chosen "Scatter, Variation: Bunch". Its color and transparency has been modified to be less obtrusive when working on the document. See the Design/Motif wiki page for the unmodified version, especially the motif use in context.

Note: Since this effect might be obtrusive and therefore undesired by some users, it is strongly suggested to enable the user to deactivate this effect (e.g. via appearance settings, or setting a value in the configuration files, or by deleting the background picture within an installed version).

Todo: Define the position/size behavior of the motif for different window sizes and aspect ratios.

Item "Application Background, Dark"

This specification extends the Item "Document Border".

The appearance of LibreOffice depends on the used GTK Theme. Because most GTK Themes are light and bright, the contrast between the application background and the document is to low (example screenshot). When LibreOffice is used over a long period of time, this causes distraction and the loss of focus.

Visual Design Changes: The color of the document background doesn't depend on the theme, it's always gray.

Note: It's already implemented in LibreOffice for Windows (see screenshot).

Application Specific Use

Meaning: "proposed" = should be used, "no" = should not be used, "to be checked" = use should be discussed / checked with e.g. users

Application	Document Border	Application Background, Gradient	Application Background, Motif	Application Background, Dark	Application Backgroud, Dark + Motif	Details
Writer	proposed	proposed	to be checked	proposed	proposed	The given information refers to the "Print Layout". Specification for different "View Layouts" may be added on demand.
Calc	no	no	no	no	no	Document Border, Application Background: Not required (at the moment), since ... ... all available space is used for the spreadsheet ... the Application Background is only shown in the very rare case of seeing the very last column or row.
Impress	proposed	proposed	no	proposed	no	Document Border: Since it is shown today, it just exchanges the visual representation. Application Background, Motif: It may be used, if it is rather clear that people won't use the space around the slide for drawing purposes. At the moment, it seems better to not use the motif for Impress.
Draw	proposed	no	no	proposed	no	Document Border: Since it is shown today, it just exchanges the visual representation. Application Background: Not required, since all the available space might be used as a drawing area and Draw already visualizes that.
Base	no	no	no	no	no	Document Border, Application Background: Not required (at the moment), since the application relies on spreadsheets and forms.
Math	no	no	no	no	no	Document Border, Application Background: Not required (at the moment), since all available space is reserved for the formula content.
General	proposed	proposed	to be checked	proposed	to be checked	This item refers to LibreOffice without any active document, e.g.: StartModule (see [http://specs.openoffice.org/appwide/start_module/StartModule.sxw StartModule Specification) StartCenter (see OOo StartCenter Idea Collection Page)

Development

Implementation History

• The mail by Sébastien (2011-03-08) summarizes the initial implementation.
• The resource directory containing the initial shadow images is located here: https://cgit.freedesktop.org/libreoffice/artwork/tree/default_images/sw/res
• The shadow code from OOo 3.4 (for Impress and Draw) has been merged to the LibO repository. (Looks very good, by the way.) The shadow in impress is realized by a 35x35 px large bitmap that contains all the document borders - the image is (within the code) split in several pieces to realize the final document shadow.
• Sébastien works on the new shadow in Writer, and tries to keep the shadow color settting.

Open Points

• Verify implementability with Sébastien
• Verify design with other Design Team Members
• Check impact on performance
• Check for drawing issues (especially for different Zoom Levels and View Layouts)