Crea un prototipo interattivo

Passaggio 1 — Apri il template

Apri Community e scegli OpenDesign Landing. Esamina l'anteprima, quindi apri More ways to Use e scegli Remix per creare dal modello un progetto modificabile. Use parte dal prompt del modello; Remix copia il modello in un progetto che puoi modificare.

Il template è un progetto di esempio. Tutte le versioni, i conteggi, le testimonianze e i link al suo interno sono contenuti dimostrativi: verificali e sostituiscili prima di usarlo per un prodotto reale.

Passaggio 2 — Assegna alla pagina uno scopo chiaro

Apri index.html da Design Files. Preview mostra la pagina, mentre Code ne mostra il codice sorgente. Decidi cosa mantenere del template: lo stile tipografico editoriale, lo sfondo caldo effetto carta, il collage e il ritmo delle sezioni. Elenca le informazioni sul prodotto, gli inviti all'azione e le destinazioni che sostituirai.

Adatta questa landing page per uno studio di design indipendente fittizio. Mantieni l'effetto carta dalle tonalità calde, gli accenti corallo, la tipografia editoriale e il collage. Sostituisci i testi della sezione hero, dei servizi, dei lavori selezionati e dei contatti con contenuti di esempio chiaramente fittizi. Fai in modo che la navigazione porti alla sezione corretta; usa destinazioni segnaposto anziché flussi reali per account o pagamenti. Controlla la visualizzazione desktop e quella mobile a 390px. Fornisci HTML modificabile e le risorse a cui fa riferimento.

Questo è un brief di esempio che puoi adattare, non un'affermazione che gli screenshot siano stati generati a partire da esso. Per un progetto vuoto, scegli Prototype nella Home, completa la configurazione dell'AI e invia il brief con i riferimenti.

Passaggio 3 — Apporta una piccola modifica diretta

Scegli Edit, seleziona la parola accentata in corsivo nella sezione hero e modifica il relativo campo Text da taste, a craft,. Scegli Save. Esci dalla modalità di modifica e ricarica: il titolo dovrebbe continuare a mostrare craft,. La guida alla modifica nell'area di lavoro illustra tipografia, colore, dimensioni, spaziatura e annullamento.

Passaggio 4 — Controlla un'altra viewport

Usa il menu Desktop sopra l'area di lavoro per scegliere Mobile (390 × 844) o Tablet (820 × 1180). Controlla l'andata a capo, la navigazione, la spaziatura, il ritaglio delle immagini e le aree di tocco. Questa operazione cambia le dimensioni dell'anteprima, ma non corregge automaticamente il progetto.

Passaggio 5 — Richiedi una revisione mirata

Usa Comment per associare una richiesta a un elemento oppure Mark per inviare uno screenshot e una nota. Ad esempio: “Rendi corallo questa parola accentata. Mantieni invariati il carattere corsivo, le dimensioni e la posizione.” Il salvataggio di un commento non avvia l'agente. Controlla il feedback selezionato prima di scegliere Send to chat. Consulta gli strumenti per il feedback.

Passaggio 6 — Esegui i test e consegna

Esci da Edit, Comment e Mark prima di testare la navigazione e i pulsanti. Controlla ogni link di sezione e destinazione, quindi usa Export per scegliere PDF, immagine, ZIP o HTML autonomo, in base alle opzioni disponibili. Mantieni le risorse a cui si fa riferimento e apri il materiale da consegnare all'esterno del client prima di considerarlo completato. File e versioni del progetto e condivisione illustrano le altre modalità di consegna.

Se Preview è vuota

Attendi il caricamento dell'anteprima, quindi scegli Reload Preview. Usa Code per verificare che il file contenga dati. Se rimane vuota, riaprila da Design Files oppure esporta l'HTML e aprilo in un browser insieme alle relative risorse. Se funziona all'esterno del client ma non al suo interno, segnala la versione dell'app, il file interessato e l'errore.