Créer des Sites Web INCROYABLES avec ChatGPT et MidJourney | IA Webdesign

➡️ Accéder à CHAT GPT4 en cliquant dessus

Les gens devraient regarder cette vidéo YouTube intitulée “Créer des Sites Web INCROYABLES avec ChatGPT et MidJourney | IA Webdesign” car elle montre comment créer des sites Web incroyables à l’aide de ChatGPT et MidJourney, qui sont des outils de conception Web basés sur l’intelligence artificielle. Cette vidéo est une excellente introduction à la conception Web basée sur l’IA et à la façon dont elle peut aider les utilisateurs à créer des sites Web plus efficaces et plus beaux.

Cette vidéo explique comment l’intelligence artificielle peut être utilisée pour générer des prototypes de sites Web en un temps record. Elle montre comment utiliser des outils tels que Mid Journey et Dall-e 2 pour générer des modèles de sites Web à partir de mots-clés et d’images de référence. La vidéo donne des exemples de sites Web générés par l’IA pour différents types de restaurants, de motos, de jeux vidéo et de voyages en avion. Les images générées sont attrayantes et modernes, et peuvent être utilisées comme source d’inspiration pour les web-designers et les PME.

Source : UCkXfBtQwtVy8tHhdbIPOHFg | Date : 2023-01-25 11:07:22 | Durée : 00:22:02

➡️ Accéder à CHAT GPT4 en cliquant dessus

Voici la transcription de cette vidéo :

Bonjour et bienvenue sur la chaîne de l’hébergeur web français LWS, Je pense que vous n’êtes pas passé à côté des nombreux articles et vidéos sur les IA qui créent des images, illustrations, peintures. Mais saviez-vous que l’intelligence artificielle peut aider à générer des prototypes de

Sites Web en un temps record ? De quoi est capable l’IA dans ce domaine ? Comment l’intégrer dans son processus de travail lorsqu’on est web-designer ou une PME souhaitant créer son premier site simplement ? Dans cette vidéo, je vais vous montrer comment vous servir de ces outils puissants pour créer

Un site web, Tout d’abord, je vais commencer par générer des designs de sites internet. De cette recherche artistique, je vais ressortir un modèle qui me plaît. Je vais créer le site rapidement et à moindre frais sans écrire une seule ligne de code.

Enfin, avec l’outil chat GPT, devenu très populaire récemment, je vais générer le contenu de mon site web. Le site web que nous allons créer en un rien de temps sera hébergé sur une formule d’hébergement WordPress proposée par la société LWS.

Entrez le code promo IA10 lors de votre commande sur LWS.fr pour obtenir 10 % de réduction, il est cumulable avec les promos actuelles sur le site. Commençons. Pour générer des maquettes de site internet je vais utiliser Mid Journey, un système

Alimenté par l’IA qui peut créer des images, illustrations, designs de site, tout ce que vous pouvez imaginer à partir d’une simple phrase. On peut aussi utiliser Dall-e 2. Tous deux offrent des crédits gratuits à l’inscription. C’est selon vos goûts, personnellement je préfère MidJourney.

La réglementation quant à l’utilisation de ces images est pour le moment floue, rien n’interdit vraiment d’en faire ce qu’on veut pour le moment. Cependant je vous conseille d’anticiper le cadre juridique qui se prépare, surtout lorsqu’on demande de générer une image à la manière d’un artiste.

Pour commencer à générer des images, il suffit d’aller sur midjourney.com et de rejoindre la bêta. Tout se passe sur la discussion instantanée Discord. Une fois connecté et accepté les conditions de MidJourney, dirigez-vous dans l’un des salons pour débutants. Je vois les œuvres demandées par tout le monde.

La première chose à faire est de taper un slash. Tapez imagine. Maintenant je peux écrire les mots clés de mon choix, l’IA générera des images qui y correspondent. Ici je vais taper a beautiful website for a restaurant pour générer des modèles de sites de restaurant.

Cette phrase peut suffire mais je peux entrer d’autres paramètres pour me rapprocher d’avantage de ce que je désire. Je vous laisse consulter la documentation de MidJourney. Lorsque je fais entrer, l’IA va créer quatre sites Web différents. C’est très rapide, entre une ou deux minutes si les serveurs ne sont pas surchargés.

Dans la version gratuite, vous avez un temps de puissance serveur limité, vous pouvez demander environ 25 générations. Midjourney a fini de créer mes modèles de site. Voici donc quelques exemples de sites de restaurant. Vous remarquerez que des boutons apparaissent sous ma génération. Ils permettent de demander des opérations spécifiques.

Ces boutons vont me permettre de générer des variantes d’une image ou d’en augmenter la résolution. Par exemple j’aime beaucoup la 3ème image. Je veux l’agrandir, l’upscale, je clique donc sur sur le bouton U3. Je peux aussi demander des variantes de cette image en cliquant sur V3.

Voici les variations, des images similaires ont été créées en essayant de conserver le style et la composition d’ensemble. À chaque fois on a un logo, un titre, un texte de contenu et un bouton d’appel à l’action. Sur la 4ème j’ai deux boutons supplémentaires ici.

L’agrandissement que j’ai demandé a mis un peu plus de temps que la génération des variantes. Je le retrouve ici. Superbe. La résolution de l’image est maintenant de 1024 par 1024 pixels. Je clique ici pour voir l’image en taille réelle.

Je trouve qu’on a déjà une bonne base de prototype de site en ayant noté si peu d’informations. L’image est appétissante, le site simple, moderne et bien structuré. L’IA a même aussi ajouté un système de carrousel d’images. Les couleurs sombres utilisées donnent une impression de nourriture Premium, gastronomie, luxe.

C’est un style qui revient souvent dans les sites de restauration modernes. J’enregistre l’image sur mon ordinateur. Elle pourrait me servir d’inspiration. Je peux maintenant commencer à être plus créative en donnant plus de contexte à mon image. J’écris d’abord la même requête que tout à l’heure.

Puis je peux demander un type de restaurant spécifique comme un Fast Food. Un style graphique particulier, par exemple je veux que le site soit rouge et bleu avec des dégradés. J’inscris UI UX pour davantage axer sur une bonne interface utilisateur. Je lance la création et attend un peu. Voilà c’est déjà terminé.

Wow il y a idées surprenantes. Dans le premier on a la mise en avant de l’origine du produit avec le drapeau planté dans le burger, à coté on est plus sur des desserts, on a plus l’impression qu’il s’agit d’une maquette de site pour un téléphone avec des illustrations pour décorer sur les côtés.

Ici on a des formes design intéressantes. Et enfin dans la dernière image un étrange burger a été recréé mais la composition reste efficace avec un bouton call to action bien visible. Je vais générer quelques autres exemples avant de passer à la suite. Vous pouvez générer une image à partir d’une image de référence.

Si vous trouvez un modèle de site beau, vous pouvez insérer l’image dans la commande discord. Par exemple j’aimerais utiliser ce thème WordPress pour créer mon site. Je copie l’adresse de l’image. Dans discord, je tape /imagine. Je colle l’URL de l’image du thème.

Et j’écris ce que je veux, par exemple un site de motos. Peu d’éléments du thème de base on été respectés mais au niveau des couleurs on retrouve les teintes bleu et orange, le titre, sous titre, bouton et 3 images en dessous de la bannière. Ça peut donner des idées.

Midjourney est maintenant en train de créer une image d’un site moderne vendant des backets. Vous pouvez voir en temps réel la conception des prototypes de sites. C’est bon. C’est vraiment beau, à la fois coloré et moderne. On a quelques exemples des chaussures vendues à chaque fois et des navigations très différentes.

J’aime beaucoup celui-ci. Ce sont des paires de chaussures qui n’existent pas, c’est une bonne inspiration mais vous aurez toujours besoin d’un graphiste pour créer une photo, bannière de ce type avec une vraie paire que vous vendez mais vous pourrez lui montrer que c’est ce style vous désirez.

L’intelligence artificielle permet de créer des prototypes de sites pour ses clients plus rapidement dans la première phase de création, utile lorsqu’ils ne savent pas trop ce qu’ils veulent, on perd moins de temps à créer des tests de maquettes qui ne vont peut être pas leur plaire.

Avant de vous montrer d’autres exemples de sites, n’hésitez pas à aimer et commenter la vidéo. Ça me permet de savoir si ce style de contenu vous plaît. Et abonnez-vous pour ne pas louper les prochaines vidéos. Voici quelques autres sites générés. Un site de vente de voitures avec une voiture porsche

Ici on est sur des designs très centrés sur le sujet principal, très sobres avec la photo de la voiture et une navigation. Un site vendant des jeux vidéos Pas mal du tout ! J’ai un premier exemple de site dans un style plutôt rétro. Les autres sites de jeux sont modernes et agréables à regarder.

Ils reprennent bien le style et couleurs qu’on a l’habitude de voir dans ce domaine. On a une grande bannière attractive, un titre principal, des boutons d’appel à l’action, les sites générés ne font pas vieillots du tout. Un site de voyage en avion Wow ! Les résultats sont beaux et accrocheurs.

L’IA a même mis en place ce qui semble être des systèmes de réservation. Et sur la dernière je crois voir un timer. Un site moderne et coloré pour un restaurant de sushis Attractif et artistique, j’aime beaucoup. Les couleurs sont belles, le site donne envie d’être visité.

Les sushis sont légendés, les ingrédients répertoriés, bonne idée. Je trouve la présentation du deuxième site original. J’ai même envie de le prendre en exemple pour la suite de la vidéo. Je vais demander un agrandissement de l’image dans discord. Et voilà. J’enregistre cette image sur mon ordinateur.

Avant de passer à la mise en page de mon site internet, je dois choisir un logiciel pour créer mon site et un hébergeur web pour le mettre en ligne. WordPress est un logiciel en ligne utilisé par des millions de personnes , il facilite la création et la gestion d’un site web.

Aucune connaissance en programmation n’est nécessaire. Contrairement à beaucoup de logiciels de création de site à licence très onéreuse, WordPress est open-source, vous ne payez donc pas le logiciel mais uniquement l’hébergement web pour le poster sur internet. L’hébergeur français LWS vous fait faire des économies avec ses packs tout inclus.

Les hébergements LWS optimisés spécialement pour les sites WordPress vous permettent de publier votre site pour moins de 3€ par mois. Mon nom de domaine est offert, je peux par exemple créer restaurantsushis.com ou restaurantsushis.fr etc. Des adresses mail professionnelles sont incluses. Basées sur mon domaine, je vais pouvoir créer par exemple [email protected].

J’ai un large espace disque pour les fichiers de mon ou mes sites WordPress,. Bref j’ai tout ce qu’il me faut pour me lancer dans les meilleures conditions. J’ai pour rappel un code promo pour vous, obtenez 10 % de réduction en plus des promotions

En vigueur sur le site en entrant le code IA10 lors de votre commande. Je commande la formule de mon choix. Je choisis un domaine. restaurantsushis.site. Je l’ajoute au panier. Je continue. Je profite du code promo IA10 et je valide ma commande.

Ensuite, rien de plus simple, installez WordPress en un clic depuis votre espace client LWS. Vous pouvez choisir le pack WordPress avec le constructeur de pages Premium Divi offert avec LWS, il vous permettra de designer votre site encore plus facilement sur WordPress en insérant des blocs et éléments en quelques clics.

J’ai créé des tutoriels WordPress complets avec et sans Divi Builder je vous les met en description. Je choisis de l’installer directement à l’adresse de mon domaine. C’est bon WordPress est installé, le modèle de site par défaut est directement accessible à l’adresse de mon domaine.

Je me connecte à l’administration de mon site WordPress en 1 clic. Je vais dans les pages. Je veux modifier la page d’accueil. Je pourrais garder le modèle de page Divi par défaut, c’est une bonne base. Je pourrais choisir un autre thème en cliquant ici. De nombreux beaux designs sont disponibles.

Si je cherche le mot clé sushi je vois même que des pages Divi préfabriquées existent. Ici je veux me baser sur la maquette de site web que l’intelligence artificielle m’a créé. Je commence donc d’une page blanche. J’enregistre en cliquant ici. Je vais sur ma page. Et active le Visual Builder de Divi.

J’ai la même interface que précédemment mais en plein écran, je trouve ça mieux et plus épuré. J’aimerais avoir une image de fond sur la première section. Je vais dans les paramètres du bloc. Fond. Ici je peux choisir une couleur, un dégradé, une image, une vidéo, etc. je veux une image.

C’est ici que je l’insère. Je vais personnaliser rapidement ma bannière sur Photoshop. Des logiciels de traitement d’image gratuits existent et pourront suffire si vous n’avez pas PhotoShop. Au niveau de la taille de bannière, en général les écrans d’ordinateur ont une résolution de 1920 pixels de large alors je vais partir là dessus.

J’insère mon image. Je peux l’agrandir un peu mais pas trop sinon elle risque d’être floue comme la version gratuite de midjourney vous rend des images en 1024 pixels. en payant vous pourrez avoir accès à de la 4K. On a une belle composition d’image, je vous conseille de faire une photo de vos produits

Ou demander une illustration de ce que vous vendez vraiment à un illustrateur en lui montrant le rendu réalisé par midjourney. Je vais me servir de l’intelligence artificielle intégrée dans PhotoShop, le remplissage automatique d’après le contenu, pour récréer les côtés de mon image. Ça me paraît bien.

Je peux éventuellement retoucher si ça ne me plaît pas trop. Ensuite, je supprime tous les éléments textes et boutons. Au pinceau ou avec l’outil de remplissage. Les ingrédients de mes sushis, j’aimerais les mettre dans des blocs séparés alors je les enlève de la bannière. Maintenant je vais exporter mon image.

Je ne veux pas qu’elle soit trop lourde pour être chargée plus rapidement. Les hébergements WordPress de LWS sont rapides mais votre site le sera encore plus avec des images légères. Je vais dans fichier, exportation, enregistrer pour le web.

Et là je choisis la qualité de l’export, il ne faut pas non plus que ce soit trop flou. Si vous n’avez pas PhotoShop pour compresser la taille de l’image, des outils en ligne gratuits comme Iloveimg permettent de le faire. Retour sur WordPress. Je vais insérer ma bannière en tant qu’image de fond.

Je clique ici. Je glisse mon image dans la médiathèque. J’appuie sur « charger ». L’image est appliquée mais petite en hauteur. Je vais dans l’onglet Style puis Dimensionnement. Et je règle la hauteur minimale. Je valide. Maintenant ajoutons du contenu. Sur mon image de référence j’ai un titre, sous titre et bouton.

Je commence par ajouter une rangée d’une colonne. Je cherche le module Texte. J’écris mon titre ici. Je le centre. Et je lui applique la balise H1 pour faire comprendre aux moteurs de recherche qu’ils s’agit du titre de ma page. Dans l’onglet style, je modifie son apparence. Je le met en blanc, en gras.

Et je valide. Je modifie la marge qui le sépare du haut du bloc très simplement, en cliquant et glissant ma souris. Je souhaite ajouter un second texte, un petit paragraphe de texte. J’écris ici puis je centre. Dans Style, j’applique la couleur blanche.

Dans dimensionnement, je réduis la largeur maximale et aligne le bloc de façon centrée. Voilà j’applique les modifications. Je rapproche le texte du titre en réduisant cette marge. Maintenant, j’ajoute un bouton. Je vais modifier son style. Je le centre. Je personnalise les couleurs. Un fond jaune par exemple.

J’aimerais avoir la même couleur que mon modèle alors, sur PhotoShop, je prend la pipette et j’ai plus qu’à copier coller ce code couleur. Je le veux un peu plus clair. Copier. Je retourne sur mon site WordPress, et je colle la nouvelle couleur.

J’aimerais ajouter plus de marge à l’intérieur du bouton, comme mon modèle. Je note le nombre de pixels désiré en marge interne, en haut, en bas, à gauche et à droite. J’aimerais maintenant générer le contenu de mon site web.

Pour cela, je vais faire un tour sur chat GPT, un récent agent de conversation développé par OpenAI. Je vais utiliser son intelligence artificielle pour préparer quelques textes pour mon site web. Je lui dit ce que je veux : Donne-moi du contenu texte pour le site Web d’un restaurant de

Sushis : titre principal, slogan, bouton d’appel à l’action, section à propos du restaurant de sushis. Voici donc des suggestions pour mon site : un titre, un slogan et un contenu pour un bloc à propos. Ça semble être une bonne base. Je copie le titre. Je vais sur mon site. Et je colle.

Je fais pareil avec le sous titre, slogan. Coller. Le bouton risque d’être trop long je vais juste copier ça. En dessous, j’ajouterais bien quelques ingrédients ou sushis populaires du restaurant, comme on avait sur l’image générée par l’intelligence artificielle. Pour ça je vais créer une nouvelle rangée de 5 colonnes par exemple.

Je vais ajouter une image dans chaque colonne et un titre de légende. J’ajoute de la marge jusqu’à arriver dans la partie jaune. J’oublie pas d’enregistrer régulièrement. Voilà j’ai ajouté mes images et textes. Les aliments générés ne sont pas parfaits mais c’est bien en attendant d’avoir les images de son photographe ou illustrateur.

J’ai aussi ajouté un bloc à propos avec le contenu de chatgpt sur le restaurant. Ici j’ai une image gratuite en exemple trouvée sur Pexels.com. J’enregistre et je quitte le constructeur Divi pour voir ce que le site donne en vrai.

Voici donc le début de site créé avec ces quelques outils et un peu d’imagination. J’espère que cette vidéo vous a aidé et vous a plu. Qu’avez-vous pensez de ces intelligences artificielles ? Personnellement je pense que c’est une bonne entrée en matière dans ce vaste sujet.

Si vous trouvez que j’ai oublié de parler de quelque chose qui vous semble intéressant à aborder ou si vous avez des questions n’hésitez pas à me le dire en commentaire de cette vidéo. Merci de m’avoir écoutée jusqu’au bout. N’hésitez pas à consulter nos autres vidéos tutoriel, notamment ma vidéo Divi complète,

À vous abonner et à profiter du code promo IA10 sur LWS.fr ! À bientôt.