Adobe Illustrator sta vivendo un ritorno nel mondo del web design. Non solo SVG sta diventando comunemente usato online, ma sempre più designer stanno usando i vettori per il wireframing. I seguenti consigli ti aiuteranno a sfruttare al meglio Illustrator come strumento di wireframing.

Il wireframing consiste nel lavorare rapidamente e iterare velocemente. Lo scopo non è quello di creare interfacce attraenti; la tua priorità numero uno è quella di progettare informazioni ed esperienze.

1. Vai in monocromia

. Go Monochrome

I wireframe rendono chiara la gerarchia in una pagina web; dimostrano visivamente l’ordine in cui gli utenti dovrebbero elaborare le informazioni disponibili. Se volete che gli utenti elaborino il titolo prima di premere il pulsante “compra ora”, il titolo deve “battere” il pulsante richiedendo più attenzione.

Questa gerarchia visiva può essere definita in diversi modi. Potremmo usare le dimensioni per rendere l’headline più impattante, potremmo usare il posizionamento (mettendolo prima del pulsante). Potremmo usare il colore, il contrasto e una serie di altre cose, ma farlo in un wireframe rende solo le cose più confuse.

Togliendo il colore dall’equazione, la relazione visiva definita da posizione, dimensione e (se vuoi fare un passo in più) contrasto, è molto più pulita.

Non stiamo costruendo kit UI carini e pixel-perfetti qui. Attieniti a una gamma limitata di grigi, poi usa il colore solo per le etichette e le note.

2. Mantenere i livelli per scopi specifici

Parlando di etichette, note e commenti, è una grande idea mettere ognuno di essi su un livello dedicato. Lo stesso vale per qualsiasi altra cosa che ha uno scopo specifico; come il comportamento, l’interazione, i gesti e così via.

Posiziona le immagini su un livello, il comportamento su un altro, e le etichette su un altro, in modo da poter facilmente alternare la loro visibilità quando necessario.

3. Sfruttare i simboli

D.R.Y. è generalmente usato come termine di programmazione, ma è ugualmente applicabile al flusso di lavoro del design. In ogni dato wireframe, useremo e riutilizzeremo certi oggetti. Trasformate questi oggetti in simboli e qualsiasi modifica apportata ad uno di essi si rifletterà istantaneamente sugli altri.

Per esempio, ecco un semplice campo modulo:

Trasciniamolo nel pannello dei simboli (Shift + Command + F11)

Ora possiamo tirare questo simbolo dal pannello dei simboli, tutte le volte che vogliamo, sulla tavola grafica. Facendo doppio clic su uno di essi, lo isoleremo (un po’ come gli oggetti raggruppati) in modo da poterlo modificare. Qualsiasi modifica apportata, in questo caso l’arrotondamento degli angoli del rettangolo, sarà applicata a ciascuno dei simboli dei campi modulo che abbiamo usato.

Una volta che abbiamo una collezione di simboli, possiamo anche salvarli come set:

Questo ci permetterà di caricarli in altri file per il futuro.

Se vuoi saperne di più sulla palette dei simboli, dai un’occhiata a Quick Tip: Lavorare con i simboli in Adobe Illustrator.

4. Le punte di freccia sono perfette per puntare

Un ottimo suggerimento è quello di sfruttare le punte di freccia a tratto, qualcosa di prontamente disponibile in Illustrator fin dalla CS5. I wireframe sono l’occasione ideale per descrivere visivamente le interazioni, il flusso dell’applicazione, la navigazione e il movimento.

Oggi possiamo aggiungere facilmente le punte di freccia ai tratti, direttamente dal pannello Stroke.

Possiamo anche modificare il file sorgente “Arrowheads.ai” di Illustrator, come spiegato da Ryan Cornwell, e aggiungere le nostre punte di freccia al mix.

Nota: fastidiosamente, lo strumento contagocce non applica le punte di freccia insieme ad altri stili di tratto, quindi non è facile come potrebbe essere duplicare l’effetto che avete scelto. Ma comunque, sono perfetti per il wireframing.

5. Snap to Grid per spaziature e dimensioni unificate

In molti modi, questo segue il non usare il colore. Unificare le dimensioni e la spaziatura rimuove un elemento di distrazione dai wireframe, aiutandoci a concentrarci visivamente su ciò che è importante.

Non importa se le dimensioni esatte non riflettono come sarà l’UI in seguito; finché la gerarchia e le relazioni rimangono vere, siamo a posto.

Applica una griglia alla tua Artboard andando View > Show Grid. Selezionando View > Snap to Grid ti aiuterà a posizionare i tuoi oggetti con precisione.

Per specificare esattamente come vuoi che sia la tua griglia (e ricorda, non stai andando per piccoli dettagli qui) vai su Illustrator > Preferences > Guides & Grid. Una volta lì puoi definire la distanza tra le linee della griglia, quindi indicare quante suddivisioni vuoi all’interno di quelle linee.

Nota: Sentiti libero di colorare la tua griglia in qualcosa di diverso dal grigio; non farà parte del prodotto finale.

6. Usa gli stili grafici per i pulsanti flessibili

A seconda del livello di fedeltà (quanto è fedele al sito web finale a cui stai puntando) potresti avere del testo reale all’interno, per esempio, dei pulsanti. Per far sì che questi pulsanti crescano e si restringano a seconda del contenuto al loro interno, non usate oggetti, ma stili grafici.

Iniziamo con una stringa di testo fittizia.

Ora apriamo il pannello Aspetto andando su Finestra > Aspetto.

Utilizzando il pannello Aspetto, è possibile aggiungere più riempimenti ad un oggetto. Possiamo stratificare questi riempimenti nell’ordine in cui vogliamo che vengano visualizzati; in questa immagine potete vederne diversi, tutti impilati uno sull’altro.

Per ora, abbiamo bisogno solo di due riempimenti, quindi aggiungiamo un riempimento scuro per il testo, poi un colore più chiaro per lo sfondo.

Al momento, non possiamo vedere lo sfondo grigio chiaro, perché ha esattamente la stessa forma del riempimento superiore. Tuttavia, possiamo isolare e manipolare ogni riempimento separatamente. Seleziona il riempimento inferiore nel pannello Aspetto, poi vai su Effetto > Converti in forma > Rettangolo arrotondato…

Inserisci alcune impostazioni, qualsiasi cosa tu ritenga appropriata, assicurati solo che la dimensione sia relativa all’oggetto a cui lo stiamo applicando.

Il riempimento grigio chiaro in basso ha ora preso la forma di un rettangolo arrotondato, relativo alla dimensione del testo. Un pulsante! Per applicare questo aspetto ad altri oggetti, aprite il pannello degli stili grafici e trascinatevi l’intero pulsante. Il suo aspetto sarà salvato come uno stile che potrete riutilizzare.

Per esempio, ecco una stringa di testo più lunga. Con il testo selezionato, clicca sullo stile grafico appena creato (che ho cliccato due volte e rinominato) per applicarlo istantaneamente.

7. Impostare alcuni artboard comunemente usati

La velocità è il nome del gioco con il wireframing! Scarabocchiare un layout, andare avanti, scarabocchiare un altro, andare avanti. Ha quindi senso avere un punto di partenza pronto a cui puoi accedere facilmente. Potresti scoprire di lavorare meglio su un artboard massiccio prima, tirando gli oggetti finiti in un file separato, o potresti preferire di lavorare direttamente con artboard di dimensioni adeguate.

Qui, per esempio, c’è un layout con uno schermo di iPad (1536x2048px) e quattro schermi di iPhone 4S (640x960px), anche se puoi preparare un file con qualsiasi numero di esempi di schermi di dispositivi. Imposta le tue dimensioni preferite manualmente, o scegli uno dei preset disponibili dalle Opzioni Artboard:

Includere qualsiasi guida comune, nomi di livelli, set di simboli ecc. che potresti usare, poi salva il tutto come modello per un uso futuro (File > Salva come modello..) Questo punto di partenza sarà poi disponibile per te andando File > Nuovo da modello.., completo di tutti i pezzi che hai lasciato lì.

8. Utilizzare TextExpander per il testo fittizio

Illustrator non è dotato di strumenti per il testo fittizio. Ci sono alcuni script con cui vale la pena giocare, ma il modo più semplice per ottenere testo fittizio nei tuoi Wireframes di Illustrator è usare TextExpander.

Nota: se sei un utente Windows, PhraseExpress offre una funzionalità simile a TextExpander

Aggiungi una serie di frammenti di testo che ti ritrovi a usare comunemente per i wireframe (come una grande intestazione, un’intestazione breve, una copia del corpo di varia lunghezza, il tipico testo dei pulsanti, voci di menu e così via) in modo che siano facilmente disponibili dall’interno di Illustrator.

Definendo una frase chiave per ogni snippet, TextExpander sostituirà quella frase con il vostro contenuto ogni volta che lo digitate, facendovi risparmiare un sacco di tempo. Puoi anche usare le opzioni della cartella per assicurarti che questi snippet abbiano effetto solo in Illustrator, se vuoi.

Per saperne di più su come ottimizzare il flusso di lavoro di TextExpander, dai un’occhiata a Master TextExpander With These Helpful Tips & Tricks.

9. Pratica la denominazione logica dei file

Essere in grado di visualizzare rapidamente i cambiamenti e le idee è il cuore del wireframing, ma questo può portare ad un enorme mucchio di file disorganizzati se non stai attento. La chiave è salvare in fasi significative e con convenzioni logiche di denominazione dei file.

Per esempio, potremmo voler iniziare ogni nome di file con il nome della pagina su cui stiamo lavorando. Poi potrebbe essere ragionevole usare un qualche tipo di nome di variante, dopo il quale il numero di versione: page-variant-version.ai

Per esempio, potremmo lavorare su una landing page; una che si concentra sulla promozione di una campagna email o di un ebook. Potremmo avere nomi di file come:

Non solo questo mantiene le cartelle del progetto organizzate, ma agisce come una forma di versioning manuale. Matt Smith discute di più l’idea nel suo articolo Wireframing With Illustrator and InDesign.

10. Salva in Dropbox per un facile versioning

Prendendo l’idea del versioning ancora di più, salvare i tuoi file direttamente in Dropbox rimuoverà quel compito dalla tua lista di cose da fare completamente. Anche il piano gratuito di Dropbox memorizza una copia dei tuoi file ogni volta che li salvi, per trenta giorni.

Allo stesso modo, Layervault offre simili meraviglie nel suo piano gratuito.

In entrambi i casi, questo è particolarmente utile se stai collaborando con un team. Avere tutti i membri che lavorano da una posizione centrale, con la possibilità di ripristinare qualsiasi versione se qualcuno fa qualcosa di strano, è l’ideale per il lavoro di squadra.

Conclusione

Molti di questi suggerimenti sono interamente personali del mio flusso di lavoro e potrebbero non tradursi perfettamente nel vostro modo di fare le cose. Tuttavia, spero che almeno scatenino un po’ di curiosità, per farvi pensare al modo in cui fate il wireframe dei layout web. Se hai altri suggerimenti tuoi, per favore condividili nei commenti!

Altre letture

• Wireframing con InDesign e Illustrator
• Wireframing con Illustrator e InDesign (sottile differenza!)
• Una guida per principianti al wireframing
• Illustrator e le frecce