Chi sapeva che Adobe CC poteva Wireframe?

Il wireframing è un passo importante nella progettazione di qualsiasi interfaccia utente, che si tratti di un sito Web, di un'applicazione o di un prodotto software. Senza distrazioni sotto forma di elementi visivi, colori, tipografia, stili ed effetti, puoi concentrarti maggiormente sulla definizione della gerarchia dei contenuti e dell'esperienza utente.

L'esecuzione di wireframe e prototipi a bassa fedeltà ti aiuterà a testare e ripetere il processo prima e più spesso. I wireframe a bassa fedeltà consentono ai progettisti di lavorare più velocemente e sviluppare prodotti che gli utenti adoreranno.

Ci sono molti diversi strumenti di wireframing tra cui scegliere in natura. Quale scegli dipenderà dalle tue preferenze personali e dallo stile del flusso di lavoro.

Proprio come molti designer che sono passati al design digitale dal mondo della stampa, sono un esperto di applicazioni Adobe come Illustrator, InDesign e Photoshop. Posso usarli in modo efficiente e intuitivo da qualsiasi luogo e in qualsiasi momento (anche se qualcuno mi sveglia nel cuore della notte e si rifiuta di darmi una tazza di caffè).

Non sorprende che queste applicazioni versatili siano diventate anche gli strumenti che utilizzo per la progettazione visiva di applicazioni e web. Quindi, affinché il mio flusso di lavoro sia il più efficiente, li uso anche per il wireframing.

Con ogni progetto, di solito inizio a disegnare facendo schizzi molto approssimativi su carta, o sullo schermo del mio iPad o smartphone se non sono vicino alla scrivania dell'ufficio. Questi schizzi sono lì per focalizzare i miei pensieri sul concetto scelto; il cliente probabilmente non vedrà mai nessuno di loro. Quando sono sicuro che la mia idea funziona, passo al wireframing. Di solito uso Adobe Illustrator e InDesign combinati: Illustrator per creare la maggior parte degli elementi del kit dell'interfaccia utente e InDesign per il wireframing stesso.

Più avanti nell'articolo spiegherò un processo passo passo su come incorporare questi strumenti nel flusso di lavoro di wireframing, ma prima di entrare nei dettagli, lascia che ti mostri i punti di forza e di debolezza dell'utilizzo di InDesign come strumento di wireframe principale .

I pro ei contro dell'utilizzo di Adobe InDesign come strumento Wireframe e prototipazione

Da qualche tempo Adobe InDesign non è solo un'applicazione di desktop publishing, ma è anche ampiamente utilizzata per la pubblicazione digitale e la creazione di EPUB. Ci sono anche diversi motivi per cui è uno strumento adatto anche per il wireframing:

• Pagine master : puoi applicare in modo rapido e coerente elementi di progettazione globali come navigazione, intestazioni, piè di pagina e così via utilizzando le pagine master. Puoi creare tutte le pagine master di cui hai bisogno e, per di più, un master può essere basato su un altro.
• Supporto a griglia solida : consente di creare e applicare facilmente diversi tipi di griglie, integrando colonne, guide orizzontali e verticali per creare moduli e sottogriglie per una maggiore complessità e precisione.
• Layout alternativi : abilita wireframe per più dispositivi e orientamenti nello stesso file.
• Librerie CC : genera una libreria di diverse risorse riutilizzabili come oggetti, colori, caratteri e stili di paragrafo di uso comune. Crea risorse in InDesign, Illustrator o Photoshop o con l'app mobile Adobe Capture, come preferisci.
• Livelli – Offre la possibilità di organizzare, raggruppare, mostrare/nascondere e bloccare/sbloccare oggetti e contenuti in modo selettivo nel wireframe. Ogni pagina di un documento InDesign a più pagine ha lo stesso numero e lo stesso ordine di livelli. Tutte le modifiche apportate ai livelli si riflettono su tutte le pagine, come visibilità, ordine di sovrapposizione o eliminazione.
• Stili e tabelle : fornisce il controllo completo sull'aspetto del testo, degli oggetti e delle tabelle tramite l'uso degli stili di InDesign. Gli stili possono ereditarsi l'uno dall'altro fornendo la possibilità di sovrapporre facilmente la formattazione desiderata in tutto il documento. La creazione e la formattazione di tabelle da utilizzare come elementi di contenuto wireframe o anche come aiutanti per scopi di layout è molto semplice.
• Integrazione di Typekit : nei modelli ad alta fedeltà, puoi utilizzare uno qualsiasi dei caratteri Typekit che si sincronizzano con il desktop.
• Interattività e animazioni : puoi utilizzare le funzioni di interattività e animazione integrate di Adobe InDesign per creare diversi stati di elementi di progettazione Web o di applicazioni per la prototipazione dell'interazione. La maggior parte delle persone utilizza queste funzionalità durante la creazione di riviste per soluzioni di pubblicazione digitale e l'esportazione EPUB a layout fisso, ma sono adatte anche per la prototipazione.
• Opzioni di esportazione – InDesign può esportare i wireframe e i prototipi che crei in una varietà di formati. I PDF interattivi saranno probabilmente il tuo formato preferito nella maggior parte dei casi, ma puoi anche utilizzare la funzione Pubblica online per convertire il tuo documento in HTML interattivo, che può essere visualizzato nei moderni browser desktop e mobili. Sfortunatamente, non hai molto controllo sull'esportazione utilizzando Pubblica online e i file esportati sono ospitati su server Adobe. Puoi condividere l'URL del prototipo con il tuo cliente o incorporarlo nel tuo sito. Per un maggiore controllo e l'esportazione diretta in HTML5, puoi utilizzare l'estensione in5 di Ajar Productions.

Adobe InDesign ha molti vantaggi da utilizzare come strumento wireframe e prototipazione, ma presenta anche alcuni svantaggi:

• Mancanza di modelli ed elementi wireframe predefiniti : poiché InDesign non è pensato per essere uno strumento di wireframe, devi creare e preparare modelli e risorse oggetto da solo. (Ti mostrerò come gestire questo passaggio più avanti nell'articolo.) La buona notizia è che la maggior parte di questo lavoro verrà eseguita solo una volta e, dopo alcune ore di lavoro, sarai pronto per avviare il tuo Wireframe di InDesign. Inoltre, ci sono molte risorse e kit wireframe che puoi scaricare da Internet, quindi non è necessario disegnare tutto da solo.
• Le funzionalità di interattività e animazione sono limitate : sebbene sia possibile collegare facilmente le pagine e aggiungere interattività e animazioni, il processo a volte può richiedere molto tempo. Alcuni dei semplici strumenti di interazione non sono molto intuitivi. Se non hai utilizzato le funzionalità di interattività di InDesign, dovrai superare una leggera curva di apprendimento prima di poterle applicare in modo efficiente.
• I documenti InDesign non possono essere esportati direttamente come file PSD a più livelli : se esegui la progettazione visiva in Adobe Photoshop e desideri avere elementi wireframe separati per creare il tuo progetto, dovrai prima esportare i wireframe in PDF. Quindi dovrai aprire il PDF in Illustrator ed esportarlo di nuovo come PSD a strati. Le persone che lavorano su Mac possono anche utilizzare uno script gratuito scritto da Rob Day per salvare i file InDesign come PSD a più livelli.

Una buona preparazione del wireframe è metà del lavoro

Inizia perfezionando il tuo ambiente di lavoro. Se non disponi già di un'area di lavoro salvata in Illustrator e InDesign per questo tipo di lavoro, creane una. In Illustrator, inizia con l'area di lavoro Web predefinita e adattala a tuo piacimento: chiudi i pannelli che non usi spesso, assicurati di aprire quelli che utilizzerai, quindi disponili per adattarli al tuo stile di lavoro.

Al termine, salva l'area di lavoro scegliendo Finestra > Area di lavoro > Nuova area di lavoro... Fai la stessa cosa in InDesign utilizzando l'area di lavoro di Pubblicazione digitale come antipasto.

Assemblaggio di kit wireframe/mockup/prototipi

Un efficiente flusso di lavoro di wireframing che utilizza Illustrator e InDesign richiede di investire un po' di tempo nel creare prima il kit di risorse dell'interfaccia utente. Dall'introduzione di Adobe Creative Cloud, le CC Libraries sono il modo migliore per archiviare tutti i componenti del kit dell'interfaccia utente.

È possibile creare una o più librerie per scopi di wireframing e prototipazione. Ad esempio, puoi creare una libreria per il wireframing del sito Web, un'altra per le applicazioni iOS, una terza per le applicazioni Android e così via.

Per creare una libreria Adobe CC, apri il pannello Librerie e scegli Crea nuova libreria dal menu hamburger nel pannello. Le risorse che inserisci nelle librerie possono essere create e utilizzate in diverse app desktop o mobili Adobe su tutti i dispositivi a cui accedi con il tuo Adobe ID. Ciò significa che puoi iniziare con il progetto sul tuo iPad o iPhone, continuare sul tuo computer desktop in ufficio e apportare modifiche dell'ultimo minuto sul tuo laptop di casa con le stesse risorse disponibili su tutti i dispositivi.

Se lavori come parte di un team più ampio, le risorse della libreria possono essere condivise tra i membri del team. Le librerie possono contenere colori, grafica, stili di livello (solo Photoshop) e stili di paragrafo e carattere. Puoi aggiungere risorse alle librerie facendo clic sul pulsante corrispondente nella parte inferiore del pannello Libreria CC con il rispettivo elemento selezionato. Puoi anche aggiungere risorse grafiche trascinandole direttamente dalla tavola da disegno al pannello Librerie.

Le risorse nelle biblioteche sono organizzate per categorie. Attenersi alle buone pratiche e rinominare ogni risorsa con un nome significativo. Le biblioteche sono ricercabili e trovare una risorsa digitando l'inizio del suo nome ti farà risparmiare un sacco di tempo in seguito, specialmente quando hai molti elementi diversi nelle tue biblioteche. Per modificare il nome di una risorsa, fai doppio clic su di essa e digitane una nuova.

Creazione di componenti del kit Wireframe

Sebbene Adobe InDesign abbia alcuni strumenti di disegno di base abbastanza simili a quelli di Illustrator, Illustrator è una scelta molto migliore per disegnare vari elementi nel tuo wireframe. Come regola generale, crea tutti gli elementi del kit che richiedono alcuni disegni più complessi rispetto alle forme geometriche di base in Illustrator. Crea elementi più semplici che contengano testo che dovrai modificare nel layout, come pulsanti semplici, in InDesign.

Per cominciare, fai un elenco di tutti gli elementi di cui avrai bisogno nel wireframe, come elementi di navigazione, elementi di pagina tra cui immagini, fotogrammi video e caselle di testo, icone, avatar, elementi modulo e tutti gli altri elementi dell'interfaccia. Dopo aver completato l'elenco, puoi andare su Illustrator e InDesign per creare quegli elementi.

Inizia creando un nuovo documento per i componenti wireframe o kit mockup. Verifica di aver scelto Profilo Web/Dispositivi in ​​Illustrator o Intento di pubblicazione Web/digitale dalla finestra di dialogo Nuovo documento. Ciò garantisce che i pixel vengano utilizzati come unità e che la modalità colore sia impostata su RGB.

Rendi le risorse del kit wireframe il più semplice possibile perché devono fornire indicazioni visive rapide per ciò che rappresentano senza essere troppo dettagliate. Dovresti usare tavolozze di colori molto limitate, preferibilmente con alcune sfumature di grigio. Accentua visivamente gli elementi più importanti colorandoli con tonalità più scure o dando loro un contrasto maggiore.

Per modelli o prototipi di maggiore fedeltà, crea kit di interfaccia utente con elementi più dettagliati che utilizzano la rispettiva tavolozza di colori di ciascun progetto. Per un facile accesso alle tavolozze dei colori, aggiungile alle librerie CC.

Risorse di Adobe Illustrator nelle librerie CC

Le risorse che aggiungi alle librerie da Illustrator sono collegate per impostazione predefinita (da Adobe CC 2015). Ciò significa che quando modifichi una risorsa della libreria in Illustrator, le modifiche si riflettono in tutte le istanze utilizzate. Se desideri aggiungere una risorsa non collegata al documento, premi il tasto opzione/alt mentre la trascini dal pannello.

Quando usi le risorse di Illustrator collegate in InDesign, avranno una piccola icona a forma di nuvola nell'angolo in alto a sinistra quando il documento viene visualizzato in modalità Normale. Sono tutti elencati anche nel pannello Collegamenti. Se modifichi una risorsa della libreria in Illustrator, le modifiche nel documento InDesign non verranno eseguite automaticamente. L'icona della nuvola verrà sostituita con un'icona del punto esclamativo del collegamento modificata e dovrai aggiornare questi collegamenti.

Le risorse InDesign che inserisci in un documento InDesign non sono collegate. Ciò significa che puoi modificare le istanze indipendentemente dall'originale e, quando l'asset originale viene modificato, tali modifiche non si riflettono sugli asset che sono già stati inseriti nel layout.

Considera queste proprietà durante la creazione di wireframe: aggiungi risorse alla Libreria da Illustrator quando ritieni che debbano essere modificate e aggiornate a livello globale, oppure aggiungile da InDesign quando sai che vorrai modificarle individualmente. Tieni presente che puoi anche creare elementi grafici in Illustrator, copiarli/incollarli in InDesign e quindi modificarli se necessario prima di aggiungerli alla libreria come risorsa InDesign.

Se ti capita di dimenticare quale risorsa grafica viene creata da quale applicazione, guarda il lato destro di ogni elemento nel pannello Libreria mentre usi Mostra elementi come elenco.

Flessibilità di Adobe InDesign con contenuto e copia

Per assicurarti di poter modificare facilmente copia e tipografia nei wireframe, crea contenitori di testo in InDesign. InDesign ha una bella funzione per riempire le caselle di testo con testo segnaposto. Quando disegni una casella di testo, fai clic con il pulsante destro del mouse su di essa e scegli Riempi con testo segnaposto .

Aggiungi caselle di testo alla libreria Adobe come qualsiasi altro elemento grafico trascinandole. Quando utilizzi queste risorse di testo in un secondo momento come parte del layout dei wireframe, puoi modificare la casella di testo e il suo contenuto nel wireframe.

Prendi in considerazione la possibilità di creare elementi dell'interfaccia utente dei pulsanti anche in InDesign. Per creare un pulsante, crea una cornice di testo, digita il testo, quindi usa Oggetto > Opzioni cornice di testo per definire la spaziatura Riquadro. Regola la giustificazione verticale del testo all'interno di una casella scegliendo l'opzione desiderata dal menu a discesa Allinea.

Passa alla scheda Ridimensionamento automatico e scegli il ridimensionamento automatico appropriato (che probabilmente sarebbe Solo larghezza) e un punto di riferimento conveniente. Se non vuoi consentire a InDesign di suddividere il testo in più di una riga, seleziona l'opzione Nessuna interruzione di riga.

Usa le risorse esistenti

Ci sono molti kit di interfaccia utente per wireframing e prototipazione di Adobe Illustrator disponibili su Internet che puoi acquistare o addirittura scaricare gratuitamente se desideri una soluzione già pronta. Forse hai già elementi che puoi recuperare dai tuoi progetti completati. Apri quei documenti, modifica gli elementi precedentemente creati secondo necessità e inseriscili nelle rispettive librerie.

Se stai progettando per una piattaforma particolare, ad esempio un'applicazione iOS o Android, assicurati di leggere attentamente le linee guida dell'interfaccia umana e di utilizzare le risorse appropriate. Potrebbe essere conveniente avere nel tuo kit elementi dell'interfaccia utente specifici per varie piattaforme.

Non concentrarti troppo sul tentativo di tenere conto di ogni risorsa o stato futuro nelle tue biblioteche prima di iniziare con il processo di wireframing effettivo. Puoi aggiungere risorse alle tue librerie in un secondo momento e svilupparle man mano che procedi.

Creazione di modelli Wireframe di InDesign

È rimasto un altro importante passaggio di preparazione: creare modelli InDesign che utilizzerai per creare wireframe. Inizia creando un nuovo documento con intento di pubblicazione sul Web o digitale e definisci le dimensioni di pagina appropriate per le schermate per cui stai progettando.

Poiché si consiglia di utilizzare una sorta di griglia per disporre gli elementi wireframe, impostare i margini e creare una griglia di colonne impostando il numero desiderato di colonne e lo spazio della grondaia. Puoi modificare queste impostazioni in un secondo momento da Layout > Margini e colonne con la rispettiva pagina (o pagine) master selezionata nel pannello Pagine.

Se hai bisogno di guide orizzontali e guide verticali complementari, creale manualmente o crea una griglia aggiuntiva usando Layout > Crea guide. Quando si crea una griglia, è utile utilizzare uno degli strumenti di calcolo della griglia online come Gridulator.

Puoi anche creare modelli aggiuntivi per scopi di presentazione con modelli di dispositivo come cornice per i tuoi wireframe. Poiché un documento InDesign può essere collegato a un altro, puoi creare wireframe in un documento InDesign e quindi inserirlo in un altro per le presentazioni.

Sebbene all'inizio possa sembrare complicato, in realtà si tratta di un flusso di lavoro molto semplice ed efficace. Mantenere i wireframe effettivi in ​​un documento separato rende più facile continuare a costruire da wireframe approvati a un design visivo raffinato.

È anche semplice creare modelli pronti per la presentazione in cui posizionare wireframe, aggiungere etichette e commenti ed essere in grado di mostrare la soluzione migliore al cliente. Quando apporti modifiche a un file wireframe, aggiornalo come qualsiasi altro collegamento in un documento di presentazione e ta-daaa! Tutte le modifiche sono anche nella tua presentazione.

Nel pannello Livelli, puoi preparare livelli separati per diversi tipi di contenuto: elementi dell'interfaccia utente, funzioni interattive, gesti, etichette e note. Se hai bisogno di più livelli per un progetto specifico, potrai aggiungerli facilmente in qualsiasi momento durante il processo di wireframe.

Al termine della creazione, salva i modelli come file modello InDesign.indt. Dopo che tutti i modelli di cui hai bisogno sono stati salvati, sei finalmente pronto per iniziare il wireframing in modo efficiente.

Costruire Wireframe

Per prima cosa, inizia con la pagina master. Trascina dalla libreria tutti gli elementi globali che saranno gli stessi su tutte le schermate del tuo progetto. Se stai progettando un sito Web, di solito si tratta di intestazioni con un logo, una navigazione e un piè di pagina. Poiché puoi creare più di una pagina mastro e queste possono ereditarsi l'una dall'altra, puoi sfruttare l'annidamento delle pagine mastro.

Ad esempio, a seconda del progetto, puoi creare una pagina master per un elemento dell'interfaccia utente, ad esempio un popup modale o una finestra di dialogo, quindi creare nuovi master in base al primo master, modificando solo gli elementi che devono essere diversi.

Non è possibile selezionare, modificare o eliminare gli elementi principali nelle normali pagine del documento a meno che non si faccia clic su di essi tenendo premuto Comando/Control + Maiusc per sovrascrivere il master. Una volta che l'elemento è stato sovrascritto, puoi modificare uno qualsiasi dei suoi parametri o eliminarlo completamente dal layout.

Tieni presente che anche quando esegui l'override dell'elemento, i parametri che non hai modificato verranno comunque ereditati dal master. Ad esempio, se si sovrascrive un elemento modificandone il colore, la sua dimensione non cambierà poiché è ancora connesso al master. Inoltre, se lo modifichi nella pagina master, verrà modificato anche sull'elemento che hai precedentemente sovrascritto.

Quando inserisci pagine aggiuntive nel tuo documento wireframe, ricorda di basarle sul rispettivo master. Se è necessario modificare lo schema per le pagine già nel layout, selezionarle nel pannello Pagine, fare clic con il pulsante destro del mouse e scegliere Applica master alle pagine. Usa le risorse della libreria e disponile utilizzando le guide intelligenti e le opzioni Allinea per creare i layout wireframe dell'interfaccia utente finali.

Se stai creando disegni per più di una dimensione dello schermo, crea layout alternativi da Layout > Crea layout alternativo o dal pannello Pagine. Puoi utilizzare regole di layout liquide durante la creazione di layout alternativi per adottare automaticamente gli elementi della pagina da una dimensione e un orientamento all'altro, oppure puoi controllarli manualmente. Per applicare e testare le regole di layout liquido, utilizzare lo strumento Pagina o aprire il pannello Finestra > Interattivo > Layout liquido.

Aggiunta di interattività

Adobe InDesign ha un sacco di funzionalità di interattività che puoi sfruttare quando crei wireframe o prototipi. Le funzionalità che includerai dipenderanno dal formato finale di cui avrai bisogno per i tuoi wireframe, prototipi o presentazioni.

Se esporti come PDF, l'interattività sarà limitata, ma puoi almeno far funzionare i collegamenti tra le schermate utilizzando il pannello dei collegamenti ipertestuali per crearli. Seleziona l'elemento che desideri comportare come un collegamento e fai clic sull'icona Nuovo collegamento ipertestuale. Dal menu a discesa Collega a, scegli Pagina e inserisci il numero di pagina desiderato. Ripeti quell'azione su tutti gli elementi che vuoi comportare come collegamenti tra le schermate.

Puoi anche aggiungere collegamenti ipertestuali agli oggetti che risiedono nelle pagine master, il che può essere un risparmio di tempo reale. Crea collegamenti sulla pagina master una volta e funzioneranno su tutte le schermate del tuo documento.

Puoi creare pulsanti da qualsiasi grafica, testo, immagine o gruppo di elementi. Per creare un pulsante da un oggetto selezionato, utilizzare il pannello Finestra > Interattivo > Pulsanti e moduli e fare clic sull'icona Converti in pulsante.

I pulsanti possono avere diversi stati creati per gli aspetti normale, rollover e clic. Per aggiungere stati di rollover o clic ai pulsanti, fai clic su di essi nel pannello Pulsanti e modifica l'aspetto del pulsante per ciascuno stato. Per aggiungere un'azione a un pulsante, fai clic su un segno più e selezionalo dall'elenco. Tieni presente che le azioni in SWF/EPUB non funzioneranno nei PDF interattivi.

Per creare elementi popup, scegli Mostra/Nascondi pulsanti e moduli. Per nascondere i pulsanti fino all'attivazione, selezionare l'opzione Nascosto fino all'attivazione. È possibile includere oggetti con più stati in un PDF interattivo, ma solo se prima li esporti come SWF e poi li riposiziona nel layout di InDesign per l'esportazione in PDF. Questo flusso di lavoro è noioso e i PDF non possono essere visualizzati correttamente in tutti i lettori PDF, quindi cerca di evitare di farlo a meno che non sia davvero necessario.

Se desideri convertire il tuo documento in un prototipo HTML utilizzando la funzione Pubblica online di InDesign CC 2015, puoi utilizzare molte altre opzioni interattive come animazioni, oggetti multi-stato e più azioni di pulsanti, comprese tutte quelle destinate all'esportazione SWF/EPUB.

Puoi aggiungere semplici animazioni utilizzando il pannello Animazione e scegliendo uno dei predefiniti integrati dal menu a discesa e impostandone le proprietà. A un oggetto può essere applicata una sola animazione, ma se è necessario aggiungerne altre, raggruppare l'oggetto con una casella vuota e utilizzare la nuova animazione sull'oggetto appena creato.

Per gli elementi dell'interfaccia utente che richiedono la visualizzazione di stati diversi, crea un oggetto con più stati. Crea un oggetto separato per ogni stato. Gli oggetti possono essere un singolo elemento (immagine, casella di testo, grafica) o un gruppo di elementi diversi. Apri il pannello Finestra > Interattivo > Stati degli oggetti, seleziona tutti gli oggetti che hai creato per l'oggetto multi-stato e fai clic sul pulsante Nuovo nella parte inferiore del pannello.

Dopo aver creato il tuo oggetto multi-stato, dovrai creare pulsanti per spostarti da uno stato dell'oggetto all'altro. Le azioni Vai allo stato successivo o Vai allo stato precedente rivelano lo stato dell'oggetto specifico con l'azione Vai allo stato.

Se desideri avere una cornice scorrevole nel tuo wireframe/prototipo, il modo più semplice per crearne una è utilizzare l'estensione Universal Scrolling Frames di Ajar Productions. Dopo aver scaricato e installato l'estensione, puoi usarla come pannello InDesign. Per una cornice scorrevole, dovrai creare contenuto e una cornice per un contenitore.

Il contenuto scorrevole può essere una cornice di testo, un'immagine o più elementi raggruppati insieme. Al termine della creazione del contenuto e della casella del contenitore, seleziona il contenuto e Modifica > Taglia. Quindi seleziona il contenitore e incolla il contenuto all'interno usando Modifica> Incolla in. Selezionare il contenitore e, utilizzando Universal Scrolling Frames, regolare la direzione di scorrimento desiderata.

Combinando pulsanti, oggetti multi-stato, animazioni e fotogrammi scorrevoli puoi ottenere una ricca esperienza interattiva. Per testare l'interattività in InDesign, usate il pannello Anteprima interattività EPUB. È possibile visualizzare in anteprima una singola pagina o l'intero documento. Ingrandisci il pannello di anteprima di cui hai bisogno.

Se non hai utilizzato le funzionalità interattive di Adobe InDesign, preparati perché, all'inizio, c'è un po' di una curva di apprendimento. Ma con un po' di pratica e alcuni tentativi ed errori, li padroneggerai rapidamente.

Esportazione di documenti finiti

Quando hai finito di creare i wireframe e i file di presentazione, tutto ciò che resta è mostrare le tue grandi idee al cliente nel miglior modo possibile. A tale scopo, dovrai esportare i tuoi wireframe in un formato che il tuo cliente può visualizzare in anteprima. Sebbene i file InDesign possano essere esportati in una varietà di formati, probabilmente utilizzerai il PDF interattivo o la funzione Pubblica online per testare prototipi funzionali a bassa o alta fedeltà. Per salvare come PDF interattivo, scegli Adobe PDF (Interattivo) dal menu a discesa Formato nella finestra di dialogo Esporta e regola le proprietà secondo necessità. Non dimenticare di spuntare Moduli e media se ci sono elementi interattivi che desideri includere. I clienti possono visualizzare i wireframe PDF nell'Adobe Reader gratuito e scrivere tutti i loro commenti nello stesso file.

Puoi anche utilizzare un documento PDF esportato da InDesign per creare un prototipo InVision (o qualche altro strumento che supporta i PDF). Se il tuo strumento di prototipazione standard, magari Marvel, non può importare un PDF, esporta le tue pagine wireframe di InDesign come immagini JPEG o PNG.

Per esportare in modo interattivo un prototipo HTML che può essere visto nei browser moderni su diversi dispositivi, vai su File > Pubblica online o fai clic sul pulsante Pubblica online dalla barra dell'applicazione. Dopo che il documento è stato preparato per la pubblicazione online e caricato, è possibile copiare l'URL di un documento da condividere con le parti interessate e avviare il processo di revisione. Puoi anche incorporare il prototipo pubblicato sul tuo sito.

Uno svantaggio della funzione Pubblica online è che non ha alcun controllo aggiuntivo sull'esportazione e i file sono sempre archiviati sui server di Adobe. Inoltre, è ancora una funzione di anteprima e non puoi essere sicuro in quale direzione Adobe la svilupperà, o anche se verrà interrotta.

Una volta esportato il wireframe/prototipo, è il momento di avviare il processo di test, revisione e iterazione.