Comment préparer votre logo pour les systèmes de conception réactifs
Publié: 2022-03-10Le logo moderne doit travailler plus dur que jamais. Dans le passé, un logo d'entreprise était peut-être simplement destiné à une enseigne de magasin et imprimé dans les annonces des journaux locaux. Les logos d'aujourd'hui doivent fonctionner avec une pléthore croissante d'appareils intelligents avec différentes tailles d'écran et résolutions, affichant des sites Web réactifs.
Souvent, les logos finissent par souffrir dans la conception de sites Web réactifs. Beaucoup n'ont pas été conçus avec des cadres réactifs et des tailles variables à l'esprit, et sont simplement redimensionnés pour s'adapter à l'espace disponible qui leur a été fourni ou non.
Cependant, il existe des marques qui réussissent bien dans l'espace Web réactif. Ce sont des marques qui ont été conçues avec soin et en tenant compte de la façon dont elles s'afficheront dans des formats changeants. Les meilleurs logos sont simples et flexibles , avec différents formats et options de mise en page, de sorte que lorsqu'un site est optimisé pour un appareil, la marque est également optimisée pour l'espace qui lui est alloué.
Dans cet article, nous verrons pourquoi une conception de logo simple, flexible et polyvalente est devenue si importante. Des marques leaders du secteur, nées dans le cloud, telles que Twitter, Facebook, Spotify et Google, affinent et simplifient leurs marques grâce à une conception Web réactive et à l'impact croissant du marché des appareils mobiles. Nous pouvons considérer leurs solutions lorsque nous pensons à nos propres marques et à la manière d'optimiser nos logos pour prospérer dans une conception Web réactive.
Lectures complémentaires sur SmashingMag :
- Conception de sites Web réactifs : qu'est-ce que c'est et comment l'utiliser ?
- Comment faire accepter un logo : 8 étapes pour un meilleur workflow de conception
- Conseils vitaux pour une conception de logo efficace
- Étiquette Photoshop pour une conception Web réactive
Un fait simple
Le cerveau humain se souvient beaucoup plus facilement des formes simples que des formes complexes. L'un des facteurs les plus courants qui séparent un bon logo d'un mauvais logo est l'élément de simplicité. Les marques de qualité, mémorables et réussies sont toujours simples.
Ce concept n'est pas nouveau et était connu bien avant que la conception Web réactive ne commence à repousser les limites de la simplicité. Regardez la première tentative d'Apple sur un logo de 1976, conçu par un ingénieur, Ron Wayne. Aussi créatif soit-il (surtout pour un ingénieur), il était trop complexe et, sans surprise, il a été remplacé un an plus tard.
Steve Jobs a chargé le graphiste professionnel Rob Janoff de concevoir quelque chose de simple, mémorable et moderne. Les couleurs ont peut-être varié, mais cette forme de base est restée inchangée depuis plus de 30 ans et est devenue l'un des logos les plus emblématiques et les plus reconnaissables de l'histoire. La simplicité de cette conception lui permet de bien fonctionner à n'importe quelle taille sur pratiquement n'importe quoi. Parfait pour la conception Web réactive, bien qu'il ait été conçu des décennies avant la disponibilité d'une telle technologie.
Cependant, l'erreur de marque d'origine d'Apple est un problème récurrent pour la plupart des entreprises. Les petites entreprises en démarrage ont généralement un budget limité. Pour éviter les coûts, ils se tournent par erreur vers la mauvaise personne pour un logo, quelqu'un qui n'est pas un concepteur de logo professionnel. Quelqu'un qui se sent obligé d'ajouter des choses pour créer quelque chose.
Considérez le logo Great Lakes Golf ci-dessus à gauche. Quelqu'un a passé beaucoup de temps à ajouter des éléments à ce design. Le résultat est assez chargé et il ne va pas du tout se réduire ; tandis que le logo Skype sur la droite est simple, propre et mémorable. Il fonctionnera sur n'importe quoi et est évolutif pour de petites zones sur des appareils mobiles.
Sur toute la largeur, vous pouvez identifier les éléments de sport de balle sur le logo Great Lakes Golf. Mais réduisez de 50% et c'est à peine lisible. Sur la droite, le logo Skype se réduit magnifiquement. Et si l'espace devient trop petit, la marque Skype est suffisamment flexible pour supprimer complètement le mot-symbole.
Cette comparaison simple montre à quel point un design simple, propre et polyvalent l'emporte sur des arrangements plus complexes. Le logo Great Lakes Golf correspondait probablement très bien à son intention initiale. Cependant, dans le contexte d'un site Web réactif, l'incapacité à évoluer proprement devient très évidente.
La réponse de l'industrie technologique
Les marques connaissant le Web simplifient leurs logos pour s'adapter à la conception Web mobile réactive. Facebook a supprimé la légère ligne bleue du bas du "f" de son icône en 2013. Et en juillet 2015, il a simplifié son mot-symbole en supprimant l'ascendant sur le "a" minuscule, en le remplaçant par une version plus simple et plus arrondie.
Dans l'ensemble, les autres lettres ont également été affinées et raffinées. Les changements peuvent sembler insignifiants, mais le raisonnement ne l'est pas. Facebook change de marque en réponse directe à la visualisation sur les appareils mobiles.
"C'est en fait un énorme changement et c'est bien plus que le 'a'. Il est piloté par le mobile. - Howard Belk, co-directeur général et directeur de la création de la société de marque Siegel+Gale.
Spotify
En 2006, le logo original de Spotify était un mélange de type ludique avec de petits éléments de vague qui se perdaient lorsqu'il était réduit. Il a été repensé et simplifié en 2013 avec le type noir et l'icône verte que nous connaissons tous. Il a maintenant été affiné en une seule couleur verte plate. Il y a eu une certaine confusion exprimée au sujet du changement, certains demandant pourquoi Spotify a corrigé ce qui n'était pas cassé. Cependant, le changement fait partie d'une mise à jour plus large de la marque Spotify et il est assez évident que le facteur déterminant est la recherche d'une plus grande flexibilité dans les espaces Web mobiles.
"Parce que le système est si flexible qu'il peut aller partout où Spotify va des écrans, à l'impression, aux environnements et aux expériences interactives. Nous avons testé le système sous pression avec de minuscules publicités mobiles sur de minuscules écrans mobiles. » - Leland Maschmeyer, directeur créatif de la société de design new-yorkaise Collins.
Un autre exemple est Google. Pendant que j'écrivais cet article, Google a dévoilé sa dernière mise à jour de logo, la plus simple à ce jour. Le logo Google a évolué vers de nouveaux niveaux de simplicité depuis sa première apparition sur nos navigateurs dans les années 90.
Ces dernières années, il serait rapidement devenu évident que leur type fin et serif n'allait pas bien s'adapter à la conception Web réactive. Ainsi, comme d'autres marques technologiques, ils se sont simplifiés en une police de caractères sans empattement avec un design plat et une icône « G » conviviale et distinctive.
"Il était une fois Google était une destination que vous atteigniez à partir d'un seul appareil : un ordinateur de bureau. De nos jours, les gens interagissent avec les produits Google sur de nombreuses plates-formes, applications et appareils différents... Aujourd'hui, nous introduisons une nouvelle famille de logos et d'identités qui reflète cette réalité et vous montre quand la magie Google opère pour vous, même sur les écrans les plus petits. ” - Publié sur le blog officiel de Google par Tamar Yehoshua, vice-présidente de la gestion des produits.
Pas de mots
Lorsque Prince a changé son nom en symbole en 1993, la plupart d'entre nous pensaient qu'il était fou. Mais peut-être était-il en avance sur son temps.
Un nombre croissant d'entreprises affinent la simplicité de leur logo, s'orientant vers un design de symbole plat et simple sans aucun mot-symbole.
Vous souvenez-vous du type de bulle et de l'illustration d'oiseau qui constituaient le logo Twitter ? Au fil du temps, Twitter a affiné le logo, supprimant les détails inutiles ; maintenant c'est juste une version très simplifiée de l'oiseau. Pas d'icône 't' minuscule, pas de mot-symbole Twitter, juste le logo de l'oiseau.
"Twitter est l'oiseau, l'oiseau est Twitter. Il n'y a plus besoin de texte, de polices à bulles ou d'un « t » minuscule pour représenter Twitter. - Directeur créatif Doug Bowman
Bien sûr, ce sont toutes des marques bien connues qui peuvent s'en tirer en réduisant leurs logos à une simple icône. Tout le monde ne peut ou ne doit pas le faire. Cependant, il s'agit d'un autre exemple de l'effet que la conception Web réactive a sur les marques. Certes, l'utilisation d'une icône graphique dans le cadre d'une identité augmente la flexibilité de la marque pour une utilisation sur les appareils mobiles.
Avancer
Cela signifie-t-il que tous les logos finiront par être de simples icônes plates ou des polices de caractères plates sans empattement ? Je ne pense pas. Cependant, on ne peut pas nier l'influence de la conception Web réactive sur l'image de marque et il sera intéressant de voir jusqu'où cela va.
La vision historiquement sacrée selon laquelle le logo d'une entreprise est une forme rigide qui ne doit jamais changer cède la place à un nouveau type de liberté de marque, où les logos réagissent et varient. Des formats horizontaux aux empilés verticalement, des mots-symboles aux icônes simples, même en changeant les couleurs pour s'adapter aux arrière-plans d'écran sombres et clairs.
On pourrait soutenir que l'examen de l'orientation de l'image de marque de l'industrie technologique n'est pas pertinent, par exemple, pour un cabinet d'avocats ou un restaurant. Cependant, toutes les industries finiront par se retrouver dans la conception Web réactive d'une manière ou d'une autre et seront affectées par la montée en puissance des appareils mobiles. Certaines entreprises peuvent se demander pourquoi cela ne semble pas fonctionner aussi bien pour leur marque que pour Twitter ou Pinterest.
Ceux qui comprennent le principe de conception de la simplicité et adoptent cette approche flexible de leur image de marque répondront mieux dans ce nouveau média. À tout le moins, la façon dont une marque apparaît lorsqu'elle est réduite sur un appareil mobile deviendra un test de base pour tout concepteur de logo ou projet de marque.
Les concepteurs de logos doivent aider à éduquer les clients à adopter cette nouvelle approche flexible, où les logos peuvent être optimisés dans une conception Web réactive tout en maintenant la cohérence de la marque. Sinon, nous verrons davantage de créateurs de sites Web prendre sur eux de modifier un logo problématique à la volée pour l'adapter à leur projet individuel. Pas une solution idéale pour personne.
Gardez un œil sur notre prochain guide pratique sur la conception de logo réactif.