Design/Whiteboards/DocumentBackground

From The Document Foundation Wiki
Jump to: navigation, search


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

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:


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


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)