Ce que tu dois prendre en compte lors de la conception d'un logo pour un site web

La conception de logos pour les sites web suit des règles très différentes de celles qui s'appliquent à l'impression ou aux autres communications. Les exigences en matière de logos et de signatures ont évolué. Nous te montrons les directives et les outils pour créer ton logo web.

Conception de logos pour l'impression et le web

Entre le design web et le design graphique, il y a une frontière très perméable. Le design graphique se concentre souvent sur l'impression, on y conçoit des équipements commerciaux, des affiches, des annonces et des logos. Dans le design web, en revanche, on conçoit des sites web, des newsletters, des bannières et bien sûr des logos.

Certains mélangent les deux domaines d'activité, ils proposent un design pour l'impression et le web. Le client final ne sait pas qui fait quoi et ne devrait peut-être pas faire quoi. Dans ce cas, les designers graphiques, qui sont plus à l'aise dans l'impression, créent des designs pour les sites web - et mettent des logos imprimés sur le web. A l'inverse, il est plutôt rare que les webdesigners développent des équipements commerciaux complets.

Il devrait être évident pour toute personne ayant un "œil graphique" ou une profession graphique qu'un logo sur un site web a des exigences différentes de celles d'un logo sur du papier à lettres ou sur un bâtiment d'entreprise.

Avec l'avènement des smartphones et de l'Internet mobile, les exigences en matière de logos et de sigles (ce sont de petits graphiques que l'on peut utiliser pour les logos) sur le Web ont encore changé et se sont concrétisées - mais elles se sont aussi durcies. Finalement, ce n'est pas si compliqué que ça. Et pourtant, il faut beaucoup d'expérience et d'aplomb pour développer un bon logo pour un site web.

3 Directives pour la création d'un logo

Il y a trois points primordiaux que tu peux prendre en compte lors de la conception de ton logo :

• Format horizontal: le logo apparaît en haut à gauche, c'est ce que les utilisateurs attendent. Parfois, il est aussi autorisé au milieu du site web. Mais pour économiser un espace précieux et attirer l'attention des utilisateurs sur l'essentiel, il est judicieux de tenir compte des habitudes visuelles générales des gens - avec un logo en format paysage en haut à gauche.
• Des structures claires: il est essentiel de prendre en compte la taille du logo sur un smartphone ou une tablette. Mais de nombreux ordinateurs de bureau et portables ont soit une très haute résolution, donc beaucoup d'espace, soit une diagonale d'image plutôt petite. Dans les deux cas, le logo peut paraître assez petit. Mais il doit aussi bien fonctionner dans les petites tailles.
• Pas de revendications: Beaucoup ressentent la tendance parfois irrésistible de placer un claim sous le logo. Du texte dans l'image, donc. Cela n'a pas beaucoup de sens. Non seulement c'est une question de place, mais en plus c'est presque illisible sur les smartphones. Sans compter que le texte précieux est exclu de l'indexation Google (SEO).

Je suis conscient que ces trois "règles" simples pour créer un bon logo peuvent être discutées. Car bien sûr, on trouve quelques contre-exemples ou des marques qui ont (veulent avoir) plus ou moins leurs propres règles. Mais il s'agit alors de marques très particulières, qui ont du succès - et les exceptions confirment ici aussi la règle.

Mais qu'est-ce qui rend les logos cools ? Pour cela, le mieux est de regarder les logos et/ou les sigles des grandes entreprises à succès. Les logos les plus géniaux que je connaisse sont ceux de Daimler (l'étoile Mercedes), Apple (avec la pomme), VW, BBC ou le M de McDonalds. Bien sûr, il y a encore beaucoup d'autres exemples. Et la plupart d'entre eux datent d'une époque où Internet n'existait pas. Cependant, les logos évoluent au fil du temps, tout comme les marques et les entreprises.

L'idéal est d'avoir des logos adaptés aux différents formats de sortie. Les logos préférés que nous venons de mentionner en sont également des exemples éclatants. Ils fonctionnent partout et sont adaptés aux différents médias et à leurs exigences spécifiques. Logique : un en-tête de lettre a besoin de quelque chose de différent qu'une enseigne lumineuse sur une maison, et un site web a d'autres conditions qu'une carte de visite.

Signet et marque verbale sur le net

Ce billet n'est pas un atelier complet sur la façon de créer un logo parfait. Il y a certainement plus à faire que de lire un billet de blog. Mais il devrait vous aider à mieux comprendre la question du logo sur votre site web - et, de ce fait, à trouver des solutions plus efficaces.

Juste un bref résumé : Qu'est-ce qu'un logo ? Selon Wikipedia :

"Un logo est un signe graphique qui représente un sujet spécifique. Il peut s'agir d'une entreprise, d'une organisation, d'un particulier ou d'un produit".

Jusqu'ici, tout va bien. Un logo peut être une marque verbale, comme Coca Cola, Google ou Acer par exemple. Il peut s'agir d'un signet comme Playboy, Shell et Mercedes. Mais la plupart du temps, les logos sont composés d'une marque verbale et d'un signet. Dans les exemples de sigles ci-dessus, il y a toujours une variante avec et sans la marque verbale.

C'est par exemple le cas de McDonalds avec son M distinctif que tout le monde connaît. Le logo McDonalds existe avec l'écriture du nom et avec la revendication (I'm lovin' it), mais le M est toujours présent. Sur le site web de McDonald' s, pour les raisons mentionnées ci-dessus, la seule chose que l'on trouve en haut à gauche dans la navigation est ce M - et la navigation se rétracte lorsque l'on fait défiler la page. Seul le M est encore là à un moment donné. Je trouve cela habile et peu encombrant, car le plus important est toujours visible : le logo, le "M".

Regardons le logo sur le site web du WWF, pour prendre un exemple dans le domaine plus politiquement correct. Le célèbre panda, qui pourrait se suffire à lui-même, est placé au-dessus des lettres WWF, l'abréviation du World Wildlife Fund. Je trouve le site assez réussi (d'ailleurs TYPO3), mais on renonce à épingler la navigation principale. Celle-ci est habilement résolue. Elle prend certes un peu de place, mais contient tout l'essentiel.

Grâce à la technologie du méga menu, le deuxième niveau de la navigation montre tout ce qu'il y a à voir sur le site. Lorsque l'on passe la souris sur le méga menu, seul le panda reste visible. C'est un logo vertical, mais sa réalisation est impeccable. Ce logo aussi vient d'une époque où les sites web n'existaient pas encore. Je suis sûr qu'aujourd'hui, le WWF ferait créer un autre logo, en format paysage.

Exemples de sites web avec WordPress

Un autre site fascinant qui nous sert d'exemple est VOGUE America. Je trouve la réalisation cohérente et adaptée à la marque. Mais plutôt faible dans la navigation fixe après le défilement. Car le grand logotype au milieu disparaît et apparaît en haut à gauche dans Klein, là où nous l'attendons. C'est un défi général pour les marques verbales qui doivent être réduites sur le site web. Les bords "s'effilochent" et deviennent flous.

Le même phénomène peut être observé sur SPIEGEL Online (SPON). Pour les deux, l'excuse est que les logos ont été créés avant l'ère d'Internet. La même chose que pour VOGUE est visible dans le magazine américain TIME, qui fonctionne sous WordPress.

Il est un peu différent à la NASA ouverte, également propulsée par WordPress et avec un logotype. Cependant, entouré d'un élément graphique fin. Ce logo - cette fois dans le cadre d'une navigation fixe - est suffisamment grand pour montrer l'élément d'une orbite encore reconnaissable. Je trouve que c'est une réussite, même si vous pouvez voir l'effilochage des lettres ici aussi. C'est pourquoi je ne suis pas un fan des mots-symboles purs, je préfère les signets avec des abréviations.

BBC AMERICA est également un site WordPress. Elle a brillamment résolu le design ainsi que le logo. Oui, je suis fan de la BBC. Mais je trouve aussi le logo génial et mémorable - un exemple réussi de design de logo au format horizontal. D'ailleurs, ce site renonce aussi à une navigation fixe après le défilement - ici, le contenu est au premier plan.

Créer (avoir créé) un bon logo pour le web

Vous pouvez donc maintenant voir très clairement que les logos ne sont pas de la sorcellerie et sont parfois très simples. Ils tirent leur génie de la simplicité et de la cohérence qui permettent de refléter une marque indépendante. Un bon logo est donc très facile à réaliser, mais pas facile à imaginer ou à trouver.

Design graphique ou pas : tu peux créer un bon logo avec ton œil de graphiste et quelques règles simples. Bien sûr : la manière la plus simple serait de faire appel à quelqu'un du design graphique. C'est la manière la plus sûre et la plus qualitative - les exceptions confirment la règle. Mais c'est aussi l'option la plus chère.

Sur le net, nous nous en doutons, il existe des portails qui délocalisent ces services à l'étranger. Tu peux ainsi acheter un bon design graphique dans des pays où le salaire horaire est moins élevé et la qualité élevée. Par exemple d'Ukraine, d'Inde, d'Indonésie, d'Amérique du Sud, mais aussi des États-Unis, etc. Les inconvénients sont la situation juridique en cas de litige, la communication et donc parfois le vote.

Comme j'ai moi-même un œil graphique et que je veux faire autant de choses que possible moi-même, j'ai pris une autre voie pour mon logo sur PUBLIER EN RÉSEAU. J'ai cherché et trouvé un sigle chez Envato. Je pensais que j'arriverais à construire un logotype. Car le logo qui me plaisait n'avait pas le bon contenu. Un logo doit absolument correspondre à l'objet et au caractère de ton entreprise.

J'ai donc trouvé un signe @ que je voulais utiliser, mais avec un "P" dans le cercle @. J'ai d'abord essayé de le faire moi-même - mais je n'ai pas assez d'expérience avec les vecteurs dans Illustrator. J'ai donc demandé au développeur du sigle via Envato s'il pouvait le faire pour moi - et à quel prix. C'était possible et le coût était tout à fait raisonnable. Maintenant, j'ai ce "P" avec la marque verbale en format paysage :

Conception de logo : outils de recherche

C'est exactement ce que je fais pour mes clients. Si un design de logo est souhaité, je propose d'abord de choisir un logo correspondant à l'idée commerciale et au nom. Pour cela, je n'utilise pas seulement Envato ou Envato Elements. Je cherche aussi des logos sur Google, ou sur Iconfinder, iStockPhoto et d'autres fournisseurs de petits graphiques. Ensuite, je les présente, nous en choisissons un ou deux ensemble et je construis un logo au format paysage.

Fais attention aux droits d'auteur, ton logo ne doit pas être trop proche d'un logo existant. Même si tu achètes des sigles, tu dois (faire) vérifier la licence : Est-elle valable sans restriction de temps et d'espace pour ton objectif professionnel ? Et aussi pour l'utilisation en tant que logo ?

Les bons logos sont simples et expriment autant que possible l'idée commerciale. Ils fonctionnent sur le site web parce qu'ils sont au format paysage. Ils peuvent être présentés en noir et blanc. Et ils peuvent être représentés sur un papier à lettres ou une carte de visite - légèrement modifiés et adaptés, peut-être avec un slogan en dessous.

Résumé : Conception de logos pour les sites web

Créer un bon logo est relativement simple. Tu as besoin d'un concept clair et d'une excellente idée. Tu trouveras de l'inspiration auprès d'autres marques et sites web à succès. Parler avec d'autres personnes peut aussi t'aider à trouver une idée simple et brillante. Mais honnêtement, il n'y a pas besoin d'être brillant, un design raisonnable peut suffire, un bon design serait déjà plus que suffisant. Tu peux chercher des logos ou des sigles sur des plateformes graphiques.

Bien sûr, les signes plus ou moins abstraits doivent avoir un rapport avec le métier qu'ils représentent. Mais il peut aussi y avoir des combinaisons amusantes. Ou alors des déductions cohérentes, par exemple si l'on pense à la fameuse pomme d'Apple. Qui aurait pensé à prendre une pomme avec une bouchée manquante ? Mais ce petit "perturbateur" amusant rend ce logo si génial.

J'espère que tu as maintenant quelques points de repère pour créer un super prochain logo pour le World Wide Web. Je te souhaite bonne chance et beaucoup de plaisir.