Difference between revisions of "Identity"

From GRASS-Wiki
Jump to: navigation, search
(added a welcome banner and two splashes, after several claims on the ML)
(reordering things for a vote)
Line 59: Line 59:
  
 
== Typo ==
 
== Typo ==
The logo can come with text. It uses two fonts. Add your suggestions...
+
The logo can come with text. It uses two fonts. To comply with GRASS GIS license these must be ''open source'' fonts.
 
===Main font===
 
===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].
+
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.
''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.
 
 
 
The Fira Sans is a nice clean font. GRASS IS an acronym of course (geographic resource analysis support system), but the lower case is fine after all these years and indeed looks good.
 
  
 
===Secondary font===
 
===Secondary font===
Line 77: Line 72:
  
 
=== Proposals ===
 
=== Proposals ===
Here are several tests, feel free to add yours of course.
+
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.
 +
 +
- raw A: white background, potential thin black border;
 +
- raw B: metaphoric background image (to be refined, potential restricted rights), white graphics+lettering;
 +
- raw C: 3d composition showing a virtual grassy world map, white graphics+lettering;
 +
- raw D: the same image in grayscale, black and green graphics+lettering;
 +
- raw E: personal image, less iconic than decorative in truth...
  
[[File:GRASSGIS_splash1.jpg|350px|thumbnail|center|GRASS GIS splash screen with minimalist color logo+text]]
+
[[File:GRASSGIS_splash_synthesis.jpg|350px|thumbnail|center|GRASS GIS splash proposals]]
[[File:GRASSGIS_splash2.jpg|350px|thumbnail|center|GRASS GIS splash screen with white logo+tagline, metaphoric background image (to be refined)]]
 
[[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]]
 
[[File:GRASSGIS_splash7.jpg|350px|thumbnail|center|GRASS GIS splash screen, centered layout, capitalized title]]
 
[[File:GRASSGIS_splash8.jpg|350px|thumbnail|center|GRASS GIS splash screen, the grayscale equivalent to the one above]]
 
  
 
== GRASS GIS Welcome banner==
 
== GRASS GIS Welcome banner==
  
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.
+
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, especially with the splash screen.
  
  
 
=== Proposals ===
 
=== Proposals ===
[[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)]]
+
The type of banner that will be taken on depends on the choice of the splash screen. The idea is to maintain a graphical coherence.
[[File:GRASSGIS_welcome_banner3.jpg|300px|thumbnail|center|GRASS GIS simple welcome banner, small logo, bigger text, works on every background tone]]
 
[[File:GRASSGIS_welcome_banner4.jpg|300px|thumbnail|center|GRASS GIS welcome window with banner, small green logo, big green text, white bg.]]
 
[[File:GRASSGIS_welcome_banner5.jpg|300px|thumbnail|center|Latest welcome banner.]]
 
  
 
== What next ?==
 
== What next ?==

Revision as of 14:18, 30 January 2015

The need of a visual identity

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

This page is intended to initiate a place where tests and suggestions could be gathered.

Logotype

Graphics

GRASS official logo 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.

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:

 - 0,144,0 (rgb);
 - 100,100,44 (cmyk);
 - #009000 (html).

aplha 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:
 - 144,144,144 (rgb);
 - 0,0,0,44 (cmyk);
 - #909090 (html),
  • or it is multiplied over background, with alpha transparency:
 - 0,0,0,111 (rgba);
 - 0,0,0,100,44 (cmyk);
 - #0000006f (html).

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

 - 255,255,255,111 (rgba);
 - 0,0,0,0,44 (cmyk);
 - #ffffff6f (html).

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

Objective

Please refer to this thread

Proposals

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.

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

GRASS GIS Welcome banner

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, especially with the splash screen.


Proposals

The type of banner that will be taken on depends on the choice of the splash screen. The idea is to maintain a graphical coherence.

What next ?

add your suggestions...