Ce que vous devez prendre en compte lors de la conception de logos pour des sites web

Mark Max Henckel Dernière mise à jour le 21.10.2020
9 Min.
Logo Webdesign
Dernière mise à jour le 21.10.2020

Les logos des sites web suivent des règles complètement différentes de celles qui s'appliquent à la communication imprimée ou autre. Les exigences en matière de logos et de signets ont augmenté. Nous vous montrons les lignes directrices et les outils pour la création de votre logo web.

Il existe une frontière très perméable entre la conception web et la conception graphique. Les graphistes se concentrent souvent sur l'impression, la conception de papeterie commerciale, d'affiches, de publicités et de logos. Les concepteurs de sites web, quant à eux, conçoivent des sites web, newsletter, des bannières et, bien sûr, des logos. Certains combinent les deux secteurs d'activité, offrant des services de conception pour l'imprimé ET le web. Pour le client final, il ne s'agit pas de savoir qui peut faire quoi et peut-être aussi qui ne doit pas le faire. Ensuite, les graphistes, qui sont plus à l'aise dans le domaine de l'impression, créent des designs pour les sites web - et mettent des logos imprimés sur le web. En revanche, il est plutôt l'exception que les concepteurs de sites web développent des designs d'entreprise complets.

Il devrait être évident pour toute personne ayant un "œil graphique" ou une profession de graphiste qu'un logo sur un site web a des exigences différentes de celles d'un logo sur une papeterie ou sur un bâtiment d'entreprise. Avec l'avènement des smartphones et de l'internet mobile, les exigences relatives aux logos et aux signes (il s'agit de petits graphiques pouvant être utilisés pour les logos) sur le web ont une fois de plus changé et sont devenues plus spécifiques - mais aussi plus strictes. En fin de compte, ce n'est pas si compliqué. Et pourtant, il faut une certaine expérience et de l'aplomb pour développer un bon logo pour un site web.

Trois lignes directrices pour la création d'un logo web

Il y a trois points essentiels que vous pouvez prendre en compte lors de la conception d'un logo :

  1. Format paysage : le logo apparaît en haut à gauche, c'est ce qu'attendent les utilisateurs. 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 logique de tenir compte des habitudes générales de visionnage des gens - avec un logo en format paysage en haut à gauche.
  2. Desstructures claires : il est très important 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 d'espace, soit une diagonale d'image plutôt petite. Dans les deux cas, le logo peut apparaître très petit. Cependant, il doit encore bien fonctionner dans les petites tailles.
  3. Aucune revendication : De nombreux clients, mais aussi des designers, ressentent l'envie parfois irrésistible de placer une revendication sous le logo. Texte dans l'image. Cela n'a pas beaucoup de sens. Non seulement c'est une question d'espace, mais il est aussi presque impossible de lire sur les smartphones. Sans compter que cela exclut des textes précieux de l'indexation de Google (SEO).

Je me rends compte que ces trois "règles" simples pour la création d'un logo sont discutables. Car bien sûr, vous pouvez trouver des contre-exemples ou des marques qui ont plus ou moins (envie de) avoir leurs propres règles. Mais il s'agit alors de marques très spéciales et à succès - et les exceptions prouvent ici aussi la règle.

Mais qu'est-ce qui fait le succès d'un logo ? La meilleure façon de le savoir est de regarder les logos et/ou les enseignes de grandes entreprises prospères. Les logos les plus brillants que je connaisse sont ceux de Daimler (la star de Mercedes), Apple (avec la pomme), VW, BBC ou le M de McDonalds. Bien sûr, il y a beaucoup d'autres exemples. Et la plupart d'entre eux datent de l'époque où il n'y avait pas d'internet. Cependant, les logos évoluent avec le temps, tout comme les marques et les entreprises.

weblogos

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'à présent, tout va bien. Un logo peut être une marque verbale, telle que COCA COLA, GOOGLE ou ACER. Il peut s'agir d'un signet, tel que PLAYBOY, SHELL et MERCEDES. Mais la plupart du temps, les logos sont constitués d'une marque verbale ET d'un signet. Dans les exemples de signets ci-dessus, il y a toujours une variante avec et sans la marque verbale.

Cela s'applique également, par exemple, à McDonalds avec le M distinctif que tout le monde connaît. Le logo McDonalds est disponible avec le nom et avec la mention (I'm lovin' it), mais le M est toujours là. Sur le site de McDonalds, pour les raisons mentionnées ci-dessus, ils ont résolu le problème de telle sorte que vous ne trouverez ce M qu'en haut à gauche de la navigation - et la navigation se déplace au fur et à mesure que vous faites défiler les pages. Seul le M est encore là à un moment donné. Je trouve cela intelligent et peu encombrant, car le plus important est toujours visible : le signet, le "M".

Examinons le logo du site web du WWF, pour prendre un exemple du domaine plus politiquement correct. Le célèbre panda, qui pourrait aussi se tenir debout tout seul, est placé au-dessus des lettres WWF, l'abréviation du Fonds mondial pour la nature. Je pense que le site est assez bien fait (TYPO3, au fait), mais ils s'abstiennent de clouer la navigation principale. C'est une question intelligemment résolue. Il prend un peu de place, mais contient l'essentiel.

Grâce à la technologie des méga-menus, vous montrez tout ce qu'il y a à voir sur la page au deuxième niveau de la navigation. Si vous appelez le méga menu en passant la souris dessus, seul le panda reste visible. C'est un logo en forme de portrait, mais sa mise en œuvre est très bonne. Ce logo provient également d'une époque où il n'y avait pas de sites web. Je suis sûr que le WWF aurait créé un logo différent aujourd'hui - un en format paysage.

Exemples avec le logo en format paysage sur le site web

RAIDBOXES est bien sûr un exemple. Une marque verbale, en format paysage bien sûr - sinon vous ne pourriez pas la lire. J'appelle ce logo un succès. Parce qu'il a une grande valeur de reconnaissance, ce qui est l'essence même d'un bon logo. En outre, il fonctionne également en petit sur les appareils mobiles. C'est le cas de nombreux sites sur l'internet moderne, tels que Google, Facebook, Amazon, Microsoft, YouTube et bien d'autres encore.

LogoRAIDBOXES
Le logo de RAIDBOXES

Nous pouvons dire la même chose WordPress .org sur le site. Il existe des spécifications pour l'affichage du logo WordPress qui sont visibles par tous : un guide de style. Le logo comporte le W comme signet et la marque verbale en format paysage, mais aussi en position verticale. Sur le site web, le logo vertical est bien sûr omis. Pour de bonnes raisons, le logo avec signet n'est pas seulement représenté en paysage, mais aussi relativement grand au-dessus de la navigation. Ici aussi, le menu n'est pas fixe, ce qui ne nuit pas à la convivialité du site.

Exemples de pages avec WordPress

Un autre site web fascinant qui nous sert d'exemple est celui de VOGUE America. Je pense que la mise en œuvre est cohérente et appropriée pour la marque. Mais plutôt faible dans la navigation fixe après le défilement. Parce que le grand logotype du milieu disparaît et apparaît dans Klein en haut à gauche, là où nous l'attendons. Il s'agit d'un défi général avec des mots-symboles qui doivent être réduits sur le site web. Les bords "s'effilochent" et deviennent flous. Le même phénomène peut être observé avec SPIEGEL Online (SPON). Dans les deux cas, l'excuse peut être que les logos ont été créés avant l'ère d'Internet. La même chose qu'avec VOGUE peut également être vue avec le magazine américain TIME, qui est disponible sur 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 fait un travail remarquable tant au niveau du design que du logo. Oui, je suis un fan de la BBC. Mais je trouve aussi le logo brillant et mémorable - comme un exemple réussi de logos en format paysage. D'ailleurs, ce site web se passe également de navigation fixe après avoir défilé - 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.

Conception graphique ou non : vous pouvez créer un bon logo pour vous et vos clients avec votre œil avisé en matière de graphisme et en suivant quelques règles simples. Bien sûr : le moyen le plus simple serait d'engager un graphiste. C'est le moyen le plus sûr et le plus sûr de garantir la meilleure qualité - les exceptions prouvent la règle. Mais c'est aussi l'option la plus coûteuse. Sur le web, nous l'avons deviné, il existe des portails qui externalisent ces services à l'étranger. Vous pouvez donc acheter de la bonne conception graphique dans des pays où le salaire horaire est plus bas, tout en bénéficiant d'une 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 coordination.

Comme j'ai moi-même un œil graphique et que je veux en faire le plus possible moi-même, j'ai adopté une approche différente avec mon logo sur PUBLISHING ON THE NET. J'ai cherché et trouvé un signet à Envato. Je pensais que je réussirais à lui construire un logotype. Parce que le signet que j'aimais avait le mauvais contenu. Un logo doit absolument correspondre au sujet et au caractère de votre entreprise. J'ai donc trouvé un signe @ que je voulais utiliser, mais avec un "P" dans le cercle @. Au début, j'ai essayé moi-même - mais je n'ai pas assez d'expérience avec les vecteurs dans Illustrator. Alors, sans plus attendre, j'ai demandé au développeur du signe via Envato s'il pouvait le faire pour moi - et à quel prix. C'était possible et le coût était absolument raisonnable. Maintenant, j'ai ce "P" avec le mot "marque" en format paysage :

Exemple de logo en ligne
Le logo de PUBLIZIEREN IM NETZ

Outils de recherche

C'est exactement la même approche que j'adopte pour mes clients. Si vous souhaitez concevoir un logo, je vous suggère de choisir d'abord un signet correspondant à l'idée et au nom de l'entreprise. Je n'utilise pas seulement Envato ou Envato Elements pour le faire. Je cherche également des logos sur Google, ou sur Iconfinder, iStockPhoto et d'autres fournisseurs de petits graphiques. Ensuite, je les montre au client, j'en choisis un ou deux avec lui et je construis un logo en format paysage.

Important : Faites attention aux droits d'auteur, votre logo ne doit pas s'approcher trop près d'un logo existant. Même si vous achetez des vignettes, vous devez vérifier la licence : est-elle valable pour votre activité professionnelle sans restrictions temporelles et spatiales ? Et aussi pour l'utilisation comme logo ?

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

Résumé

La création d'un bon logo est relativement facile. Il faut un concept clair et une très bonne idée. Vous pouvez vous inspirer d'autres marques et sites web à succès. Parler à vos collègues et amis peut également vous aider à trouver cette idée simple et brillante. Mais soyons honnêtes : il n'est pas nécessaire qu'il soit brillant, l'adéquat peut être suffisant, le bon serait plus que suffisant. Vous pouvez rechercher des logos ou des signets sur des plateformes graphiques.

Bien entendu, les personnages plus ou moins abstraits doivent avoir un rapport avec la profession qu'ils représentent. Ici aussi, il peut y avoir de drôles de combinaisons. Ou des dérivations cohérentes, par exemple quand on pense à la célèbre pomme de POMME. Qui aurait pensé prendre une pomme dont la bouchée manquait. Mais ce petit "perturbateur" amusant rend ce logo si ingénieux.

J'espère que vous avez maintenant quelques indices pour créer un super prochain logo pour le World Wide Web. Je vous souhaite bonne chance et amusez-vous bien.

Images : Jeff Sheldon, Rohan Vijay

Vous avez des questions sur la conception de logos pour les sites web ? N'hésitez pas à utiliser la fonction de commentaire. Vous voulez être informé des nouveaux articles sur la conception de sites web et le marketing en ligne ? Alors suivez-nous sur Twitter, Facebook ou via notre newsletter.

Mark Max Henckel - Webdesigner de Hambourg. Concepteur de médias (imprimé) formé, travaillant comme concepteur de sites web depuis 2000. D'abord chez mobile.de, depuis 2003 en tant qu'indépendant. Depuis 2005, blogueur sur différents sujets sur différents blogs. En tant que pigiste de 2007 et 2008 chez SPIEGEL ONLINE, impliqué dans le lancement de einestages.de à l'interface entre la programmation et l'édition. Plus tard à la société de marketing SPIEGEL Quality Channel (Spiegel QC/Spiegel Media). Travaille en free-lance pour libri.de et diverses agences graphiques et informatiques. Depuis 2008, spécialisée dans WordPress .

Articles connexes

Commentaires sur cet article

Laisse un commentaire

Ton adresse électronique ne sera pas publiée. Les champs obligatoires sont marqués d'un *.