Appliquer la nouvelle identité de Mozilla à mozFR

[nclm]

Salut,

Avec la nouvelle identité de Mozilla de Johnson Banks, il y aura à un moment à répercuter tout ça sur mozFR. C’est très précoce pour le moment tant que ni la charte graphique ni la police de caractères ne sont publiées, mais c’est pas une raison pour ne pas y réfléchir 😄

J’ai pris quelques minutes pour faire de premiers essais pour le logo…

Source :
Si vous voulez jouer un peu avec, voilà la source SVG, à ouvrir dans Inkscape. Utilisez le panneau Calques pour démasquer et déverrouiller les variantes. Il vous faudra installer la police Fira.

Notes :

• Les mots «francophone» et «fr» sont composés en Fira, tant que les fontes Zilla sont en préparation chez Typotheque. Leur approche (interlettrage) est également un peu grande, je n’ai pas trouvé le réglage dans Inkscape.
• La taille et les marges des blocs sont fait sur une grille mesurée au pifomètre depuis les images de présentation, donc c’est très temporaire et quoi qu’il arrive il faudra recréer des fichiers depuis la charte ou un éventuel kit/template futur.
• Les couleurs du drapeau francophone sont remappées sur la nouvelle palette Mozilla, du moins dans ce qu’on en a pour le moment.
• Au delà du fait que c’est certainement hors-charte, je suis pas convaincu de cette solution pour intégrer ces couleurs : ça nuit à la lisibilité, et ce n’est pas applicable sur les lettres de l’en-tête Moz://a, qui se retrouvent à rester transparentes. Il faudra réfléchir à autre chose dans une hypothétique version du logo sans illustration.
• Très anecdotiquement, pour le violet pâle dans l’autre version, c’est parce que c’est la couleur de la palette correspondant à un mélange de bleu, de blanc et de rouge. Oui je sais, rien à voir avec avec la francophonie, il me fallait juste quelque chose 😞 On peut choisir quoi que ce soit d’autre !

Tout ça est très préliminaire, ce ne sont réellement pas tant des propositions qu’une amorce de discussion (qui a peut-être commencé ailleurs d’ailleurs, je ne suis plus Mozilla d’assez près pour l’avoir vu passer). Des idées, des avis ?

[MatonAnthony]

J'aime beaucoup personnellement.
Je sais que l'idée a été évoqué d'envisager de se débarasser du panda ventripotent pour quelque chose qui refléterait plus un aspect actif et dynamique.

Mais j'adore les deux, je ne suis par contre pas sûr qu'un déficient visuel (même léger) arrive à lire sur la version avec le drapeau coloré.

Super boulot :)

[nclm]

Merci !
J’ai fait un essai avec une autre solution pour les couleurs :

Sources : SVG pour Inkscape

Pour le panda, s’il est question de le remplacer ou de le redessiner, pourquoi pas. C’est très interchangeable de toute façon, c’est tout le principe de cette identité flexible ! Qui est à l’origine de cette mascotte ? J’avoue que je l’aime bien, et un panda roux à queue bariolée fait sens surtout. Que pourrait-il y avoir d’autre qui représente à la fois Mozilla et la Francophonie ? Un dino pourrait être sympa mais c’est plus difficile de lui appliquer la francophonie.

Si c’est qu’une question de dynamisme, en fait on pourrait imaginer conserver une mascotte équivalente, peut-être dans un style plus simple, mais dans plein de poses différentes : courante, sautante, dormante, etc, à utiliser selon la situation ou l’humeur ! Un peu comme Mozilla Japan avait Foxkeh à une époque, mais en bien plus contemporain et applicable en surimpression au logo.

[MatonAnthony]

Je trouve ça beaucoup plus lisible 👍

[pascalchevrel]

mon gain de sel :)

je pense que l'un des éléments importants est le protocole, ça donnerait quoi avec pour les petites versions ?
genre :
moz:// fr

Sinon je suis pas super fan du noir+jaune, il est aussi possible d'utiliser une autre couleur, exemple avec du bleu : https://tests.pascalc.net/asknot/

Pour le panda, je n'ai jamais été fan donc je suis partiel

[nclm]

Pour la version raccourcie, mon essai était juste fait en référence au seul exemple que l’on a pour le moment dans le genre : «mozilla festival» sur deux lignes qui devient «moz fest» sur une seule, avec la perte du protocole. Aussi important qu’il soit, je comprends que ça fait sens de ne pas demander au lecteur d’interpréter parfois «://» comme «ill» et parfois seulement comme un élément cosmétique. Je crains que «moz:// fr» ne soit pas si clair, ou alors il faudrait par exemple sortir les «://» du bloc pour les différencier et on risque de sortir totalement de la charte et d’embrouiller l’identité globale.

On peut imaginer une version courte en «moz://a fr» par contre ! Pas tellement plus long que «moz:// fr» et on conserve la syntaxe protocole.

Pour la couleur, bien sûr ! Le jaune n’était qu’un exemple. Donc n’importe quelle couleur de la palette passe, il suffira d’en choisir une quand on l’aura :) Par contre, je suis pas sûr que le cartouche «moz://a» lui-même puisse passer en couleur, je pense qu’il est fait pour rester en noir, les couleurs étant appliquées à son lettrage et aux fonds des sous-titres. Là encore, on attend les guidelines !

Pour le panda, ok. Ce serait chouette de discuter un peu et de faire des essais pour ce qui peut le remplacer, dans quel style, etc. Une autre mascotte ? Autre chose entièrement ? Je ferais bien un essai avec l’emblème circulaire de la francophonie, même si c’est un peu obscur et tellement moins sympathique qu’une mascotte, une tradition mozillenne qui — si elle ne se voit plus au niveau global — pourrait être conservée justement par les communautés locales…

[pascalchevrel]

"moz://a fr" ça m'irait :)

[MatonAnthony]

Je trouve que ça fait très "trop" officiel. Cela ne risquerait-il pas de limiter notre capacité à marquer d'éventuels désaccords avec la fondation ?

[Mozinet-fr]

Salut, je pense que mozFest est une des seules utilisations publiques d'un nom pour Mozilla. Le grand public ne reconnaît pas Moz (déjà que Mozilla…). Bien que notre URL soit mozfr, il ne faudrait AMHA ne jamais utiliser Moz pour les supports en contact avec le public. Si on a besoin d'une abréviation, Mozilla fr reste le plus compréhensible.

[pascalchevrel]

Je vois sur mozilla.jp et mozilla.org qu'ils utilisent aussi une version entièrement blanche, donc a priori il doit y avoir des possibilités de changement de couleur pour le cartouche. J'ai envoyé un message au marketing responsabme du nouveau design pour leur demander.

[nclm]

Ne pas utiliser moz, c’est très censé en effet, bien vu.

Pour le trop officiel, tout va effectivement se jouer sur comment se différencier sans rompre les principes. Ce sera probablement plus sur l’illustration/les éléments graphiques dans le logo que dans sa composition, et aussi avec le design du site (qui doit sembler faire partie de la même famille mais pas paraître être une page, ou une section, ou un sous-site de mozilla.org).

C’est vrai qu’il y a le blanc aussi ! C’est classique d’avoir une seconde option pour des fonds différents, généralement considérée seulement comme exception lorsque la couleur originale ne peut pas fonctionner. De là à pouvoir utiliser n’importe quelle couleur (même de la palette), c’est à voir. Super pour le mail du coup, attendons sa réponse !

[pascalchevrel]

La réponse de l'équipe marketing de mozilla est que l'on ne peut utiliser qu'un fond noir, ou blanc pour des problèmes de lisibilité.

[TheoChevalier]

Pour info, on a mis à jour le logo Transvision en tenant compte de cette contrainte : https://transvision-beta.mozfr.org/

Quand la police sera prête, on verra si on arrive à être plus créatifs pour le mot « Transvision », mais pour l’instant on a atteint nos limites d’édition d’images vectorielles :)

L’ancien pour comparer https://github.com/mozfr/transvision/blob/9a14014a2c5da0bf30e05eecc68d5d1ab7b3d330/web/img/logo/Logo_Full.png

[TheoChevalier]

Tout frais : https://mozilla.ninja/ Je ne sais pas encore quoi trop penser de l’URL… (et je viens de voir qu’ils traitent cette question dans la FAQ)

[nclm]

Voilà un nouvel essai, en prenant en compte ce qui a été dit à propos de «moz», dans une autre couleur, avec les proportions finales du logo issues de mozilla.ninja (en effet pour l’adresse…), et avec une intégration très sommaire du cercle francophone en lieu du panda (vraiment qu’un test) :

Source : SVG Inkscape

Une version icône sociale également (à ne considérer, comme le reste de toute manière, que comme première esquisse) :

Source : SVG Inkscape

[Mozinet-fr]

Salut, je trouve les couleurs beaucoup trop pastel.

[MatonAnthony]

Moi tout du contraire, je trouve que ça ressort bien et c'est dans les tons actuels, ça n'agresse pas l'oeil et ça nous représente bien.

De plus, la charte graphique est clairement orientée vers des couleurs pastels (éventuellement néon). Sur une charte graphique claire, le pastel est clairement moins agressif que le néon.

[pascalchevrel]

J'aime bien aussi, en tous cas c'est une bonne base de travail, merci Nicolas !
Ce qui serait bien serait de pouvoir trouver le moyen d'indiquer le sous-site ou l'activité dans le logo (forums, blog, tech, planète, nightly, ...)

[nclm]

Rapide exploration d’une solution pour les sous-sites. On ne garde en couleur que le dernier segment, et on fait l’arborescence en utilisant le slash (à voir si c’est un si bonne idée, d’autant moins si les vraies urls n’ont rien à voir). J’ai aussi mis en couleur fluo pour voir :

Source SVG

Notez que pour le moment c’est très sage, mais l’identité permet de s’amuser bien plus : https://mozilla.ninja/gallery/ — ça peut dépasser de partout, l’image « no one walls my garden » peut donner des idées de rendus pour le cercle fr, et « all hand » et « emerging technologies » présente un style pictographique fait de lignes épaisses qui pourrait s’appliquer très bien pour différencier les sous-sites : des engrenages pour le blog tech, une planète pour le planet, quelque chose pour geckozone, etc.

[nclm]

Pour info, la typo sort dans une semaine, donc ce sera l’occasion de reprendre tout ça 🙂

[Mozinet-fr]

La police Zilla est dispo depuis un petit moment : mozilla/zilla-slab: Mozilla's Zilla Slab Type Family https://github.com/mozilla/zilla-slab

[AbdelElMansari]

Ce sujet est toujours d'actualité ?
je propose de refaire une maquette du site si besoin.

[lhirlimann]

Ce sujet est toujours d'actualité ?

Oui surtout que Mozilla a encore changé didentité en 2019.

je propose de refaire une maquette du site si besoin.
Cool , on attend ta maquette avec impatience.

[hellosct1]

Bonjour,

je dois vérifier où en est le logo que j'ai fait qui respecte les normes du Design de Mozilla
Ce soir ou demain, je devrais avoir quelque chose dédié

Christophe