Introduzione a UX Design in Sketch

Un primer per i nuovi designer UX e studenti di design

Negli ultimi due anni abbiamo scritto molto sui suggerimenti di Sketch di UX Power Tools e volevo organizzarli in modo da aiutare i progettisti che hanno appena iniziato a entrare in UX.

Dovrei anche menzionare che non discuterò quale strumento è il migliore - suppongo solo che tu abbia già realizzato che Sketch è il migliore (per ora) e voglio sapere come usarlo come UX Designer

Ho suddiviso i nostri articoli in 5 sezioni che mappano il modo in cui penso che i nuovi designer passino dal principiante alla padronanza:

  • Ottenere idee
  • Iniziare
  • Sempre più veloce
  • Sempre più intelligente
  • Visual

Ottenere idee

Il design di UX inizia prima di arrivare agli strumenti - inizia nel punto di toglierti le idee di testa (... in realtà inizia molto prima con la ricerca, ma manteniamo questo articolo per meno di 20 minuti).

Certo, mi tuffo direttamente negli strumenti digitali molto presto. Ma questo è in gran parte perché faccio di più nella mia testa e disegno in modo collaborativo su una lavagna con il mio team di progettazione. I progettisti di UX che hanno appena iniziato dovrebbero davvero rimanere in bassa fedeltà mentre esplorano lo spazio del problema e commettono errori.

Una volta che sei pronto per ottenere qualcosa sullo schermo, ci sono due strumenti che penso facilitino davvero questo. Il primo è uno strumento InVision chiamato Freehand, che abbiamo esaminato:

Il secondo strumento che facilita questa fase di progettazione è un insieme di librerie premium per Sketch chiamato Flowkit di Matt D. Smith. Vale la pena il prezzo di $ 29.

Non è eccezionale solo per il wireframing a fedeltà ridotta, ma può essere utilizzato nelle fasi successive del progetto quando è necessario mappare i flussi di lavoro chiave in alta fedeltà per comunicare il progetto.

Iniziare

Di gran lunga la più grande forza di Sketch for UX Design è la sua enfasi nel rendere le cose ripetibili e veloci.

È ancora abbastanza allarmante vedere quanti designer di sketch non usano cose così semplici e potenti come gli stili condivisi o progressi più recenti come i simboli nidificati. Immagino sia perché i designer diventano impazienti e vogliono solo far uscire le cose. Lo capisco perfettamente.

Ma il grande design è buono solo come un designer è organizzato. Ci piace la metafora della cucina:

E ci piace anche espandere il concetto di fogli di stile dal codice alla progettazione (da quando abbiamo scritto questo, i sistemi di progettazione sono davvero esplosi sulla scena, ma la maggior parte di queste tecniche sono ancora rilevanti oggi):

E infine per il Santo Graal di articoli su come avviare un progetto in Sketch, che copre tutto (fino alla struttura delle cartelle):

Con un articolo bonus su come impostare i layout in Sketch in modo reattivo:

Sempre più veloce

Ok, ora che hai una comprensione di come avviare un progetto Sketch in modo efficace, è tempo di iniziare a diventare più veloce con lo strumento. Personalmente, trovo offensivo vedere un designer che non usa scorciatoie durante la progettazione - voglio dire, fa davvero male alla mia anima. Non essere quel ragazzo / ragazza:

Circa un milione e mezzo di nuovi strumenti e plug-in sono usciti da quando abbiamo scritto questo articolo, ma sinceramente, i migliori compagni di Sketch non sono davvero cambiati secondo me (Nudg.it è ora supportato nativamente in Sketch, Anima è ancora utile anche se in parte è stato inserito nella funzionalità di layout di Sketch):

Suggerimenti e trucchi

Jon Moore ha impartito la sua saggezza di power user in alcuni articoli che ti lasceranno a bocca aperta nella loro semplicità e potenza:

Sempre più intelligente

Sai come impostare un progetto, hai imparato a velocizzare con Sketch e ora è il momento di applicare tutto ciò al design UX.

Come ho detto prima, Sketch è perfetto per la progettazione di UX perché semplifica la ripetizione, la coerenza e la modularità. Ecco alcuni esempi di come usare Sketch per rendere gli elementi dell'interfaccia utente in modo intelligente (e sono tutti dotati di omaggi ):

Gestire icone e grafica in modo efficiente

Tratteremo il lato del design visivo di UX nella sezione successiva, ma la gestione della grafica è spesso al di fuori della timoneria di un designer UX. Invece di preoccuparti della creazione di icone, diventa più intelligente su come le usi:

I simboli nidificati possono effettivamente automatizzare un po ':

Infine, sarei remissivo se non avessi sottolineato il più grande progresso di Sketch negli ultimi 12 mesi - Librerie:

Visual

Come se tutto ciò non bastasse, i designer di UX oggi hanno uno standard molto più elevato da soddisfare quando si tratta di visual design.

Quando ho iniziato a progettare UX, ho trovato difficile conoscere i "materiali" con cui avevo bisogno di progettare: proporzioni, dimensioni dei caratteri, pesi, contrasto dei colori, ecc.

Per migliorare, ho iniziato copiando i prodotti esistenti in modo da avere un'idea di come era composta l'interfaccia utente.

Abbiamo discusso lo scorso anno e fornito collegamenti ad alcuni prodotti comuni ricreati in Sketch (anche se alcuni di essi sono stati riprogettati da allora):

Da lì puoi davvero iniziare ad usare alcune piccole tecniche per aggiungere un po 'di stile ai tuoi progetti:

Ma non dimenticare che dati di esempio precisi sono fondamentali per la progettazione visiva tanto quanto gli stessi elementi visivi:

* non abbiamo mai scritto la parte 2

Ultimo, ma non meno importante, a un certo punto della tua carriera dovrai progettare una dashboard ed è spesso uno dei più grandi incubi per un designer UX. Personalmente, trovo che i dashboard apportino un valore marginale alla tabella, quindi preferirei non passare giorni a far apparire bene i grafici:

Sono stati 18 fantastici mesi ad aiutare la comunità del design attraverso UX Power Tools. E sebbene Sketch non sia certamente l'unico strumento che un designer dovrebbe avere nel proprio arsenale, è sicuramente il più potente. Spero che questa appendice possa aiutare quelli di voi che hanno appena iniziato una carriera in UX o che stanno passando a Sketch per il flusso di lavoro di progettazione.

Se sei interessato a un sistema di progettazione alla vaniglia perfetto per l'avvio di nuovi progetti, ci piacerebbe se dai un'occhiata a quelli che abbiamo creato. Ti faranno risparmiare migliaia di ore di progettazione:

Quando non raccolgo articoli di Sketch su Medium, sto lavorando agli strumenti di progettazione di Sketch di UX Power Tools per renderti un designer migliore, più efficiente.

Segui UX Power Tools su Twitter
Seguimi su Twitter