{data.title}
Publié le {data.date} par {data.author}
`) qui correspond au premier titre de la page avec la balise title qui apparaît dans l’onglet du navigateur.  #### La balise alt Google n’est pas encore assez intelligent pour comprendre vos images. Heureusement vous pouvez l’aider en décrivant votre image grâce au **texte alternatif**. Ce texte, sous la forme d’une balise alt, permet également de remplacer l’image si celle-ci ne charge pas. Au delà de l’aspect SEO, elle est surtout utile pour les personnes malvoyantes utilisant un lecteur d’écran. C’est d’ailleurs pour ça qu’elle existe. Pour utiliser la balise, il suffit d’**ajouter l’attribut alt** dans les propriétés de l’image, comme ici : `
`
Sur les CMS, vous pouvez ajouter l’attribut alt directement depuis le back-office lorsque vous importez une image.
#### Les balises Hn
Les balises Hn permettent de **créer une** **hiérarchie des titres** avec H1 comme titre principal et H2, H3, Hn… comme sous-titres classées du plus au moins important.
Pour baliser un texte en Hn c’est très simple, prenons le H1 de cet article :
`La checklist SEO technique pour lancer un site web
` Attention, contrairement aux autres balises Hn, le H1 qui est le titre principal ne doit être utilisé qu’une seule fois. Pour comprendre le fonctionnement, on peut prendre comme exemple la hiérarchie de cet article :  Cette hiérarchie est primordiale pour avoir un **contenu clair et structuré** à la fois pour les utilisateurs, mais aussi pour les moteurs de recherche. C’est ce qui va leur permettre de **comprendre le contenu** de votre page pour le suggérer en résultat des recherches correspondant au besoin auquel vous répondez. Les balises Hn étant identifiées comme les mots les plus importants d’une page, il est important d’y insérer vos mots clés principaux. ### Optimiser ses URL pour le SEO  L’URL est une **adresse permettant d’identifier une ressource donnée** sur internet. Pour une URL optimisée ajoutez-y un **mot clé important**, gardez la **concise** et évitez les caractères spéciaux. Le plus important dans les URL de votre site réside dans leur **consistance** : si vous avez un site e-commerce avec 200 catégories (livres, high-tech…), il sera bien plus simple de ne pas afficher ces catégories dans l’arborescence de l’URL pour éviter un énorme casse-tête. On peut prendre l’exemple des produits présents sur plusieurs URL qui causeront du **contenu dupliqué** sans la présence de **balises canonical** (tag qui indique la page mère sur les pages au contenu identique). Ces mêmes produits rendront des **erreurs 404** (page introuvable) en cas de changement de catégorie. *Pour que ça soit plus clair, je vais expliquer en dessous avec un exemple pour un blog.* Même histoire qu’un e-commerce pour un blog, attention à ne pas garder le système d’url de type site.com/blog/catégorie/article sur votre blog si vous n’êtes pas certains de vos catégories. En cas de **changement d’une catégorie** vous vous exposez à de multiples **erreurs 404** dûes au changement de l’URL de vos articles. Par exemple un changement de catégorie1/articleX vers catégorie2/articleX rendrait l’URL catégorie1/articleX inaccessible sans redirection, ce qui est **pénalisant pour le SEO**. Pour être sûr de ne pas avoir de problèmes, la meilleure option est de référencer vos articles comme ceci site.com/article ou comme cela site.com/blog/article. Le fait de changer l’URL ne vous empêche pas de trier vos articles par catégorie dans votre blog. Ça n’aura pas d’impact pour la compréhension de Google. C’est le **sitemap**, le **fil d’ariane et le maillage interne** (liaison des pages entre elles via les liens internes) qui **rendra compréhensible votre site** aux yeux de Google. Pour le reste de votre site, je vous conseille de suivre la **hiérarchie logique**. Par exemple pour notre page maquettes, on a [/fr/prestations/ux-design](/fr/prestations/ux-design). En suivant le lien, on sait qu’on la retrouve dans la catégorie prestations, puis UX design, puis maquettes. On retrouve cette logique dans le **fil d’ariane** présent sur les pages du site. Il est utile à la fois pour Google qui comprend la **profondeur du site**, mais également pour l’utilisateur qui peut retourner dans les pages mères facilement.  ### Configurer le Sitemap et le Robots.txt Le fichier robots.txt est un **fichier texte présent à l’adresse site.com/robots.txt** qui permet d’autoriser ou non à un robot d’exploration, l’accès à un répertoire donné. Si vous souhaitez que Google explore et indexe vos pages, veillez à bien l’autoriser. Pour se faire vous pouvez vous référer au [tuto de Google](https://developers.google.com/search/docs/advanced/robots/create-robots-txt). (⚠️ **Si vous n’autorisez pas l’exploration de votre site, il ne sera pas référencé.**) Le sitemap est un **fichier XML qui liste les URLs d’un site** en les accompagnant de méta données, ce qui permet aux robots d’**explorer plus facilement** un site web. Depuis un CMS, vous pouvez facilement créer et modifier votre sitemap depuis le back office ou grâce à l’utilisation d’un plugin SEO. Si vous êtes développeur, vous pouvez vous référer au [protocole de sitemaps](https://sitemaps.org/protocol.html). ### Repérer et corriger les liens cassés  On est tous déjà tombés sur une **erreur 404** qui a **nuit à notre expérience** utilisateur. En effet il est très frustrant de rencontrer un lien brisé lorsqu’on cherche à avoir une information précise. Si vous veillez à **garder les visiteurs** sur vos sites, vous avez tout intérêt à **garder un œil sur l’ensemble des liens** présents sur votre site, qu’ils soient internes ou externes. Attention aussi aux URLs de votre site en général. Certaines pages peuvent être référencées sur d’autres sites ou en favoris d’un utilisatur, si un lien est cassé c’est le même problème. D’autant plus que des liens brisés ont un **impact négatif sur votre référencement**. En effet, un robot d’exploration qui passe sur un lien cassé utilise son budget de crawl inutilement. Il assimilera cette erreur à un **site de mauvaise qualité**. Pour repérer les liens cassés vous pouvez passer par un crawler complet comme [Screaming Frog SEO Spider](https://www.screamingfrog.co.uk/seo-spider/). Ce crawler permet de repérer un grand nombre d’erreurs techniques sur votre site. Mais il faut savoir que la version d’essai du logiciel limite le crawl à 500 URLs. Si vous préférez utiliser un outil gratuit, vous pouvez passer votre site sur [W3C Link Checker](https://validator.w3.org/checklink?uri=) ou utiliser un crawler comme [Xenu](http://home.snafu.de/tilman/xenulink.html#Download). ### Optimiser la structure de son site De la même manière que pour les balises Hn, votre site web doit être **structuré logiquement**. C'est ce qui va rendre votre **contenu compréhensible et accessible** par l’utilisateur et par les robots d’exploration. Il est important que vos pages suivent une **hiérarchie logique**. Par exemple un **regroupement par thème** qui forment un silo ou une arborescence. Plus on descend dans l’arborescence, plus la thématique est précise. On peut prendre l’exemple du site du BearStudio pour comprendre la bonne façon de **structurer un site** web. On a le menu qui regroupe les pages principales du site. Si on veut découvrir les [prestations proposés par le BearStudio](/fr/prestations) on retrouve la page dédiée dans le menu. Sur la page, on retrouve 4 catégories principales. Si on choisi la catégorie [**UX design**](/fr/prestations/ux-design) on retrouve toutes les prestations liées au Design. C’est simple, logique mais efficace.  Pour **créer une bonne structure**, vous pouvez également vous baser sur le **parcours utilisateur**. Pour se faire, vous pouvez suivre [notre article sur la création d’un userflow](/fr/blog/articles/parcours-utilisateur-ux). ### Vérifier l’ergonomie mobile de son site On sait qu’aujourd’hui une **majorité des internautes** utilisent un moteur de recherche depuis leur **téléphone**. Avoir un site web qui n’est **pas optimisé pour mobile** n’est **absolument pas envisageable**. Pour vérifier l’ergonomie mobile de votre site, vous pouvez vous rendre sur la Google Search Console (GSC). Dans le menu expérience puis dans ergonomie mobile vous devez vous assurer que toutes vos pages soient valides. Vous pouvez également effectuer un [test d’optimisation mobile](https://search.google.com/test/mobile-friendly) avec l’outil dédié de la GSC.  Pour aller plus loin, vous pouvez aussi faire appel à nous pour faire réaliser un [Audit UX](/fr/prestations/ux-design) de votre site par des experts avec une **vraie connaissance humaine**. Contrairement à un simple outil automatisé, vous aurez un retour de test par un oeil avisé qui saura se mettre dans la peau d’un utilisateur. Vous vous assurerez que votre **expérience utilisateur** est bien **optimisée sur n’importe quel appareil**. ## Conclusion sur le SEO technique Pour résumer, pour avoir une bonne base SEO technique, votre site web doit : - Être **performant** - Utiliser les **balises SEO** - Avoir des **URL optimisées** - Avoir un **Sitemap** et un **Robots.txt** bien configurés - Ne pas contenir de **liens cassés** - Avoir une **structure logique** - Être **optimisé sur mobile** Difficile d’aborder l’ensemble des critères qu’un site web doit respecter pour optimiser son SEO en un seul article ! Ici je me suis focalisé sur les **critères techniques principaux**. Il faudra également s’intéresser à la concurrence, au maillage interne, à l’optimisation off-site et à la création de contenus optimisés. Dans tous les cas, si vous lancez un site web, vous pouvez vous servir de cet article comme **checklist pour démarrer de la bonne manière**. Ça sera la première étape d’une stratégie marketing qui demandera un travail approfondi. Vous pourrez toujours **aller plus loin** par la suite pour vous **positionner plus haut** dans les moteurs de recherche. --- ### FOS : l'apprentissage du Français sur Objectif Spécifique dans le dev URL: https://www.bearstudio.fr/fr/blog/articles/fos-apprentissage-francais-objectif-specifique Date: 2022-06-16 Vous le savez déjà si vous avez lu notre article sur le remote, [on a des développeurs tunisiens](/fr/blog/articles/on-a-des-developpeurs-tunisiens). Et on ne fait pas du simple outsourcing. On travaille en remote avec une équipe de 3 développeurs totalement intégrée à la team française. Pour encore améliorer notre “**outsourcing informatique” avec la Tunisie** (qui est d’ailleurs plus proche du remote que de l’outsourcing), on a fait appel à [Hend](https://www.linkedin.com/in/hend-fellah-812976165/), une professeure de français spécialisée dans l'apprentissage de la langue pour les étrangers. Elle vous fait un retour sur son expérience et vous explique l’intérêt de l’apprentissage de la langue pour la boîte. ## Professeure de français dans une société de développement Lorsqu’on fait des études de langues, de littératures et de Latin qui plus est, et qu’on vous dit que Python, Java ou HTML sont également des langues, vous buggez sévèrement !  Et ouais, moi qui n'ai jamais eu plus de la moyenne en informatique au lycée, je me suis retrouvée à enseigner le français dans une boîte de développement. Concours de circonstance ou véritable besoin pour les sociétés de dév ? C’est ce qu’on essaiera de creuser tout au long de cet article. ## Le FOS c’est quoi ? En français aussi, on essaye de faire des abréviations qui font stylées et qui amènent les gens à nous demander “FOS, c’est quoi comme domaine ?“. Et là tout fiers de nous, on explique que le Français sur Objectif Spécifique, c’est le fait d’enseigner à une personne la langue, mais de façon plus ciblée, en se focalisant sur leurs besoins réels et notamment professionnels. Et qui dit monde professionnel, dit plus d'intérêts à l’égard de notre métier. Je vous raconte donc pourquoi j’ai été recrutée ! Le secteur informatique connaissant en Tunisie une expansion fulgurante, les tunisiens ont peu à peu réussi à se frayer une place sur le marché du travail. Plus question pour eux de quitter leur famille et leur pays, ils sont désormais opérationnels, peu importe leurs localisations.  Et ce n’est pas pour déplaire au BearStudio qui est faaaaaaaaaaannnnn du remote (et bien avant la pandémie hein…) Installés en Tunisie depuis plus de deux ans, les oursons sont partis à la conquête des provinces tunisiennes où les opportunités d’emplois sont moins importantes que dans la capitale. Ce choix, même s’il émane d'une bonne volonté, les a confrontés à d'autres problématiques qu’ils n'envisageaient pas du tout dans un pays censé être francophone :  Il faut dire que, comme plusieurs pays du globe, les inégalités pédagogiques et professionnelles sont très répandues en Tunisie et touchent spécialement les régions sud du pays. Mais ce n’est pas ça qui a ralenti la gambade de nos petits ours ! Contactée par [l’équipe du Bear Studio](/fr/equipe) en juin 2019, mon objectif a été de comprendre les problèmes linguistiques de l’équipe et de la société afin d’élaborer un programme pour y remédier. Cette expérience m’a d’abord parue effrayante (mes notes du lycée en informatique…). Mais au fil de mes recherches et de mes journées passées au sein de l’entreprise, cette expérience me paraissait de plus en plus challengeante et surtout plus proche du terrain. ## L'intérêt pour la société Vous allez me dire “C’est évident, la communication !” Oui, mais non ! Dans plusieurs sociétés de développement, c’est l’anglais qui reste la langue la plus usuelle, pourquoi donc insister sur le français ? Au BearStudio, une grande partie de la communication interne se fait en français (souvent à l’écrit sur des [outils](/fr/blog/articles/outils-incontournables-pour-un-entrepreneur) de communication comme [Slack](https://slack.com/intl/fr-fr/)). Pour chaque projet pris en charge par la société, des réunions et des concertations doivent être faites afin d’aborder le meilleur angle de travail. Ce qui permet à toute l’équipe de comprendre de quoi il est question. Cette tâche est d’autant plus complexe lorsque tous les membres d’une équipe ne sont pas géographiquement réunis. C’est donc primordial qu’il n’y ait aucun doute ou confusion dans la compréhension des tâches demandées, dans la capacité à remonter et à expliquer correctement un bug ou encore dans la gestion des problèmes techniques.  ### L’efficacité au travail Si une grande partie du travail se fait en visio, tous les collaborateurs doivent retranscrire par écrit l'avancement de leurs tâches personnelles et les problématiques auxquelles ils font face. Ça permet aux collègues de s’entraider ou encore de prendre la main sur des tâches en cas de congés ou d’absence par exemple. Une communication fluide revêt donc ici toute son importance puisqu’elle permet aux deux équipes de pouvoir interagir sans difficulté et d’accorder plus d’importance aux problématiques techniques qu’aux problématiques langagières. Ce constat a été fait au détriment des premiers mois de collaboration. Puisque les deux équipes ont, au départ, négligé le niveau de français de l’équipe tunisienne. Pensant que cela ne serait pas compromettant, les deux teams sont directement entrées dans le vif du sujet. Elles se sont rendues compte que malgré les compétences techniques de chaque employé, le travail prenait de plus en plus de retard. Cela était dû à une communication pas toujours efficace. ### L’image de la société Si les membres de l’équipe peuvent être tolérants face aux difficultés langagières de certains, ce n’est pas le cas des clients. Certains adoptent rapidement un comportement méfiant par rapport à une personne qui ne pratiquerait pas correctement la langue. L'amalgame entre niveau linguistique et niveau professionnel est récurrent. Cette confusion discrédite dans la plupart des cas, l’employé et la société qui l’embauche. ### La langue, ça crée des liens aussi  Quand on connaît peu les rudiments de la langue française, il est quasi-impossible de comprendre la langue parlée avec son lot d'expressions familières, d’argot, et de sous-entendus. Autant dire que créer un esprit d’équipe lorsqu’on ne parle pas la même langue peut prendre un temps considérable. À cela, s’ajoute la portée culturelle que la langue est censée véhiculer et que le BearStudio souhaite faire parvenir à ses collaborateurs tunisiens ! En somme, la langue reste un levier incontestable pour la montée en compétence des développeurs tunisiens (ou étrangers). Leur niveau technique sera donc étroitement lié à leurs capacités à comprendre et interagir avec leurs collègues et clients. Plus votre développeur sera autonome en communication, plus vous pourrez le placer sur différents projets, le laisser prendre seul des initiatives et même lui permettre de piloter une équipe ! Pari gagné non ? **Auteur :** [Hend Fellah](https://www.linkedin.com/in/hend-fellah-812976165/) --- ### Parcours utilisateur & UX : comment créer un userflow efficace URL: https://www.bearstudio.fr/fr/blog/articles/parcours-utilisateur-ux Date: 2022-05-31 Le parcours utilisateur est défini par les différents chemins et interactions que l’utilisateur va rencontrer dans une application, un site web, un logiciel métier, etc. Bien comprendre le parcours utilisateur est essentiel pour créer un chemin fluide et cohérent. Il va permettre d’optimiser l’expérience de l’utilisateur au fur et à mesure de son utilisation d’un produit numérique. Le but est de permettre à l’utilisateur d’atteindre efficacement son objectif. La définition d’un parcours utilisateur fait donc partie des étapes essentielles dans l’optimisation de l’[UX design](/fr/prestations/ux-design) (UX = expérience utilisateur). En utilisant la bonne méthode et les bons outils, on s’offre la possibilité d’optimiser au maximum l’expérience utilisateur en se mettant à sa place afin de retracer l’ensemble de son parcours. Il en existe de nombreuses (comme l’user journey qui prend en compte les émotions des utilisateurs). Au BearStudio nous avons choisi, à force d’expérience, d’utiliser les **User Flows**. Bien sûr, l’utilisation des User Flows ne permettra pas automatiquement de créer un parcours utilisateur parfait. D’autant qu’il existe plusieurs manières d’utiliser cette méthode. Avec le temps, nous avons affiné notre processus de création d’User Flows afin d’être toujours plus pertinent et de s’assurer que la conception de ces différents parcours utilisateur soit efficace et intuitive. Une autre utilité des Users flows est de préparer les [maquettes](/fr/prestations/ux-design) et les [wireframes](/fr/prestations/ux-design). En effet, il s’agit d’une étape préliminaire à la réalisation de maquettes. Plus les User flows sont détaillés, le plus clair seront les maquettes ou les wireframes. Dans cet article nous allons vous présenter sommairement quelle est notre procédure pour réaliser des User flows qui permettent de s’assurer que le parcours utilisateur soit bien défini par tous les acteurs du projet (client, designer, équipe de développeurs etc.). ## 1 - Comprendre le besoin des utilisateurs Pour créer un User Flow pertinent, il est nécessaire de prédire le comportement des utilisateurs. Pour analyser le parcours des utilisateurs, il faut organiser un certain nombre d’ateliers avec les porteurs de projet. Ce qui permet de poser le plus de questions possible sur les utilisateurs, leurs besoins etc. Connaître ce dont ont besoin les utilisateurs est la base pour être sûr que le produit que l’on va créer (application mobile ou web, logiciel, site internet…) correspondra au besoin. Il est possible, dans certains cas, de faire des ateliers avec des utilisateurs finaux (dans le cas d’une application métier déjà existante par exemple). Le meilleur moyen de comprendre et d’analyser l’utilisateur, c’est d’essayer de se mettre à sa place. Pour ce faire, il faut poser un maximum de questions, comprendre le contexte, les contraintes, les besoins, la démarche etc. C’est une étape **indispensable et primordiale** si l’on veut s’assurer d’avoir des bonnes bases dans le cadre de la création d’un bon parcours utilisateur. ## 2 - Réaliser des Task Flows Les taskflows sont une représentation schématique (souvent en utilisant des couleurs neutres et peu de détail textuel) très simple d’une action qu’un utilisateur voudrait accomplir en partant de son point de départ jusqu’à sa résolution, sans passer par tous les chemins possibles. Ils servent notamment à lister toutes les actions qu’un utilisateur voudrait effectuer au sein d’un produit numérique. Un exemple valant mille mots, voici à quoi pourrait ressembler le taskflow typique d’une mise au panier sur un site de vente de bananes en ligne.  Ce taskflow reprend toutes les étapes que doivent suivre les clients de l’entreprise pour réaliser un achat sur le site web. C’est une première étape très importante puisque les taskflows permettent d’organiser les éléments les plus importants avant de commencer à réaliser les userflows. Aussi, cela permet de se mettre d’accord avec le/les clients. Il faudra donc réitérer cette manœuvre pour chaque fonctionnalité, action du produit. ## 3 - Réaliser des Userflows ### 3.1 Choisir son outil Pour créer un Userflow ou des taskflows il faut choisir un outil de création de diagrammes qui permet de réaliser des schémas efficacement. Il vaut mieux privilégier un outil simple mais efficace qu’un outil aux multiples fonctionnalités pas forcément pertinentes qui risquent seulement de vous faire perdre du temps. Au BearStudio, nous utilisons [Figjam](https://www.figma.com/fr/figjam/) ou [Whimsical](https://whimsical.com/) qui sont des outils simples et efficaces et qui permettent de travailler à plusieurs sur un même diagramme. [Excalidraw](https://excalidraw.com/) est une alternative complètement gratuite mais non collaborative qui permet de faire des schémas plus “originaux”. ### 3.2 Comment ça marche les userflows ? En une image un userflow qu’est-ce c’est ? Et bien c’est ça ⬇️  Dans cet exemple il s’agit d’un petit userflow qui montre toutes les étapes que doivent accomplir l’utilisateur pour accomplir une action spécifique. Donc, un userflow, c’est un ensemble de taskflows que l’on aurait légendé, détaillé et regroupé dans un seul grand schéma. D'où l’importance de l’étape préliminaire des taskflows, cela fait gagner beaucoup de temps. Ils peuvent aller du plus simple comme dans l’exemple ci dessus, au plus complexe ⬇️  ## Du coup, quelles sont les différentes étapes pour réaliser son userflow ? ### 1\. Légender Votre userflow sera composé de nombreux éléments. Il est donc très important de donner la possibilité à n’importe qui de pouvoir lire correctement ce schéma. Une légende est indispensable. Elle peut aller du plus simple à la plus complexe. Cependant vous devriez toujours avoir dans vos userflows ces trois éléments. **Les actions** : cliquer sur un bouton, ouvrir un formulaire, accéder à une page, bref autant d'actions que l’utilisateur peut accomplir. **Les conditions** : qui représentent une séparation du parcours de l’utilisateur en deux (oui ou non) **Les pages** : qui sont les éléments figés du produit (page d’accueil, page d’un produit, page du panier, page de profil etc.)  Une fois votre légende réalisée, vous devez regrouper les taskflows et les associer par des connecteurs (généralement des flèches allant du point d’origine à gauche jusqu’au point d’arrivée à droite). Par exemple :  Dans ce cas assez simple, nous avons plusieurs actions possibles depuis la page des produits. Elles montrent les différents chemins que l’utilisateur peut emprunter et les conditions qu’il doit remplir pour continuer le processus. ### 2\. Détailler Dans des cas plus complexes, il est possible d’indiquer des détails sur les userflows. Par exemple, dans le cas d’une inscription, nous pouvons indiquer quelles données sont demandées pour créer son compte.  Un userflow peut donc être dans les cas les plus simple un simple schéma des différentes actions que peut effectuer un utilisateur sur un produit. Mais ils peuvent être aussi une carte complète et détaillée de l’ensemble des différents parcours utilisateur et leurs informations. ## Et ensuite ? Une fois les userflows faits et validés, la suite peut commencer. Réalisation de maquettes, chiffrage projet complet, [développement](/fr/prestations/developpement-web) etc. Permettre de définir le parcours utilisateur au plus tôt dans le projet, est un excellent moyen de se donner une vision globale sur le travail à accomplir à tous moments du projet. Il est utilisable par tous les membres du projet (designers, développeurs front et back, commerciaux et clients). Il sera la clé d’une bonne expérience utilisateur et client sur toute conception, du site internet, ou encore de l’application web ou mobile. Si vous vous intéressez à l’UX design, on vous conseille de lire notre [article sur la loi de proximité](/fr/blog/articles/la-loi-de-proximite). --- ### Comment créer son image de marque ? URL: https://www.bearstudio.fr/fr/blog/articles/creer-identite-marque Date: 2022-05-16 *Dans cet article, je vous parlerai de branding identity (identité de marque en français) mais plus particulièrement, comment en créer une.* *Vous trouverez des conseils mais aussi les fondamentaux afin de créer votre propre identité de marque.* ## Qu’est ce qu’une identité de marque ou branding identity ? L’identité de marque est la perception que le consommateur a de votre entreprise. Elle définit sa personnalité mais aussi son style ou encore sa façon dont elle communique sur ses produits ou services, tous ces points forment l’ADN de votre marque. C’est ce qui vous permet de transmettre un message à votre public cible. Votre objectif sera donc de créer une identité visuelle qui marquera votre audience, de par les points cités précédemment mais aussi de par l’histoire que vous voulez leur raconter. C’est pourquoi, nous évoquerons l’exemple de l’une des plus grandes marques du monde, Apple, reconnue pour sa notoriété forte et son image qui renvoie un message de qualité auprès de ses clients.  Depuis sa création en 1976, Apple a su se démarquer par sa direction artistique. Le designer Rob Janoff à l’origine de la pomme croquée a su tirer son inspiration de l’étude du fruit, sous toutes ses coutures. Elle est croquée pour ne pas qu’on la confonde avec un autre fruit ( comme par exemple, le nashi… ) ## 1\. Trouver son inspiration Maintenant, passons dans le vif du sujet ! Comment trouver son inspiration et par quels moyens ? Car oui aujourd’hui, ce n’est pas facile de se démarquer des autres… car peut-être que Pierre, votre voisin, est à la tête d’une grande entreprise et que vous aimez bien l’image que dégage sa boîte. Votre rôle sera de vous inspirer du monde graphique sans reprendre tous ses codes à l'identique, car comme dit précédemment, il faut retrouver votre personnalité dans votre image de marque afin que celle-ci soit unique et intemporelle. Pour cela, vous disposez de nombreux outils sur le web tels que Dribbble, Behance, Pinterest afin d’acquérir de la culture graphique de manière générale : art, sculpture, typographie, Bande Dessinée, roman. Toutes ces cultures vous serviront dans vos créations. De plus, ces outils vous permettront d’acquérir les tendances graphiques du moment, car l’idée est de créer un logo moderne et actuel. ## 2\. Faire un benchmark concurrentiel Il vous sera intéressant de prendre connaissances de vos potentiels concurrents, vous devrez donc passer par la case Benchmark. Cette étape vous aidera à connaître les codes graphiques des entreprises exerçant le même secteur d’activité que vous, ce qui vous dirigera vers un chemin différent de vos concurrents (logotype, charte graphique, communication, marketing…) _Un benchmark est un document d’analyse concurrentielle comportant plusieurs critères de différenciation tels que le_ [_design_](/fr/prestations/ux-design)_, l’ergonomie mais aussi l’architecture en présentant tous les points positifs et points d’amélioration de leurs sites web, e-commerce ou encore identité visuelle._ Nous vous partageons un exemple d’une planche benchmark de logotypes concurrents dans le domaine du covoiturage/taxi :  Cette étape de benchmarking est à prioriser avant le moodboard et la [charte graphique](/fr/prestations/ux-design), car grâce à cette étude graphique, vous serez en mesure de vous diriger vers votre identité visuelle finale, la rendant unique. Comment se présente cette planche benchmark ? J’ai, dans un premier temps, recensé tous les potentiels concurrents dans le domaine du covoiturage, j’importe leurs logotypes et leurs couleurs en les mettant en évidence sur mon fichier. Ensuite, je reprends la gamme chromatique de chaque marque. Je constate que les couleurs les plus présentes et pertinentes sont le bleu (technologie, responsabilité, confiance) et le vert (écologie, partage, environnement.) ### Dois-je donc partir sur une de ces deux couleurs ? La réponse est non, mais toutefois, si tel est votre choix, il n’y a rien de contraignant. L’idée de cet exercice est de pouvoir comparer vos concurrents, et vous différencier de ceux-ci. À partir du moment où vous savez expliquer, le pourquoi du comment, et vos différentes intentions graphiques en matière de couleurs, tout vous est permis. Ensuite, je remarque que tous les logotypes importés sont différents de par leur représentation, mais ce que nous pouvons remarquer c’est que dans la globalité, les formes sont plutôt arrondies. Enfin, j’analyse leur typographie qui sont aussi différentes, nous retrouvons des polices plus droites tandis que d’autres sont plus arrondies. À savoir que créer un contraste entre la forme de l’icône et de la typographie est intéressant. Comme l’exemple du logo d’Uber. ### Le logo Uber contrasté : - Carré avec des arrondies - Typographie strict et droite  ## 3\. Créer un moodboard Par ailleurs, avant toute création graphique, je vous invite à composer un [moodboard](/fr/prestations/ux-design) (planche d’ambiance), afin de réunir toutes vos inspirations graphiques/inspirationnelles et de trouver une atmosphère/ambiance homogène à votre moodboard. ### Mais que trouvons-nous dans notre moodboard ? - Logotypes inspirationnels - Typographies - Couleurs - Interfaces / sites dans une ambiance similaire Voici un exemple de moodboard créé pour l’[application open source Start UI](https://start-ui.com/) :  Enfin, il faut que vous voyez cette planche comme les prémices de votre identité visuelle, c’est une étape indispensable dans la création de celle-ci. ## 4\. Le choix du logo ### L’utilisation du logo dans le marketing Cette partie est sans doute l’une des plus importantes dans la création de votre identité de marque. Pourquoi ? Le logo est la représentation graphique de votre entreprise, comme vous l’aurez compris, le logo doit attirer, séduire tout en captivant vos consommateurs. Le logo représente l’image de votre entreprise sur tous les outils et supports incluant votre branding (réseaux sociaux, affiche, carte de visite, site internet, produits…). Il est donc logique qu’il fasse partie intégrante de votre stratégie marketing afin de véhiculer votre image à vos clients et votre public cible. Mais aussi, vous démarquer de la concurrence, en véhiculant vos valeurs, valorisant votre image ou encore en transmettant un message. Vous devrez connaître votre ADN de marque, votre plus-value par rapport à la concurrence mais aussi vers quelle branche de l’arbre vous voulez vous situer. _De nos jours, le logo est un moyen de communication et d’identification indispensable à toutes les marques et entreprises. Il aide grandement à gagner notoriété et confiance et se greffe parfaitement à une bonne stratégie de création de contenu à valeur ajoutée._ ### Les différents types de logo Aujourd’hui, il existe de nombreux types de logo :  **Mascottes** : Illustration simplifiée dans un style cartoon et dessiné. On les retrouve dans la restauration rapide, mais aussi dans le domaine du sport ou e-sport.  \***\*Monogrammes** :\*\* Composé uniquement de lettres. Par exemple, les marques de luxe se sont très bien appropriées ce style de logo. Mais aussi, des entreprises internationales comme LG ou encore la marque de vêtement NY.  \***\*Pictogrammes** :\*\* Représentation du logo en iconographie, l’intérêt est que la marque soit facilement reconnaissable par ses consommateurs. À savoir que l’icône peut représenter le nom de l’entreprise, son produit, sa mission. Ce style de logo est utilisé par Apple, Whatsapp, Twitter, Snapchat…  \***\*Abstrait** :\*\* Les logos abstraits sont une sous-catégorie des logos pictographiques. On remplace l’image propre par une forme abstraite. La force de ce type de logo est qu’il permet de représenter toutes les valeurs d’une entreprise / marque en une seule image. Des grandes marques telles que Pepsi, Microsoft ou encore Airbnb utilisent ce style de logos.  **Mots-symboles** : Comme vous avez pu le remarquer, les logos mots-symboles sont très similaires aux logos monogrammes, leur différence est que l’un est simplifié et l’autre est affiché au complet. À savoir que les entreprises qui utilisent ce style de logo ont des noms courts. Par exemple : Ebay, Disney, Sony ou encore Google.  \***\*Emblème** :\*\* Pour finir, le dernier type de logo est l’emblème, on retrouve dans ces logos une apparence traditionnelle, ancienne lui donnant une certaine authenticité. Ce style est très populaire pour le domaine de l’automobile mais aussi pour les écoles supérieures ou encore les institutions gouvernementales. Nous retrouvons les marques comme Porsche, Harley Davidson, Starbucks, Harvard utilisant ce style de logo. ### Quelles sont les clés pour créer un logo pertinent et efficace ? C’est une grande question pour une réponse courte… Il n’y a pas besoin d’être un Designer de renom pour créer “LE” logo de demain. Il vous suffit de prendre connaissance des bons ingrédients pour réussir votre recette. On doit retrouver dans votre logo de la simplicité afin qu’on puisse l’identifier et facilement le mémoriser. De plus, on doit ressentir votre ADN en le rendant authentique et unique. Mais aussi, il doit attirer les regards, notamment par ses couleurs. Enfin, votre logo doit être durable dans le temps, il doit être intemporel. La forme du logo joue aussi un rôle clé dans sa conception. Pour aller plus loin je vous conseille [cet article](https://99designs.fr/blog/conseils-design/signification-des-differentes-formes-de-logo/#:~:text=Les%20cercles%2C%20les%20ellipses%20et,autant%20plus%20chaleureux%20et%20inclusifs) qui aborde la signification des différentes formes de logo. Accompagné d’un slogan percutant, le logo vous permettra de véhiculer rapidement l’image de marque de votre entreprise auprès de votre audience cible. ## 5\. Choisir une typographie Dans le monde du numérique, il existe plusieurs styles de typographies, mais le plus répandu dans le web est le “sans sérif” ou “linéales.” C’est pourquoi, on se focalisera sur celui-ci.  Modernes et élégantes, elles sont les polices standards de notre époque. Leurs particularités sont qu’elles ne possèdent pas d’empattement. ### Pourquoi choisir sans sérif plutôt que sérif ? À vrai dire, c’est un choix plus économique, efficace mais aussi propre, donc on aura plus à se soucier de la lisibilité de nos lettres selon leur gamme de taille. À savoir qu’elles sont utilisées à 90% par les marques pour leur logo ou encore leur site. Quelques exemples de typographiques sans-sérif fonctionnant très bien : - Inter - Roboto - Rubik - Helvetica - Barlow ## 6\. Le choix des couleurs Le choix des couleurs est une étape importante dans la création de votre identité visuelle, car vos couleurs soutiendront vos choix, les valeurs et l’ADN de votre marque, Dans cette partie, nous verrons quelles couleurs correspondent à quel secteur d’activité. Car oui, des domaines se sont appropriés des couleurs pour spécifier leur activité. Après ce court chapitre, vous comprendrez mieux les choix des marques. ### Le bleu Le bleu signifie le calme, la confiance, la responsabilité mais aussi la communication. Il est souvent approprié aux domaines de l’assurance, du médical et de la technologie. #### Quelques exemples de marques utilisant le bleu dans leur logo  ### Le rouge Le rouge est une couleur particulière dans le monde du marketing, car elle signifie l’amour et la vie mais aussi le danger ce qui est assez paradoxal. Elle est appropriée dans les domaines de l’humanitaire, l’alimentaire, la restauration, les médias. #### Quelques exemples de marques utilisant le rouge dans leur logo  ### Le jaune Le jaune est connu pour son dynanisme, et son énergie. C’est pourquoi il représente, la jeunesse, la joie mais aussi la tromperie et le mensonge. Dans le marketing, il peut être difficile de l’utiliser, c'est-à-dire qu'il doit être utilisé à bon escient. Cette couleur est utilisée dans les domaines de l’art & culture, du voyage, de l’automobile mais aussi dans l’imprimerie ou encore le bricolage. #### Quelques exemples de marques utilisant le jaune dans leur logo  ### Le vert Le vert est une couleur très utilisée dans le monde de la banque mais aussi dans le monde pharmaceutique. Il représente l'évolution, la richesse, la croissance et la générosité. On retrouve cette couleur dans les domaines de la médecine, de l’économie, de l’écologie. #### Quelques exemples de marques utilisant le vert dans leur logo  ### Le violet Le violet est une couleur qui détient à la fois la chaleur du rouge mais aussi la froideur du bleu, ce qui peut rendre son usage assez difficile. Il signifie le luxe, le mystère, la spiritualité mais aussi l’arrogance. On retrouve cette couleur dans les marques de luxe, de parfumerie, joaillerie, médias, sport, technologie haut de gamme ou encore les institutions. #### Quelques exemples de marques utilisant le violet dans leur logo  ### Le noir Le blanc comme le noir sont deux couleurs neutres. Leur simplicité et neuralité donnent à leur logo, une élégance et sobriété implacable. Le noir signifie l’élégance, l’intemporalité et la douleur. Ainsi, les grandes marques de luxe l’utilisent pour rendre leur identité de marque intemporelle. Nous retrouvons le noir dans les marques de luxe de prestige, la mode, l’hôtelerie, l’automobile, la parfumerie, la technologie, le sport… #### Quelques exemples de marques utilisant le noir dans leur logo  ### Le blanc Enfin pour finir cette partie, nous parlerons du blanc, considéré comme la couleur la plus pure. Elle apportera à votre identité de marque de la douceur mais aussi de la force à vos autres couleurs en les faisant contraster. Nous retrouvons le blanc dans les secteurs du luxe, de la mode, de la santé, de l’automobile, de la communication et marketing, du mariage, de la banque ou encore dans l’événementiel. Tous les logos de marques disposent d’une version noir & blanc car elles sont indispensables dans leur communication. Si le contraste avec un fond ne fonctionne pas, alors ces variants de logos en noir ou blanc seront utilisés. ## Conclusion sur le branding identity C’est la fin de cet article sur la branding identity. Maintenant vous disposez de tous les conseils et astuces pour créer votre propre ADN. Car aujourd’hui, il est important que chaque marque possède sa propre identité, que ce soit en ligne (site internet, produit numérique et réseaux sociaux) mais aussi en physique (affiche, carte de visite et autres supports). Nous sommes entrés dans une ère où le design/graphisme est devenu plus qu’important pour les marques. Les consommateurs et utilisateurs accordent une grande importance à votre image visuelle, votre façon de communiquer sur les réseaux sociaux, vos packagings etc… Maintenant, qu’attendez-vous pour créer votre propre identité de marque ? Pour en apprendre plus sur le design, on vous invite à lire nos [articles sur l’UX design](/fr/blog). On vous recommande l’[article sur la loi de proximité](/fr/blog/articles/la-loi-de-proximite) ! Pour avoir un exemple concret de branding identity, vous pouvez aussi découvrir la conception de l'identité de marque de Green Lead sur [Behance](https://www.behance.net/gallery/118561423/Green-Lead-Brand-Guidelines?tracking_source=search_projects%7Clogo%20brand). --- ### Brève 12 - Bonjour, vous connaissez Rust ? URL: https://www.bearstudio.fr/fr/blog/articles/rust Date: 2022-05-03 import { Tweet } from '@astro-community/astro-embed-twitter'; Ce titre d’article est le résumé de ce que les collègues entendent avec moi presque tous les jours :...
...
...
{data.title}
Published on {data.date} by {data.author}