Créer une maquette de A à Z en 2h
Publié le 17 novembre 2024 - par Andy Cinquin
MaquetteDesignDéveloppement
Que vous soyez en freelance, que vous soyez en CDI ou en CDD, développeur ou bien chef de projet, designer,
Si vous avez déjà eu l'occasion de créer des maquettes pour des applications de gestion ou de suivi de quelque chose, que ce soit de la gestion/suivi de stock, gestion/suivi de candidature, ou peu importe...
Cet article devrait vous intéresser.
Aujourd'hui nous allons voir le processus complet pour créer une maquette de A à Z, et la présenter à votre client, en version POC en l'espace d'une demi-journée, plusieurs écrans toutes les fonctionnalités en une demi-journée ?!
Vous avez bien lu !
Bon, on va rentrer dans le vif du sujet.
Vous aurez besoin de :
- un abonnement/une clé d'API Anthropic/OpenAI/ChatGPT, votre LLM favori
- (je conseille une clé d'API Anthropic, la journée vous coûtera environ 30 centimes, ça va, c'est "ok")
- un compte sur v0
- un compte Figma
- un stylo, et une feuille blanche
Étape 1. On recueille le besoin
On prend rendez-vous avec votre client, la personne qui a l'idée et qui a un besoin, on lui pose des questions, on se familiarise avec le projet, avec le besoin, pendant la réunion, on prend des notes, on dessine, on fait des schémas sur papier, des gribouillis, peu importe, ça peut ressembler à n'importe quoi,
aucun talent requis, ça peut ressembler à ça :
(je sais, je dessine trop bien), on prend des notes, on a un début d'idée
Étape 2. On donne tout ça à notre LLM
On envoie nos images, nos screens, notre contexte, en brut, on donne nos notes et nos explications, au plus il y a de contexte, au mieux c'est.
Si vous voulez une source d'inspiration sur la façon de disposer les éléments, je vous conseille ce site internet :https://refero.design/
il vous permettra de voir ce qui est fait dans d'autres cadres et dans d'autres sites connus, c'est souvent très utile pour avoir des exemples.
Et on demande à notre LLM de transformer ce besoin en une description complète d'un wireframe
"aide-moi à faire un prompt qui décrit parfaitement le contenu de ce wireframe, prends en compte le screen que je t'ai donné et les sources d'inspiration, sois le plus précis possible."
Puis après sa réponse, on vérifie, et on lui demande de transformer ça en wireframe sur Excalidraw.
"Transforme tout ce wireframe textuel en un fichier Excalidraw parfaitement formaté pour cette même plateforme."
On se retrouve alors avec un fichier Excalidraw complet, on l'enregistre, et on l'envoie dans le site Excalidraw.
(le fichier doit être enregistré en .json)
Étape 3. Excalidraw
https://excalidraw.com/
Bravo, en 15 secondes, vous avez votre premier écran de mockup pour votre maquette
Étape 4. On répète ce processus pour tous nos écrans, puis on partage ça avec notre client
On va voir notre client avec l'ensemble de nos mockups, voir si dans l'idée les fonctionnalités lui conviennent, on prend des notes sur tout ce qu'il dit, on prépare toutes les améliorations.
Étape 5. La maquette
Une fois qu'on a le mockup et les retours clients, on envoie ça dans notre LLM favori et on lui demande une spec par rapport au design et à l'UI & UX de notre fonctionnalité,
et là, c'est là que la magie opère !
On va sur https://v0.dev/
et on envoie notre description complète de ce qu'on veut :
Un onglet de preview, un onglet de code React.
Partagez ça avec votre client, ou copiez ça dans un Figma pour le rendre interactif, et voilà, vous avez votre POC, et votre MVP !
Pour le back et les données, un CMS Headless suffit amplement, Strapi, Directus, Pocketbase... ou peu importe.
Pour le back, React, Next, ou peu importe également, copiez le code de ce projet à l'intérieur, et en une demi-journée, vous avez votre application fonctionnelle, en une semaine, vous avez absolument tout codé !
Vous pensiez ça possible vous ? un processus pareil ?
En vous remerciant de votre visite, n'hésitez pas à me
contacter pour toute demande de renseignements, devis ou
proposition de collaboration. Je me ferai un plaisir de
vous répondre dans les plus brefs délais.
Vous avez aimé cet article ? N'hésitez pas à le partager !