Créer un prototype interactif
Commencez avec le modèle Landing OpenDesign intégré, personnalisez-le et vérifiez la page réelle avant de la livrer. Vous pouvez également créer un nouveau Prototype à partir d’un brief.
Étape 1 — Ouvrir le modèle
Ouvrez Community et choisissez Landing OpenDesign. Examinez l’aperçu, puis ouvrez More ways to Use et choisissez Remix pour créer un projet modifiable à partir de l’exemple. Use démarre à partir du prompt d’exemple ; Remix copie l’exemple dans un projet que vous pouvez modifier.
Le modèle est un exemple de design. Les versions, chiffres, témoignages et liens qu’il contient sont des exemples de contenu ; vérifiez-les et remplacez-les avant de l’utiliser pour un produit réel.
Étape 2 — Donner un objectif clair à la page
Ouvrez index.html depuis Design Files. Preview affiche la page et Code affiche son code source. Décidez des éléments du modèle à conserver : sa typographie éditoriale, son fond couleur papier chaud, son collage et le rythme de ses sections. Dressez la liste des informations produit, des appels à l’action et des destinations que vous remplacerez.
Adapte cette landing page pour un studio de design indépendant fictif. Conserve le papier chaud, les accents corail, la typographie éditoriale et le collage. Remplace le contenu du hero, des services, des projets sélectionnés et du contact par des exemples clairement fictifs. Fais en sorte que la navigation mène à la bonne section ; utilise des destinations factices plutôt que de véritables parcours de compte ou de paiement. Vérifie l’affichage sur ordinateur et sur mobile à 390px. Fournis un HTML modifiable et les ressources auxquelles il fait référence.Il s’agit d’un exemple de brief que vous pouvez adapter, et non d’une affirmation selon laquelle les captures d’écran ont été générées à partir de celui-ci. Pour un projet vierge, choisissez Prototype sur Home, terminez la configuration de l’IA, puis envoyez votre brief avec des références.
Étape 3 — Effectuer une petite modification directe
Choisissez Edit, sélectionnez le mot d’accentuation en italique dans le hero et remplacez son Text de taste, par craft,. Choisissez Save. Quittez le mode d’édition et rechargez la page : le titre doit toujours afficher craft,. Le guide de modification du canevas explique la typographie, la couleur, la taille, l’espacement et l’annulation.
Étape 4 — Vérifier un autre viewport
Utilisez le menu Desktop au-dessus du canevas pour choisir Mobile (390 × 844) ou Tablet (820 × 1180). Vérifiez les retours à la ligne, la navigation, l’espacement, le recadrage des images et les cibles tactiles. Cette action modifie la taille de l’aperçu ; elle ne corrige pas automatiquement le design.
Étape 5 — Demander une révision ciblée
Utilisez Comment pour joindre une demande à un élément, ou Mark pour envoyer une capture d’écran et une note. Par exemple : « Mets ce mot d’accentuation en corail. Conserve sa police italique, sa taille et sa position. » Enregistrer un commentaire ne lance pas l’agent. Vérifiez le feedback sélectionné avant de choisir Send to chat. Consultez les outils de feedback.
Étape 6 — Tester et livrer
Quittez Edit, Comment et Mark avant de tester la navigation et les boutons. Vérifiez chaque lien de section et chaque destination, puis utilisez Export pour choisir PDF, image, ZIP ou HTML autonome, selon les options disponibles. Conservez les ressources référencées et ouvrez le livrable en dehors de l’application avant de le considérer comme terminé. Fichiers et versions du projet et partage présentent les autres méthodes de livraison.
Si Preview est vide
Attendez que l’aperçu se charge, puis choisissez Reload Preview. Utilisez Code pour confirmer que le fichier contient du contenu. S’il reste vide, rouvrez-le depuis Design Files ou exportez le HTML et ouvrez-le dans un navigateur avec ses ressources. Signalez la version de l’application, le fichier concerné et l’erreur s’il fonctionne en dehors de l’application mais échoue à l’intérieur.