Identity: Difference between revisions

From GRASS-Wiki
Jump to navigation Jump to search
(added reference to Firan Sans open source font project.)
(→‎Colors: make it easier to copy colors (less clutter) and recognize models/notations)
 
(24 intermediate revisions by 6 users not shown)
Line 1: Line 1:
= The need of a visual identity=
= The need of a visual identity and its consistency =
GRASS is still lacking a relevant, well tempered graphical identity. Some proposals are being discussed especially to design a new splash screen (and welcome banner). The full thread is [http://lists.osgeo.org/pipermail/grass-dev/2015-January/073157.html there].


This page is intended to initiate a place where tests and suggestions could be gathered.
The purpose of this page and related efforts is to provide GRASS GIS with a relevant, well tempered graphical identity. Several proposals were and are being discussed like the design a new splash screen and startup (welcome) banner. The for example the full thread for 7.0 release [http://lists.osgeo.org/pipermail/grass-dev/2015-January/073157.html here].


== Logotype ==
This page is intended as a place where tests, suggestions as well as final version are archived and gathered.
===Graphics===
 
[http://grasswiki.osgeo.org/wiki/GRASS_Logo GRASS official logo] is a great starting point, as it has been here for ...ever?
Everybody is encouraged to create new designs either for the main GRASS GIS graphics such as splash screen and for graphics for special purposes such as T-shirts and code sprints. When creating new designs, please keep in mind that there was already some or perhaps even a lot work which went into the current official graphics specifically the GRASS GIS text in the logo, the splash screen and the startup window. See for example [https://lists.osgeo.org/pipermail/grass-dev/2016-January/078528.html revision of splash screen for 7.2] which replaced the "lowercase" version with a "uppercase" version which is consistent with the splash screen and logotype.
 
You have a great freedom in what to use for for stickers, t-shirts, and personal blogs, but for the additions to or updates of the official graphics it worth investing some time into understanding what went into design of the current ones.
 
= Logotype =
 
==Graphics==
 
''January 2015‎: ''
 
[http://grasswiki.osgeo.org/wiki/GRASS_Logo GRASS official logo] (also [https://grass.osgeo.org/download/logos/ here]) is a great starting point, as it has been here for ...ever?
Given the original vector file is somewhat irregular (twisted diamond, doubled vertices in grass, overlapping shapes) a ''cleaned'' light version is proposed.
Given the original vector file is somewhat irregular (twisted diamond, doubled vertices in grass, overlapping shapes) a ''cleaned'' light version is proposed.
 
: Background info: the logo was re-vectorized by Markus Neteler in 1998 from a rasterized master file (for his master thesis)
[[File:GRASSGIS_logo_color.png|150px|thumbnail|center|GRASS GIS cleanup logo, color version]]
[[File:GRASSGIS_logo_color.png|150px|thumbnail|center|GRASS GIS cleanup logo, color version]]


Line 22: Line 31:
[[File:GRASSGIS_logo_white.png|150px|thumbnail|center|GRASS GIS cleanup logo, white (sort of negative) version]]
[[File:GRASSGIS_logo_white.png|150px|thumbnail|center|GRASS GIS cleanup logo, white (sort of negative) version]]


===Tagline===
==Tagline==
The ''historical'' one was : «The world's leading open source GIS». Several slogans were recently proposed:
The ''historical'' one was : «The world's leading open source GIS». Several slogans were recently proposed:


Line 30: Line 39:
  - ...
  - ...


== Colors ==
= Colors =
===A grass <span style="color:#009000">green...</span>===
 
==A grass <span style="color:#009000">green...</span>==
The basic green color is defined as follows:
The basic green color is defined as follows:


  - 0,144,0 (rgb);
- RGB: 0,144,0
  - 100,100,44 (cmyk);
- CMYK: 100,0,100,44
  - #009000 (html).
- HTML: #009000


aplha channel is set to 1 (no transparency)
alpha channel is set to 1 (no transparency)


===...and a <span style="color:#909090">grayscale</span> tone===
==...and a <span style="color:#909090">grayscale</span> tone==
When required, a grayscale transposition is applied to green:
When required, a grayscale transposition is applied to green:


*either it is an opaque grey:
*either it is an opaque grey:
  - 144,144,144 (rgb);
- RGB: 144,144,144
  - 0,0,0,44 (cmyk);
- CMYK: 0,0,0,44
  - #909090 (html),
- HTML: #909090


*or it is multiplied over background, with alpha transparency:
*or it is multiplied over background, with alpha transparency:
  - 0,0,0,111 (rgba);
- RGBA: 0,0,0,111
  - 0,0,0,100,44 (cmyk);
- CMYK: 0,0,0,100,44
  - #0000006f (html).
- HTML: #0000006f


The white version may as well be declined in opaque or transparent, then green is replaced with translucent white:
The white version may as well be declined in opaque or transparent, then green is replaced with translucent white:
  - 255,255,255,111 (rgba);
- RGBA: 255,255,255,111
  - 0,0,0,0,44 (cmyk);
- CMYK: 0,0,0,0,44
  - #ffffff6f (html).
- HTML: #ffffff6f
 
== Typo ==
The logo can come with text. It uses two fonts. Add your suggestions...
===Main font===
GRASS GIS name, capitalized. Composed in [http://www.exljbris.com/fontin.html Fontin] regular, with a slightly negative approach. This font is designed by Jos Buivenga, and is [http://www.exljbris.com/eula.html free].
''Comment by ML: this seems to be free as in free beer, but not as in free speech (no distribution allowed. For an OSGeo project such as GRASS, I would prefer a really free font.''


Yes, I agree. Not that easy to find a fully developed font family (lots of ugly things in fact...). Let's have a look at [https://en.wikipedia.org/wiki/Fira_Sans this project]. It makes sense to confront a modern sans serif typeface, preferably light, to a very classical Garamond. See below tests number 5 and 6. Changing GRASS GIS to lowercase was done on purpose, my opinion is GRASS initials usage turned the word into an acronym, which does not need to be capitalized.
= Typo =
The logo can come with text. It uses two fonts. To comply with GRASS GIS license these must be ''open source'' fonts.


==Main font==
GRASS GIS name, capitalized or not. Composed either in [https://en.wikipedia.org/wiki/Fira_Sans Fira Sans], or in [http://www.fontsquirrel.com/fonts/alegreya-sans Alegreya Sans]. It makes sense to confront a modern sans serif typeface, preferably rather light, to a very classical Garamond. Changing GRASS GIS to lowercase is discussed, my opinion is GRASS initials usage turned them into an acronym (we pronounce it), which does not need to be full-capitalized, except the first letter.


===Secondary font===
==Secondary font==
This typeface is used to display additional text, such as a ''motto'' or tagline. It is composed in [http://www.georgduffner.at/ebgaramond/index.html EB Garamond], a font designed by Georg Duffner, inspired by the famous historical typeface drawn hundreds of years ago by Claude Garamond. It is freely available, under the terms of the SIL Open Fonts License (ofl).
This typeface is used to display additional text, such as a ''motto'' or tagline. It is composed in [http://www.georgduffner.at/ebgaramond/index.html EB Garamond], a font designed by Georg Duffner, inspired by the famous historical typeface drawn hundreds of years ago by Claude Garamond. It is freely available, under the terms of the SIL Open Fonts License (ofl).


= Applications =
= Applications =
== GRASS GIS Splash screen==
== GRASS GIS Splash screen==
=== Objective ===
Please refer to [http://lists.osgeo.org/pipermail/grass-dev/2015-January/073157.html this thread]


=== Proposals ===
=== Selections for 7.x ===
Here are several tests, feel free to add yours of course.
 
* 7.2-7.x: https://svn.osgeo.org/grass/grass/branches/releasebranch_7_2/gui/images/splash_screen.png (fits with the logotype GRASS GIS and the (combined) logo selected for 7.0)
* 7.0: https://svn.osgeo.org/grass/grass/branches/releasebranch_7_0/gui/images/splash_screen.png
 
=== Proposals for 7.0 ===
 
Objective: Please refer to [http://lists.osgeo.org/pipermail/grass-dev/2015-January/073157.html this thread]
 
After several tests, we put things together in an array:
- col 1: capitalized title, fontface Alegreya Sans, text and tagline beside logotype;
- col 2: partially lowercased, fontface Fira  Sans, stacked centered layout;
- col 3: lowercase title, fontface Fira Sans, flushright/flushleft positioning.
- row A: white background, potential thin black border;
- row B: metaphoric background image (to be refined, potential restricted rights), white graphics+lettering;
- row C: 3d composition showing a virtual grassy world map, white graphics+lettering;
- row D: same sort of scene but in top view, on white or transparent background;
- row E: grayscale grassy world, black and green graphics+lettering;
- row F: personal image, less iconic than decorative in truth...
 
[[File:GRASSGIS_splash_synthesis.jpg|450px|thumbnail|center|GRASS GIS splash proposals]]
 
== GRASS GIS Startup banner==
 
The startup (welcome) banner is the image displayed on top of the Welcome frame that pops up when launching GRASS. This image, if present, should be coherent with the graphic design, especially with the splash screen.
 
=== Updated for 7.2 ===
 
 
 
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_2/gui/images/startup_banner.png gui/images/startup_banner.png]
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_2/gui/images/startup_banner.svg gui/images/startup_banner.svg]
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_2/gui/images/startup_banner.txt explanations]
 
=== Selected for 7.0 ===
 
On Feb 6, 2015 (commit {{rev|64480}} the banner was uploaded to the source code. Related files:
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_0/gui/images/startup_banner.png gui/images/startup_banner.png]
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_0/gui/images/startup_banner.svg gui/images/startup_banner.svg]
* [https://svn.osgeo.org/grass/grass/branches/releasebranch_7_0/gui/images/startup_banner.txt explanations]
 
=== Proposals for 7.0 ===
 
The following three banners go respectively with columns 1, 2, 3 of the array above.
 
[[File:GRASSGIS_welcome_synthesis.jpg|450px|thumbnail|center|GRASS GIS welcome proposals]]
 
Given latest requests, here are three extra png banners:
 
[[File:Banner_1.png|200px|center|Alegreya Sans, capitalized]]
[[File:Banner_1_alpha.png|200px|center|transparent]]
[[File:Banner_2.png|200px|center|Fira Sans, capitalized]]
[[File:Banner_2_alpha.png|200px|center|transparent]]
[[File:Banner_3.png|200px|center|Fira Sans, lowercase]]
[[File:Banner_3_alpha.png|200px|center|transparent]]
 
== Documentation ==
 
=== Manual Pages (Main documentation) ===
 
The HTML documentation received some updates (border, menu), but it needs more, perhaps even structural changes to make the experience nice and smooth.
 
=== GRASS GIS Graphical Index in the Manual ===
 
The Graphical Index page is intended to replace the standard text-only box-based manual. However, it lacks a proper consistent design.
 
=== GRASS GIS User Wiki ===
 
A lot of work already done, but needs some final touches and release to production, see:
 
* [User:NikosA#Scratching_ideas_for_the_GRASS-wiki Ideas for the wiki]
* [User:NikosA#Better_typography Better typography for wiki]
 
=== Programming and Scripting Documentation ===
 
The C/C++ Programming Manual uses green, not necessarily the official one because of how it is applied to the actual styling by Doxygen, see https://grass.osgeo.org/programming7/.
 
The Python Sphinx style was modified to be simple like the user documentation, contains logo in the header, and it used the same colors for headings.
 
== GUI ==
 
The "green fancy notebook" which creates the tabs (section) for generated module windows was replaced by a more standard one for 7.0, however it is still used in Layer Manage window.
 
== Command line ==
 
The following is used in the command line. There seems to be no reasons to replace it or remove it. It should not be used elsewhere unless the intention is to make it "old school" or "geeky" such as on special items such as T-shirts.
 
          __________  ___  __________    _______________
        / ____/ __ \/  | / ___/ ___/  / ____/  _/ ___/
        / / __/ /_/ / /| | \__ \\_  \  / / __ / / \__ \
      / /_/ / _, _/ ___ |___/ /__/ /  / /_/ // / ___/ /
      \____/_/ |_/_/  |_/____/____/  \____/___//____/
 
= GRASS GIS sticker and acknowledgement graphics =
== Objective ==
GRASS GIS users may want or need to display a short information about the use of the software in their projects. It might be useful to propose a normalized sticker for that.
 
== Proposals ==
Usually these tags are composed with freehand lettering, we propose this sticker:
[[File:Powerby_freeh.png|100px|thumb|center|Proposal #1 for "powered by..." GRASS GIS sticker]]
 
But one can prefer keeping close to the more sober identity and compose the slogan in garamond:
[[File:Powerby_typo.png|100px|thumb|center|Proposal #2 for "powered by..." GRASS GIS sticker]]


[[File:GRASSGIS_splash1.jpg|350px|thumbnail|center|GRASS GIS splash screen with minimalist color logo+text]]
The following graphics could be used on map compositions:
[[File:GRASSGIS_splash2.jpg|350px|thumbnail|center|GRASS GIS splash screen with white logo+tagline, metaphoric background image (to be refined)]]
[[File:Mappedwith_freeh.png|200px|thumb|center|Proposal #1 for "mapped with..." GRASS GIS sticker]] [[File:Mappedwith_typo.png|200px|thumb|center|Proposal #2 for "mapped with..." GRASS GIS sticker]]
[[File:GRASSGIS_splash3.jpg|350px|thumbnail|center|GRASS GIS splash screen with white logo+tagline, variation in the layout, personal background image (for the record)]]
[[File:GRASSGIS_splash4.jpg|350px|thumbnail|center|GRASS GIS splash screen with white logo+tagline, grassy world map background image (made from scratch in Blender)]]
[[File:GRASSGIS_splash5.jpg|350px|thumbnail|center|GRASS GIS splash screen with white logo+tagline, another attempt with Fira Sans as titling font]]
[[File:GRASSGIS_splash6.jpg|350px|thumbnail|center|GRASS GIS splash screen with color logo+tagline, Fira Sans titling in a more sobre composition]]


Additional (derived) graphics are gathered in this array:
[[File:Powerby_synth.png|200px|thumb|center|Proposals for GRASS GIS stickers]]


== GRASS GIS Welcome banner==
= Community and Code Sprint Visuals =


The welcome banner is the image displayed on top of the Welcome frame that pops up when launching GRASS. This image, if present, should be coherent with the graphic design.
In context of GRASS GIS / OSGeo Code Sprints we are trying to stick to OSGeo guideline and we propose the following logo setup for a reference to code sprints (feel free to modify if you consider this event should not be considered a so called ''local chapter'' of the OSGeo chart).
[[File:GRASS GIS Code Sprint 2018.png|thumb|center|]]


Issue: Does not contain text "GRASS GIS".


=== Proposals ===
= See also =
[[File:GRASSGIS_welcome_banner1.jpg|300px|thumbnail|center|GRASS GIS simple welcome banner]]
[[File:GRASSGIS_welcome_banner2.jpg|300px|thumbnail|center|GRASS GIS simple welcome banner with transparency (fails on dark bg desktop themes)]]
[[File:GRASSGIS_welcome_banner3.jpg|300px|thumbnail|center|GRASS GIS simple welcome banner, small logo, bigger text, works on every background tone]]


== What next ?==
* [[GRASS Logo]]
add your suggestions...
* [[GRASS Art Gallery]]
* [[Promotional material]]


[[Category: Development‏‎]]
[[Category: Development‏‎]]
[[Category: Branding]]
[[Category: Branding]]
[[Category: Promotion]]
[[Category: Promotion]]

Latest revision as of 02:36, 18 September 2018

The need of a visual identity and its consistency

The purpose of this page and related efforts is to provide GRASS GIS with a relevant, well tempered graphical identity. Several proposals were and are being discussed like the design a new splash screen and startup (welcome) banner. The for example the full thread for 7.0 release here.

This page is intended as a place where tests, suggestions as well as final version are archived and gathered.

Everybody is encouraged to create new designs either for the main GRASS GIS graphics such as splash screen and for graphics for special purposes such as T-shirts and code sprints. When creating new designs, please keep in mind that there was already some or perhaps even a lot work which went into the current official graphics specifically the GRASS GIS text in the logo, the splash screen and the startup window. See for example revision of splash screen for 7.2 which replaced the "lowercase" version with a "uppercase" version which is consistent with the splash screen and logotype.

You have a great freedom in what to use for for stickers, t-shirts, and personal blogs, but for the additions to or updates of the official graphics it worth investing some time into understanding what went into design of the current ones.

Logotype

Graphics

January 2015‎:

GRASS official logo (also here) is a great starting point, as it has been here for ...ever? Given the original vector file is somewhat irregular (twisted diamond, doubled vertices in grass, overlapping shapes) a cleaned light version is proposed.

Background info: the logo was re-vectorized by Markus Neteler in 1998 from a rasterized master file (for his master thesis)
GRASS GIS cleanup logo, color version

For consistency, it is important to use this logo as is, i.e. not being tempted to distort it by any trick (shadows, bump mapping, blur, differential rescaling,...).

Itemisation should be limited to:

  • black (and grayscale) version;
GRASS GIS cleanup logo, grayscale version
  • white version, in case it should appear over a dark background/image.
GRASS GIS cleanup logo, white (sort of negative) version

Tagline

The historical one was : «The world's leading open source GIS». Several slogans were recently proposed:

- «Bringing advanced geospatial technologies to the world»;
- «Advanced geospatial technology for everyone»;
- «Opening advanced geospatial technologies to the world».
- ...

Colors

A grass green...

The basic green color is defined as follows:

- RGB: 0,144,0
- CMYK: 100,0,100,44
- HTML: #009000

alpha channel is set to 1 (no transparency)

...and a grayscale tone

When required, a grayscale transposition is applied to green:

  • either it is an opaque grey:
- RGB: 144,144,144
- CMYK: 0,0,0,44
- HTML: #909090
  • or it is multiplied over background, with alpha transparency:
- RGBA: 0,0,0,111
- CMYK: 0,0,0,100,44
- HTML: #0000006f

The white version may as well be declined in opaque or transparent, then green is replaced with translucent white:

- RGBA: 255,255,255,111
- CMYK: 0,0,0,0,44
- HTML: #ffffff6f

Typo

The logo can come with text. It uses two fonts. To comply with GRASS GIS license these must be open source fonts.

Main font

GRASS GIS name, capitalized or not. Composed either in Fira Sans, or in Alegreya Sans. It makes sense to confront a modern sans serif typeface, preferably rather light, to a very classical Garamond. Changing GRASS GIS to lowercase is discussed, my opinion is GRASS initials usage turned them into an acronym (we pronounce it), which does not need to be full-capitalized, except the first letter.

Secondary font

This typeface is used to display additional text, such as a motto or tagline. It is composed in EB Garamond, a font designed by Georg Duffner, inspired by the famous historical typeface drawn hundreds of years ago by Claude Garamond. It is freely available, under the terms of the SIL Open Fonts License (ofl).

Applications

GRASS GIS Splash screen

Selections for 7.x

Proposals for 7.0

Objective: Please refer to this thread

After several tests, we put things together in an array:

- col 1: capitalized title, fontface Alegreya Sans, text and tagline beside logotype;
- col 2: partially lowercased, fontface Fira  Sans, stacked centered layout;
- col 3: lowercase title, fontface Fira Sans, flushright/flushleft positioning.

- row A: white background, potential thin black border;
- row B: metaphoric background image (to be refined, potential restricted rights), white graphics+lettering;
- row C: 3d composition showing a virtual grassy world map, white graphics+lettering;
- row D: same sort of scene but in top view, on white or transparent background;
- row E: grayscale grassy world, black and green graphics+lettering;
- row F: personal image, less iconic than decorative in truth...
GRASS GIS splash proposals

GRASS GIS Startup banner

The startup (welcome) banner is the image displayed on top of the Welcome frame that pops up when launching GRASS. This image, if present, should be coherent with the graphic design, especially with the splash screen.

Updated for 7.2

Selected for 7.0

On Feb 6, 2015 (commit r64480 the banner was uploaded to the source code. Related files:

Proposals for 7.0

The following three banners go respectively with columns 1, 2, 3 of the array above.

GRASS GIS welcome proposals

Given latest requests, here are three extra png banners:

Alegreya Sans, capitalized
Alegreya Sans, capitalized
transparent
transparent
Fira Sans, capitalized
Fira Sans, capitalized
transparent
transparent
Fira Sans, lowercase
Fira Sans, lowercase
transparent
transparent

Documentation

Manual Pages (Main documentation)

The HTML documentation received some updates (border, menu), but it needs more, perhaps even structural changes to make the experience nice and smooth.

GRASS GIS Graphical Index in the Manual

The Graphical Index page is intended to replace the standard text-only box-based manual. However, it lacks a proper consistent design.

GRASS GIS User Wiki

A lot of work already done, but needs some final touches and release to production, see:

  • [User:NikosA#Scratching_ideas_for_the_GRASS-wiki Ideas for the wiki]
  • [User:NikosA#Better_typography Better typography for wiki]

Programming and Scripting Documentation

The C/C++ Programming Manual uses green, not necessarily the official one because of how it is applied to the actual styling by Doxygen, see https://grass.osgeo.org/programming7/.

The Python Sphinx style was modified to be simple like the user documentation, contains logo in the header, and it used the same colors for headings.

GUI

The "green fancy notebook" which creates the tabs (section) for generated module windows was replaced by a more standard one for 7.0, however it is still used in Layer Manage window.

Command line

The following is used in the command line. There seems to be no reasons to replace it or remove it. It should not be used elsewhere unless the intention is to make it "old school" or "geeky" such as on special items such as T-shirts.

         __________  ___   __________    _______________
        / ____/ __ \/   | / ___/ ___/   / ____/  _/ ___/
       / / __/ /_/ / /| | \__ \\_  \   / / __ / / \__ \
      / /_/ / _, _/ ___ |___/ /__/ /  / /_/ // / ___/ /
      \____/_/ |_/_/  |_/____/____/   \____/___//____/

GRASS GIS sticker and acknowledgement graphics

Objective

GRASS GIS users may want or need to display a short information about the use of the software in their projects. It might be useful to propose a normalized sticker for that.

Proposals

Usually these tags are composed with freehand lettering, we propose this sticker:

Proposal #1 for "powered by..." GRASS GIS sticker

But one can prefer keeping close to the more sober identity and compose the slogan in garamond:

Proposal #2 for "powered by..." GRASS GIS sticker

The following graphics could be used on map compositions:

Proposal #1 for "mapped with..." GRASS GIS sticker
Proposal #2 for "mapped with..." GRASS GIS sticker

Additional (derived) graphics are gathered in this array:

Proposals for GRASS GIS stickers

Community and Code Sprint Visuals

In context of GRASS GIS / OSGeo Code Sprints we are trying to stick to OSGeo guideline and we propose the following logo setup for a reference to code sprints (feel free to modify if you consider this event should not be considered a so called local chapter of the OSGeo chart).

Issue: Does not contain text "GRASS GIS".

See also