L’heure du vibe design a sonné
Après le vive coding, vous en aviez rêvé ? Voici le vibe design. C’est comme ça que Google présente sa dernière nouveauté pour les créateurs de site web et d’app : un outil capable de vous créer des maquettes et des prototypes en moins de deux par la magie du verbe, ou plutôt, du prompt… puisque c’est bien en cela que se trouve la promesse de Stitch : pouvoir designer sans designer, comme on peut coder sans coder. L’IA est aussi en train de transformer la manière dont on designe le Web.
Qu’est-ce que ça veut dire exactement, donc ?
Eh bien, à partir d’une feuille blanche, et par la magie d’un simple prompt, Stitch peut vous créer un site ou une app en quelques instants à peine, sans que vous n’ayiez aucune connaissance en design d’interface.
Evidemment, c’est très pratique et ça va permettre de mettre entre les mains de n’importe quel quidam de tous la puissance de millions de compétences de designers mises en commune dans les tréfons d’un data-center perdu au fin fond de la planète, dont vous, forcément, qui êtes en train de me lire, si vous n’êtes pas designer.
Créer son site en quatre étape simplement avec Stitch
On va le voir, la création de site avec Stitch est un jeu d’enfant.
1 – Poser les bases de son projet
Promptez, disposez !
La première étape consiste à transformer vos désirs en ordre pour Stitch. Là, c’est assez magique. Vous dites quel genre de site vous voulez créer, avec quels genres de contenus. Vous pouvez lui donner le nom de votre site et lui expliquer quel va être sa fonction. Une fois que votre prompt, simple, sera créé, il ne restera plus qu’à l’injecter dans Stitch qui se chargera lui même de créer vos premières maquettes.
Un nouvel espace de travail très pratique
Stitch dispose désormais d’un véritable canva de travail, à l’instar de Figma, l’outil préféré des designers. Les maquettes s’y étalent dans toute leur beauté et vous pouvez à partir de ce moment là y retravailler, y revenir, apporter des modifications, tout en ayant une vue d’ensemble globale de votre projet.
Un nouvel agent designer
Google nous l’affirme : Stitch est sous-tendu par un nouvel agent IA spécialisé dans le design. Il ne s’agit pas plus simplement d’un outil qui envoie des réponses à des demandes, mais donc bien un véritable assistant capable de comprendre votre projet, son contexte, et capable d’agir avec une certaine logique pour vous aider à concevoir.
2 – Ajustez : devenez votre propre directeur artistique
Une fois la base posée – le premier résultat étant un peu décevant – on peut vraiment se mettre à la place du designer et commencer à discuter avec l’agent pour améliorer le premier jet. C’est ce que vous voyez en dessous et qui correspond beaucoup plus à mes attentes.
Promptez à la voix
Autre nouveauté de Stitch, le prompt à la voix. Parlez, Stitch écoute. Engagez carrément un dialogue avec lui, comme s’il était votre stagiaire dans le bureau, mais un stagiaire Ô combien puissant !
Google mets beaucoup l’accent sur cette nouveauté, mais je pense qu’elle n’apporte rien à l’expérience de création et que c’est même un frein. Mais, que voulez-vous, il faut bien vendre toutes ses technologies d’une manière ou d’une autre.
C’est donc le grand retour de la vocalité depuis quelques temps, dans le doux espoir nous faire communiquer avec nos machines comme nous communiquons entre nous, humains.
3 – Étendez/prototypez
La véritable grosse nouveauté de Stitch, selon moi, c’est sa capacité à créer et à exporter un véritable design system à travers un ficher markdown (.md) que vous pouvez réemployer ailleurs dans d’autres outils, et notamment dans l’outil vedette de Google, pour le développement, j’ai nommé Antigravity.
Avec le fichier Design/md, vous allez pouvoir appliquer simplement le même style graphique à toutes vos pages sans difficultés. Autant dire que c’est vraiment une grande force de Stitch tant garder une interface homogène pendant le travail de conception est une épreuve.
Mieux encore : vous allez pouvoir prototyper directement dans Stitch et tester vous même en direct l’expérience de votre site. Plus besoin de développeur, plus besoin de designer, tout le pouvoir de ces deux nobles professions sortiront de Stitch comme le génie sort de sa bouteille.
4 – Exportez
L’intérêt de Stitch, c’est qu’il n’est pas enfermé dans son univers particulier, mais est intégré à l’écosystème de Google. C’est voulu, bien sûr, mais ça donne une dimension supplémentaire à l’outil, car il permet d’exporter les maquettes créées directement dans Antigravity ou AI Studio, les outils de développement maison et pour lequel je vous ai déjà fait par de mon engouement.
Mais à qui s’adresse Stitch ?
Il ne faut pas l’oublier : Stitch est un produit Google Labs, c’est à dire qu’il n’est pas encore fini. Vous pouvez l’utiliser si vous avez un compte Google Pro et découvrir par vous même ce qu’il peut faire pour vous, mais, de toute évidence, Stitch n’est pas un outil à remettre entre toutes les mains, même si il promet de permettre à tout un chacun de vibe designer, la réalité reste plus complexe.
Sans l’œil d’un designer, sans les compétences d’un UX designer, sans expérience, vous tirerez moins de Stitch qu’un template préformaté qui vous fera gagner beaucoup plus de temps et ne vous embarquera pas dans un véritable process de design dont vous pourriez ne jamais ressortir « vivant » 🙂
C’est donc bien plutôt un produit d’agence ou d’indépendant qui auront sans doute encore plusieurs mois pour le prendre en main et préféreront dans doute encore pendant quelques temps leur outils favori : Figma. Mais c’est un outil qui montre aussi la direction que prendra le design d’interface et qu’il faut comprendre.
Mes conseils pour utiliser Stitch
Si Stitch permet d’aller vite, il ne doit pas empêcher la réflexion. Voici quelque conseils pour vous aider à mieux orienter Stitch et à créer rapidement des sites ou des apps en gagnant du temps.
Définissez clairement votre charte graphique
Même si Stitch peut vous aider, il vaut mieux lui mettre le pied à l’étrier et l’orienter.
Inspirez-le en trouvant les bonnes palettes de couleurs. Pour trouver ce qui vous inspire, faites un benchmark concurrentiel, mais essayer de trouver vous même des sites qui vous plaisent. Je pense que c’est réellement une bonne approche de commencer comme ça.
Définissez votre arborescence avant
Même si cela semble pouvoir vous faire gagner du temps, définissez d’abord votre arborescence avant. Pour aller vite, le plus simple est de faire un schéma à la main, de le scanner et de demander à votre IA préférée de générer un fichier json qui décrira votre arborescence. Mais vous pouvez aussi le faire directement dans Stitch.
Écrivez vos textes au préalable
Il peut être tentant de demander à une IA de générer tous les textes de votre site, mais ce n’est pas une bonne idée. Faites un travail de préparation au préalable. Et même si vous n’avez pas la plume facile, je vous conseille de décrire tous vos contenus sous forme de liste à puces pour que l’IA puisse s’en emparer et vous écrire ensuite vos contenus.
Ne vous précipitez pas sur la première solution que vous propose Stitch
Stitch possède une fonctionnalité très pratique qui permet de générer plusieurs variantes. Autant utiliser l’IA pour ce qu’elle sait faire de mieux : travailler vite et puissamment. Prenez des risques et essayez plusieurs versions de ce que vous imaginez. Ne vous privez pas, c’est une des grandes forces de l’IA de vous permettre de générer beaucoup d’idées.
Laisser un commentaire