Design/Whiteboards/Android icon set

From The Document Foundation Wiki
Jump to: navigation, search
Incomplete-document.svg

This page was marked as abandoned.
If you think you can contribute in creation of this page feel free to do it, but before that you should remove this template. If this page is completely unusable as is, and cannot be improved or used in any other way, then replace this template with a deletion request: {{delete|Unusable, abandoned page.}}.


LibreOffice needs a single base icon set that could be tweaked to comply with platform standards, themes, and user requirements. This icon set would then be automatically translated into several icon sets (gray for light themes, white for dark themes, a high-contrast set, and maybe a glossy set, a smooth gradient set, or a bichrome set).

The first version of this icon set will focus on the Android platform.

Call for submissions

Submit your proposal for the New Document icon below.

Goals

  • Monochrome
  • Flat
  • Scalable
  • Easy to tweak
  • Intelligible
  • Consistent
  • Crisp

Guidelines

Based mostly on the Android icon design guidelines. If in doubt, refer to those.

Icon design

  • All icons are solid black (RGBA #000000FF) with a transparent background.
  • Icons should be 24x24 dp with no margins. (1 dp = 1 px on a 160 dpi screen.)
  • The thickness of strokes and negative spaces should be at least 2 dp.
  • If the symbol is narrow, rotate it 45° left or right to fill the focal space.
  • All icons are international and untranslatable. Don't use the B symbol for Bold or I for Italics.
  • Try to keep elements aligned to a square pixel grid, or at least a square half-pixel grid.
  • Use Vegur, LibreOffice's official font, if you need to.

Icon files

  • Icons should be submitted in the SVG format.
  • Use a single layer only.

Symbolism

  • The + symbol should appear on icons for creating data.
  • Letters should be used to denote text. Use letters based on their position in the alphabet -- always use A and, if required, B, C, and D.
  • Numerals should be used to denote numbers.
  • Horizontal lines should be used to denote a paragraph.

Design process

  1. Every week, from Sunday to Saturday, there will be a call for submissions for an icon or a group of related icons. A submission can be an SVG icon draft or simply a sketch, which the community will then turn into an SVG icon.
    1. Submissions should be posted on this wiki page under the Icons section with the format <Icon> -- <Author>, <License>. Each submission should have its own bullet point.
    2. All submissions should be licensed either under the MIT license (Android's license) or the CreativeCommons Zero license (public domain).
  2. Every week will be spent discussing last week's submissions on the mailing list and iterating on them until the icon is deemed satisfactory. When judging icons, ask yourself these questions:
    1. Does the proposal meet our goals and design guidelines?
    2. Does the icon represent its function well?
    3. Is the proposal visually appealing?
    4. Can anything be done to improve this icon?
  3. On Saturday, we analyze whether all the problems have been solved.
    1. If we agree that there are no problems with the icon, the icon's status will be changed to "Approved"'.
    2. If there are more problems to solve, the community will decide to either dedicate the following week to the same icon or to skip this icon for now and return to it later.

Approved Icons

Paragraph

  • Align Left, Align Center, Align Right: Paragraph alignleft.svg, Paragraph aligncenter.svg, Paragraph alignright.svg -- Mirek2, CC0
    • In context: Align 1.png

Unapproved Icons

Don't judge icons by their previews. To see what they should look like, click through (twice) to see only the original SVG.

Bold, Italic

Status: Being discussed

Function: Makes the selected text bold or italic.

Design: The final icon will determine whether to use a capital or a lowercase A to represent text.

Submissions:

  • Text bold.svg, Text italic.svg -- Mirek2, CC0
    • In context: Emphasis 1.png
    • Tweaked to exaggerate its function: Text boldb.svg, Text italicb.svg -- Mirek2, CC0
      • In context: Emphasis1b.png
  • Text bold lowercase.svg, Text italic lowercase.svg -- I’d recommend lowercase because it is more recognizable in a glance than uppercase. Fitoschido 2012-03-05T18:25:46 (CET)
    • Cool. Here's a version using Vegur (the LibreOffice font): Text bold2.svg, Text italic2.svg -- Mirek2, CC0
      • In context: Emphasis 2.png
        • You don’t know how much I hate Vegur :P Fitoschido 2012-03-09T00:30:33 (CET)
        • I like the version with cmall letters in Vegur the most Alexander Wilms 2012-03-09T16:06:26 (CET)

Landscape Mode, Portrait Mode

Status: Being discussed

Function: Landscape Mode switches the page's orientation to landscape mode, Portrait Mode switches it to portrait mode. The two buttons are shown exclusively, similarly to how "Pause" and "Play" buttons work on media players.

Design: These icons will determine the page symbol, if it is used.

Submissions:

  • View Portrait.svg, View Landscape.svg -- Ivan Filho, CC0
    • In context: View Portrait Landscape context.png
  • Page Portrait 3.svg, Page Landscape 3.svg -- Android272, CC0
    • In context: Portrait Landscape In Context.png
  • Page landscape2.svg, Page portrait2.svg -- Mirek2, CC0
    • In context: Orientation.png
    • Different previous state outlines Page landscape4.svg, Page portrait4.svg -- Mirek2, CC0
    • Another version of previous state outlines Page landscape5.svg, Page portrait5.svg -- Mirek2, CC0

Text Color, Highlight Color

Status: On hold until the representation of text is decided

Function: Text color changes the color of text, Highlight color changes the color of the text's background.

Design: These icons will determine the color symbol, if it is used.

Submissions:

  • Style FontColor.svg, Style HighlightColor.svg -- Ivan Filho, CC0
    • In context: FontColor HighlightColor context.png

New Document

Status: Call for submissions

Function: Creates a new document. Would appear on the file manager part of the mobile application.

Design: These icons should use the + sign and the file symbol. The result will determine the size and weight of the + sign in other icons.

Submissions:

  • App newdocument.svg -- Mirek2, CC0
  • Application New-Document.svg -- Ivan Filho, CC0
  • App-newdoc.svg -- Andrea Soragna
    • Check previous version here
  • App New-Document.svg -- Ben Garner, CC0
    • I sincerely apologize for the appearance of this icon. I have no vector graphics skills. I hope that it conveys the idea, though. Feel free to make it look better, or just ignore this submission. I think that the square corners fit better with the rest of the icons, especially 'Copy' and 'Paste' --Benjwgarner (talk) 2013-01-29T22:30:32 (UTC)

Relevant Art