Introduction

Je suis rentré de mon dernier voyage au Japon avec une passion pour les trains (oui, comme Sheldon), je suis inscrit sur un forum spécialisé mais j’avais envie d’un lieu ou partager mes projets et mes photos sur l’univers des trains japonais et le modélisme ferroviaire. C’était donc le prétexte rêvé pour un projet comme je les aime: logo, identité et site web!

Le briefing

L’identité devait être marquée et le blog simple. Les sites de ce type sont souvent poussiéreux ou trop chargés, même si ils sont réalisés avec toute la meilleure volonté du monde par leurs auteurs amateurs. Je voulais donc m’orienter vers la meilleure qualité possible en termes de lecture comme d’identité.

Le nom: Tecchan

Première étape, trouver un titre, un nom pour ce blog.  Tecchan est une compression du mot “tetsudo” qui signifie chemin de fer et du suffixe “chan” utilisé à titre affectif pour des amis proches ou des enfants. Ce nom vient d’une petite anecdote de mon voyage au Japon: après une longue journée à Tokyo, nous avions rendez-vous avec des amis japonais. Quand il m’a vu avec un cabas contenant un set de trains que je venais d’acheter, il a ri et a dit “tecchan”. Tecchan se définirait littéralement par “le garçon du rail” et c’est un terme utilisé, plutôt pour de jeunes garçons, qui sont, comme moi, passionnés par le chemin de fer.

Le nom est donc venu très naturellement même s’il m’a fallu confirmer avec mon ami japonais l’orthographe exacte et l’étymologie complète du mot. Pour ceux qui se posent la question: tecchan se prononce: tetchanne et s’écrit テッチャン en japonais.

Le logo

La question était ici de savoir si j’utilisais ou non du texte en japonais pour le logo. J’ai effectué plusieurs essais dans plusieurs alphabets différents afin de tester ce qui rend le mieux. Le but était de trouver quelque chose de mécanique, industriel, en accord avec le sujet.

Puis est venu l’idée de la mascotte. Je trouvais l’exercice de créer une mascotte pour ce blog intéressant car le Japon a une culture des mascottes et autres personnages assez imprésionante. Chaque région du Japon a sa mascotte dédiée, le plus souvent représentée par un animal, l’idée d’avoir un tel symbole pour un blog orienté Japon me semblait particulièrement appropriée. Même si j’ai réfléchi à l’idée d’un mini-Godzilla, j’ai très vite adopté l’idée du cochon. Sans entrer dans les détails, le cochon est un animal qui m’est un peu fétiche, le logo allait donc être très personnel. La casquette de mécanicien est arrivée ensuite pour lier la mascotte avec le sujet.

J’ai réalisé plusieurs croquis sur papier avant de trouver les bonne formes et le bon esprit. Je l’ai ensuite repris et vectorisé dans Illustrator pour arriver au dessin définitif. J’ai beaucoup joué avec les épaisseurs de lignes pour donner du volume au dessin.

Typographie

Au niveau typographique, il m’a été assez clair que je souhaitais une fonte mécanique, plus solide. Même si j’ai effectué quelques essais, c’est l’Egyptienne F de Adrian Frutiger qui a conservé toute mon attention par son dessin a la fois solide et souple. Afin de lui donner un aspect encore plus industriel, j’ai opté pour sa variante bold. Le choix de l’absence de capitale a été fait pour aider l’équilibre du mot et simplifier la lecture. Le fait de ne pas utiliser de majuscules dans un logo permet aussi de donner une image plus humble.

Composition

Il était venu le temps d’associer la mascotte au texte et c’est la partie qui m’a donné le plus de soucis. J’étais au départ parti vers une optique plus traditionnelle du logo: des aplats et peu de couleurs ainsi qu’une conception plus graphique du logo. Le texte mordait une partie du cochon et l’ensemble était associé d’une seule pièce.

Mais le résultat n’était pas très convainquant et sachant que le logo allait avoir une utilisation exclusive pour le web, je trouvais domage de limiter autant les couleurs et de ne pas mettre plus en valeur le personnage. J’ai donc pris le parti de rendre ce logo très coloré en utilisant des dégradés et des ombres ainsi que donner une meilleure place à la mascotte. Je n’avais pas besoin de considérer des cartes de visites ou des petits imprimés comme plus souvent le cas lors de la création d’un logo.

Le gris anthracite du texte a été choisi afin de donner une teinte neutre en contraste au pictogramme très coloré. Le gris foncé aide aussi à renforcer l’intention mécanique qui a été reprise plus loin dans le design du site.

Je savais aussi que le design du site web serait sur trois colonnes et que la place horizontale serait limitée. J’ai donc décidé de pousser l’idée encore plus loin et d’assumer alors totalement la mascotte en lui donnant beaucoup plus d’importance. C’est ce qui sera conservé comme idée finale.

Cela donc été réellement une création agile en revenant en arrière, en reprenant en amont pour arriver non seulement à un résultat esthétique et plaisant mais aussi adapté à son utilisation.

Rendez-vous bientôt pour la suite de cette étude de cas avec la création du blog.

Voici donc quelques règles de base de typographie à garder sous la main pour vos créations et vos rédactions. Sans logiciel professionnel, il est parfois impossible de faire des réglages fins, je vous oppose néanmoins l’alternative la plus adaptée pour chaque chapitre.

Sachez qu’il s’agit de règles de typographie suisses romandes mais elles s’appliquent dans la plupart des cas à la typographie française (mentionné dans l’article quand c’est le cas). En revanche, elles ne s’appliquent pas forcément pour les autres langues.

Ponctuation et espaces fines

Avant chacun de ces caractères (? ! ; : ) on doit placer une espace fine. Pas d’espace avant un point (.) ou une virgule(,). On place une espace normale après.

• shift + alt + cmd/ctrl + M dans InDesign
•   pour une espace fine insécable dans votre code HTML (insécable de manière à ce que le caractère qui la suit ne passe pas à la ligne) (merci à fredchat).   pour une espace fine normale.

Autres langues

En anglais ou en allemand, on n’utilise pas d’espace fine avant ces caractères.

Usage courant (hors des logiciels d’édition graphique)

En l’absence de la possibilité de placer une espace fine (dans un traitement de texte standard ou sur le web) on colle le caractère à la fin du mot sans laisser d’espaces.

Guillemets

Les «guillemets français» sont souvent oubliés au profit des “guillemets anglais”, mais plus souvent par de “doubles primes” sur le web.
On place toujours une espace fine après le guillemet d’ouverture et une autre avant le guillemet de fermeture.

• Configurez la bonne langue dans vos logiciels pour avoir les guillemets correspondants.
• « et » en html

Autres langues

Les guillemets peuvent changer selon chaque langue, renseignez-vous. Il faut utiliser “ et ” en anglais. (alt+2 et alt+shift+2)

Usage courant

Utiliser des guillemets français pouvant être une vraie plaie avec des logiciels non professionnels, l’usage des guillemets anglais ou même de simples primes est admis. On colle les guillemets à la première et la dernière lettre sans laisser d’espace.

Parenthèses

Jamais d’espace après la parenthèse d’ouverture ni avant la parenthèse de fermeture.

Autres langues

Pas d’espace non plus an anglais ou en allemand.

Usage courant

Ici non plus. Ajouter une espace peut faire passer une parenthèse à la ligne et nuire à la compréhension du contenu.

Chiffres et numérotation

Là encore, nous sommes souvent influencés par la typographie anglaise. En typographie française, on ne place pas de prime entre les groupes de 3 chiffres (1’000’000) mais une espace fine. De plus, on ne place les espaces fines qu’à partir de 5 chiffres (l’espace fin étant une aide à la lecture, on part du principe qu’il est aisé de lire jusqu’à 4 chiffres).

Autres langues

En anglais on place une virgule entre chaque série de trois chiffres à partir de 4 chiffres(2,500£, 1,350,578 people) sauf pour les dates (I was born in 1986).
En allemand on place une espace standard entre les séries de trois chiffres (2 458 500).

EDIT: Je n’ai pas trouvé d’infos sur l’usage de la prime (12’345) dans aucune langue, j’imagine qu’il doit s’agir d’un abus d’usage (probablement aussi dû à internet) ou d’une utilisation comptable. Mais si quelqu’un à des infos là dessus, je suis intéressé.

Les primes sont surtout utilisées en mathématiques ainsi qu’en anglais pour indiquer les pieds (2′) et les pouces (12”). (merci @lqd)

Usage courant

Là aussi je pense que l’usage de la prime est admise pour aider la lecture des longs chiffres. La virgule ne doit en tout cas pas être utilisée en français.

Devises

Franc Suisse

On indique une somme de la manière suivante: 12.50 fr. ou alors Fr. 12.50 dans des tableaux comptables par exemple. L’utilisation de CHF est réservée uniquement si l’on parle de différentes devises: 20 CHF valent aujourd’hui 16.14EUR. SFr ne s’utilise, en principe, pas.

Lorsqu’il n’y a pas de chiffre après la virgule on indique le double zéro par un point et un long tiret (12.–). Il n’est pas question d’utiliser le long tiret après les centimes: 12.50.–

• alt + tiret pour le long tiret
• – en html

Euro

Le symbole € peut être utilisé dans la plupart des documents, mais lorsqu’il s’agit de documents officiels ou financiers, il faut utiliser la notation EUR. Qu’on utilise € ou EUR, il faut toujours le placer après la valeur. Il faut placer une espace entre la somme et le symbole (25 €, 127 EUR).

• alt +E sur votre clavier (mais vous le saviez déjà…)
• € en HTML

Autres langues

En anglais notamment, on place la notation avant la somme (EUR 25).

Majuscule et capitales accentuées

Attention, ici typographie française et suisse romande se confrontent et les règles divèrgent.

En Suisse Romande

Une majuscule est la première lettre d’une phrase et doit toujours être en capitale.

On n’accentue pas une majuscule, en revanche, un mot en capitale doit être accentué.

En France

La première lettre d’une phrase est aussi toujours accentuée. En revanche, contrairement à la Suisse Romande, en France, selon le lexique des règles typographiques de l’imprimerie nationale, les accents sont systématiques, peu importe la présence ou non de capitales.

• alt + ^ pour un accent grave et alt + maj + ^ pour l’accent aigu avant de tapper votre lettre en majuscule.

Merci infiniment à Charles pour son commentaire. Je ne connaissait en effet pas cette règle car elle diffère de la Suisse.

Autres langues

En allemand, comme en français, on place le tréma sur les mots en capitales (ÖSTERREICH). En revanche, si la première lettre d’un mot est accentuée, on tolère l’écriture suivante: Oesterreich. Attention, en allemand, tous les noms communs prennent une majuscule…

Usage de l’esperluette (&)

Connue aussi sous le nom de “et commercial” ou ampersand en anglais, l’esperluette subit aussi les abus d’usages. La faute à sa grande valeur esthétique probablement… En français il n’est pas correct de l’utiliser pour une liste (Je vais acheter du pain, des œufs & de la farine). L’esperluette s’utilise (en principe) uniquement dans les raisons sociale (Favre & fils SA). On place une espace normale avant et après.

Libre à vous de l’utiliser comme vous le souhaitez, tachez juste d’éviter d’en abuser…

Quelques ressources pour terminer

Le Guide du Typographe

Le Guide du Typographe Romand est sans conteste la référence ultime. Plus de 200 pages de règles typographiques avec des pages sur les orthographes particulières et même les langues étrangères. Un must-have pour tous les graphistes et honte sur tout graphiste suisse qui ne le possède pas déjà!

CopyPasteCharacter

Pour avoir sous la main tous les symboles complexe qu’il est parfois un peu coton de retrouver sur son clavier. Le site permet de copier dans son presse papier le caractère ou son code HTML: copypastecharacter.com

Symbol Caddy

Un petit widget MacOSX pour avoir accès aux caractères complexes depuis son Dashboard. Tout comme CopyPasteCharacter, on peu copier en texte ou en HTML. Télécharger le widget gratuitement.

Voilà pour ce guide, n’hésitez pas à ajouter vos commentaires ou vos précisions. J’espère que cet article vous aura été utile!

Je vous propose donc ici de recréer cet icône dans Photoshop en quelques étapes simples en utilisant deux petits filtres et surtout des styles de calques. Un fichier source est aussi disponible au téléchargement.

Le fond de l’icône

Commencez par créer un nouveau document au format carré dans Photoshop. Ici j’ai un format de 363 pixels de côté ce qui est précisément le format de l’icône su la homepage d’Apple.

Remplissez votre premier calque d’un fond blanc qui va servir de base à l’effet de métal brossé. Dans le menu Flitre > Bruit > Ajout de bruit… Entrez les valeurs suivantes: 25%, répartition Gaussienne et cochez la case Monochromatique.

Si tout va bien, vous aurez le rendu suivant:

Ensuite, nous allons créer l’effet de métal brossé grâce au menu Filtre > Atténuation > Flou radial… Entrez la valeur 70, puis cochez les cases Mode rotation et qualité supérieure.

Nous voici avec un brossage circulaire mais toujours un peu fade.

Nous allons maintenant arrondir un peu les angles. Soit avec l’outil sélection, soit avec la plume (que je préfère) créez un rectangle arrondi avec des angles de 65 pixels. Masquez votre calque avec ce rectangle arrondi et on a une forme d’icône.

Ajoutons un dégradé afin de donner l’effet métallique. Pour ce faire, nous allons utiliser les styles de calques. Il nous faut donc un dégradé angle afin de pouvoir jouer sur les valeurs à 360° autour du centre. Plaçeons-le directement en mode Densité linéaire + de manière à avoir l’effet métal brossé en arrière plan.

Ensuite il nous faut des valeurs de gris pour tout le tour. Vous pouvez soit les créer vous-même ou simplement les copier à la pipette depuis l’image ci-dessous. La seule chose importante est d’avoir la même valeur au début et à la fin pour ne pas “casser” le dégradé.

Ça commence à prendre forme, il manque juste le contour. Ajoutez donc un nouveau style de calque contour de 3px de large sur l’intérieur. Le type de remplissage se fait en dégradé (vertical) avec un gris clair en haut et un gris foncé en bas.

Voilà, notre fond d’icône est maintenant terminé!

L’intérieur de l’icône: le nuage

On s’attaque maintenant à ce qu’on va placer à l’intérieur. Je prend un nuage, pour rester dans le thème tiens! J’importe mon image depuis Illutsrator en tant qu’objet dynamique, ça me laissera plus de libertés pour le redimensionner.

Afin de ne pas voir la couleur d’origine, n’oubliez pas de changer l’opacité du fond à 0% dans les options de fusion ou tout en haut de votre palette de calque (Fond, juste en dessous du contrôle de l’opacité).

Maintenant appliquez un beau gris foncé en mode produit.

Maintenant, appliquons l’effet enfoncé dans le métal grâce au style de calque Biseautage et estampage. Entrez les valeurs suivantes: biseau externe, lisse, 150%, dirigé vers le bas, une taille de 3px et aucun flou. L’ombrage se fait à la verticale à 90° et modifiez la forme du contour brillant. Passez les tons clairs en Densité couleur -, la couleur blanche à 50% d’opacité et les tons foncés en gris produit.

Voilà à quoi cela ressemble. Courage, on est presque au bout!!

Dernier petit détail, appliquer une petite ombre interne à notre nuage. En noir, mode produit et 75% d’opacité. Distante de 1px seulement et pour une taille de 5px.

Voilà, c’est terminé! Une icône digne d’un designer de chez Apple chez vous en quelques minutes.

TELECHARGER LE FICHIER SOURCE (ZIP, 2.9 Mo)

Vous pouvez utiliser le fichier (PSD + TIFF + PNG) pour vos créations personnelles ou professionnelles. Si vous en avez l’occasion, balancez un petit lien sur cet article, ça mange pas de pain et ça serait sympa!

J’espère que ce tuto dans les nuages vous aura plu!

Alors on se dit que c’est le format idéal? Oui, sur tous les points sauf un seul: le poids des images. En effet, une image en PNG est beaucoup plus lourde (donc longue à charger) qu’un JPEG ou un GIF. Pas tellement dérangeant si on les utilise pour des petites icônes ou des boutons, mais quand on commence à atteindre les 100 pixels, le temps de chargement peut être longuet voir carrément gênant sur un site mobile.

Il existe des petites applications ou même des webapps qui proposent de compresser vos PNG mais on ne sait pas trop ce qu’il se passe dans la machine… Voici donc une moyen simple et très efficace de compresser ses PNG comme on le souhaite avec Adobe Photoshop: utiliser le réglage Isohélie.

L’isohélie est disponible soit dans les réglages de l’image (Image>Réglages>Isohélie…) soit dans les calques de réglages. Dans une logique de ne pas “détruire” son image, on préfèrera les calques!

Le principe de l’isohélie est simple: redéfinir le nombre de couleurs utilisées par votre image. Et ça n’est un secret pour personne ici: moins de couleurs c’est moins d’informations et moins d’informations c’est un fichier plus léger!!

L’avantage ici c’est qu’on peut définir très précisément la manière dont on veut réduire ses couleurs en choisissant une valeur entre 2 et 255. On a donc un contrôle direct entre l’aspect de l’image et son poids. L’idée c’est de trouver le meilleur compromis.

Mon p’tit cochon a un dégradé très subtil sur le front et on voit bien qu’en dessous de 50, cela commence à devenir limite. A 70, on a un rendu qui est toujours excellent et par rapport à mon image de base, on est passé de 18.1 Ko à 15.2 soit un gain de 20%. Ça ne semble pas beaucoup, mais sur l’ensemble d’un site, on gagne un max. Et lorsqu’il s’agit de temps de chargement, faire gagner 20% de temps à son visiteur n’est pas négligeable.

Avec mon cochon et son dégradé, on est assez vite limité, mais suivant les images, on peut gagner beaucoup plus sans avoir de différence perceptible.

Ici on a un gain de 25% et franchement, si on ne sait pas que les images sont différentes, on ne le remarque même pas…

Bien entendu, plus il y a de dégradés, plus c’est sensible… Mais de cette manière on peu continuer d’utiliser du PNG transparent sur ses images tout en faisant attention à ne pas avoir de pages trop lourdes grâce au réglage isohélie!

Avant, il suffisait simplement de mettre une image de 57 x 57 px à la racine du dossier, de la nommer “apple-touch-icon.png” et le tour était joué. Aujourd’hui, avec l’iPad et l’écran haute définition de l’iPhone 4, c’est un tout petit peu plus subtil.

Une icône maison

Il faut savoir que par défaut, notre image sera rognée afin de lui appliquer les fameux coins arrondis distinctifs des icônes et applications iOS. Il n’est donc pas la peine de perdre du temps à les répliquer vous même car ils se superposeront avec les effets par défaut.

Les résolutions à employer sont les suivantes (toujours en PNG):

• iPhone/iPod Touch d’ancienne génération: 57 x 57 px
• iPad: 72 x 72 px
• iPhone 4 et iPod Touch dernière génération (écrans “Retina”): 114 x 144 px

Voici à quoi cela ressemble, au format brut tel que déposé sur votre serveur: Des simples images carrées, sans arrondis et sans effets.

Afin que chaque machine sache quelle icône correspond à la taille et à la résolution de son écran, voici ce qu’il faut spécifier dans votre <head>:

<link rel="apple-touch-icon" href="images/icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/icon-retina.png" />

En prenant bien soin de remplacer le chemin et le nom de l’image par ceux qui vous correspondent. Tant que l’on précise “apple-touch-icon” ainsi que la taille de l’image, Safari iOS s’occupe du reste.

Si les tailles ne sont pas spécifiées, l’appareil prendra par défaut 57×57. Attention à bien les préciser si vous ne voulez pas que les icônes soient pixélisées sur iPhone 4 et sur iPad.

Et une fois traitées par votre iBidule, voici le résultat:

Encore une fois, les effets de bouton plastique et d’ombre sont créés automatiquement par la machine, il n’y a donc pas besoin de les répliquer vous-même.

Effet, pas d’effet?!

Comme je le disais, iOS applique par défaut le reflet. Si, pour des raisons graphiques vous préférez avoir votre image brute ou créer votre propre effet de reflet, c’est possible. Il suffit de le préciser “precomposed” de la manière suivante:

<link rel="apple-touch-icon-precomposed" href="icon-iphone.png" />

De cette manière vous n’aurez pas l’effet “bouton plastique, mais les coins seront néanmoins arrondis puisque cela fait partie de l’interface iOS.

Pour les flemmes…

Si la syntaxe du header vous ennuie, sachez que Safari iOS ira de toute manière chercher à la racine de votre site (comme pour le favicon.ico d’un navigateur standard d’ailleurs) pour voir si les icônes s’y trouvent. Vous pourrez donc vous en sortir en nommant vos images de la manière suivante par exemple:

apple-touch-icon-57x57-precomposed.png
apple-touch-icon-114x114.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
etc...

Personnellement je trouve plus clair de les ranger proprement dans un dossier et d’indiquer leur position dans le header, mais c’est mon avis, les deux manières fonctionnent tout aussi bien l’une que l’autre.

De bien jolies icônes

Et voilà, de cette manière vous aurez prévu une joli icône pour votre site et vos visiteurs les plus fidèles auront le plaisir de vous retrouver sur leur springboard!

Soyez créatifs, faîtes-vous plaisir parce que vous avez bien plus de place que sur les pauvres 256 pixels d’un favicon classique.

Apple nous gâte avec ce genre de possibilités graphiques, il serait dommage de s’en priver!

La petite brique…

Des millions de jouets vendus et des dizaines de nouveaux produits chaque année, plus de 400 millions d’utilisateurs à travers le monde…

La brique LEGO est probablement le jouet le plus célèbre des 50 dernières années.

LEGO utilise, tant dans ses produits que dans sa communication, des moyens simples et efficaces à base de formes géométriques, de couleurs ainsi un esprit enfantin et impertinent afin de rester une marque fraîche et dynamique.

Historique

LEGO est un fabriquant de jouets danois dont le produit phare est une célèbre petite brique de couleur.

Fondée en 1932 par Ole Kirk Christiansen, la marque fabriquait à l’origine des simples jouets en bois crées par son charpentier de fondateur. Le nom LEGO vient du danois leg godt qui signifie « joue bien ».

C’est en 1949 que la marque découvre le plastique et crée la première brique modulaire dont la forme est très proche des briques actuelles. En 1958 que la brique prendra sa forme définitive encore utilisée aujourd’hui, même si des centaines de nouvelles formes ont fait leur apparition.
Depuis 1949, la société a fabriqué plus de 327 milliards d’éléments, plus de 400 millions d’enfants et d’adultes jouent avec des briques LEGO.

Une légende raconte qu’il se vend 2 Barbies chaque seconde. C’est 7 boites de LEGO qu’il se vend à travers le monde chaque seconde. Il s’en est donc vendu plus de 150 depuis que vous avez commencé à lire ce texte…

Le Logo

Le logo LEGO utilise des principes simples de composition et de couleur pour être immédiatement reconnaissable.

Il a une forme carrée et la couleur dominante est le rouge, ce qui le rend extrêmement visible. La typographie est un caractère majuscule très lisible dessiné à la main dont la forme date du logo des années 50. De par sa forme, son dessin, sa casse (italique) et les couleurs employées, la typographie donne un esprit de jeunesse et de dynamisme. On remarquera aussi le double filet noir et jaune autour de la typographie qui accentue encore se côté enfantin.
On notera encore que le logo mélange deux aspects. D’une part un esprit très jeune avec les couleurs et la typographie ronde, d’autre part cet aspect très construit, géométrique et carré qui rappelle bien entendu le jouet lui même.

Le noir, le jaune, le blanc et le rouge sont aussi quatre des couleurs les plus présentes dans les briques LEGO.

Le logo dégage une atmosphère propre à l’univers des enfants et de la construction. Il semble intemporel.

Typographie

Si LEGO a longtemps utilisé l’Helvetica Neue light dans ses documents, ils sont récemment passé à une version modifiée de la Chalet de House Industries. Cette fonte claire et lisible est plus ronde et moins stricte que la classique Helvetica.

On retrouve cette fonte sur les publications de l’entreprise ainsi que sur les boites récentes (les anciennes sont encore en Helvetica).

Les produits

LEGO crée quasiment une charte graphique pour chaque nouvelle gamme de produits. A chaque fois, un logo spécifique ainsi qu’une gamme de couleurs distinctives est attribuée. La gamme pirate, par exemple, utilise des couleurs jaunes et bleues rappelant le sable et la mer et utilise des images de carte au trésor. la gamme technique est très sobre, plus noire, technique, et plus axé adulte. La gamme Star Wars fait apparaître Dark Vador et le logo du film. Et ainsi de suite…
A chaque fois, le logo LEGO apparaît en haut à gauche de la face de la boite.

Afin de rentrer plus dans le détail, nous allons nous concentrer sur un produit en particulier. Il s’agit d’une petite boite de la gamme «City» qui est la gamme la plus populaire et la plus classique de la marque danoise.

La première chose que l’on remarque ici c’est le logo. Placé au premier niveau de lecture, sur un fond uni et dans une couleur vive, il est difficile de le rater. On notera aussi que le logo LEGO apparaît sur les 6 faces de la boîte. De cette manière, quelque soit la disposition ou le rangement des produits en magasin, on repère la marque aisément.

Cernant le logo, nous avons les autres informations essentielles. A droite, le nom de la gamme LEGO CITY dans un logo distinctif et spécifique à cette collection.

En dessous du logo LEGO CITY nous voyons, l’âge conseillé pour le set en question. Les âges recommandés pour les LEGO vont de 0 à 5 ans pour la gamme DUPLO. Et jusqu’à 16 ans et plus pour les sets les plus complexes comportant un montage compliqué ou un grand nombre de pièces (presque 6000 briques pour le Taj Mahal sorti en 2008). En dessous de l’âge est simplement inscrit le numéro de référence de la boite.

La plus grande partie de la face est utilisée par un visuel du contenu de la boîte. Les briques sont assemblées et dans une situation de jeu. A noter qu’ici, le set est essentiellement composé de minifigurines et accompagné de quelques accessoires. N’apparaissent à chaque fois que l’exact contenu de la boite, aucune pièce qui ne serait pas contenue n’est vue sur la boite. Mis à part sur quelques rares sets, on ne voit jamais un enfant jouer avec les LEGO sur la boite.

Sur le dessus de la boite, on retrouve une image du contenu, mais aussi un principe qui apparaît sur chaque boîte: une pièce à l’échelle 1:1. La plupart du temps il s’agit d’un personnage. C’est un principe simple mais qui permet de se rendre compte de l’échelle du jouet tout en incitant au jeu.

Au dos, on retrouve quelques exemples de jeu avec le contenu de la boîte. On y voit aussi quelques détails des pièces les plus intéressantes. Dans le cas d’un véhicule ou d’une construction plus complexe, on retrouvera souvent d’autres possibilités de construction avec les mêmes pièces. Ceci pour rappeler la possibilité infinie de construction grâce aux briques LEGO. C’est ce qui fait leur force: une possibilité de création infinie!

Dernier point, purement affectif et complètement lié a LEGO: le bruit ! En secouant une boîte de LEGO on entend le bruit des briques qui s’entrechoquent à l’intérieur. C’est à dire que même si on emballe la boîte pour l’offrir, le simple fait de la secouer permet de savoir que l’on va recevoir des LEGO. C’était toujours la première chose que je faisais quand j’étais gamin: secouer le paquet cadeau pour voir si on m’avait offert des LEGO.

Affiches

La communication de LEGO est assez particulière car, comme beaucoup de grandes marques, LEGO ne fait que de la publicité institutionnelle, ses produits étant déjà connus et renommés. Le seul outil de vente dans ce domaine est le catalogue qui parait une à deux fois par an.

En revanche, les affiches institutionnelles sont très célèbres et sont souvent prisées au Lions Awards de Cannes. Elles s’adressent généralement à un public plus âgé que le public cible. Touchent plutôt les prescripteurs (parents, écoles) que les enfants eux-mêmes.

Les sujets sont souvent décalés, se concentrent sur la création, l’imagination, l’ouverture d’esprit ou la construction elle-même.

Nous allons nous concentrer ici sur la campagne de 2006 nommée simplement «Build it» (construis-le).

Cette campagne de trois affiches, qui peut s’adresser aux adultes comme aux enfants, laisse imagine l’immense potentiel de construction grâce aux briques LEGO.

La photo montre un lieu aisément reconnaissable: une caserne de pompiers, un hangar à avion ou un quai de gare et un tas de briques LEGO géantes suggère le véhicule qui pourrait se trouver là.

Plutôt que d’intégrer dans un décor réel un véhicule en LEGO, on nous incite ici à le construire, à l’imaginer, à créer notre propre véhicule comme on l’entend.
On utilise ici, non seulement des thématiques phares de la marque à travers les années. Les pompiers, les avions et les trains sont des thèmes récurrents dans les collections LEGO. Mais ce sont aussi des sujets privilégiées pour les enfants qui rêvent de piloter un avion, être chauffeur d’une grosse locomotive à vapeur ou encore de grimper la grande échelle d’un camion rouge de pompiers.

Les photos utilisées sont très épurées, très sereines, presque délavées par le temps et les briques nous sautent aux yeux de toutes leurs couleurs. Elles sont volontairement démesurées, mais on imagine volontiers un véhicule LEGO avec des briques de cette taille.
On peut aussi imaginer la même photo sans les briques LEGO. Mais celles-ci apportent une reconnaissance immédiate de la marque, sans avoir besoin de voir le logo, la forme des briques étant mondialement reconnue.
La publicité utilise une large bordure blanche qui, ajoutée aux couleurs légèrement vieillies de l’image donne le sentiment de voir une ancienne photo. L’affiche semble encadrée.

Le logo apparaît systématiquement dans le coin inférieur droit de la photo. Il est posé ici comme la première brique d’une construction. La baseline «build it», est simplement apposée à la gauche du logo, comme une signature. Il est évidement clair que c’est grâce à LEGO que l’on va pouvoir construire le tain, l’avion ou le camion de pompiers.

Site web

Le site web de LEGO est un peu usine à gaz, mais il remplit bien ses fonctions, la première étant d’attirer l’attention des plus jeunes. On nous présente une multitude d’informations sur les produits, sur les collections et les nouveautés dès la première page d’accueil grâce notamment à pas mal de Flash ce qui s’avère un peu dommage au niveau de l’accessibilité et de la vitesse de chargement mais les animations sont bien réalisées.

Il est possible de rejoindre les diverses pages destinées aux collections pour en savoir plus sur une gamme donnée mais LEGO offre aussi énormément de contenu interactif.

A commencer par le LEGO Digital designer, un logiciel maison qui permet non seulement de construire ses pièces sur son ordinateur, mais surtout de, une fois le projet fini, commander son produit afin de le recevoir en boite par la suite. Un vrai moyen de passer de l’état de consommateur à celui de véritable créateur: chacun est a même de créer, sauvegarder, partager ses créations et de les recevoir à la maison comme n’importe quel produit de la marque.

Beaucoup de jeux, d’activités et de contenus interactifs sont mis à disposition, à nouveau, comme pour les packaging, on retrouve un nouvel univers propre à chaque gamme.

D’un point de vue pratique, on retrouve des informations sur les magasins, les parcs LEGOLAND et les informations plus officielles sur l’entreprise.

Chaque collection a aussi le droit à sa section et tout est fait pour nous plonger dans l’univers souhaité (city, pirates, Star Wars, etc.). Encore une fois, un univers graphique est spécifique à chaque gamme, le souci du détail est présent et on imagine que les plus jeunes se réjouissent d’une telle visite.

Le shop online est particulièrement réussi puisqu’en plus de proposer les produits LEGO classiques, un grand nombre de “collectors” “habits, ustensiles de cuisine, accessoires, etc.” sont disponibles uniquement directement auprès de la marque. Les bonnes affaires, les nouveautés et les produits rares sont aussi indiqués, on nous donne vraiment envie…

Synthèse

A travers les différents exemples vu précédement, on voit que LEGO tient à son image jeune malgré es années. Et c’est logique puisque le produit se concentre essentiellement sur un public jeune.

La marque tient aussi et plus que tout à son image créative, à l’infinité de possibilité offertes par leurs produits. C’est un jouet ludique et éducatif.

LEGO se permet aisément de jouer avec sa propre image car la marque est mondialement reconnue. Mais elle continue sans cesse d’évoluer, de s’adapter aux nouvelles générations et d’appuyer son statut de jouet créatif par excellence.

Quelques faits:

• Si on faisait une tour de 40’000’000’000 briques, on atteindrait la Lune.
• Si on mettait bout à bout chaque brique vendue chaque année, on pourrait faire plus de 10 fois le tour du monde.
• Le contrôle de qualité sur les briques a une tolérance de 0.01mm.
• Chaque année, les enfants du monde entier passent 5 milliards d’heures à jouer au LEGO (je ne sais pas si je suis inscrit dans cette statistique…).
• Il existe sur Terre 70 briques LEGO par habitant.
• Devant Michelin, Goodyear ou Bridgestone, LEGO est le premier fabriquant de pneus au monde. Même si ils ne font que quelques centimètres de haut…
• Avec 6 briques à 8 tenons (rectangle standard), il est possible de fabriquer plus de 915 Millions de combinaisons différentes!!

Images: Lego.com

La dernière série fait apparaitre, Jeff “The Dude” Bridges dans le rôle de la Bête dansant avec Pénélope Cruz ou encore Olivia Wilde comme Sorcière de Blanche Neige face à son Alec Baldwin de miroir. Et dans la dernière une Queen Latifah plus que convaincante de le rôle de Ursula.

Les anciennes séries faisaient apparaitre, entre autres, Scarlett Johansson en Cendrillon, David Beckham en prince charmant, Jessica Biel en Pocahontas, Whoopi Goldberg en génie de la lampe, Beyoncé en Alice au Pays des Merveilles, J-Lo en Jasmine, ou encore notre bon Roger Federer National en roi Arthur!