Comment concevoir un site web en utilisant 7 outils d'IA? (Relume AI, MidJourney, ChatGPT & Plus)

Utilisation de l'IA dans la conception

• Aujourd'hui, je crois que l'expression est 'jeter tout sauf l'évier de la cuisine'. Nous allons utiliser chaque IA imaginable dans la conception pour voir quel sera le résultat final.

• Je veux que la conception soit fortement guidée et influencée par l'IA pour observer le résultat.

• Nous commençons par créer une maquette avec l'IA Relum, qui offre de nombreux outils pour les concepteurs et développeurs web. Je saisis une description de l'entreprise qui crée des produits de soins de la peau biologiques et véganes pour hommes et femmes, et je laisse l'IA générer une maquette basée sur cela.

Utilisation de l'IA dans la conception

Processus de conception créative

• Avant de continuer avec Relum, je vais me rendre sur Dribble et créer un mood board pour rassembler de l'inspiration pour ce projet.

• Il n'y a pas de véritable science pour créer un mood board, je cherche simplement des éléments que j'aime, comme les couleurs, l'utilisation des sections ou la présentation du produit.

• Une fois que j'ai mon inspiration, je vais retravailler mon wireframe et m'assurer qu'il correspond à ce que je veux, en me basant sur mes idées collectées auparavant.

• Je vais sélectionner les composants et sections de Relum Library dans Figma pour accélérer le processus de conception et de développement.

• Relum Ipsum, l'autre outil AI de Relum, génère également mes textes à partir de la description de mon entreprise.

• Si vous souhaitez essayer Relum Ipsum, vous pouvez trouver mon lien d'affiliation dans la description.

Processus de conception créative

Création de la maquette et de la marque

• Il est mentionné que le plugin Figment est utilisé pour générer du contenu à partir des fichiers de conception.

• La transition entre la carte du site et la maquette est effectuée, en ajustant les sections pour les rendre plus cohérentes.

• L'exportation de la maquette vers Figma est réalisée, avec l'ajout du projet et de la maquette dans Figma.

• Le choix de la palette de couleurs est fait sur aicolors.com, avec une description précise pour obtenir les couleurs désirées.

• Ensuite, la création de la marque se poursuit avec la recherche d'un logo sur Mid Journey, en fournissant une description détaillée pour obtenir un logo moderne et minimaliste avec une fleur de lotus.

Création de la maquette et de la marque

Créer un design attrayant en quelques étapes

• En utilisant vectorizer.ai, il est possible de vectoriser rapidement un graphique, ce qui permet de télécharger le résultat en quelques secondes.

• Ensuite, l'outil chat GPT est utilisé pour générer le nom de l'entreprise, qui est associé à une police d'écriture attrayante comme Satoshi, et intégré à un schéma de couleurs pour créer un logo.

• La prochaine étape consiste à affiner la maquette en ajustant tous les éléments tels que la taille, la typographie et les boutons, pour obtenir un design complet et attrayant.

• La maquette est solide et nécessite seulement quelques ajustements pour permettre une manipulation libre des éléments et obtenir le résultat souhaité.

• L'accent est mis sur l'aspect visuel et la cohérence des espaces et des tailles de typographie pour un rendu visuellement attrayant et équilibré.

• Pour la suite du design, des images de personnes utilisant les produits de soins de la peau seront ajoutées sur les côtés, tandis qu'une photo du produit sera placée au centre, sur un fond de couleur claire pour un contraste optimal.

Créer un design attrayant en quelques étapes

Transformation d'un wireframe en design stylisé

• La conception du wireframe comprend l'ajout d'éléments de mise en évidence différents dans la disposition.

• Les sections de blocs partielles avec des coins arrondis sont appréciées pour leur esthétique.

• La modification des polices et des couleurs crée un contraste visuel plus net dans le design.

• L'ajout de produits à la marque implique la génération et l'incorporation d'images de produits.

• La sélection d'images est basée sur des critères esthétiques pour correspondre à l'image de la marque.

Transformation d'un wireframe en design stylisé

Conception d'une page de destination avec l'aide de l'IA

• La page de destination a été conçue pour une entreprise de soins de la peau biologiques, en utilisant sept outils d'IA différents pour diverses tâches.

• Les outils d'IA utilisés comprenaient Relum AI pour générer le wireframe, Relum Ipsum pour créer tout le texte du site, Mid Journey pour créer le logo et les photos de produits, Vectorizer pour vectoriser le logo, Chat GPT pour le nom de l'entreprise, AI Colors pour la palette de couleurs, ainsi que Photoshop AI pour retoucher les photos de produits.

• L'auteur explique que cette approche diffère d'un projet client réel, car la plupart de ces outils et ressources sont utilisés principalement pour l'inspiration et ne sont pas aussi prédominants dans le processus de conception.

• L'expérience visait à explorer le résultat d'une implication importante de l'IA dans la conception, au lieu de suivre simplement une démarche de conception traditionnelle.

Conception d'une page de destination avec l'aide de l'IA

Conclusion:

Cette exploration innovante démontre comment l'IA peut être intégrée de manière significative dans le processus de conception d'un site web. À travers l'utilisation de multiples outils d'IA, nous avons pu créer une maquette, concevoir une marque et aboutir à un design visuellement attrayant. L'impact de l'IA dans la conception est clairement démontré par cette approche novatrice.