Créez une identité graphique, un logo et un site web qui fera rayonner votre projet sans compétences en design
Par Ben Issen, l’artiste fou et le fondateur de SuperCreative
“C’est le seul designer capable de faire un design comme Apple sans être Apple.” - Eliott Meunier
Pour découvrir la méthode Atomic Design, vous pouvez regarder la vidéo ou lire le texte ci-dessous.
🤔 Votre design (ou son absence) envoie un signal à vos prospects
Qu'on le veuille ou non...
Votre design envoie un signal à vos visiteurs, prospects et clients.
Prenez ce site web :
Que ressentez-vous en le regardant ?
Personnellement, j’ai une réaction “wooh ça sent l'arnaque”.
Maintenant, que ressentez-vous en regardant ces sites-là ?
Personnellement, je ressens de la sobriété, de la finesse et du calme.
Comme notre apparence physique, l’apparence de notre projet envoie un message.
Un homme habillé en costume envoie le signal de “sérieux” et de “professionnel”.
Alors qu’un homme habillé en t-shirt à fleurs renverra un signal plus “décontracté”.
Pour votre marque, c'est la même chose.
Et si vous ignorez complètement votre design, vous enverrez les mauvais signaux.
Vous utiliserez des nouvelles polices à chaque nouvelle publication,
Vous changerez les couleurs,
Vous changerez votre logo,
Etc…
Bref, vous manquerez cruellement de cohérence.
Et votre marque se diluera.
En fait, de nombreuses études montrent que le design de votre marque joue un rôle crucial sur la perception de crédibilité et les ventes de votre marque :
“Un site Web de qualité et une notoriété de la marque forte ont un impact direct sur la confiance des consommateurs, ce qui influe sur la fidélité des clients. Cela démontre l'importance d'un site Web attrayant et facile à utiliser pour établir une présence de marque forte” (Sastika, Suryawardani, & Hanifa, 2016).
La cohérence de l'image de marque, en particulier à travers le design du site Web, affecte positivement l'attitude des consommateurs et leurs intentions d'achat (Yoo & Kim, 2011).
🤓 Que devriez-vous faire pour x10 votre design sans vous faire couper un rein avec des agences ?
Ça fait +3 ans que je suis entrepreneur mais j’ai toujours été mauvais en design.
Pourtant, je voulais :
- être fier de mon projet
- avoir de la crédibilité
- me différencier de la concurrence
Alors, ce que je faisais, c'était foncer sur du micro sans stratégie.
Typiquement, j’ouvrais mon outil de tunnel de vente, Kajabi, et je commençais à chipoter aves les polices, les couleurs et les photos, sans savoir ce que je voulais transmettre.
Alors, je perdais un temps dingue à peaufiner et modifier des détails insignifiants, pour ne jamais être satisfait du résultat final.
Je voyais que mon design n'était pas à la hauteur de l'ambition de mon projet.
Alors, j’ai engagé un freelance pour le faire à ma place.
Ça m'a coûté 5000€, pour qu'au final je n'utilise même pas le travail rendu, car le problème était toujours le même ; la marque était jolie, mais elle ne traduisait pas du tout mon intention avec Atomic.
Ma rencontre avec Ben a radicalement changé ma vision du design.
Je me suis rendu compte que mon problème avec le design n'était pas un manque de sens esthétique en moi, mais un simple manque de méthode.
Je me rappelle même avoir voulu devenir designer professionnel après notre rencontre…
Avec Ben, nous nous sommes rencontrés dans un mastermind entre entrepreneurs, et nous avons tout de suite accroché.
Ben c’est un designer d’exception qui a travaillé avec des centaines de marques à travers le monde depuis ses 16 ans.
C’est d'ailleurs le premier stagiaire de Webflow et il a fondé Supercreative, une marque d’outils pour créatifs qu’il est en train de revendre.
Chez Supercreative, il a conçu une dizaine d’outils digitaux dont Instaprice, une calculette de prix pour freelances :
Ben, c’est le seul designer que je connaisse qui sait faire un design à la hauteur d’Apple sans être Apple.
Et donc, durant le mastermind, il y a eu une semaine où au lieu de s’appeler, on s’était donné rendez-vous en présentiel dans un appartement situé à Orléans.
Voulant tirer au maximum parti des compétences de chacun, on a fait un concept simple : on était tous invités à donner une masterclass aux autres sur le sujet de notre choix.
Et c’est là que Ben s’est levé et a commencé à parler.
Tout le monde s’est tu et j’ai écouté comme un enfant à qui on lit Harry Potter pour la première fois.
Ce jour-là, il nous a dévoilé son modèle mental de création et j’ai été complètement bluffé.
Avant, je voyais le design comme quelque chose d’obscur que seuls les artistes pouvaient faire.
Puis, c'est comme quand un magicien vous dévoile un de ses tours, vous avez l’impression d’être en possession d’un nouveau pouvoir.
Avant ?
Je voulais juste ravir :
Je savais pas ce que je voulais alors évidemment c’était super confus.
Je passais des heures à chipoter à des détails sans savoir où j’allais.
Mais une fois que Ben nous a montré son modèle mental, j’ai radicalement changé ma façon de créer.
Au lieu de commencer par “ravir”, il commence par la clarté (l’intention du projet).
Pourquoi faites-vous ce projet ?
Et c’est une fois que l’intention est définie, qu’il ravit.
Par exemple pour créer un site, au lieu de foncer sur Wix, voici ce qu’on a fait pour mon projet Dance.org :
👇 Les 4 étapes pour créer le site de mon projet Dance.org :
Etape #1 : Concevez le site map
Avant toute chose, on a défini l’architecture du site qu’on voulait faire, on appelle ça un "site map".
Chaque branche est une page de notre site et chaque page doit avoir un appel à l’action (CTA) clair.
Si je ne sais pas certain du CTA que je veux mettre, il est fort probable que cette page n’ait pas lieu d’être.
Etape #2 : Rédigez les textes
Ensuite, je rédige les textes rapidement. Je veux savoir quoi exprimer sur chaque page avant de la concevoir. Je vais à l’essentiel :
Etape #3 : dessinez votre site (wireframe)
Je vais dessiner mon site sur l’outil Whimsical. L’outil est génial, c’est très intuitif et parfait pour faire des mockups.
Ça va me permettre de dessiner sans limite, d’aller vite et c’est seulement en étant satisfait que j’irai sur l’éditeur de site.
Etape #4 : concevez le site sur un éditeur de sites (i.e. framer)
Ça y est !
Une fois que j’ai suffisamment travaillé le wireframe, je peux maintenant aller sur l’éditeur de sites (dans ce cas-ci Framer) et construire mon site.
L’avantage, c’est que maintenant je sais précisément ce que je veux et ce que je ne veux pas.
Je vais droit au but et je suis certain que le résultat va donner quelque chose de bien.
Résolvez la source du problème, pas la conséquence
Etymologiquement le design vient du mot italien, "disegno".
Qui veut dire à la fois :
- dessin
Et
- dessein !
Drôle quand-même ? 😛
Si on devait traduire le mot design en français, on devrait dire "intentionnaliser".
Dans l'usage moderne, en anglais, le mot "design" englobe la signification de planification, de structuration et de création d'objets, de systèmes ou d'interactions visuelles et fonctionnelles.
Donc, il intègre à la fois l'aspect esthétique et fonctionnel de la création.
Voilà pourquoi vous ne pouvez pas faire du design sans clarifier l’intention de votre projet.
Et c'est précisément le but de la méthode Atomic Design :
🔤 La méthode Atomic Design :
Comment vous créer une identité visuelle qui vous ressemble enfin sans compétences en design
Comme je vous disais, vous n’avez pas besoin d’avoir un sens de l’esthétique développé car cette méthode se base sur 3 étapes simples :
- Définissez l’intention de votre projet
- Traduisez votre projet en charte graphique
- Créez les supports
Cette méthode donne 3 avantages majeurs :
- Vous êtes sûr d’avoir une identité visuelle cohérente sur tous vos supports de marque
- Vous êtes fier de montrer votre projet au monde : vous ne serez plus bloqué par la peur de vendre ou de parler de votre projet
- Vous aurez une marque qui inspire crédibilité et confiance
🔑 Les 3 étapes pour un design à votre image
Vous pouvez cliquer sur les 3 étapes pour découvrir leur contenu !
1. L'intention de votre projet ✨
2. Son projet en charte graphique 🎨
3. Créer les supports 📂
Maintenant vous avez la base de la méthode Atomic Design.
Mais si vous voulez passer à l'action et créer votre identité graphique qui fera enfin rayonner votre projet, la formation Atomic Design est pour vous.
Elle vous permettra de :
- maîtriser les outils du design ; les couleurs, les polices, les espacements, les formes, etc. pour mettre en forme l'intention de votre projet
- maîtriser les outils dont vous aurez besoin pour créer votre charte graphique, votre site et votre logo.
- être autonome en design pour le reste de votre vie.
👨🎓 Ben et moi sommes fiers de vous présenter Atomic Design
La formation qui vous montre étape par étape comment vous créer une identité visuelle qui exprime l’essence de votre projet sans compétences au préalable.
Après cette formation, vous :
- Aurez acquis une compétence profonde en design : vous serez capable de recréer un design de 0 quelque soit le projet (un restaurant, une marque personnelle, une marque de vêtements, …)
- Aurez une cohérence dans tous vos supports
- Aurez une marque qui inspire la confiance et la crédibilité
- Aurez un logo, une bannière, une carte de visite et un site web prêts à l’utilisation
- Ferez plus de ventes dans vos communications et votre site web
📚 Programme détaillé de la formation
Module #1 - Clarifier votre projet
- L’erreur n°1 dans lesquels les débutants tombent qui peut vous coûter beaucoup de temps et de l’argent (vous allez comprendre pourquoi commencer sur un outil de design est dangeureux)
- Clarifier l’intention : les 5 questions auxquelles vous devez répondre avant de toucher à votre identité visuelle
- L’exercice des Brand Sliders pour déterminer le ton et l’ambiance de votre marque (ça va avoir un impact sur tout ce qui va suivre)
- Créativité divergente : l’exercice “Si ta marque était…” pour matérialiser votre marque et avoir des dizaines d’idées
- La force du moodboard : voilà pourquoi on dit que les bons artistes “volent” (même les meilleurs designers ne partent pas d’une page blanche)
- L’erreur que les porteurs de projet commettent quand ils nomment leur projet (et mes critères pour un bon nom)
Module #2 - Traduire votre projet en charte graphique
- Les “outils” du designer ne sont pas des apps, c’est ce avec quoi le designer joue pour exprimer un message (couleurs, polices, matériaux, …).
- Maîtrisez enfin les couleurs pour exprimer le bon message : vous saurez enfin pourquoi vous ne devriez pas utiliser le bleu pour un projet de boulangerie.
- Maîtrisez la façon dans les polices jouent sur notre attention et notre perception (vous verrez pourquoi vous ne devriez probablement pas utiliser une police en gras pour une marque de luxe)
- Pourquoi vous devriez penser à des matériaux pour représenter votre marque même si vous faites un projet 100% digital.
- Comment vous pouvez tirer parti du mouvement pour évoquer un message dans votre logo et votre identité visuelle
- Les formes ont des significations dans notre inconscient : comment utiliser la forme, la taille et l’espace pour évoquer les bons messages à votre audience
- Pourquoi Ben vous recommande vivement de créer une charte graphique avant de vous lancer dans la création de vos supports
- Les 3 éléments capitaux pour créer votre première charte graphique et ce qu’il ne faut pas faire
- Le conseil d’un professionnel pour ne pas créer vos supports sur base d’une charte graphique dont vous n’êtes pas fie
Module #3 - Créer les supports :
Créez votre logo
- Comment enfin créer un logo pour lequel vous êtes fier sans y passer des années
- La méthode de création de logo rigoureuse mais agile pour faire émerger les bonnes idées
- Comment trouver l’inspiration pour son logo
- La technique de l’”évocation” pour déterminer si le logo est le bon ou pas
Créez votre carte de visite et la bannière de vos réseaux sociaux
- Pourquoi un bon designer sait résister à l’envie d’ajouter des éléments (et dans quels cas est que “moins = plus” ?)
- La technique de Ben pour ne jamais se tromper sur le look de votre bannière des réseaux sociaux
- Comment créer votre carte de visite afin d’impressionner les personnes que vous rencontrez
Site web
- Le protocole en 5 étapes pour créer un site web sans passer des heures à chipotter à des détails insignifiants
- La méthode du “site map” pour construire les fondations de votre site et apporter de la clarté
- Pourquoi vous devez avoir en tête un seul appel à l’action par page au risque de passer des heures à construire un site pour rien (pourquoi ce n’est pas suffisant de simplement avoir une page “événement”)
- Feuille blanche : pourquoi écrire le contenu de votre site avant de penser à sa structure
- Les sections à ne surtout pas oublier sur votre page d’accueil
- Exercice : je fais un premier brouillon de mon wireframe et regardez Ben me donner son feedback honnête (il a été cash mais constructif 😅)
- Regardez-nous par-dessus l’épaule réaliser un site web complet en live (sans montage, on vous montre tout !)
🙈 Les extras
Bonus : Quels outils devriez-vous utiliser et comment les maîtriser ?
- La différence entre les éditeurs de sites (et découvrez lequel Ben vous conseille en fonction de vos besoins)
- Comprendre l’interface de framer pour créer des sites web impressionnants et à votre image
- Comprendre comment se structure une page sur framer pour ne pas y passer trop longtemps
- Comment générer une première version de son site en 30 secondes chronos (grâce à l’IA puissante de framer)
La communauté Atomic Circle
1. Le groupe telegram
Pour parler avec les autres membres des formations en continu, nous avons mis en place un groupe télégram. Il fonctionne exactement de la même manière qu'un groupe whatsapp.
Pour l’instant, nous sommes plus ou moins 600 membres, des entrepreneurs, des créateurs de contenus et autres. Les membres discutent de leur progression, d’optimisations, posent leur question et certains se sont même mis en couple suite à une rencontre sur le groupe 😛.
2. Les Atomic Lives
Recevez les invitations calendrier quand Eliott organise une rencontre avec tous les membres de la communauté. Nous passons environ une heure en live par mois.
Vous pourrez directement me poser vos questions en live et me parler de vos projets.
3. La base de ressources communautaires
À chaque fois qu'une ressource intéressante est partagée dans la communauté, nous l'ajoutons à une grande base de savoir sur Notion.
Bénéficiez maintenant de l’intelligence collective de la communauté.
4. Les ateliers participatifs
Tout le monde (vous y compris) peut organiser un atelier participatif sur le thème de son choix (par exemple sur comment gérer son énergie dans une journée).
Cet atelier devra suivre une structure minimaliste et être participatif. Profitez du savoir des autres et partagez le vôtre !
5. Canal Telegram dédié aux élèves Atomic Design
Dans ce canal, vous pourrez partager tous vos projets et recevoir du feedback des autres membres.
Parfait pour apprendre rapidement et avoir un regard externe.
