10 suggerimenti per la costruzione di wireframe con Illustrator

Adobe Illustrator sta vivendo un ritorno nel mondo del web design. Non solo SVG viene comunemente utilizzato online, ma sempre più designer utilizzano i vettori per il wireframing. I seguenti suggerimenti ti aiuteranno a sfruttare al meglio Illustrator come uno strumento wireframing.

Wireframing significa lavorare rapidamente e iterare rapidamente. L'obiettivo non è creare interfacce attraenti; la tua priorità numero uno è progettare informazioni ed esperienze.

1. Vai in bianco e nero

I wireframe chiariscono la gerarchia su una pagina web; dimostrano visivamente l'ordine in cui gli utenti devono elaborare le informazioni disponibili. Se vuoi che gli utenti elaborino il titolo prima di premere il pulsante "acquista 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 il titolo più interessante, potremmo usare il posizionamento (posizionandolo prima del pulsante). Potremmo usare il colore, il contrasto e una serie di altre cose, ma farlo in un wireframe rende le cose più confuse.

Rimuovendo il colore dall'equazione, la relazione visiva definita dalla posizione, dalla dimensione e dal contrasto (se si vuole andare oltre) è molto più pulita.

La calda tavolozza monocromatica degli UX Kits di Eric Miller Design

Non stiamo costruendo kit di interfaccia utente perfetti e pixel-perfetti qui. Attenersi a una gamma limitata di grigi, quindi utilizzare il colore solo per etichette e note.

2. Mantenere i livelli per scopi specifici

Parlando di etichette, note e commenti, è una buona idea posizionare ciascuno su un livello dedicato. Lo stesso vale per qualsiasi altra cosa che abbia 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 tale che tu possa facilmente cambiare la loro visibilità quando necessario.

3. Sfruttare i simboli

ASCIUTTO. viene generalmente utilizzato come termine di programmazione, ma è ugualmente applicabile al flusso di lavoro di progettazione. In ogni wireframe dato, useremo e riutilizzeremo determinati oggetti. Trasforma questi oggetti in simboli e le eventuali modifiche apportate a uno si rifletteranno immediatamente nel resto.

Ad esempio, ecco un campo modulo semplice:

Trasciniamolo nel pannello Simboli (Maiusc + Comando + F11)

Ora possiamo estrarre questo simbolo dal simboli riquadro, tutte le volte che vogliamo, sulla tavola da disegno. Facendo doppio clic su uno di essi, lo isoleremo (un po 'come gli oggetti raggruppati) in modo che possiamo modificarlo. Qualsiasi modifica apportata, in questo caso arrotondando gli angoli del rettangolo, verrà applicata a tutti i simboli del campo modulo che abbiamo utilizzato.

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 tavolozza dei simboli, dai un'occhiata a Suggerimento rapido: lavorare con i simboli in Adobe Illustrator.

4. Le punte di freccia sono perfette per puntare

Un ottimo consiglio è quello di sfruttare le punte delle frecce a forma di tratto, che sono immediatamente disponibili in Illustrator fin da CS5. I wireframe sono l'occasione ideale per descrivere visivamente le interazioni, il flusso di applicazioni, la navigazione e il movimento. 

In questi giorni possiamo facilmente aggiungere punte di freccia ai tratti, direttamente dal riquadro Traccia.

Possiamo persino modificare il file "Arrowheads.ai" di Illustrator, come spiegato da Ryan Cornwell, e aggiungere le nostre frecce al mix.

Nota: Fastidiosamente, lo strumento contagocce non applica punte di freccia insieme ad altri stili di tratto, quindi non è così facile come potrebbe essere duplicare l'effetto che hai scelto. Ma ancora, sono perfetti per il wireframing.

5. Aggancia alla griglia per spaziatura e dimensionamento unificati

In molti modi, questo continua dal non usare il colore. Le dimensioni unificanti e la spaziatura rimuovono 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 più avanti sulla linea; finché la gerarchia e le relazioni rimangono vere, siamo a posto.

Applica una griglia alla tua tavola da disegno andando Visualizza> Mostra griglia. Selezione Visualizza> Aggancia alla griglia ti aiuterà a posizionare i tuoi oggetti con precisione.

Per specificare esattamente come vuoi che sia la tua griglia (e ricorda, non stai andando qui per i minimi dettagli) vai Illustrator> Preferenze> Guide e griglia ... Una volta lì è possibile definire la distanza tra le linee della griglia, quindi indicare quante suddivisioni si desidera all'interno di tali linee.

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

6. Usa stili grafici per pulsanti flessibili

A seconda del livello di fedeltà (come è vero per il sito Web finale a cui si mira), è possibile che all'interno del testo sia presente del testo, ad esempio, pulsanti. Per far sì che questi pulsanti crescano e si riducano a seconda del contenuto al loro interno, non utilizzare oggetti, utilizzare stili grafici.

Iniziamo con una stringa di testo fittizio.

Ora apriamo il pannello Aspetto andando Finestra> Aspetto

Utilizzando il pannello Aspetto, è possibile aggiungere più riempimenti a un oggetto. Possiamo applicare questi riempimenti nell'ordine che vorremmo che fossero visualizzati; in questa immagine puoi vedere diversi, tutti ammassati uno sopra l'altro.

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

Al momento, non possiamo vedere lo sfondo grigio chiaro, perché è esattamente la stessa forma del riempimento più alto. Tuttavia, possiamo isolare e manipolare ciascun riempimento separatamente. Seleziona il riempimento inferiore nel riquadro Aspetto, quindi vai a Effetto> Converti in forma> Rettangolo arrotondato ...

Inserisci alcune impostazioni, qualunque cosa tu ritenga opportuno, ma assicurati che la dimensione sia relativa all'oggetto a cui stiamo applicando.

Il riempimento grigio chiaro sul fondo ora ha assunto la forma di un rettangolo arrotondato, relativo alle dimensioni del testo. Un bottone! Per applicare questo aspetto ad altri oggetti, apri il pannello Stili grafici e trascina l'intero pulsante in esso. Le sue apparizioni verranno salvate come stile che puoi riutilizzare.

Ad esempio, ecco una stringa di testo più lunga. Con il testo selezionato, fare clic sullo stile grafico appena creato (che ho fatto doppio clic e rinominato) per applicarlo all'istante.

7. Imposta alcune tavole da disegno comunemente usate

La velocità è il nome del gioco con wireframing! Scribble giù un layout, andare avanti, scarabocchiare un altro, andare avanti. Ha quindi senso avere un punto di partenza pronto a cui accedere facilmente. Potresti scoprire che lavori meglio su una grande tavola da disegno prima di tutto, trascinando gli oggetti finalizzati in un file separato o preferisci lavorare direttamente con le tavole da disegno di dimensioni appropriate.

Qui, ad esempio, c'è un layout con uno schermo per iPad (1536x2048px) e quattro schermi per iPhone 4S (640x960px), sebbene sia possibile preparare un file con un numero qualsiasi di esempi di schermate del dispositivo. O imposta manualmente le tue dimensioni preferite o scegli tra i predefiniti disponibili dalle Opzioni tavola disegno:

Includere guide comuni, nomi di livelli, set di simboli ecc. Che è possibile utilizzare, quindi salvare l'intero oggetto come modello per uso futuro (File> Salva come modello ... ) Questo punto di partenza sarà quindi disponibile per te andando File> Nuovo da modello ... , completa con tutti i frammenti che hai lasciato lì.

8. Usa TextExpander per Dummy Text

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

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

Aggiungi una serie di frammenti di testo che ti trovi comunemente in uso per wireframe (come intestazione di grandi dimensioni, intestazione breve, copia del corpo di lunghezze diverse, testo di pulsante tipico, voci di menu e così via) in modo che siano prontamente disponibili all'interno di Illustrator.

Definendo una frase chiave per ogni snippet, TextExpander sostituirà quella frase con il tuo contenuto ogni volta che la digiti, facendoti risparmiare tempo. Puoi anche utilizzare le opzioni della cartella per assicurarti che questi frammenti abbiano effetto solo in Illustrator, se lo desideri.

Per saperne di più sull'ottimizzazione del flusso di lavoro di TextExpander, dai un'occhiata a Master TextExpander con questi utili consigli e trucchi.

9. Esercita la denominazione di file logici

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

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

Ad esempio, potremmo lavorare su una pagina di destinazione; uno che si concentra sulla promozione di una campagna e-mail o di un e-book. Potremmo avere nomi di file come:

Non solo mantiene organizzate le cartelle del progetto, ma agisce come una forma di controllo delle versioni manuale. Matt Smith ne discute di più nel suo articolo Wireframing With Illustrator e InDesign.

10. Salva in Dropbox per il controllo delle versioni facile

Prendendo ulteriormente l'idea del versioning, il salvataggio dei tuoi file direttamente in Dropbox rimuoverà completamente quell'attività dal tuo elenco di cose da fare. Anche il piano gratuito di Dropbox memorizzerà 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, ciò è particolarmente utile se stai collaborando con un team. Avere tutti i membri che lavorano da una posizione centrale, con l'opzione 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 per il mio flusso di lavoro e potrebbero non tradursi perfettamente nel tuo modo di fare le cose. Tuttavia, spero che almeno inneschino una certa curiosità, per farti pensare al modo in cui hai wireframe i layout web. Se hai altri suggerimenti personali, condividili nei commenti!

Ulteriori letture

  • Wireframing con InDesign e Illustrator
  • Wireframing con Illustrator e InDesign (sottile differenza!)
  • Guida per principianti a Wireframing
  • Illustrator e Arrowheads