Logo Webdesign

Ce à quoi tu dois faire attention 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 à d'autres formes de communication. Les exigences en matière de logos et de signatures ont augmenté. Nous te présentons des directives et des outils pour la création de ton logo web.

Conception de logos pour l'impression et le web

Il existe une frontière très perméable entre le design web et le design graphique. Les graphistes se concentrent souvent sur l'impression, ils conçoivent des équipements commerciaux, des affiches, des annonces et des logos. Les webdesigners, en revanche, conçoivent des sites web, des newsletters, des bannières et bien sûr des logos.

Certains mélangent les deux domaines d'activité, ils proposent du design pour l'impression et le web. Pour le client final, il n'est pas possible de savoir qui fait quoi et qui ne devrait peut-être pas faire quoi. Dans ce cas, les graphistes qui sont plutôt à 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 exceptionnel que des webdesigners développent des équipements commerciaux complets.

Il devrait être évident pour toute personne ayant un "œil graphique" ou exerçant 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.

L'avènement des smartphones et de l'Internet mobile a encore modifié et concrétisé - mais aussi renforcé - les exigences en matière de logos et de signatures (il s'agit de petits graphiques que l'on peut utiliser pour les logos) sur le web. Finalement, ce n'est pas si compliqué que ça. Et pourtant, il faut une certaine expérience et un certain 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 d'un logo :

  • Format horizontal: le logo apparaît en haut à gauche, c'est ce que les utilisateurs attendent. Parfois, il est également 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 tenir compte de 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 de place, soit une diagonale d'image plutôt petite. Dans les deux cas, le logo peut apparaître assez petit. Or, il doit pouvoir fonctionner correctement même dans des tailles réduites.
  • Pas de revendications: De nombreux clients, mais aussi des designers, ressentent une tendance parfois irrésistible à placer un slogan 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 à peine lisible sur les smartphones. Sans compter que cela exclut un texte précieux de l'indexation de Google (SEO).

Je suis conscient que l'on peut discuter de ces trois "règles" simples pour créer un bon logo. Car on trouve bien sûr quelques contre-exemples ou des marques qui ont (ou 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 le savoir, 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 entendu, il y a encore beaucoup d'autres exemples. Et la plupart d'entre eux datent d'une époque où Internet n'existait pas. Mais les logos évoluent au fil du temps, tout comme les marques et les entreprises.

weblogos design de logo
La conception de logos n'a jamais été aussi variée.

Idéalement, il existe des logos qui sont adaptés aux différents formats de sortie. Les logos favoris que nous venons de mentionner en sont également des exemples éloquents. Ils travaillent partout et sont adaptés aux médias respectifs avec leurs exigences spécifiques. Logique : un papier à en-tête a besoin d'autre chose qu'une enseigne au néon sur une maison, et un site web a des conditions différentes de celles d'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 individu ou d'un produit".

Jusqu'ici, tout va bien. Un logo peut être une marque verbale, comme Coca Cola, Google ou Acer. Il peut s'agir d'un sigle, comme pour 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 cités 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 caractéristique que tout le monde connaît. Le logo McDonalds existe avec l'écriture du nom et avec le slogan (I'm lovin' it), mais le M est toujours présent. Sur le site web de McDonalds, pour les raisons mentionnées ci-dessus, on a résolu le problème de telle sorte que l'on ne trouve que ce M en haut à gauche de la navigation - et que la navigation se rétracte lorsque l'on fait défiler la page. Seul le M est encore présent à 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 fameux 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 (TYPO3, soit dit en passant), mais on renonce à épingler la navigation principale. Celle-ci est habilement conçue. Elle prend certes un peu de place, mais contient tout l'essentiel.

Grâce à la technologie du méga menu, on affiche au deuxième niveau dans la navigation tout ce qu'il y a à voir sur le site web. Si l'on appelle le méga-menu en passant la souris, seul le panda reste visible. Il s'agit certes d'un logo vertical, mais sa réalisation est impeccable. Ce logo date lui aussi 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 horizontal.

"*" indique les champs obligatoires

Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Exemples avec logo en format paysage

Raidboxes est un exemple intéressant de design de logo. Une marque verbale, en format paysage bien sûr - sinon tu ne peux pas le lire. Je qualifie ce logo de réussi. En effet, il est très reconnaissable, ce qui est l'essence même d'un bon logo. De plus, il fonctionne aussi en Klein sur les terminaux mobiles. Cela vaut pour de très nombreux sites de l'Internet moderne, comme Google, Facebook, Amazon, Microsoft, YouTube et bien d'autres.

Raidboxes logo Conception du logo
Le logo de Raidboxes: conception du logo

Nous pouvons en dire autant de la page WordPress.org on peut dire. Il existe des directives visibles par tous pour la présentation du logo WordPress : un guide de style. Le logo comporte le W comme sigle et la marque verbale en format horizontal, mais aussi vertical. Sur le site web, on renonce bien entendu au logo vertical. Pour de bonnes raisons, le logo et le sigle ne sont pas seulement représentés horizontalement, mais aussi en relativement grand au-dessus de la navigation. Ici aussi, le menu n'est pas fixe, ce qui ne nuit pas à l'utilisabilité du site.

Notre relancement Raidboxes

Nouveau logo, nouveau site web, nouvelles couleurs - même nom. Nous fêtons notre relancement sur Raidboxes ! En collaboration avec notre agence partenaire 360Vier, nous avons repensé notre identité visuelle et donné un coup de jeune à notre site web.

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 scrolling. 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é chez SPIEGEL Online (SPON). Pour les deux, l'excuse est que les logos ont été créés avant l'ère d'Internet. Nous constatons la même chose que pour VOGUE 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 problème du design ainsi que du logo. Oui, je suis fan de la BBC. Mais je trouve en outre le logo génial et facile à retenir - un exemple réussi de design de logo en 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 pour toi et tes clients avec ton œil de graphiste et quelques règles simples. Bien sûr : la manière la plus simple serait de faire appel à un designer graphique. C'est certes la voie la plus sûre et la plus qualitative garantie - les exceptions confirment la règle. Mais c'est aussi la variante la plus chère.

Sur la toile, nous le devinons, 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 la concertation.

Comme je possède moi-même un œil graphique et que je veux faire le plus de choses possible moi-même, j'ai choisi une autre voie pour mon logo sur PUBLIER EN RÉSEAU. J'ai cherché et trouvé un logo chez Envato. Je pensais que je parviendrais à créer 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 rapidement demandé au développeur du signet, via Envato, s'il pouvait le faire pour moi - et à quel prix. C'était possible et le coût était tout à fait raisonnable. J'ai maintenant ce "P" avec la marque verbale en format paysage :

Exemple de logo en ligne
Le logo de PUBLIZIEREN IM NETZ

Conception de logos : Outils de recherche

C'est exactement ce que je fais pour mes clients. Lorsqu'ils souhaitent un logo, je leur propose d'abord de choisir un logo adapté à leur idée commerciale et à leur nom. Pour cela, je n'utilise pas seulement Envato ou Envato Elements. Je cherche également des logos sur Google, Iconfinder, iStockPhoto et d'autres fournisseurs de petits graphiques. Je les montre ensuite au client, j'en choisis un ou deux avec lui et je construis un logo en 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 logos, 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 en 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. Il te faut un concept clair et une excellente idée. Tu peux t'inspirer d'autres marques et sites web à succès. Des discussions avec tes collègues et tes amis peuvent également t'aider à trouver une idée simple et brillante. Mais soyons honnêtes : il n'est pas nécessaire d'être brillant, une idée raisonnable peut suffire, une bonne idée serait déjà plus que suffisante. Tu peux chercher des logos ou des signatures sur des plateformes graphiques.

Bien entendu, 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 lorsque nous pensons à 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.

Tes questions sur la conception du logo

Tu as des questions sur la conception de logos pour les sites web ? N'hésite pas à utiliser la fonction commentaire. Tu veux être informé(e) des nouveaux articles sur le design web et WordPress ? Alors suis-nous sur Twitter, Facebook ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.