En ce moment, il est difficile de passer à côté de l'intelligence artificielle. On a l'impression que cette nouvelle technologie pourrait bouleverser n'importe quel domaine d'activité. À ce niveau-là, les agences web ne sont pas en reste 😱. Mais plutôt que d'en avoir peur, il vaut mieux s'en accommoder et trouver comment l'IA peut nous assister dans notre travail pour créer plus de valeur.
De mon côté, je ne suis pas encore assez à l'aise avec ces outils pour les utiliser sur de vrais projets clients qui ont de réelles problématiques business. Cependant, on peut les utiliser pour créer des sites rapidement et construire une offre commerciale pour un prospect ou alimenter son portfolio.
Dans cet article, nous allons explorer comment les avancées récentes en intelligence artificielle peuvent transformer la manière dont nous concevons un site sur Figma, en utilisant deux outils puissants : ChatGPT-4 et Midjourney5.
Trouver une marque et trouver son identité graphique
Au moment où j'écris cet article, j'ai très envie de boire une tasse de café, mais je ne peux pas car j'en ai déjà beaucoup trop bu. Du coup, je vais créer un site pour une marque de café parfaitement saine et inoffensive pour le corps.
Et comme j'ai toujours été (plutôt) mauvais pour imaginer des noms de marques, nous allons donc utiliser ChatGPT pour nous aider.
Il faut considérer ChatGPT comme une personne extrêmement intelligente qui manquerait cruellement d'esprit d'initiative.
Ainsi, pour que ChatGPT fasse ce que l'on veut, il faut lui expliquer très clairement comment le faire. Et c'est là que réside la complexité des prompts ChatGPT : pour bien l'utiliser, il faut savoir formuler très clairement ce que l'on veut.
Dans notre cas, je pourrais demander à ChatGPT : "trouve-moi un nom de marque de café". Mais sa réponse pourrait bien être "Carte d'Or" ou "Nespresso". Elle serait juste, mais pas adaptée car non contextualisée.
Donnons donc un peu de contexte :
"Je crée une marque de café bon pour le corps, mais je ne sais pas comment l'appeler. Aidez-moi à trouver un nom. Je veux que le nom mélange deux concepts :
- le café
- le bien-être
Le nom doit être court et minimaliste."
Ainsi, j'ai plusieurs choix. Nous allons opter pour VitaCafé. Maintenant que nous avons le nom, il nous faut un logo.
Pour cela, je vais encore utiliser un outil d'IA. J'ai rapidement cherché et j'ai trouvé Logo AI. Après un court questionnaire, vous avez accès à de nombreuses options qui feront largement l'affaire dans notre cas.
J’ai bien aimé le logo en haut à droite. Mais j’imaginais une marque un peu novatrice et la typo fait très classique. Après quelques modifications très rapide, voilà ce que nous avons :
Maintenant que nous avons notre marque, il faut construire la structure du site.
Définir le layout de son site sur Figma
On clique sur "Import" et après quelques secondes, Html.to.Design a converti la page en question en une maquette Figma.
Le but est de s’inspirer de la structure et non de voler les visuels ou le texte. Cela étant dit, le fait d’avoir notre inspiration sur Figma nous permet alors d’identifier par calque les différents composants d’une page grâce à des blocs.
Pour cela, je vous conseille de Lock la frame et de vous donner un système de couleur pour savoir à quoi correspond chaque bloc (section, image, texte, CTA…).
Une fois que vous avez identifié tous les éléments d’une page. Il vous suffit de supprimer la frame pour que vous ayez puissiez visualiser la structure de votre site.
N’hésitez pas à combiner des sections venants de différents sites pour créer un layout unique qui s’adapte parfaitement à votre produit.
Maintenant que l’on a la structure de notre site, il suffit de remplir ces blocs. Et pour cela, plus de syndrôme de la page noire (j’aime les calembours) : nous allons nous servire de l’IA.
Génération des visuel du site grâce à Midjourney
Il existe de plus en plus d’outils d’IA qui permettent de générer des contenus de qualité. De mon côté, celui avec lequel je mes suis senti le plus à l’aise est Midjourney.
Nous allons commencer par créer un motif pour l’arrière-plan. Comme expliqué plus haut, il faut donner le plus détails possibles. Plus le vocabulaire sera précis, meilleur sera le résultat.
De ce fait, pour profiter pleinement de la puissance de ChatGPT, je vous conseille d’écrire en français et le traduire à l'anglais grâce à Deepl. Les IA sont souvent entrainées en anglais et les résultats sont donc meilleurs.
Après quelques essais, voilà ce sur quoi je me suis arrêté. Je retrouve bien l’idée d’un produit naturel qui va faire du bien à notre corps.
On va maintenant utiliser Midjourney pour créer le packaging de notre marque de café pour le montrer dans notre header.
Maintenant que nous avons les visuels, il nous faut les textes.
Générer des textes de notre site grâce à ChatGPT
Comme je vous l’ai déjà dit, je n’ai jamais été très bon pour le copywriting. Nous allons donc demander à notre ami (qui enregistre toutes nos données) ChatGPT.
Dans notre cas, le header contient un titre et un CTA. Je vais peut-être ajouter un petit paragraphe pour vanter les mérites de mon produit.
Maitenant que nous avons le layout, les visuels et le texte, il nous suffit d’assembler le tout.
Assembler le layout, les visuels et les textes pour créer votre site sur Figma
Dans cette partie, il n’y a pas grand chose à ajouter. On parle de Design classique sur Figma. Et voilà le résultat!
Comme vous pouvez le voir, nous avons réaliser un header professionel en quelques minutes. Et ça c’est cool.
Résumé
L'intelligence artificielle (IA) révolutionne la création de sites web. Voici comment elle peut aider :
- Identification de la marque : Utiliser ChatGPT pour trouver un nom de marque pertinent et contextuel.
- Conception du logo : Recourir à des outils d'IA comme Logo AI pour créer un logo adapté.
- Structure du site : S'inspirer de sites existants avec Html.to.Design pour définir le layout sur Figma.
- Création de visuels : Générer des motifs et emballages avec Midjourney pour un design naturel.
- Rédaction de contenus : Employer ChatGPT pour produire des textes attrayants pour le site.
- Assemblage sur Figma : Combinez layout, visuels et textes pour créer un header professionnel rapidement.
