Zalando: Couplage typographique

Zalando Brand:
Type pairing

Zalando Brand:
Type pairing

Zalando Brand:
Type pairing

Identité/Branding
Design Graphique
Typographie

Identité/Branding
Design Graphique
Typographie

Branding
Design Graphique
Typographie

Identité/Branding
Design Graphique
Typographie

Identité/Branding
Design Graphique
Typographie

C'est durant l'été 2019 que je me suis joint à l'équipe interne de designers responsables de la nouvelle identité visuelle de Zalando; dévoilée l'année dernière sous le nom The Label. Pendant plusieurs mois, nous avons développé les nouveaux éléments visuels de la nouvelle marque, afin de la rendre plus inclusive, audacieuse et surprenante. Un bon petit refresh, quoi! Bien que le projet ait été grandement collaboratif, nous avions tous un élément visuel dont nous étions responsable. Le mien s'agissait de la typographie. Laissez-moi donc vous expliquer un peu comment nous en sommes arrivés à ce tout nouveau système typographique.

top-banner

01

Bien faire
le point

typefaces–02

Lorsque nous avons entâmé ce projet, la typographie de l'entreprise était la très populaire Helvetica.... et Arial sur le web... et San Francisco pour iOS... et Roboto pour Android. Inutile de spécifier que nous avons commencé ce projet avec la claire hypothèse que notre typographie était très peu distincte de la compéition, et aussi très peu cohérente (chaque OS utilisant sa propre police système). 

Nous devions aussi nous assurer que ce nouveau système soit accessible pour tous, lisible et qu'il guide l'utilisateur, tout en s'assurant qu'il soit aussi émotif, riche en détails et excitant, comme l'est le monde de la mode. Ultimement, nous devions représenter les valeurs de Zalando le plus fidèlement possible, soit de déveloper un plus grand lien émotif avec notre clientèle, en s'assurant d'être toujours distinct, reconnaissable et cohérent.

02

Analyse comparative

video-graph–01

Afin de bien comprendre comment nous pouvons assurer davantage de distinction pour notre marque, nous avons identifié 60 marques compétitrices oeuvrant dans un secteur similaire à celui de Zalando et les avons placées sur une matrice basée sur leurs différents attributs. Nous nous sommes bien vite rendu compte que notre hypothèse initiale était bien réelle: avec Helvetica Bold comme police principale, Zalando était droit dans la zone la plus peuplée de notre matrice. Notre typographie principale n'avait en effet rien de bien exceptionnel. Mais, cette même matrice nous as aussi aidés à y voir de nouvelles opportunités.

03

Enfin, le temps d'explorer

zalando-type-explorations

À ce stade de notre processus créatif, nous avons entâmé diverses explorations quant aux différents traitements typographiques possibles. Nous avons bien évidemment considéré l'utilisation de sérifs pour leur délicatesse et leur valeur classique. Nous avons aussi considéré des polices extended pour leur approche plus confiante et in your face. Nous avons aussi exploré les différentes variations (italic, souligné, bold, light) de toutes ces différentes polices.

À ce stade, nous avons rapidement réalisé que bien que ces explorations étaient bien intéressantes, nous n'avions toujours pas trouvé la solution ultime qui représentait l'identité ultime de Zalando et qui reflétait aussi le passé de la marque. Plusieurs explorations étaient audacieuses et surprenantes alors que d'autres étaient plus sérieuses, et inclusives. Par contre, notre solution finale devait répondre à tous ces critères, et non pas seulement à quelques-uns seulement.

zalando-final-pairing-02-fr

Destination finale:
Couplage de Sérif et Sans-sérif

Nous apprécions grandement la grande qualité informative et pragmatique des polices sans-sérif. Il en va de même pour les polices sérif qui elles réussissent à apporter un air de charme et une touche humaine au contenu présenté. Après avoir bien considéré les différentes possibilités, nous en sommes arrivé à ce constat: seul un couplage de sérif et sans-sérif peut parvenir à représenter pleinement la personalité de la marque.

Avant l'atterrissage:
Trouver son match parfait!

Maintenant que nous savions quelle était notre direction pour le système typographique, nous devions trouvé la sérif et la sans-sérif parfaites pour le couplage. Après avoir isolé près de 140 polices de 40 différentes fonderies — allant des plus petits studios indépendants jusqu'aux plus grands joeurs. Pour éviter tout biais, nous avons converti nos Experience Principles initiaux en une liste de questions bien précises, afin de réduire davantage le nombre de polices que nous considérions. Une fois éxécuté, notre dernière étape s'agissait de s'assurer de la faisabilité technique de ces polices: langues supportées, poids visuel similaire, même hauteur de caractère, etc.

Après avoir bien pesé toutes nos options, notre choix final s'est arrêté à Helvetica Now — une version modernisée et digitalisée de notre police originale, la sans-sérif Helvetica — couplée avec la sérif Tiempos.

Optimisées pour aujourd'hui.
Prête pour demain. 

Après avoir expérimenté avec différentes polices sans-sérif, nous avons été agréablement surpris par les qualités d'Helvetica Now en terme d'accessibilité. Cette nouvelle version d'Helvetica a été pleinement optimisée pour le digital, assurant non seulement une meilleure lisibilité, mais offrant aussi un meilleur contraste entre les caractères. Il n'y a donc aucun doute qu'Helvetica Now représente une option inclusive et intemporelle pour Zalando. En ce qui concerne Tiempos (aussi optimisée pour le digital), ce sont les qualités romantiques et rétros de la sérif qui nous ont charmés, avec ses généreuses courbes et ses grands caractères.

Oh, et au niveau technique, le temps de chargement a été pratiquement inchangé en comparaison avec notre précédente utilisation de polices systèmes. Inutile de vous dire qu'on s'est vite départis de notre précédent système typographique. Adieu, ne reviens jamais.

animation-03
07–system–fr

Un système simple, utilisé par une compagnie d'environ 15 000 employé(e)s

Ce couplage typographique fonctionne d'une manière plutôt simple: Helvetica Now est utilisée pour tout contenu plutôt fonctionnel, servant à guider l'utilisateur ou informatif. En ce qui concerne Tiempos, elle est utilisée pour inspirer, pour la narration ou en complément à l'information principale, servie par Helvetica Now. Quant il vient à les coupler au sein d'un même titre ou paragraphe, non seulement c'est tout à fait permis, mais même encouragé! Nous avons aussi organisé une série de workshops inter-déparmentaux, question de s'assurer que tous puissent utiliser le nouveau couplage typographique rapidement et efficacement. 

Zalando et son couplage typographique dans le futur.

Zalando et son couplage typographique dans le futur.

Comme nous le savons tous, une identité visuelle est en constante évolution et celle de Zalando n'est d'aucune exception. Bien que ce nouveau couplage typographique fasse déjà partie intégrale de la nouvelle identité de Zalando, nous nous assurons de toujours rester en contact avec les différents départements de la companie, question de s'assurer d'une utilisation cohérente du système typographique à tous les niveaux de la compagnie.

L'adoption rapide de tous les départements de Zalando ainsi qu'une réponse postive de notre clientèle nous assurent cependant que nous avons probablement réussi à tisser davantage un lien émotif entre notre clientèle et Zalando, ou du moins que nous nous y en approchons. Bon débarras Helvetica. Bienvenue, Helvetica Now et Tiempos.

Différentes applications du couplage typographique.
Équipes Marketing et Expérience digitale chez Zalando.