Apprenti designer du dimanche


Bon ça fait un moment que je n’ai pas posté pour mon blog, mais je faisais face à un vrai dilemme. La charte graphique à adopter! Depuis la création de l’équipe de communication Firefox OS j’ai quelque peu mis mes talents d’apprenti graphiste à l’épreuve. N’utilisant que Photofiltre Studio principalement et Gimp de temps à autre, je suis assez loin d’être un expert mais je me suis pris rapidement au jeu.

Du coup me voilà improvisé apprenti designer du dimanche ! J’ai donc décidé de partager mon humble expérience avec vous et mes quelques astuces de « tenderfoot« . Cet article sera aussi l’occasion de vous exposer mon portefolio.

Firefox OS

Ainsi pour l’organisation des réseaux sociaux, il a fallu instaurer une nouvelle charte graphique pour Facebook, Twitter et Google. De quoi donner un peu plus de couleur à nos pages. Comme vous verrez je suis devenu un fan inconditionnel du « blueprint », ce fond de papier bleu avec quadrillage, notamment puisque Mozilla l’utilise pour certains de ses sites. Bien sûr ici je l’ai créé de toute pièce avec un quadrillage plus fin, estompé et une couleur plus vive et lumineuse : un simple dégradé progressive permet de faire l’affaire ;). Il permet aussi de porter le regard vers les éléments principales de votre image.

Tout en gardant une identité graphique proche de celle de Mozilla, par chance des « guidelines » et ressources sont facilement accessibles. Hey! c’est ça l’Open Source.

Annonce de la sortie du nouveau site firefoxos.mozfr.org – Le fox est lâché

L’un des problèmes que j’ai pu rencontrer ici était de bien cerner la différence de contraste entre le rouge de « Le Fox est lâché » et le fond bleu clair. Divers plugins permettent de proposer des tons de couleurs adaptées. Le fait de renverser l’Url du site à droite était risqué car certaines personnes peuvent ne pas pouvoir lire le texte, mais c’est aussi une façon d’attirer l’attention.

Bannière Facebook usuelle/standard – Équipe des mobilisateurs

Un renard Firefox OS, le logo, un texte clair en majuscule avec la police officielle… tout y est 🙂 Mais il faut faire attention à la photo de profil et aux boutons des réseaux sociaux qui s’afficheront par dessus. L’emplacement est important. Qui plus est, vous pouvez voir que le Fox donne la direction vers la droite, ainsi le regard est porté plus facilement vers ce côté. Si j’avais inversé la position du texte et du renard, le rendu aurait été bizarre ou plutôt non naturelle pour l’œil. De même avec l’image précédente.

Pour les fêtes de fin d’année le fox adopte le « roux-ge désir »

Après coup, je ne suis plus autant satisfait que cela, la couleur « roux-ge désir » comme je l’ai appelé me plait beaucoup pour les fêtes de fin d’année, mais le texte n’est pas aussi aéré que les précédentes versions. C’est aussi la limite que nous impose un espace de travail défini. Peut-être aurais-je dû réduire le logo Firefox OS et déplacé un peu plus bas « vous souhaite de bonnes fêtes de fin d’années ». N’oubliez pas que les boutons de réseaux sociaux s’affichent en bas à droite.

Finalement l’habillage des réseaux sociaux a revêtu ici  de la composition graphique d’éléments déjà créés : logo et renard (sauf le « blueprint ») avec du texte adapté, dont la position va être primordiale. Je ne vous ai montré que l’habillage sur Facebook mais vous pouvez comparer la différence sur Twitter, puisqu’en effet il a fallu adapter l’image et la composition du texte à chaque réseau social.

NB : Un lien utile pour créer vos bannières aux bonnes dimensions

Je suis Mozilla

Pour les événements du 11 janvier, nous voulions montrer notre support de la part de la Communauté Francophone Mozfr. Pour l’occasion je me suis aussi essayé à quelques designs.

Un logo, le texte original accompagné de « Je suis Mozilla »

Deux exemples, qui se veulent proches de l’image originale mais reprenant des symboles de Mozilla et de la communauté francophone. Le fond noir et le texte restant en gros au centre, me semblaient être une priorité pour garder le même esprit. Il a fallu jouer sur les contrastes pour garder une certaine lisibilité.

Poster officiel Mozilla avec texte incrusté

Celui-ci ne mérite pas mon attribution en tant qu’auteur puisque je n’ai fait que reprendre un poster officiel de Mozilla téléchargeable dans les Assets/Ressources de la Fondation, et y rajouter le texte désiré. Cependant vous pouvez noter, que le logo de Mozilla s’insère juste entre « Je suis » et « Mozilla » pour le texte du bas. Par ailleurs, l’image n’a pas été retenue.

Bannière Facebook avec un bandeau noir Je suis Charlie

Puis de manière sobre sur les réseaux sociaux, un bandeau noir assez simple avec « Je suis Charlie » dessus.

Blogging

Maintenant pour mon blogging aussi je me creuse la tête, je l’avais déjà fait avec mon précédent blog, qui reprend un peu les même codes de couleurs.

Premier logo repris d’un poste sur 9gag

Ce premier logo datant de la fin 2013 est assez effrayant, je dois le dire. J’avais repris le chat d’un poste humoristique sur 9gag… ma référence pour perdre des neurones facilement! Impossible d’ailleurs de retrouver le lien.

Second logo avec texte de mon premier blog

Après le regard critique, d’un ami : Elio Qoshi (aussi Reps chez Mozilla) et de certaines de ses modifications, j’ai opté pour un logo plus accueillant. La raison est que pour représenter Mozilla même si j’adore le second degré et l’humour, je voulais éviter d’utiliser un chat « Junkie ».

Logo du renard avec ses Google Glass *ironie*

Ceci est une composition faite à partir d’une superbe œuvre de l’artiste Justin Maller, un logo que j’avais envisagé pour représenter mon blog… quoique je me pose toujours la question.

Première version de l’en-tête
Seconde version avec un dégradé de transparence
L’image d’en-tête actuelle

Comme vous pouvez le voir, il y a eu un travail progressif sur le choix de mon en-tête, avec la disparition de mon icône. Le problème était de faire correspondre cette en-tête avec mon site. Je parle de Firefox mais aussi de l’actualité et d’autres thèmes qui me tiennent à cœur – quelques articles sont enregistré comme brouillon sur mon Word Press.

La première version était trop chargée et n’avait que peu de rapport avec ma signature « Les pieds sur terre, la tête dans les étoiles ». La deuxième à laisser apparaître les étoiles… mais pas la terre. Du coup la dernière a concrétisé ma terre. Alors pourquoi avoir fait disparaître mon logo… car il surchargeait trop l’image, rien que depuis les premières versions.

Une autre alternative pour mon en-tête

Il y a bien sûr aussi cette alternative et à vrai dire, je n’arrive toujours pas à me décider. N’hésitez pas à donner votre avis.

Divers & autres…

Mon portefolio peut aussi s’étoffer de quelques autres créations qui ont nécessité plus ou moins de travail. Mon univers de création ne tourne pas qu’autour de Firefox 😉

Rendue d’une cave avec un complexe neuronal et métallique – Amnesium

L’un de mes premiers dessins graphiques, ou Render comme on dit dans le monde du jeu vidéo.

L’image de chargement d’un hypothétique jeu – From and Beyond Darkness
Un clin d’œil au dernier Tomb Raider – A survivor is born

Ces créations graphiques ont requis quelques manipulations d’images qui m’ont pris un certain temps. Le tout jouant sur les nuances de noir et sur la profondeur de l’image – plus ajustements de détails dans mon perfectionnisme.

Inspiré d’une musique de M83 – Oblivion

Photomontage inspiré de la musique Oblivion de M83, m’ayant poussé à une petite réflexion sur ma prochaine résurrection – oui le visage est le mien. Les formes géométrique : triangle notamment sont une particularité à la mode dans le monde de la Nuit. Pour la petite histoire, j’ai utilisé des plumes de paons en transparence pour créer cet effet d’irisation (bien visible en bas à droite).

Mon « wallpaper » d’en ce moment – Earth on wired stars

Puis ma fameuse en-tête qui me sert maintenant de fond d’écran pour mon ordinateur 😀

D’autres rendus graphiques sont disponibles sur l’une des mes pages Facebook : LNG Paintart si jamais cela vous intéresse… m’enfin c’est pas non plus l’el-dorado. Cela me fait penser que je devrais peut-être me créer un compte Deviantart après tout ?!

LNG Paintart

2 thoughts on “Apprenti designer du dimanche

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Aller à la barre d’outils