Progettazione di un kit di interfaccia utente di app Web in Adobe Photoshop

Cosa starai creando

Lo sviluppo guidato dalla guida allo stile offre un approccio estremamente flessibile al web design moderno. In questo tutorial ti guiderò attraverso la progettazione di un kit dell'interfaccia utente (interfaccia utente), spiegando anche il processo decisionale che manterrà il nostro kit UI coerente e riutilizzabile.

Risorse Tutorial

Per poter seguire, avrai bisogno dei seguenti beni (disponibili gratuitamente):

  • Apri il carattere Sans da Font Squirrel o Google Fonts
  • Foto d'archivio da Unsplash
  • Faces from UI Faces
  • Icona freccia di Iconfinder

Preparare il documento di Photoshop

Passo 1

Apri Photoshop e inizia creando un nuovo documento (File> Nuovo ... ) usando le impostazioni mostrate sotto. Sei libero di usare una tela di qualsiasi dimensione tu preferisca - il web non ha una larghezza fissa, dopotutto.

Passo 2

Impostiamo alcune guide in modo che il nostro kit di interfaccia utente sia organizzato e allineato. Non uso sempre una griglia, ma l'impostazione di alcuni vincoli garantirà pulizia e coerenza. Vai a Visualizza> Nuova guida ...  e impostare alcune linee guida. Di solito scelgo 1000px come larghezza iniziale del sito web, quindi teniamo il kit UI all'interno di queste dimensioni.

Nota: Linee guida utilizzate per questo tutorial: verticale a 100px, 600px e 1100px.

Mancia: È anche possibile utilizzare il plug-in GuideGuide Photoshop per rendere questo processo ancora più rapido.

Passaggio 3

Seguendo l'etichetta di Photoshop manterremo le cose organizzate e facili da navigare e modificare. In un ambiente di lavoro avremo bisogno di questo kit UI da utilizzare più volte come punto di riferimento e risorsa di sviluppo, quindi è necessario mantenerlo organizzato (gli sviluppatori ti ringrazieranno). Creiamo gruppi di sei livelli denominati Typography, Buttons, Forms, Avatars, Images e Colors. 

Per creare gruppi vai a Livello> Nuovo> Gruppo ...  e dare a ciascuno un titolo come detto. Per creare rapidamente un gruppo, fai clic sull'icona.

Definire la tipografia

Come ha affermato Oliver Reichenstein "Web Design è tipografia al 95%", quindi è necessario farlo bene. Prima di tutto abbiamo bisogno di creare l'ambiente perfetto per il nostro tipo; uno sfondo che è neutro e facile per gli occhi. Background e tipografia devono mantenere livelli di contrasto ragionevoli per essere leggibili. Per questo tutorial usiamo il grigio chiaro sottile, un colore neutro ma abbastanza forte da dare alla tua app una personalità. Ho impostato il colore di primo piano su # e9eeef e colpisci Alt + Backspace per lo sfondo.

Passo 1

Apri il Tipografia gruppo, scegli il Strumento di tipo orizzontale (T) e selezionare il Apri Sans font. Open Sans è un carattere moderno che viene fornito in molti pesi diversi e ha un aspetto professionale, ma accogliente. È abbastanza elegante per le intestazioni, ma anche abbastanza pratico per la copia del corpo sul web. 

Open Sans ha un sacco di varianti, quindi per questo kit UI userò solo un font. Tieni presente che dovresti stare attento se utilizzi più di due tipi di carattere diversi per i tuoi progetti in quanto le cose possono diventare disordinate rapidamente.

Ho impostato il colore di primo piano sul nero # 000000 quindi usando il Strumento di tipo orizzontale (T) e il già citato Apri Sans carattere con Luce l'opzione e la dimensione 55px hanno inserito il titolo della sezione. Useremo le stesse dimensioni e titoli di stile per i titoli futuri per mantenere la coerenza.

Passo 2

Ora dobbiamo stabilire una gerarchia per la nostra tipografia. Si prega di consultare questo articolo Come stabilire una scala tipografica modulare di Ian Yates per comprendere meglio la scienza e l'importanza della tipografia web.

HTML(HyperText Markup Language) ha molti tag diversi che aiutano i browser a interpretare il contenuto di una pagina. Molti di questi tag sono specificatamente utilizzati per la tipografia web come

,

,

e così via. Questi descrivono titoli,

essendo il più importante. Dopo questo c'è un

tag usato per i paragrafi. Senza entrare nel dettaglio in cui è interessato l'HTML, definiremo l'aspetto di questi elementi.

Usando il Strumento di tipo orizzontale (T) inserisci tre titoli. Ho usato Apri Sans (chiaro) 55px per h1, 44px per h2 e 32px per h3 lasciando uno spazio di 30px tra di loro. La spaziatura è un'altra cosa importante da tenere a mente. Lascia uno spazio sufficiente in modo che il tuo tipo sia facilmente leggibile e in equilibrio.

Nota: Ho usato Regolare peso per l'h3. Come il tipo diventa più piccolo il Luce la variante potrebbe diventare meno leggibile.

Passaggio 3

Dato che abbiamo i titoli dei titoli, passiamo alla copia del contenuto attuale. Prendi in considerazione tutte le possibili varianti di copia e visualizzale nel tuo kit dell'interfaccia utente in modo che gli sviluppatori possano implementare ciò che hai pianificato. Pensa a uno stile di intestazione all'interno del paragrafo, stili grassetto, corsivo e anche link.

Per il colore principale della copia ho scelto il grigio # 838.383, per il titolo nero # 000000 e blu # 006ee3 per il colore del link.

Il titolo sarà notevolmente più scuro della copia principale, dandogli un impatto maggiore. Il colore del contenuto principale dovrebbe essere rilassante e facile da leggere. Infine, assicurati di scegliere un colore diverso per i tuoi link in modo che gli utenti comprendano che sono cliccabili.

Nota: Imposta il titolo e collega il carattere a Semibold peso per farli sembrare più grandi e più importanti.

Creazione di pulsanti

I pulsanti sono molto importanti per i progetti web. Sono collegamenti semplici o inviano moduli la maggior parte del tempo, ma possono anche svolgere una funzione di invito all'azione (CTA) guidando le persone attraverso la pagina, prendendo decisioni più rapidamente. È fondamentale definire un aspetto coerente per i pulsanti in modo che l'utente abbia familiarità con loro in tutta l'app.

Passo 1

Riduci al minimo il Tipografia raggruppa facendo clic sulla piccola freccia accanto al nome del gruppo e apri il pulsanti gruppo. Dopo di ciò, crea alcune nuove linee guida verticali per dividere la nostra area del contenuto in tre aree uguali con intervalli di 35px tra. Vai a Visualizza> Nuova guida ...  e impostare le seguenti linee guida verticali: 410px, 445px, 755px e 790px. È qui che posizioneremo i nostri pulsanti in modo che tutti siano uguali e coerenti.

Passo 2

Torna indietro al Tipografia gruppo, trova il livello titolo della sezione e duplicalo facendo clic CMD + J, quindi spostalo pulsanti raggruppa e cambia in "Pulsanti".

Successivamente, immettere tre titoli di stati dei pulsanti: Normale, Passa al puntatore e Attivo. Posiziona questi alla sinistra delle nostre tre sezioni uguali, tenendo presente il divario di 35 px tra la prima, la seconda e la terza area.

Passaggio 3

Ora imposta il colore di primo piano sul blu precedentemente utilizzato # 006ee3 e creare un nuovo gruppo chiamato Normale Primaria. Quindi prendi a Strumento Rettangolo arrotondato (U), impostato Raggio a 3px e disegna una forma rettangolare arrotondata di dimensioni 310x44 px. Inseriscilo tra le prime due linee guida sotto il titolo "Normale". Per finalizzare il pulsante scrivi del testo su di esso usando il colore bianco #ffffff quindi è chiaramente leggibile.

Passaggio 4

Ora duplica il Pulsante primario gruppo facendo clic CMD + J sul gruppo e rinominare questi gruppi in Hover primario e Attivo primario. Dopo questo posto questi nuovi gruppi sotto le due sezioni abbiamo creato titoli prima.

Cosa fare librarsi e attivo significa che potresti chiedere? Il passaggio del mouse descrive lo stato di un pulsante dopo aver spostato il puntatore del mouse su di esso, quindi è necessario illustrare un feedback dal pulsante. Un collegamento diventa attivo quando si fa clic su di esso.

Per lo styling hover e gli stati attivi dei pulsanti li scuriremo semplicemente. Crea un nuovo livello sopra la forma del pulsante e riempilo di nero # 000000. Dopo che tieni premuto alt e posiziona il mouse sul livello finché non vedi una piccola icona a forma di freccia - rilasciala per creare un Maschera di ritaglio. Infine riduci il livello Opacità al 10%.

Nota: per lo stato attivo del pulsante aumenta il livello del nero Opacità al 20%.

Passaggio 5

Ora duplica tutti i gruppi di pulsanti precedenti e cambia titolo e colore in secondario. Definiremo i colori del kit dell'interfaccia utente più avanti in questo tutorial, per ora scegli semplicemente un colore e sostituisci il blu precedente. Ho usato il verde # 36c265.

Progettazione di moduli

I moduli sono un elemento di web app molto importante in quanto consentono agli utenti di inserire informazioni e interagire con l'app. Progetteremo alcune forme di base in modo che gli sviluppatori possano attenersi allo stesso stile e mantenere il design coerente.

Passo 1

Riduci al minimo il pulsanti raggruppa e apri il Le forme gruppo. Ancora una volta duplica il titolo della sezione dal gruppo precedente e rinominalo in "Moduli". Creeremo alcuni tipi di input di form di base tra cui input di testo, campo password, menu a discesa o selezione e campo di invio (un semplice pulsante).

Quando si progettano le forme, la chiarezza e la familiarità sono i fattori chiave. Non provare a reinventare la ruota. Crea un nuovo gruppo e chiamalo Nome. Quindi scegli un Strumento di tipo orizzontale (T) e inserisci un'etichetta di campo di input, nel mio caso è "Nome" utilizzando la stessa dimensione di nero 18px # 000000 Open Sans (Regular) font.

Ora duplica uno dei livelli di forma del pulsante e spostalo nel Nome gruppo. Dopodiché cambia il suo colore di sfondo in bianco #ffffff e aggiungi un grigio 1px # d5d5d5 all'interno del tratto. Infine, inserisci un esempio del testo di input all'interno del rettangolo bianco arrotondato. Per il mio esempio ho usato 16px Open Sans (Regular) e il colore grigio # 838.383 come usato in precedenza per il corpo del testo.

Passo 2

Crea altri campi di input con i titoli semplicemente duplicando il primo campo di input. Tradizionalmente, per il campo della password utilizzare punti • o asterischi *. Di seguito è riportato un esempio di più campi.

Duplicare CMD + J uno dei gruppi di pulsanti, spostalo all'interno di Le forme raggruppare e posizionarlo sotto i campi di input creati di recente. Ancora una volta è importante rimanere coerenti e riutilizzare elementi creati in precedenza.

Passaggio 3

In questo tutorial ci atteniamo a un'interfaccia utente molto semplice che potrebbe servire a un'applicazione web molto semplice. Creiamo ora un altro tipo di campo di input; il