Creazione di wireframe di contenuto per un design reattivo

Mentre stavo conducendo il mio corso in responsive web design tra il 2011 e il 2012, continuavo a inciampare nel processo di wireframing. I miei studenti tendevano a concentrarsi sul wireframe come il gioco finale nel processo di pianificazione. Non capivano che il design reattivo si concentra sul modo in cui gli utenti accedono al contenuto.

Puoi solo immaginare il mio sollievo quando mi è capitato di imbattermi in un video di Stephen Hay che parlava alla conferenza Beyond the Desktop nel 2012. Lì, nel suo discorso sul design reattivo, ha presentato il concetto di wireframe del contenuto. Questo è stato un enorme sollievo per me.

Ulteriori letture su SmashingMag:

• La guida dello scettico alla prototipazione a bassa fedeltà
• In che modo la creazione di un linguaggio di progettazione può semplificare il tuo design UX
• Oltre il wireframing: il processo di progettazione dell'esperienza utente nella vita reale

Sapevo solo che c'era un passaggio prima che il processo diventasse reale, ma non riuscivo ad articolarlo. In questo post, descriverò i metodi che utilizzo per passare dal contenuto al wireframe reattivo e come puoi farlo anche tu.

Presentazione di Content Wireframe

Il concetto di wireframe di contenuto è piuttosto semplice da capire perché è una propaggine della filosofia di progettazione più elementare: innamorarsi dell'utente, non della tecnologia.

I wireframe di contenuto fanno proprio questo. Bloccano le categorie di contenuti generali e ti costringono, come dice Stephen in modo così bello, a progettare dal contenuto verso l'esterno.

Non è davvero complicato. Infatti prevede due passaggi:

1. creare un inventario di contenuti,
2. creare una gerarchia visiva dei sopravvissuti di quell'elenco.

Fallo e avrai un potenziale risultato per il tuo cliente. Ciò che tende a fare è spostare l'attenzione del cliente lontano da ciò che “cosa” va dove e verso ciò che è importante: il flusso di informazioni.

Non scienza missilistica

Il problema chiave con i wireframe, per i miei studenti e altri designer, è che tendono ad assumere un'importanza ingiustificata. È quasi come la fine di uno spettacolo di ristrutturazione in TV, quando tutti "Oohs" e "Ahhs" quando il cliente arriva a camminare per casa.

Non per me. Preferisco la scena della ristrutturazione della cucina, quando l'appaltatore tira fuori un pezzo di carta e una matita da falegname e si siede con il cliente al tavolo della cucina. Quindi, disegnano un semplice contorno della stanza e dicono: "Che ne dici di tirare fuori questo muro, mettere un'isola qui e spostare il bancone laggiù?"

Il falegname sta delineando "l'intento" del suo approccio al progetto e il cliente si sta concentrando sulle parti importanti del progetto, piuttosto che su piastrelle, infissi, pittura e illuminazione.

Nel suo libro Responsive Design Workflow, Hay usa il termine "wireframe di riferimento del contenuto" perché "descrive come i wireframe gestiscono il contenuto: si riferiscono semplicemente ad esso invece di rappresentarlo ".

Un wireframe di contenuto, come lo schizzo del nostro appaltatore, descrive il posizionamento (un muro, un bancone, un'intestazione, un piè di pagina) e stabilisce una gerarchia e un flusso di informazioni . Poiché il processo è iterativo, iniziare la conversazione con un semplice "Che ne dici di..." piuttosto che "Ecco come..." lo tiene lontano dal regno della scienza missilistica e lo mette dove è iniziato originariamente: scatole e frecce della vecchia scuola.

Una volta stabilito ciò, possiamo passare al processo di sviluppo wireframe a bassa e alta fedeltà. Vediamo come un wireframe di contenuto può focalizzare la conversazione decostruendo una semplice pagina.

Decostruzione Fatta A Mano

Visito Made by Hand regolarmente. Come suggerisce il nome, il sito celebra gli artigiani che realizzano le cose a mano. La home page presenta una serie di video e, quando la visiti per la prima volta, sembra essere piuttosto cruda, con pochi svolazzi. Questo ha senso perché i film stessi sono ciò che è importante, non qualsiasi altro contenuto.

L'inventario dei contenuti per la home page è, comprensibilmente, piuttosto semplice, composto da:

• un'intestazione e una navigazione,
• cinque video (che chiameremo qui principale e video da 1 a 4),
• un piè di pagina.

Tuttavia, possiamo vedere in gioco una precisa gerarchia di informazioni. L'elenco dei contenuti principali è un po' vago, ma una volta compreso che l'intento è quello di presentare una serie di video che mettano in risalto i singoli artigiani, la priorità di ogni contenuto diventa chiara:

• video principale,
• video da 1 a 4,
• il piè di pagina,
• l'intestazione e la navigazione.

Vedere l'intestazione e la navigazione in fondo allo stack potrebbe sembrare strano. Tuttavia, l'intero scopo della pagina è farti guardare i video e, se ti piacciono, iscriverti per ricevere notifiche regolari di nuovi contenuti. L'intestazione e la navigazione sono semplicemente lì per facilitare la navigazione del sito web.

Per molti aspetti, il vecchio adagio "Il contenuto è re" - generalmente attribuito a Bill Gates - guida questo sito web. Il focus è la raccolta di video e nient'altro. Ciò solleva un punto importante: un wireframe di riferimento del contenuto stabilisce la precedenza del contenuto, non il flusso della pagina.

Con quell'elenco in mano, puoi passare alla creazione effettiva dei wireframe di riferimento del contenuto.

Creazione di wireframe di riferimento del contenuto

Sebbene Stephen Hay sia un grande sostenitore della creazione di questi wireframe di riferimento ai contenuti con un editor di codice come Coda o Adobe's Brackets, per quelli di noi che sono, diciamo, sfidati dal codice, un editor visivo come UXPin o Adobe Illustrator o un un editor reattivo come Macaw o Webflow sarebbe una scelta solida. Ognuno ha i suoi usi, sebbene un editor reattivo abbia il vantaggio di offrire al designer più di una prospettiva sul proprio lavoro, in particolare, come il proprio lavoro risponde alle diverse dimensioni dello schermo. Questo è fondamentale, data l'ampia gamma di schermi di oggi.

Non esiste uno strumento migliore; scegli quello che fa per te. In questo tutorial, analizzeremo Illustrator. Ecco perché:

• Sebbene Illustrator non sia uno strumento veramente reattivo, le sue tavole da disegno ti consentono di iniziare con un approccio mobile first e, utilizzando punti di interruzione preimpostati o personalizzabili, di passare rapidamente a una versione desktop.
• Le sue griglie personalizzabili consentono la coerenza del design.
• Ti consente di creare scatole di dimensioni precise per wireframe facendo clic e impostando le dimensioni.
• Se preferisci Photoshop per prototipi ad alta fedeltà, puoi copiare e incollare il wireframe del contenuto da Illustrator per impostare le basi.

Nota: se preferisci lavorare nel codice durante il wireframing o la prototipazione in modo reattivo, non esitare a passare alla sezione "Passaggi successivi" in basso per altre risorse utili.

Un approccio mobile-first ai wireframe dei contenuti

Per questo breve tutorial, useremo Illustrator come parte di un approccio mobile-first, per concentrarci sui contenuti più importanti. Creeremo cinque finestre per gettare le basi per un wireframe di contenuto reattivo.

1. Crea i documenti

In Illustrator, crea cinque nuovi documenti con le seguenti larghezze e altezze (in pixel):

• 320×800
• 768 × 1200
• 992×1400
• 1224 × 1600
• 1440×1800

(A seconda della versione di Illustrator in uso, puoi anche creare tavole da disegno diverse nello stesso documento.)

2. Crea i contenitori

Nel documento di 320 pixel di larghezza, crea sette caselle non allineate riempite di grigio neutro.

3. Crea le etichette

Posiziona il testo su ogni casella — in ordine decrescente: intestazione, video principale, video 02, video 03, video 04, video 05 e piè di pagina. Ho usato il testo bianco per contrastare le caselle relativamente scure.

4. Ridimensiona le scatole

Rendi la casella video principale un po' più grande delle altre per indicarne la priorità . Se necessario, ridimensiona l'intestazione e il piè di pagina, ma mantienili a tutta larghezza .

5. Copia le scatole

Ora che hai le relative dimensioni ed etichette, copia le caselle negli altri documenti o tavole da disegno.

Ridimensionale secondo necessità e ricorda che queste caselle sono approssimative. Rappresentano l'esistenza del contenuto, non il dimensionamento o la spaziatura precisi del contenuto.

Prossimi passi

Non ci sono grandi rivelazioni o altre emozioni con la creazione di wireframe di riferimento ai contenuti.

Si adattano al flusso di lavoro tra l'inventario dei contenuti e i wireframe a bassa fedeltà. Questo perché il loro scopo è semplicemente quello di stabilire una gerarchia di informazioni e, se il cliente è coinvolto, di indurli a pensare di più al concetto di contenuto e flusso di informazioni, piuttosto che al contenuto stesso.

L'intero processo è più una conversazione "Che ne dici di..." che un "Ecco come..." Una volta che tutti saranno d'accordo, la prossima iterazione del progetto comporterà il versamento di contenuti a bassa fedeltà nelle scatole che compongono i wireframe di riferimento dei contenuti.

Come abbiamo visto, puoi esercitarti con il wireframing dei contenuti decostruendo i siti Web popolari nei loro elementi costitutivi di base . Inizia con contenitori di informazioni approssimativi, aggiungi il contenuto reale e quindi inizia a cesellarli in forme più finalizzate. In tal modo, sarai in grado di progettare meglio ciò che interessa davvero agli utenti: il contenuto.

• UXPin Questo strumento di progettazione collaborativa è utile per disporre un wireframe grezzo, quindi aggiungere interazioni per creare un prototipo rapido.
• "Responsive Design Workflow" (diapositive), Stephen Hay, Mobilism 2012 Queste diapositive riassumono in modo conciso come progettare in modo efficiente per layout reattivi. Hay offre ottimi consigli sull'auditing dei contenuti, sulla priorità dei contenuti, sul wireframing dei contenuti e sull'utilizzo dei framework di sviluppo.
• "Content Reference Wireframes (PDF), Neil Hao Questa è una bella panoramica di un approccio basato sul codice al wireframing dei contenuti, descritto attraverso uno scenario di progettazione realistico.
• "Mobile First", ZURB University ZURB, un'agenzia di design, offre questo utile portale di risorse, che fornisce il contesto per il wireframing dei contenuti.
• "Immergiti nella prototipazione reattiva con Foundation", Jonathan Smiley, l'utile tutorial di A List Apart Smiley mostra come wireframe e prototipazione di progetti reattivi nel codice. Sebbene non sia totalmente mobile-first, Smiley fa un buon lavoro nello spiegare come visualizzare i contenuti in modo coerente su tutti i dispositivi.
• "Design Last", Rik Schennink, Smashing Magazine Questo articolo interessante spiega come progettare in modo reattivo con contenuti e HTML prima di tutto. In tal modo, abbinerai il contenuto con la struttura fin dall'inizio.