Prototipi perfetti e disegni di distribuzione con Marvel

Sep 13, 2025

Come si fa

A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

Con una curva di apprendimento più breve dell'App di InVision e dei nuovi strumenti di handoff di progettazione per le squadre aziendali, non c'è momento migliore per esplorare come la meraviglia può essere una soluzione rapida e senza sforzo per la prototipazione di applicazioni web e mobili in team.

Marvel aiuta le squadre a prendere i loro disegni (realizzati in schizzi o meravigliati) dall'idea abbozzata al concetto iniziale al concetto testato. I suoi strumenti collaborativi incoraggiano le parti interessate non solo per avere la loro dire ma essere una parte del flusso di lavoro di progettazione.

01. Crea il tuo primo progetto Marvel

Marvel's new design screen, indicating the locations of the buttons to create new designs. — Una volta selezionato il tuo progetto, fai clic su uno dei due pulsanti per avviare il processo di progettazione

Iscriviti a Marvel per iniziare, dove sono richiesti solo il tuo nome e indirizzo email. Scegli un progetto di progettazione o prototipo. Un progetto prototipo è quando carichi schermi che hai già progettato (solitamente nello schizzo). Un progetto di design è quando sei a partire da zero e desideri utilizzare gli strumenti di progettazione di Marvel per creare un modello a bassa fedeltà (questa è un'opzione straordinaria per rapida iterazione e brainstorming).

Scegli il progetto di design, quindi dai un nome, quindi scegli iPhone X e fai clic sul pulsante Crea progetto. Da qui (chiameremo questo Dashboard del progetto da qui On Out), fai clic sul pulsante Design sul lato sinistro o il pulsante Start Designing nel mezzo della finestra.

02. Design Prototipi a bassa fedeltà

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — È possibile utilizzare e adattare i componenti pronti, come questa schermata della fotocamera

Il nostro obiettivo principale qui è visualizzare rapidamente le nostre idee senza sprecare troppo tempo a preoccuparti di ciò che sarà il risultato finale. Da qui siamo in grado di creare forme, immagini, testo, componenti pronti come schede di schede e anche interi componenti a schermo intero come questa schermata della fotocamera (che è stata selezionata dalla barra laterale sinistra e restyled usando la mano destra barra laterale).

Disegnare forme, creazione di strati di testo e facendo semplici cambiamenti visivi è abbastanza facile anche per un non-designer, anche se i designer esperti adoreranno quanto rapidamente siano in grado di lanciare un'idea insieme e fare clic sul pulsante Aggiungi al progetto.

Anche se non puoi aspettarti disegni vettoriali, mascheratura e altri strumenti di progettazione complessi, questa interfaccia si sente molto familiare se sei uno schizzo, Adobe XD o Utente FIGMA (infatti, discuteremo l'importazione di disegni di fedeltà più elevati da schizzi in un momento). Quello che puoi aspettarti è lo zoom, allineare, raggruppamento, strumenti di progettazione visiva di base, controlli del mouse come trascinamento, ridimensionamento e rotazione e poche scorciatoie da tastiera pratiche.

03. Ricevi feedback.

Tuttavia, Marvel non è solo per i progettisti. Mentre potrebbe richiedere un designer di creare il design finale in un'app di progettazione standard del settore, le idee dovrebbero (e fare) provengono da tutti i tipi di stakeholder (manager, clienti, sviluppatori e così via).

Non importa quale sia il tuo ruolo principale in una squadra, dovrebbe essere super-facile da dire: "Ehi, potrebbe essere un'idea?", Quindi dimostrare che visivamente. Marvel's. POP L'app mobile riduce ulteriormente la barriera della voce, portando ulteriormente questi strumenti di progettazione semplificati ai dispositivi mobili perché, affrontiamolo, le idee possono venire da noi al più strano dei tempi. Le idee abbozzate su carta possono essere convertite in uno schermo a meraviglia interattivo utilizzando la fotocamera del dispositivo. Il design deve essere un democratizzato, dove chiunque può avere da dire senza essere limitato all'utilizzo di applicazioni di progettazione complesse.

04. Integrazione della meraviglia con lo schizzo

Dopo aver fatto il brainstorming produttivamente idee a bassa fedeltà con la tua squadra, vorrai meritare la prima iterazione nella tua app Design di scelta. Mentre puoi caricare totalmente gli schermi PNG esportati da qualsiasi app di progettazione, lo schizzo è l'app consigliata perché c'è un plugin di schizzi dedicato che automatizza il processo (e persino letture del disegno in modo che possa essere ispezionata dagli sviluppatori in seguito). Il supporto Photoshop per il distributore del design arriverà più tardi, tuttavia Adobe non sta rilevando più Photoshop per la progettazione dell'interfaccia utente, poiché ha creato Adobe XD.

Dal Dashboard, fai clic su Impostazioni e GT; Integrazioni e GT; Plugin di schizzo, quindi download plugin. Una volta installato, e il tuo file di progettazione è aperto, premi la sincronizzazione selezionata o sincronizza tutti i pulsanti nella barra della Marvel (questo appare sopra l'elenco dei livelli) per iniziare a scegliere un progetto Marvel per sincronizzare le schermate.

05. Prototipo interazioni

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — Drag-Seleziona le regioni per creare hotspot per il collegamento da uno schermo all'altro

Ma ovviamente non possiamo testare i prototipi se non abbiamo aggiunto alcuna interazione a loro, quindi facciamolo ora. Ritorno alla cruscotto della Marvel, dove vedrai gli schermi che abbiamo sincronizzato, fare clic su Visualizza su una qualsiasi delle schermate per accedere alla modalità schermata.

Da qui possiamo ancora navigare attraverso gli schermi utilizzando le frecce sinistra e destra su entrambi i lati della finestra, fare clic su Timer per avere il ciclo di Marvel attraverso gli schermi dopo un certo numero di secondi (utile per presentazioni!) O fare clic su Nessun commento da aggiungere Il tuo primo commento o annotazione sullo schermo.

Probabilmente la prima cosa che avrai note è l'intestazione fissa e i pulsanti del piè di pagina fisso che appaiono rispettivamente negli angoli in alto a sinistra e in basso a sinistra dello schermo. Questi pulsanti sono trascinabili e possono anche essere spostati per contrassegnare la regione di taglio di una sezione di intestazione che è quella di rimanere fissata alla parte superiore di una vista scorrevole. È inoltre possibile utilizzare i campi di testo nell'angolo in alto a destra e in basso a destra per specificare questo valore manualmente.

Ma come possiamo effettivamente collegare uno schermo all'altro? Semplice: con il mouse, trascina: seleziona una regione sullo schermo da collegare a un'altra schermata (questo è chiamato 'hotspot'). Una volta che l'hai fatto, un'interfaccia apparirà nella parte inferiore della finestra che consente di personalizzare dove viene prelevato l'utente, qualsiasi transizione che accade durante l'interazione e quale gesto è necessario per attivare quell'interazione (toccare, Swipe, ecc. ).

E, naturalmente, possiamo usare questi strumenti di prototipazione anche su mockup a bassa fedeltà. In effetti, si consiglia di fare, tutto il tempo utilizzando le funzionalità di commento per discutere e ribadire.

06. Disegnare i disegni agli sviluppatori

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element. — Il design handoff rende facile per la progettazione e lo sviluppatore lavorare tra loro

Quando il tuo team conserva la piena fiducia nel design finale, convalidato utilizzando gli strumenti di commento e test utente, è ora di consegnarlo agli sviluppatori che possono quindi ispezionare e il codice. È importante ricordare che un designer non è "fatto" una volta consegnato il design e che i designer e gli sviluppatori dovrebbero sempre comunicare in armonia per supervisionare lo sviluppo fino al suo completamento. Lo sviluppatore può anche avere alcune domande, quindi quelle caratteristiche commentabili dovrebbero essere ancora molto attive.

Premi il pulsante PLAY, quindi fai clic su Handoff nell'angolo in basso a sinistra per aprire l'interfaccia di handoff di progettazione. Da qui, gli sviluppatori saranno in grado di fare clic sugli elementi di progettazione e ispezionare i singoli stili che li rendono ciò che sono, usando la barra laterale sul lato destro (molto simile all'interfaccia di ispezione in schizzo, figma o Adobe XD). L'unica differenza qui è che gli sviluppatori sono in grado di fare clic sul pulsante Copia per copiare gli stili come codice negli Appunti.

Questo articolo è stato originariamente pubblicato in emissione 301 di NET, la rivista best-seller del mondo per i web designer e sviluppatori. Acquistare Edizione 301. o Iscriviti a Rete. .

Ottieni più informazioni sulla prototipazione iterativa

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morby sta dando a loro discorso come i test iterativi del prototipo ti aiuteranno a creare un design vincente, ogni volta a Genera New York dal 25-27 aprile 2018

Quando la maggior parte delle aziende ha bisogno di creare un nuovo web design, il processo inizia tipicamente con idee di pitching, si muove per progettare, quindi lo sviluppo, e poi va in diretta. Ma cosa succede se non funziona? È un sacco di tempo, sforzi e denaro da spendere solo per scoprire che un'idea eseguita male.

Fortunatamente, nel suo discorso a Genera New York dal 25-27 aprile 2018 , Marisa Morby, capo della ricerca a ClearHead, ti mostrerà un modo migliore per creare e convalidare nuovi disegni più veloce, più facile e meno costosi del processo di progettazione tradizionale utilizzando prototipazione e test iterativi.

Genera New York avviene dal 25 al 27 aprile 2018. Ottieni il tuo biglietto ora .

Articoli Correlati:

10 strumenti di prototipazione superiore
I 18 migliori strumenti wireframe
Come evitare le insidie di prototipazione

Prototipi perfetti e disegni di distribuzione con Marvel

01. Crea il tuo primo progetto Marvel

02. Design Prototipi a bassa fedeltà

03. Ricevi feedback.

04. Integrazione della meraviglia con lo schizzo

05. Prototipo interazioni

06. Disegnare i disegni agli sviluppatori

Ottieni più informazioni sulla prototipazione iterativa

Come si fa - Articoli più popolari

Come utilizzare Cloud Storage come creativo

Come creare un'icona di app in Illustrator

Come disegnare piume

Come montare la tua opera d'arte

Sculpt Anatomia realistica in Zbrush

Un'introduzione al test frontend

7 modi killer per influenzare il comportamento dell'utente

Accelera la tua modellazione 3D

Categorie