Table des matières
Le logiciel de création d’images par intelligence artificielle Midjourney permet de concevoir de nombreux éléments nécessaires au webdesign :
- logo
- maquettes
- textures / arrière-plan (background)
- éléments d’interface / ux / ui design
- illustrations (hero sections, articles de blog, diaporamas / sliders…)
Dans cet article, on va s’intéresser à chacun de ces thèmes, point par point.
Si vous souhaitez apprendre à utiliser Midjourney, voici un tutoriel complet.
Midjourney pour créer un logo, un logotype ou un logomark
Il faut d’abord souligner qu’il existe 3 types de logos :
- les logotypes
- les logomarks ou logomarques
- les logos mixtes, qui mélangent un logotype et un logomark
Le logotype
Les logotypes sont des logos qui donnent du style au nom de la marque en tant que mot.
Par exemple, le logo de Facebook est un logotype : la marque ne se représente que par son nom, associé à une certaine typo et à une couleur précise et invariable.
Pour l’instant, même en version 4, Midjourney n’est pas très à l’aise pour produire ce type de logo, assez étranger à son fonctionnement.
En effet Midjourney est conçu pour reproduire des caractéristiques visuelles analysées depuis des images.
Ci-dessous, malgré mon prompt très clair, Midjourney n’a pas réussi à écrire correctement le mot marque… Le prompt était :
« MARQUE » logo, the word « MARQUE » as a logo, written in thick black letters, white background::4 –no background –v 4 –s 750
Le logomark
Un logomark est un logo sans texte, où la marque est représentée par une image, une icône.
L’exemple le plus célèbre est probablement le « swoosh » de Nike, mais il y a également le coquillage de Shell, les sigles de Mercedes et d’Audi, les 3 bandes d’Adidas, etc.
Parfois, le logo est une image compliquée, une petite scène. Mais plus souvent, il s’agit d’un seul élément ou d’un nombre réduit d’éléments, sous forme vectorisée ou quasiment.
Midjourney produit sans souci ce genre de logo.
On peut lui indiquer des éléments à utiliser, un style et des couleurs. Ensuite il faudra probablement « re-roll », relancer l’instruction encore et encore, puis peaufiner, raffiner, pour améliorer le logo, qui sera rarement utilisable tel quel : il faudra donc reprendre les suggestions de Midjourney et les recréer sous tel ou tel logiciel de création graphique, comme Photoshop ou Adobe Illustrator.
Logo pour fabricant de vélo écolo
J’ai tenté l’expérience avec l’exemple fictif d’un fabricant de vélos écologiste. Sur une instruction vague, Midjourney m’a d’abord généré des logos plutôt classiques et banaux. Je lui ai donc dit de faire des images plus minimalistes, plus vectorielles, plus simples, et j’ai obtenu la jolie silhouette d’un vélo vert orné de feuilles, assez proche de l’idée que je me fais d’un bon logo pour un fabricant de vélos écolo. Il faudrait l’épurer encore mais on est sur le bon chemin !
Le logo mixte
Un logo mixte associe un logotype et un logomark.
Par exemple, le nom de la marque inscrit dans un dessin, entourée d’ornements ou de symboles.
Logo pour un site de vétérinaire
J’ai imaginé le cas d’un site de vétérinaire et créé ces logos qui associent l’image et le texte. Il faudrait évidemment gommer les faux textes et les remplacer par le nom d’une clinique vétérinaire ou d’un professionnel.
Logo pour un site de thérapeute
Ci-dessus, j’ai montré des exemples de logos faits par Midjourney, que j’ai publiés sans retouche, brut de décoffrage.
Mais voici une petite série de logos pour thérapeute psy, faits à partir d’images générées, mais recréés avec Adobe Illustrator :
Pour en savoir plus, lisez cet article :
Créer un logo de psychologue, psychothérapeute, psychanalyste, psychiatre
Midjourney pour générer des maquettes
Midjourney peut générer n’importe quel format d’image mais pas avec n’importe quel « aspect ratio ».
En effet, sa meilleure version, la version 4, est limitée à des formats de type carré 1:1, ou rectangulaire 3:2 (format paysage) ou 2:3 (format portrait).
Pour avoir des formats plus libres, il faut repasser en version 3, voire 2 ou 1, et donc… dégrader sérieusement la qualité des images.
N’empêche : il reste possible de faire générer des parties de maquette (layout en anglais) à Midjourney, à condition de désigner correctement ce qu’on lui demande, en utilisant un vocabulaire précis associé à des images qu’il connait. Il faut par exemple utiliser des mots qui désignent clairement les parties d’un site web, comme :
- header
- menu
- footer
- Hero section
- contact section
- testimonials section
- etc
Voici quelques exemples.
Header / Hero section
Site web de moto
J’ai demandé à Midjourney de générer des images de header pour un site de moto imaginaire.
Il a proposé les 4 images ci-dessous à gauche.
J’ai ensuite fait un « remix » de la 4è image, où je lui ai indiqué un nouveau jeu de couleurs : orange, rouge, violet, rose. Il a donc produit les 4 images à droite.
Bien sûr, aucune de ces images n’est utilisable telle quelle mais avec un peu de travail on pourra en faire un joli site.
Je pourrais ensuite en agrandir une, éliminer le texte, supprimer le fond blanc, faire quelques retouches, et utiliser l’image dans une section Hero dans le header d’une maquette.
Ensuite, la difficulté serait de créer tout un site dans ce style en maintenant une suffisante homogénéité de style et de couleurs.
Site web d’école
J’ai indiqué à Midjourney que je voulais un header pour un site d’école primaire, sous forme d’une illustration à l’aquarelle avec une école, des enfants et des couleurs vives et joyeuses.
Je pourrais créer tout un design en variant les instructions, tout en conservant celles concernant la technique et les couleurs.
Menu
J’ai demandé à Midjourney de créer des images aux couleurs pastels, correspondant à une interface graphique de type menu. Je pensais au menu du header d’un site Internet mais Midjourney a plutôt fait des éléments utilisables dans, par exemple, une grille tarifaire ou une liste de fonctionnalités.
C’est frais et inspirant ; même s’il faudrait des heures de travail humain pour convertir ces idées chaotiques en un design cohérent.
Fiche-produit
Site de vêtements de mode
Pour un site fictif qui vendrait des vêtements de mode, on pourrait utiliser un ou plusieurs de ces designs, dans les fiches-produit ou dans les pages principales, au milieu de la page d’accueil ou d’une page Boutique par exemple :
Salon de beauté ou salon de coiffure
En postulant l’existence d’un site pour salon de beauté ou pour salon de coiffure, j’ai imaginé ces designs de fiches-produit avec Midjourney :
Footer
Site d’entreprise
Imaginez l’image ci-dessous en tant que footer, pied de page d’un site d’entreprise : à la place du titre on aurait le nom de l’entreprise, ou son slogan, en-dessous on rajouterait une description des activités de l’entreprise avec un bouton ramenant à la page A propos, au-dessus on aurait un menu de pied de page, et tout en bas un menu « mentions légales ».
Site culturel
Dans un style plus abstrait, on pourrait avoir cette mascotte monstrueuse en bas de page, sorte de gardien du temple veillant sur deux menus secondaires.
Cela pourrait illustrer un site culturel par exemple.
Site perso, site de prof, prestataire de services etc
Sur un site perso, le site d’un prestataire, d’un prof, d’un coach, on pourrait placer ce type de pied de page, avec un portrait de l’auteur qui viendrait en quelque sorte signer et personnaliser le bas de chaque page.
Contact
Midjourney pour créer des textures / arrière-plan
Quand on crée le webdesign d’un site, on a souvent envie d’avoir autre chose sous la main que des aplats de couleurs unis, ou des gradients à deux couleurs.
On peut utiliser Midjourney pour créer des textures, des backgrounds / arrière-plans, dans les styles et les couleurs voulus.
Par exemple
Les textures « seamless » / tiles infinies
Une fonction intéressante de Midjourney permet de lui faire créer des textures continues, appelées « seamless » en anglais.
Il faut pour cela utiliser l’instruction –tile
Les images générées avec l’instruction –tile pourront être répétées horizontalement et verticalement. On pourra les redimensionner pour agrandir ou rapetisser le motif.
Midjourney pour générer des éléments d’interface / ux / ui design
Pour créer tout une interface web, ce qu’on appelle le design d’UI / UX (user interface et user experience), Midjourney sera très utile.
L’IA permettra de créer des variations sur la base d’instructions incluant des couleurs et des styles.
Il faudra mentionner des termes précis, par exemple neumorphism, glassmorphism, flat design, baroque, vector art, paper art, shadows…
Design d’interface ui / ux neumorphism
Midjourney m’a par exemple créé ces propositions de design d’interface sobres, à dominante grise, dans un style neumorphisme ( = avec des contrastes faibles, des jeux d’ombres, dans une tonalité pauvre en couleurs, plutôt bichrome), avec toutes sortes de boutons et de réglages :
Partant de là, je pourrais imiter ces éléments d’interface de diverses manières :
- soit en créant des images pour chaque élément, à utiliser ensuite aux formats PNG ou SVG par exemple
- soit en traduisant ces graphismes en classes CSS, dans une feuille de style personnalisée à intégrer sur n’importe quel site
Design d’interface ui / ux style néon / luminescent
Dans cet exercice de design imaginaire, j’ai écrit ce prompt :
ux ui, user interface elements, webdesign, bioluminescent, yellow, pink, blue, neon lights, black background::4 –no background –v 4 –s 750
et Midjourney m’a proposé ceci :
Une partie de ces suggestions inspirantes serait possible à recréer uniquement avec du CSS, des border, des shadow etc.
Design d’interface ui / ux style hi-tech
Midjourney m’a également généré ces propositions, alors que je lui suggérais de créer des éléments d’interface web dans un style high-tech en gris, vert et rouge :
Design d’interface ui / ux style papier découpé
Dans un style nommé en anglais « paper art » ou « quilled paper », j’ai généré ces propositions d’interface avec Midjourney.
Il faudrait découper les éléments dont on souhaiterait se servir, ou les générer à nouveau sur fonds blanc avant d’aller les isoler sous Illustrator ou autres, avant de pouvoir les réutiliser sur un site web.
On pourrait également recréer ces éléments en vecteurs et les exporter en PNG ou en SVG.
Midjourney pour créer des illustrations (articles de blog, diaporamas / sliders…)
A côté du webdesign à proprement parler, Midjourney peut aussi servir à illustrer n’importe quel site web, en respectant son style, son ton, son esthétique, ses couleurs etc.
On peut lui faire créer notamment :
- des images à la une, illustrant des articles de blog ou des articles de presse
- des diaporamas
- des infographies (Midjourney ne vous fera pas l’infographie elle-même, mais pourra vous suggérer un style, une composition)
On peut lui faire représenter tout et n’importe quoi :
des enfants Néanderthal jouant sur une plage…
… le dessin d’un petit chat jouant avec une balle de laine…
… la caricature de Poutine qui envahit l’Europe à dos d’âne…
… l’anatomie d’un coureur…
… la carte de l’Espagne en fruits et légumes…
… la rencontre historique de De Gaulle et Mickey Mouse en 1940…
Conclusion
Il y aura très probablement un avant et un après l’IA sur le web.
La génération d’images, de même que la génération de textes, vont à la fois augmenter la quantité des contenus disponibles, et améliorer la qualité des meilleurs contenus.
Pendant encore quelques années, les intelligences artificielles ne sauront pas créer des sites web de A à Z, de sorte qu’il faudra encore des artistes et des techniciens pour s’occuper de webdesign.
Offre de service
Je serai ravi d’employer mes compétences nouvellement acquises en termes de génération d’images sur Midjourney, et de les mettre au service de vos projets.
Je propose principalement :
Si cela vous intéresse, n’hésitez pas à me contacter !
