Ce que vous devez prendre en considération lors de la conception d'un logo pour un site web

Mark Max Henckel Mis à 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 directives et les outils pour la création de votre logo web.

Il existe une frontière très perméable entre la conception de sites web et le graphisme. Les graphistes se concentrent souvent sur l'impression, la conception d'équipements commerciaux, d'affiches, de publicités et de logos. Les concepteurs de sites web, newsletterquant à eux, conçoivent des sites web, des bannières et, bien sûr, des logos. Certains mélangent les deux secteurs d'activité, ils proposent la conception pour l'imprimé ET le web. Pour le client final, il n'est pas possible de savoir qui peut faire quoi et qui ne devrait peut-être pas le faire. Les graphistes, qui sont plus à l'aise dans le domaine de l'impression, créent ensuite des designs pour des sites web - et mettent des logos imprimés sur le web. À l'inverse, il est plutôt l'exception que les concepteurs de sites web développent des designs d'entreprise entiers.

Toute personne ayant un "œil graphique" ou une profession graphique devrait comprendre qu'un logo sur un site web a des exigences différentes de celles d'un logo sur du papier à en-tête 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 signes (il s'agit de petits graphiques pouvant être utilisés pour les logos) sur le web ont changé et sont devenues plus concrètes - mais aussi plus strictes. Au final, ce n'est pas si compliqué. Et pourtant, il faut beaucoup d'expérience et d'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 principaux que vous pouvez prendre en considération lors de la conception de votre logo :

  1. Format paysage : Le logo apparaît dans le coin supérieur gauche, comme l'attendent les utilisateurs. Parfois, elle est également autorisée au milieu du site web. Mais pour économiser un espace précieux et attirer l'attention de l'utilisateur 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. Des structures claires : il est très important de tenir compte de la taille du logo sur un smartphone ou une tablette. Mais aussi de nombreux ordinateurs de bureau et portables ont soit une très haute résolution, donc beaucoup d'espace, soit une diagonale d'écran plutôt petite. Dans les deux cas, le logo peut apparaître assez petit. Mais il doit encore bien fonctionner, même dans les petites dimensions.
  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. Ce n'est pas seulement une question d'espace, mais aussi une question de lisibilité sur les smartphones. Outre le fait que cela signifie que le précieux texte de Indexation Google (SEO) est exclue.

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

Mais qu'est-ce qui fait le succès d'un logo ? La meilleure façon d'y parvenir est de regarder les logos et/ou les enseignes des grandes entreprises prospères. Les logos les plus brillants que je connaisse sont ceux de Daimler (la star 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 proviennent d'une époque où il n'y avait pas d'Internet. Les logos, cependant, évoluent avec le temps, tout comme les marques et les entreprises.

weblogos

Idéalement, il existe des logos 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 doit être différent d'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

Cet article n'est pas un atelier complet pour la création d'un logo parfait. Il y a certainement plus que la lecture d'un billet de blog. Mais il devrait vous aider à mieux comprendre le problème que pose le logo sur votre site web - et à y 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'une personne privée 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 comme PLAYBOY, SHELL et MERCEDES. Mais la plupart des 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, aux McDonalds avec le M distinctif que tout le monde connaît. Le Logo McDonalds existe avec l'écriture du nom et avec la revendication (je l'aime), mais le M est toujours là. Sur la Site internet de McDonalds pour les raisons mentionnées ci-dessus, il a été résolu de telle sorte que vous ne trouverez que ce M en haut à gauche de la navigation - et la navigation se rétractera lors du défilement. Seul le M est encore là un jour. Je trouve cela intelligent et peu encombrant, car le plus important est toujours visible : le signet, le "M".

Regardons le logo sur le Site du WWF pour prendre un exemple dans le domaine plus politiquement correct. Le célèbre panda, qui pourrait aussi se tenir debout tout seul, est placé au-dessus de la lettre WWF, l'abréviation du Fonds mondial pour la nature. Je pense que le site web est assez bon (TYPO3, au fait), mais on ne cloue pas la navigation principale. C'est une question intelligemment résolue. Bien qu'il ait besoin d'un peu d'espace, il contient tout l'essentiel.

Grâce à la technologie des méga-menus, la navigation au deuxième niveau montre tout ce qui peut être vu sur le site. Si vous appelez le méga-menu en passant la souris dessus, seul le panda reste visible. Bien qu'il s'agisse d'un logo vertical, 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. Un mot-symbole, en format paysage bien sûr - sinon, vous ne pouvez pas le 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 à Klein sur les appareils mobiles. Cela est vrai pour de nombreuses pages de l'internet moderne, comme Google, Facebook, Amazon, Microsoft, YouTube et bien d'autres encore.

RAIDBOXES  logo
Le logo de RAIDBOXES

Nous pouvons faire la même chose via la page wordpress.org dire. Il y en a pour tout le monde des spécifications compréhensibles pour l'affichage du WordPress logo : un guide de style. Le logo comporte le W comme signet et la marque verbale en format paysage, mais aussi sur le bord. Sur le site web, le logo vertical n'est bien sûr pas utilisé. Pour de bonnes raisons, le logo avec signet n'est pas seulement affiché en format paysage, mais aussi relativement grand au-dessus de la navigation. Ici aussi, le menu n'est pas fixé, ce que le Utilisabilité le site web n'est pas interrompu.

Exemples de pages avec WordPress

Un autre site web fascinant qui nous sert d'exemple est VOGUE Amérique. Je trouve la mise en œuvre cohérente et appropriée à la marque. Mais plutôt faible dans la navigation fixe après le défilement. Car le grand logotype du milieu disparaît et apparaît en haut à gauche à Klein, là où on l'attend. C'est un défi général avec les marques verbales qui doivent être réduites sur le site web. Les frontières s'effilochent et deviennent floues. À l'adresse suivante : MIRROR en ligne (SPON) le même phénomène peut être observé. Pour les deux, l'excuse peut être que les logos ont été créés avant l'ère Internet. Nous voyons la même chose qu'avec VOGUE dans le Le magazine TIMEqui est en train de coulerWordPress .

La situation est quelque peu différente avec ouvrir la NASA également de WordPress conduit et aussi avec un logotype. Mais entouré d'un élément graphique fin. Ce logo - cette fois dans un système de navigation fixe - est suffisamment grand pour montrer l'élément d'une orbite encore reconnaissable. Je pense que c'est une réussite, même si vous pouvez voir l'effilochage des lettres ici aussi. Par conséquent, je ne suis pas un ami des marques verbales pures, je préfère les signets avec des abréviations.

BBC AMERIQUE est également une WordPress -page. Elle a brillamment résolu le design ainsi que le logo. Oui, je suis un fan de la BBC. Mais je trouve aussi le logo ingénieux et mémorable - comme les exemples réussis de logos en format paysage. D'ailleurs, ce site web dispense également d'une navigation fixe après le défilement - ici, le contenu est au premier plan.

Créer un bon logo pour le web (qu'il soit)

Vous pouvez maintenant voir très clairement que les logos ne sont pas de la sorcellerie et sont parfois très simples. Ils tirent leur ingéniosité de la simplicité et de la cohérence du reflet d'une marque indépendante. Un bon logo est donc très facile à produire, mais pas facile à trouver.

Conception graphique ou non : avec votre œil formé au graphisme et quelques règles simples, vous pouvez créer un bon logo pour vous et vos clients. Bien sûr : le moyen le plus simple serait d'engager un graphiste. Bien que ce soit la manière la plus sûre et la plus garantie, c'est aussi la manière la plus qualitative - les exceptions prouvent la règle. Mais c'est aussi la variante la plus chère. Sur le net, nous soupçonnons qu'il existe des portails qui externalisent ces services à l'étranger. Ainsi, vous pouvez acheter de la bonne conception graphique dans des pays où le salaire horaire est moins élevé, tout en bénéficiant d'une qualité élevée. Par exemple en provenance 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 aussi le vote.

Comme j'ai moi-même un œil graphique et que je veux faire le plus possible par moi-même, j'ai conçu mon logo sur PUBLICATION SUR LE NET a pris un chemin différent. J'ai cherché et trouvé un signe à Envato. J'ai pensé que je pourrais lui construire un logotype. Parce que le signet que j'aimais n'avait pas le bon contenu. Il est essentiel qu'un logo corresponde à l'objet 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 j'ai trop peu d'expérience avec les vecteurs dans Illustrator. J'ai donc rapidement demandé au développeur du signet via Envato s'il pouvait faire cela 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 PUBLIER SUR LE NET

Outils pour la recherche

C'est exactement comme cela que je procède pour mes clients. Si vous souhaitez concevoir un logo, je vous suggère de choisir d'abord un signet qui correspond à l'idée et au nom de l'entreprise. Je n'utilise pas seulement Envato ou Éléments de l'Envato. Je regarde aussi sur Google pour trouver des logos, ou sur Iconfinder, iStockPhoto et d'autres fournisseurs de petits graphiques. Ensuite, je les montre au client, j'en sélectionne 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 signets, vous devez faire vérifier la licence : s'applique-t-elle à votre objectif professionnel sans aucune restriction en termes de temps et d'espace ? Et aussi pour l'utilisation comme logo ?

Les bons logos sont simples et expriment si 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 simple. Il faut un concept clair et une très bonne idée. L'inspiration vient d'autres marques et sites web à succès. Parler à vos collègues et amis peut également vous aider à trouver une idée simple et brillante. Mais soyons honnêtes : il n'est pas nécessaire que ce soit brillant, l'approprié peut suffire, le bien serait plus que suffisant. Vous pouvez rechercher des logos ou des signes sur des plateformes graphiques.

Bien entendu, les signes plus ou moins abstraits doivent avoir un rapport avec la profession qu'ils représentent. Là aussi, il peut y avoir de drôles de combinaisons. Ou des dérivations cohérentes, par exemple quand on pense à la fameuse pomme de POMME. Qui aurait pensé prendre une pomme dont il manque une bouchée Mais ce petit "trouble-fête" amusant rend ce logo si ingénieux.

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

Des photos : 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 souhaitez être informé des nouvelles contributions à la conception de sites web et au Marketing en ligne ? Alors suivez-nous Twitter, Facebook ou sur notre Newsletter.

Mark Max Henckel - Web designer 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, il blogue sur différents sujets sur ses propres blogs. En tant que freelance de 2007 et 2008 chez SPIEGEL ONLINE, il a participé au lancement de eintages.de à l'interface entre la programmation et la rédaction. Plus tard chez le distributeur SPIEGEL Quality Channel (Spiegel QC/Spiegel Media). Travaille en free-lance pour libri.de et diverses agences graphiques et informatiques. Depuis 2008, il s'est spécialisé dans le domaine WordPress .

Articles connexes

Commentaires sur cet article

Ecrire un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués par * .