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).

Lire l'étude complète !

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).

Lire l'étude complète !

🤓 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

- 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 ✨

Quand Ben m’a aidé à définir l’intention de mon projet Dance.org, il a commencé par me poser 5 questions :

Quelle est ton intention personnelle ?
Pour qui ?
Pourquoi ?
Quelle action ?
Quels résultats ?

Ces questions sont là pour réfléchir à la mission de notre projet.

Alors ce que je vous propose, c’est de faire l’exercice avec moi!

Ben insiste sur le fait que ces questions c’est ce qui fait la différence entre une marque forte ou insignifiante.

Quelle est votre intention égoïste de votre marque / projet / site ?

Ici Ben conseille de commencer par répondre de façon égoïste.

Pourquoi est-ce que je fais ce projet pour moi ?

C’est ok de répondre “Pour l’admiration de mes amis”, “Pour rendre ma copine fière”, “Pour virer mon boss”, …

Alors pour moi, égoïstement, Dance.org, c’est un mouvement de danse consciente international qui va me permettre de rencontrer plein de gens trop intéressants, de faire des événements plus grands, de rayonner à l’international et d'avoir un plus grand réseau.

Pour qui ? (pour qui ce n’est pas)

Je pense à une femme, 35 ans qui danse déjà. Elle a déjà testé pas mal de trucs comme le pilate, le yoga, … et veut aller plus loin.

Elle n’a eu que 1 ou 2 danses extatiques dans sa vie mais elle a ressenti un truc de ouf.

Depuis, elle n’a jamais réussi à recommencer.

Elle ne voit pas où elle peut faire ça dans sa région, donc elle n’a jamais réexpérimenté mais dès que quelqu’un lui parle de danse consciente, elle est super emballée.

Et pour qui ce n’est pas ?

Ben conseille de répondre à l’inverse de la question.

Dance.org, ce n’est pas pour l’homme de 50 ans, sceptique qui dira des trucs comme “convainc-moi”.

Il n’aura pas cette énergie d’expansion et d’amour. Celui-là, je ne veux vraiment pas l’avoir.

Je ne veux surtout pas faire des publicités “Connaissez-vous la danse consciente ?”. En fait, je ne veux pas essayer de convaincre les gens.

Pourquoi cette personne viendrait chez toi ?

Elle a déjà expérimenté la danse consciente mais elle a vu que ce n’était pas trop guidé, il n’y avait pas de prof.

Elle est un peu perdue, elle a envie d’explorer, elle voit que les autres dansent et bougent de ouf mais elle ne sait pas trop comment faire.

Alors elle vient sur le site pour découvrir comment elle peut approfondir la connaissance de leur corps.

Donc il y a un côté apprentissage et aussi communautaire :

Elle pourra contacter des membres directement via le site afin qu’ils s’organisent une danse ensemble dans la région.

Quelle action prennent-ils ?

Définir une action permet de clarifier ce que vous voulez de vos clients/membres.

Ça marche aussi bien pour un site (acheter, s’inscrire, réserver une place, …) que pour une marque. Par exemple, l’action de Nike c’est “Mets tes chaussures et va courir”.

Pour Dance.org, je veux qu’ils se mettent à danser le plus rapidement possible.

Quelle est la contre-action ?

L’action à ne surtout pas faire, c’est commencer à intellectualiser le truc. Je ne veux pas qu’ils commencent à lire la documentation sur la danse consciente etc…

Je veux juste qu’ils se laissent porter dans le flow de la danse.

Quels sont les résultats ?

Les bénéfices de la danse consciente sont multiples, voici quelques uns :
apprendre à laisser le corps exprimer ses émotions pour ne pas rester dans le mental au quotidien
être dans une qualité de présence extraordinaire
se sentir vivant

Et vous ?

Quelle est votre intention personnelle avec ce projet ?
Pour qui ?
Pourquoi ?
Quelle action voulez-vous qu’ils fassent ?
Quels résultats ?

Dans la formation Atomic Design, vous aurez d’autres exercices un peu plus poussés pour identifier le ton de votre marque, avoir des idées de visualisation et comment faire un moodboard efficace.

Ok, maintenant que vous avez défini l’intention de votre projet, il est temps de traduire votre projet en charte graphique.

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.

Êtes-vous prêt(e) à faire du design comme Apple sans être Apple ?

Atomic Design

497 €

Le budget d'un projet de design intégral en France est en moyenne de 7200€. Vous économisez 6900€.

Le curriculum complet de la formation à vie.
Les +4h de vidéos.
Ses mises à jour régulières.
Accès à la communauté Atomic Circle.

Payer plutôt en 2 fois.

REJOINDRE ATOMIC DESIGN