Design/Whiteboards/DocumentBackground

Status
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:


 * 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 - Improve default page layout"
 * LibreOffice Design List: Thread starter PUSHED - Improve default page layout

Overview
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) --&gt; HSL: 21 (H), 51 (S), 245 (L) --&gt; 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

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)