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.

DĂ©couvrir

đŸ€” 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

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 :

  1. DĂ©finissez l’intention de votre projet
  2. Traduisez votre projet en charte graphique
  3. Créez les supports

Cette méthode donne 3 avantages majeurs : 

  1. Vous ĂȘtes sĂ»r d’avoir une identitĂ© visuelle cohĂ©rente sur tous vos supports de marque
  2. 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
  3. 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 !

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

Des questions ?