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.
Per poter seguire, avrai bisogno dei seguenti beni (disponibili gratuitamente):
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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%.
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
.
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.
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.
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.
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 .
Duplica uno dei gruppi di campi di input e posizionalo tra la terza e la quarta guida verticale, assicurati di allineare tutto. Cambia il valore con quello che vuoi e aggiungi una semplice icona a forma di freccia per indicare che si tratta di un campo a tendina. Puoi trovare le icone freccia su Iconfinder.
Per semplificare il lavoro degli sviluppatori, assicurati nuovamente di includere uno stato attivo. Pensa a come apparirà il menu a discesa quando l'utente fa clic su di esso? È compito del designer guidare lo sviluppatore per creare un'esperienza coerente e unificata.
Duplica il gruppo a discesa creato di recente. Usando il Strumento di selezione diretta (A) clicca su un angolo di forma per vedere i punti di bordo, quindi, tenendo premuto Cambio, seleziona i quattro punti in basso e premi giù un paio di volte per estendere la forma. Questa tecnica mantiene il tuo vettore di forma e mantiene intatti gli angoli.
Dopodiché basta duplicare le selezioni possibili e posizionarne alcune al di sotto del primo. Usare un Strumento linea (U) 1px in Peso per creare semplici separatori e infine cambiare il colore della freccia con quello usato per i pulsanti. Questo aiuterà a indicare che il campo è attivo.
Creeremo ora un semplice scenario di messaggi di errore, ad esempio se qualcuno ha inserito una password troppo debole.
Duplicare CMD + J il campo della password creato in precedenza e posizionarlo sotto i campi a discesa. Successivamente, cambia il bordo del campo in un rosso sottile (io l'ho usato # eb8686
) e lo sfondo di un rosso grigiastro # e9dde3
. Infine, scegli un rosso più forte # b63131
e inserisci un semplice messaggio di errore.
Questo è tutto con le forme! Ho coperto le basi, ma è sufficiente per iniziare a progettare forme più complesse.
Gli avatar sono quasi standard in qualsiasi app web in questi giorni, quindi è comodo avere alcuni elementi visivi per facilitare la comunicazione e l'identificazione degli utenti.
Riduci al minimo i gruppi non necessari e apri il gruppo Avatars. Scegli il Ellipse Tool (U) e, tenendo premuto Cambio, disegna un cerchio 80x80px. Vai su uifaces.com e scegli un'immagine. Copia e incolla sopra la cerchia creata di recente. Tieni premuto alt e passa il mouse sopra la miniatura dell'immagine fino a quando non vedi una piccola freccia, quindi rilascia il mouse per creare un Maschera di ritaglio.
È importante pensare a come gli avatar verranno utilizzati e includere alcune dimensioni diverse da utilizzare per gli sviluppatori. Ad esempio, le immagini di avatar più grandi potrebbero essere utilizzate nella pagina del profilo e quelle più piccole nella sezione dei commenti.
Basta duplicare l'avatar e ridimensionarlo T CMD +, tenendo premuto Cambio chiave per mantenere le proporzioni.
Dovremmo davvero includere un esempio di come verranno visualizzate le immagini all'interno della nostra app. Inserirò una sola immagine all'interno del rettangolo arrotondato per mostrare che le immagini devono avere angoli arrotondati.
Scegli il Strumento Rettangolo arrotondato (U) e traccia una forma rettangolare tra le linee guida verticali sotto il avatars
gruppo. Dopo aver scelto un'immagine, ne ho usata una da unsplash.com, ridimensiona se necessario con T CMD + e creare a Maschera di ritaglio.
Finalmente copriremo i colori. Una tavolozza di colori solidi è fondamentale e dovresti controllare la teoria dei colori per capire meglio il significato e l'importanza dei colori che usi. Optiamo per scegliere i colori proprio alla fine del processo, perché ora abbiamo una buona idea dell'elemento che dobbiamo modellare.
Apri il Colori
raggruppa e scegli uno dei colori che hai usato per i pulsanti come colore di primo piano. Dopo ciò, usando a Strumento Rettangolo arrotondato (U) disegna un rettangolo. Quindi scegli un Strumento di tipo orizzontale (T) e scrivi il titolo del colore, o per quale motivo verrà usato per es. "Colore primario" e fornire i codici colore in HEX, RGB o qualsiasi altro formato necessario. Crea un nuovo gruppo, dagli un nome al colore e mettici tutti i livelli.
Ora semplicemente duplicato CMD + J il gruppo di colori e realizza tutti i campioni di colore di cui hai bisogno. Di solito è meglio attenersi a quattro o cinque colori perché più colori possono rendere le cose disordinate. Dai un'occhiata a Kuler e COLOURlovers per le fantastiche tavolozze di colori.
Per questo tutorial, come vedi, ho usato i colori "Primario" e "Secondario", un colore per il corpo del testo e uno per i titoli, anche bianco per gli sfondi di input. Questi sono tutti mostrati di seguito.
Così il gioco è fatto. Una semplice guida allo stile dell'interfaccia utente per l'app Web. Spero che tu abbia appreso e compreso le basi della creazione di una guida di stile, del perché siano state prese alcune decisioni e del modo in cui sono utili al progetto.
Se avete domande o avete difficoltà, non esitate a chiamarmi nella sezione commenti!