Tutorial di schizzo

Una guida dettagliata per l'avvio di un nuovo progetto di progettazione di app in Sketch

E perché non li ho mai, MAI avviati da zero.

Sono fermamente convinto della trasparenza, quindi prima di iniziare, ti devo questo:
Parti di questo post fanno riferimento a un framework di design che ho costruito da solo e venduto sul lato. Detto questo, questa guida sarà comunque utile anche se non vai a comprarla.

Iniziare un progetto è difficile.

Non importa se sei un designer freelance, lavori per un'agenzia di prodotti di successo o aiuti a supportare un grande team di progettazione aziendale ... è scoraggiante.

Lavoro in un'agenzia di design che firma nuovi clienti su base mensile. Il mio titolo non ufficiale è qualcosa come Product Concept Designer, che in pratica significa semplicemente che ogni volta che iniziamo con un nuovo cliente, ottengo l'eccitante lavoro di creare schermate concettuali visionarie che aiutano a ispirare la loro roadmap di prodotto per il prossimo anno (o due ... o tre ).

Questi concetti hanno scadenze ravvicinate e richiedono un'inversione di tendenza rapida, quindi il mio INTERO MONDO è incentrato su efficienza e precisione; i miei modelli devono risolvere il problema, fornire visione ed essere lucidati per una transizione graduale al design di produzione.

Per quanto ne so, sono diventato abbastanza efficiente e ho pensato che altri designer avrebbero potuto trarre beneficio nel vedere come avvio nuovi progetti.

Nota: non ti sto mostrando come preparare l'intero pasto ... solo come tagliare gli ingredienti e accendere la stufa

Sommario / Versione ridotta / "Non sto leggendo tutto questo":

  1. Crea le cartelle dei file (sì, davvero)
  2. Scegli i colori
  3. Scegli i caratteri tipografici
  4. Configura la griglia
  5. Costruisci un "Blockframe"
  6. Converti in Hi-Fi

1. Creare le cartelle dei file

Perché: per organizzare i file e le risorse di progettazione!
Strumento / i che utilizzo: Finder + Automazione (sotto)

Se non inizi con il piede giusto, viaggerai fino in fondo. La struttura delle mie cartelle mi aiuta a organizzarmi e mi offre un modo per condividere le risorse di progettazione con varie parti (marketing, sviluppo, ecc.).

Aggiungo un _underscore per assicurarsi che quelle cartelle rimangano in cima all'elenco.
  • _assets: questa cartella è generalmente condivisa con team di sviluppo interni / esterni. Include tutto ciò di cui avranno bisogno per creare l'app (immagini / contenuti fittizi, caratteri, icone, immagini e loghi).
  • _exports: Ogni volta che esporto una schermata in PNG, vanno qui. Questa cartella è condivisa con il marketing in modo da avere sempre a portata di mano le schermate più recenti da inserire in vari materiali di marketing (mazzi, pagine Web, social media).
  • ui-design: questi sono i miei file sorgente. Di solito è solo un file, ma se mai ne creo di nuovi, vengono memorizzati qui.

Ho creato un'automazione per creare tutte queste cartelle per me ...

... e puoi ottenerlo qui gratuitamente:

2. Scegli i colori

Perché: creare una tavolozza di base per il mio progetto.
Strumento / i che utilizzo: Coolors.co

Scegliere i colori è il modo più semplice per iniziare. Se stai lavorando in un sistema di progettazione esistente, questi sono probabilmente già definiti, nel qual caso, vai a chiedere a qualcuno nel marketing o nella progettazione visiva.

I miei sistemi di progettazione sono sempre basati su 5 colori principali:

  • Marchio primario
  • Nero
  • Accento 1 (successo)
  • Accento 2 (avviso)
  • Accent 3 (pericolo)

Perché questi colori? (controlla la sezione 2 in quell'articolo)

Uso un'app chiamata Coolors di Fabrizio Bianchi per aiutarmi a generare una palette. Premi la barra spaziatrice e sceglierà casualmente i colori per te. Quando trovi un colore che ti piace, bloccalo e continua a generare fino a trovare gli altri colori. Se il colore del tuo marchio è già definito, puoi inserire il valore esadecimale, bloccare quel colore, quindi premere la barra spaziatrice per generare il resto dei colori.

Vedi un buon colore

Una volta identificato ciascuno dei miei colori principali, li inserirò nel mio file modello di progettazione di Sketch. Questo file modello ha già stili di livello, quindi li sto semplicemente aggiornando con i colori che ho appena generato:

Anche il mio modello ha un colore

Per i dettagli su come creare un foglio di stile completo, leggi questo:

3. Scegli i caratteri tipografici

Perché: per dare un po 'di carattere alla mia app!
Strumento / i che utilizzo: Google Fonts e Font Pair

I caratteri tipografici sono importanti per il design quanto i colori, quindi prenditi del tempo per scegliere quello giusto. Poiché stai progettando un'app da utilizzare per le persone, è incredibilmente importante scegliere un buon carattere tipografico.

Ehi Jon, cosa rende un buon carattere tipografico per i design di app?

Ehi, sono contento che tu l'abbia fatto Ecco alcune domande che mi pongo quando scelgo un carattere tipografico:

  • Leggibilità: è leggibile per lunghi periodi di tempo?
  • Scalabilità: è leggibile quando è grande e quando è piccolo?
  • Variabilità: ci sono almeno due variazioni di peso?

Google Fonts ha aggiornato la sua interfaccia l'anno scorso ed è davvero fantastico da usare. Mi assicuro sempre di testare le cose su uno sfondo bianco e nero solo per verificare che tutto funzioni ancora.

Le impostazioni nel pannello di destra sono come mi piace ambito la mia ricerca.

Se ti piacciono più caratteri tipografici, ad esempio uno per le intestazioni e uno per i contenuti, dovrai scavare la coppia di caratteri. Hanno fatto il duro lavoro per te e ti mostreranno, proprio in linea, come si presentano due caratteri uno accanto all'altro. Rende davvero semplice scegliere una bella coppia. Inoltre, genera tutti i caratteri da Google Fonts, quindi non devi preoccuparti di dover pagare nulla.

Testa sempre i caratteri con lettere, numeri e punteggiatura. A volte troverai un bel carattere che ha un bizzarro "9" o uno strano punto esclamativo. Non vuoi imbatterti in quella stranezza quando hai già 24 schermi in profondità nel tuo design.

Una volta scelti i caratteri tipografici, crea stili di testo all'interno di Sketch per elementi come intestazioni, contenuto del corpo e collegamenti. Non dovresti mai aggiungere testo a un disegno a meno che non sia legato a uno stile di testo. Se decidi di cambiare il carattere lungo la strada e hai un testo "non assegnato", questi non verranno aggiornati quando sincronizzi la modifica del carattere.

Il mio file modello Sketch ha già tutte queste dimensioni di testo standard definite, quindi posso selezionarle tutte, cambiare il carattere e sincronizzare:

4. Configurare la griglia

Perché: per stabilire la coerenza dell'allineamento in tutta l'app.
Strumento / i che utilizzo: Sketch e una calcolatrice

È diventato abbastanza comune che le griglie siano costruite su multipli di 8.

Perché 8?

Inoltre, le risoluzioni dello schermo più popolari sono divisibili per 8. Nella tabella seguente, le colonne verificano se la larghezza e l'altezza sono equamente divisibili per 8px:

Maggiori dettagli qui: https://spec.fm/specifics/8-pt-grid

Con queste informazioni, puoi iniziare a decidere la dimensione della tua griglia. Innanzitutto, decidi come apparirà la tua app:

  • Larghezza completa: un'app a larghezza intera è edge-to-edge. Se si tratta di un'app Web, il tuo design si estenderà fino ai bordi del browser.
Mi piace impostare le mie grondaie in modo che siano almeno 24px. In questo caso, le grondaie sono divisibili per 8, ma le colonne no. Non è un grosso problema.
  • Floating: un'app mobile aderisce a una griglia a larghezza fissa, generalmente al centro della finestra.

Per le app mobili, mi piace che le mie grondaie e colonne siano entrambe divisibili per 8. Ecco una semplice equazione:

(12 colonne * Larghezza) + (11 Grondaie * Larghezza) = Larghezza layout totale

  • Ibrido: un'app ibrida è un mix di elementi a larghezza intera e mobili. Il sito Web Medium è un'app ibrida perché l'intestazione superiore è a larghezza intera, ma l'area del contenuto è fissata a 740 px.
Questo layout è un layout mobile con alcuni elementi a larghezza intera.

Un'ultima nota. La MAIUSC predefinita + → distanza in Sketch è 10px. Questo sarà SUPER fastidioso quando stai lavorando su una griglia 8px. Fortunatamente, Sketch ti consente di modificarlo nelle preferenze.

5. Costruisci un "Blockframe"

Perché: scorrere rapidamente i layout delle app e i flussi di interazione UX.
Strumento / i che utilizzo: Beh ... rettangoli.

Prima di entrare in modalità wireframe, mi piace costruire quello che chiamo un "blocco di frame" per stabilire le varie aree del mio layout di pagina. L'idea qui è iniziare a farsi un'idea della griglia appena definita e bloccare rapidamente le parti più importanti della pagina.

Ecco un blockframe che ho fatto per un'app di chat che sto progettando:

Non c'è ragionamento dietro i colori. Apparentemente mi sentivo patriottico.

Mi ci sono voluti circa 90 secondi per generare, ma è tutta la guida di cui avrò bisogno per iniziare a progettare l'interfaccia. Preferisco questo rispetto al wireframing completo perché tendo a passare all'hi-fi quando provo a wireframe ogni elemento sullo schermo. Forse sono solo un cattivo designer? Vedo solo un sacco di wireframe che sono già così dettagliati che potresti averlo fatto in piena fedeltà visiva la prima volta in ogni caso. Solo la mia opinione!

Questa è fondamentalmente la fase UX in cui bloccherò i flussi di lavoro delle app per assicurarmi che ogni interazione porti un'esperienza utente positiva.

6. Converti in Hi-Fi

Quindi non voglio lasciarti sospeso ...

... ma è qui che fai la tua magia!

L'unica cosa più importante durante la fase di progettazione dell'hi-fi è aderire a tutto ciò che abbiamo impostato nei passaggi 1–5.

  • Salva le cose nelle cartelle giuste.
  • Usa solo i colori nella tua tavolozza.
  • Non allontanarti dai tuoi stili di testo.
  • Conformarsi sempre alla propria griglia.
  • Blockframe nuovi layout prima di eseguirli in alta fedeltà.

Sommario

Quindi questi sono i passi che faccio per iniziare un nuovo progetto di progettazione di app. Se sei interessato al file modello di Sketch che utilizzo per tutti i miei progetti, l'ho reso disponibile di seguito. Maggiori dettagli disponibili qui.

Quando non scrivo, sto lavorando su strumenti di progettazione di Sketch come UX Power Tools per renderti un designer migliore, più efficiente. Tutti i migliori designer e team di Sketch lo stanno usando e penso che potrebbe piacerti anche a te. Dai un'occhiata su Marvel!

Segui UX Power Tools su Twitter
Seguimi su Twitter