Share
Il ruolo di Photoshop nel web design sta diventando più modulare. Invece di comporre un layout perfetto per pixel di un'intera pagina web, è forse più sensato in questi giorni concentrarsi su stili generali, combinazioni di colori e specifici elementi dell'interfaccia. Oggi esamineremo più da vicino la progettazione degli elementi dell'interfaccia utente, mettendo insieme il nostro kit di interfaccia utente.
Prima di iniziare a progettare la nostra collezione di elementi dell'interfaccia utente, diamo un'occhiata ad alcuni siti Web che stanno facendo un ottimo lavoro con la loro interfaccia. Certamente non fa male a prendere ispirazione!
L'interfaccia utente di Flow Flow fa un ottimo lavoro con la loro interfaccia utente. È totalmente pulito, vibrante - e solo guardandolo capisci istintivamente cosa fanno e dove andare. Si noti l'ottimo uso di colori e icone che sono incorporati nell'applicazione web.
L'interfaccia utente di Gumroad Gumroad ha una grande atmosfera in corso con la loro interfaccia. L'interfaccia non è solo divertente, ma fa un ottimo lavoro nel presentare le informazioni in modo pulito, conciso e semplice. Si noti come i pulsanti di invito all'azione escano davvero dalla pagina.
Interfaccia utente di Squarespace Squarespace richiede un livello minimo e pulito al livello successivo. Senza l'uso dei colori, l'interfaccia consente comunque agli utenti di navigare facilmente nel dashboard. Notate come anche se c'è molto contenuto, l'uso intelligente dell'ombreggiatura rende tutti quei numeri meno intimidatori.
Interfaccia utente di GoSquared L'interfaccia utente di GoSquared mostra che anche le applicazioni web pesanti per contenuti possono sfruttare l'ottimo design. Con l'uso dei moduli l'interfaccia diventa pulita e coerente. Anche l'ottimo uso degli accenti di colore si aggiunge all'interfaccia utente. Si noti come questo tipo di interfaccia si presti bene alla personalizzazione; gli utenti possono facilmente spostare, rimuovere, aggiungere o modificare i moduli.
Ora che abbiamo dato un'occhiata ad alcune interfacce utente esistenti, è il momento di prenderci una brutta copia da soli!
Inizieremo con l'intestazione.
Come abbiamo visto prima, i colori lo sono molto importante quando si tratta di un'applicazione web; una combinazione di colori aiuta a definire l'atmosfera e rende l'applicazione facile da identificare. Diversi colori provocano anche diversi stati d'animo o temi (ad esempio, i colori giocosi di Gumroad suggeriscono che l'app Web è priva di stress e facile da usare) e possono essere utilizzati per targetare diversi dati demografici (ad esempio, luminosi e vivaci per un pubblico giovane, neutrale e semplice per un pubblico più anziano).
Tieni presente che potrebbe essere preferibile scegliere una combinazione di colori modesta con colori facili da guardare. Inoltre, assicurati di utilizzare il contrasto e sfumature diverse, in quanto ciò aiuta a definire la gerarchia visiva e rende il contenuto molto più facile da filtrare, come mostrato negli esempi sopra. Dato che in realtà non abbiamo uno scopo per questa app, saremo modesti e sceglieremo uno schema di colori sofisticato, blu-grigio:
Essere unici in termini di stile è importante per un'applicazione web; come i colori, lo stile è un modo per rendere la tua applicazione riconoscibile e distinguersi dal resto. Oggi la nostra attenzione sarà concentrata su aspetti moderni e semplici. Sebbene i gradienti siano eccezionali, aggiungere trame e motivi può far risaltare gli elementi e creare un'esperienza più tattile. Per ottenere questo effetto, utilizzeremo un modello di rumore sulla barra di navigazione e sui pulsanti. Controlla la differenza:
Noti la differenza che il rumore fa a sinistra? Semplice ma efficace! Oltre ai pattern, utilizzeremo gli stili di livello per regolare i pulsanti in modo che non solo si distinguano, ma anche i loro stati sono distinguibili. Nell'immagine sopra, puoi vedere chiaramente che il pulsante 'Home' è attivo.
Senza ulteriori ritardi, apriamo Photoshop! Inizia creando un nuovo file largo 600px e alto 350px (impostazioni web predefinite). Crea una forma rettangolare che riempie l'intera tela e rinomina il livello in "BG". Dato che ora abbiamo uno sfondo, elimina il livello predefinito "Sfondo". Quindi, cambia il colore di riempimento in # dde3ec.
Ora crea una nuova forma rettangolare di 600 px di larghezza e 70 px di altezza e allineala alla parte superiore dell'area di disegno. Questa sarà la barra di navigazione della nostra app Web. È importante tenere a mente le dimensioni quando si progetta, in questo caso, non vogliamo una navigazione troppo grande e invadente per il resto dell'app, quindi 70px è l'ideale.
Nota: In una situazione di browser potremmo utilizzare ems per ridimensionare i nostri elementi di pagina, ma quando utilizziamo Photoshop dobbiamo attenerci ai pixel.
Rinominare il livello in "Barra di navigazione" e cambiare il colore di riempimento in # 303.844. È importante scegliere un colore contrastante per il tuo elemento di navigazione e farlo risaltare sullo sfondo. In questo caso, abbiamo uno sfondo blu chiaro e una barra di navigazione blu-grigio scuro. Blocca le posizioni di entrambi gli strati, in modo che non si spostino accidentalmente. Ecco cosa dovresti avere a questo punto:
Prima di iniziare ad aggiungere stili alla nostra barra di navigazione, simuleremo lo schema del rumore che ho menzionato prima.
Crea un nuovo file di 100 px di larghezza e 100 px di altezza (impostazioni web predefinite). Crea un nuovo livello, seleziona l'intero canvas (cmd / ctrl + a) e riempilo con qualsiasi colore (cmd / ctrl + backspace). Dal menu, seleziona Filtro> Disturbo> Aggiungi disturbo. Imposta la quantità di rumore sul 400%, la distribuzione su Uniforme e assicurati che Monocromatico sia selezionato. Ecco come dovrebbe apparire:
Una volta ottenuto ciò, vai al menu, Modifica> Definisci modello, assegna un nome al modello "Rumore" e fai clic su "OK". Ora hai un pattern di rumore che puoi usare per creare uno stile! Ci sono molte grandi risorse online che forniscono modelli per l'utilizzo del web: prova a sperimentarle per creare un look unico!
Tornando alla PSI dell'interfaccia utente dell'applicazione Web, vai alle opzioni di stile del livello per la barra di navigazione. Usando alcuni stili di livello, è facile aggiungere alcuni grandi effetti a questa forma semplice.
Inizieremo aggiungendo un tratto di 1 pixel al di fuori del livello, con il colore di riempimento # 000000 e l'opacità al 100%. Questo ci darà una linea che separa l'elemento dallo sfondo.
Successivamente, aggiungeremo un'ombra esterna al livello: modalità di fusione normale, colore come # 000000, l'opacità del 58%, l'angolo di 90 gradi, la distanza di 1 pixel, la diffusione di 0 px e la dimensione di 5 px. Questa ombra conferirà un bell'effetto evidenziando la barra di navigazione e rendendola più prominente.
Successivamente, aggiungeremo un'ombra interna: modalità di fusione come schivata lineare (aggiungi), colore come #ffffff, angolo come -90 gradi, distanza come 1px e choke e dimensione come 0px. Questa ombra lineare aggiunge un effetto 3D alla barra di navigazione e aggiunge un tocco in più al design.
La nostra barra di navigazione sembra un po 'piatta (non c'è niente di sbagliato in questo, bny il modo!), Ma aggiungiamo un gradiente: modalità di fusione come sovrapposizione, opacità del 20%, sfumatura predefinita da nero a bianco, stile lineare e angolo di 90 gradi . Per aiutare il nostro gradiente, aggiungiamo il pattern su cui stavamo lavorando in precedenza: la modalità di fusione come sovrapposizione e opacità come 1%. Ecco cosa dovresti avere:
Ora che la nostra barra di navigazione sembra perfetta, è ora di aggiungere alcuni elementi. Il design dei pulsanti è molto importante per il design di un'interfaccia - sono utilizzati molto e devono essere distinguibili, funzionali e rappresentabili del marchio.
Anche la distinzione tra diversi stati dei pulsanti è importante - l'utente ha bisogno di feedback continui, quindi alterando un po 'gli stili di livello, possiamo creare vari stati. Iniziamo creando il pulsante attivo.
Crea un nuovo livello 'Pulsante Nav attivo' con una forma rettangolare arrotondata: larghezza di 100 px, altezza di 40 px e un raggio di 4 pixel. Ancora una volta, le dimensioni sono molto importanti. La larghezza e l'altezza del pulsante dipendono da molti fattori come le dimensioni dei loro elementi principali, la quantità di testo e la dimensione del testo. Posizionalo verticalmente centrato rispetto alla barra di navigazione e 40px a sinistra della tela.
Imposta il colore di riempimento su # 90a2c3, l'opacità di riempimento al 25% e apri le impostazioni di stile per il livello. Ancora una volta, crea un tratto che è 1px al di fuori del livello, ha un'opacità del 100% e ha un colore di riempimento # 000000. Successivamente creare un bagliore interno: modalità di fusione normale, opacità del 13%, colore di # 000000, choke of 0px e dimensione di 4px. Questo bagliore interno ci dà l'effetto "spinto dentro".
Ora, per l'ombra esterna: modalità di fusione normale, colore di #ffffff, opacità del 10%, angolo di 90 gradi e distanza di 2 pixel. Questa ombra esterna aggiunge ulteriore effetto.
Successivamente, aggiungi un gradiente: modalità di fusione normale, opacità del 6%, nero predefinito a bianco, lineare e un angolo di 90 gradi. Proprio come abbiamo fatto con la barra di navigazione, aggiungere un pattern di rumore con la modalità di fusione sovrapposizione e opacità del 2%.
Il risultato è un pulsante che ha una qualità intuitiva; senza nemmeno guardare gli altri stati dei pulsanti, un utilizzo può immediatamente riconoscere che qualunque testo in quel pulsante si riferisca a contenuti che sono attivi sulla pagina web.
Il testo è ugualmente importante su un pulsante; tieni presente che è necessario respirare in base alle dimensioni del pulsante scelto e alla quantità di contenuti che desideri visualizzare nel pulsante.
Crea un nuovo livello di testo denominato "Testo attivo". Imposta il colore su # f3f5f9, dimensione del carattere a 12px e famiglia di caratteri su Helvetica Neue.
Nota: Helvetica Neue è presente come font di sistema in molte versioni di OS X, ma non così per Windows. Potresti preferire usare Arial per questo kit di interfaccia utente, poiché è più ampiamente disponibile per l'utente finale.
Aggiungi un'ombra esterna: modalità di fusione come sovrapposizione, opacità del 35%, angolo di -90 gradi, distanza di 1 pixel e diffusione e dimensione di 0 px. Il testo sans-serif ora sembra essere inserito con il pulsante attivo. Infine, centra il testo rispetto al pulsante. Qui, quello che abbiamo è un testo piuttosto semplice all'interno del pulsante, ma usando un colore che è coerente con il tema e una semplice ombra esterna, migliora il contenuto e lo rende molto più facile da leggere.
Ora, creiamo un normale stile per gli elementi nella barra di navigazione che non sono attivi. È importante mantenere il tema dell'altro stato del pulsante, ma anche modificare lo stile in modo che sia opportunamente diverso dallo stato attivo.
Duplica il livello "Pulsante attivo Nav" come "Pulsante Nav Normale" e il livello di testo "Testo attivo" come "Testo normale". Per rendere il pulsante di stato normale un aspetto diverso, inverseremo l'aspetto e lo stile del pulsante in modo che appaia fuori dallo schermo. Questo non solo lo fa risaltare, ma consente all'utente di sapere che può essere selezionato. Inizia cambiando il colore di riempimento del pulsante su # c2dcff e riempire l'opacità del 5%.
Inoltre, cambia l'ombra esterna: modalità di fusione normale, colore come # 000000 opacità del 10%, angolo di 90 gradi, distanza di 2 px. Successivamente, modifica l'ombra interna: modalità di fusione normale, opacità del 25%, colore come #ffffff, distanza di 1px. Ora, aggiungi un bagliore interno: modalità di fusione dello schermo, opacità del 7%, colore come #ffffff e dimensione di 3px. Infine, modifica l'opacità del gradiente al 13% e rimuovi la sovrapposizione del motivo. Il risultato sarà un pulsante un po 'più leggero della barra di navigazione, con l'aiuto dell'ombra esterna e del tratto.
Differenziare il colore e lo stile del testo è un altro modo per rendere gli stati diversi. Cambia il colore del testo in # e8ecf3 e l'ombra esterna in modo che l'opacità sia del 50% e l'angolo sia di 90 gradi.
Invece di dare all'utente un noioso pulsante "Login" per fare clic su, perché non cambiare le cose e avere invece un'icona di accensione? Fare ciò aggiungerà qualcosa di creativo e unico al design, consentendo allo stesso tempo agli utenti di distinguere rapidamente il pulsante di accesso da qualsiasi altra cosa. Iniziare duplicando il livello 'Pulsante normale Nav' su 'Accesso pulsante Nav'. Regola la dimensione della forma in modo che sia quadrata arrotondata di 40px per 40px. Puoi farlo usando lo strumento di selezione diretta, selezionando i 4 punti sul lato destro del livello di forma e spostandoli a sinistra in modo che la larghezza cambi a 40px (maiuscole + <). Use this method rather than transforming the shape layer, as that distorts the rounded edges.
Per creare l'icona di accensione, crea una serie di forme su un livello denominato "Icona di alimentazione". Innanzitutto, crea un cerchio di 16px per 16px. Quindi, sottrai un cerchio di 12px per 12px al centro di quello più grande. Questo dovrebbe darti un cerchio di 16px per 16px che è 2px di spessore. Quindi, sottrarre un quadrato di 6 px di larghezza allineato al centro superiore del cerchio. Infine, aggiungi un rettangolo 2px largo, 8px alto centrato rispetto al quadrato sottratto e allineato 1px sopra il punto più alto del cerchio.
A questo punto, dovresti avere un livello di forma con l'icona di accensione. Cambia il colore della forma dell'icona di potere in #ffffff. Apri gli stili di livello e aggiungi un'ombra esterna: modalità di fusione sovrapposta, colore come # 000000, angolo di 90 gradi, distanza di 1px e diffusione e dimensione di 0px. Quindi aggiungi una sfumatura: modalità di fusione normale, opacità del 10% e sfumatura predefinita da nero a bianco.
Infine, allinea l'icona del pulsante di accesso al centro del pulsante di accesso e allinea il pulsante 40px a destra dell'area di disegno. Ecco come dovrebbe apparire la barra di navigazione finalizzata:
Anche se abbiamo usato lo stesso stile per questo pulsante come l'altro, la sostituzione del testo con un'icona ha migliorato il design generale.
Abbiamo stabilito un'ottima base per l'interfaccia utente della nostra applicazione Web, ma finora abbiamo progettato solo pulsanti e sfondi. Proviamo ad espandere l'interfaccia utente aggiungendo un'interfaccia di accesso a discesa. Questo ci darà la possibilità di creare alcuni elementi di forma e pulsanti in stile per sfondi diversi.
Per prima cosa rendiamo un nuovo rettangolo arrotondato (il raggio del bordo di 4 pixel come prima per coerenza) largo 300 px e 200 px di altezza, denominandolo "Login Dropdown BG". Successivamente, aggiungi un triangolo di 14 px di larghezza e 7 px di altezza al livello "Accedi Dropdown BG" e allinearlo a 13 px dall'angolo in alto a destra del rettangolo arrotondato. Ciò creerà un effetto tooltip nel menu a discesa e rappresenta una connessione tra il pulsante di accesso sopra di esso.
Quando cambiamo il colore del login scendi a #ffffff, non si distingue esattamente dallo sfondo della tela. Per farla regredire aggiungeremo un'ombra esterna: modalità di fusione normale, opacità del 25%, angolo di 90 gradi, distanza e diffusione di 0 px e dimensione di 4 px. Questo ci dà un'ombra sottile per la discesa, rendendola non solo più prominente, ma anche dando l'effetto che è sospesa sullo sfondo. Se lo stavi codificando, potrebbe essere una buona idea aggiungere una breve animazione da aggiungere all'effetto fluttuante. Allinea questa forma a cascata a 40px a destra della tela e 13px nella parte inferiore della barra di navigazione. Ecco cosa abbiamo finora:
Nota come l'allineamento del menu a discesa è a filo con il pulsante? La coerenza con la posizione e l'imbottitura rende il pulitore ed è più facile codificarlo all'interno di un contenitore.
Ora aggiungi un livello di testo con il testo "Accedi al tuo account o creane uno nuovo". Cambia la dimensione del font a 12px, la famiglia di font a Helvetica Neue (Regular) e il colore a # 92969b. Per rappresentare un collegamento, cambia il colore di "creane uno nuovo" in # 5c6f91.
Per quanto riguarda il livello "Accedi Dropdown BG", allinea il testo 14px da sinistra a 20px dall'alto. Non vogliamo far risaltare troppo il testo, in quanto vogliamo che gli utenti si concentrino sull'accesso effettivo, motivo per cui una dimensione del carattere relativamente piccola e colori più chiari è una buona idea.
È importante ricordare che il nostro campo di testo dovrebbe adattarsi al tema del design, ma anche risaltare abbastanza in modo che gli utenti possano riconoscerlo e riempirlo. Creare un nuovo rettangolo arrotondato (raggio di 3 pixel) largo 270 px e 30 px alto e chiamarlo "Campo di testo". Si noti che invece di un raggio di 4 pixel, si utilizza un raggio di 3 pixel per il campo di testo. Il motivo è dovuto al fatto che il campo di testo si trova all'interno del menu a discesa e sembrerebbe strano se la dimensione del raggio fosse la stessa.
Cambia il colore di riempimento del livello in # f9fafc e aggiungi un tratto di 1 pixel al di fuori della forma che è il colore # d3d8e1 (100% opacità). Per aggiungere un po 'di evidenziazione al campo di testo, aggiungi un'ombra interna: il colore di #ffffff, opacità del 100%, angolo di -90 gradi, distanza di 1px e spread e dimensione di 0px. Ho scelto di cambiare il colore del campo di testo in modo che si distingua e non si fonda con lo sfondo del menu a discesa.
Aggiungi un livello di testo con il testo "Nome utente" (dimensione carattere 12 px, Helvetica Neue Regular, colore di # 727d88) e allinearlo verticalmente centrato e spostato di 10 px a sinistra rispetto al campo di testo. Allinea il campo di testo 14px a sinistra dello sfondo a discesa e 18px dal fondo del livello di testo. Per creare un campo password, è sufficiente duplicare il livello del campo di testo e il livello testo e allinearlo a 12 pixel dal fondo del primo livello del campo di testo. Ecco cosa dovresti avere a questo punto:
Nota come le dimensioni e le posizioni di tutti i campi di testo e di testo appaiono naturali; non si vuole mantenere troppo o troppo poco spazio, ma piuttosto quanto basta perché il contenuto si adatti comodamente.
È ora di aggiungere un pulsante di accesso per il nostro menu a discesa, ma il pulsante che abbiamo creato per la navigazione non si adatta perfettamente al design. Questo perché ora abbiamo a che fare con uno sfondo chiaro e gli stili utilizzati nella barra di navigazione non si stagliano sullo sfondo bianco del menu a discesa. Il contrasto è molto importante per un'interfaccia accessibile.
Creeremo uno stile di pulsante secondario, che può essere utilizzato per il contenuto principale dell'app e che funziona bene anche su sfondi chiari. Utilizzeremo uno stile simile dai pulsanti di navigazione per modellare il pulsante di accesso, in modo che il nostro stile sia coerente.
Inizia creando una nuova forma rettangolare arrotondata (3px border radius) di 90 px di altezza, 35 px di larghezza e denominandola "Pulsante di accesso". Cambia il colore di riempimento in # a3b2cd e aggiungi un tratto di 1 pixel al di fuori del livello di forma che è il colore # 7b8da4 (100% opacità). Successivamente, aggiungi una sovrapposizione con gradiente del 25% di opacità, con i colori predefiniti dal nero al bianco. Infine, aggiungi un'ombra interna normale con il colore #ffffff, 45% di opacità, angolo di 90 gradi, distanza di 1 px e diffusione e dimensione di 0 px.
Per il contenuto testuale, crea un nuovo livello di testo (dimensione 12 px, Helvetica Neue Regular, colore #ffffff) con il testo "Login" e aggiungi un'ombra esterna: modalità di fusione sovrapposta, colore # 000000, distanza di 1px e diffusione e dimensione di 0px. Allinea il livello del testo al centro del pulsante di accesso.
Proprio come il design di Gumroad, vogliamo che i nostri utenti sappiano esattamente dove fare clic dopo aver inserito i dettagli di accesso.
Questo è tutto con il nostro design dell'interfaccia utente di base!
Dopo un paio di livelli e un paio di altri stili di livello, abbiamo completato il progetto per la base dell'interfaccia utente della nostra web app! Con ciò che abbiamo, puoi avere un'idea del tema, dello stile, dei colori e degli elementi dell'interfaccia utente.
Con tutto il lavoro di base che abbiamo fatto, è relativamente semplice continuare a progettare più elementi. Abbiamo definito lo schema dei colori e lo stile del nostro design, quindi tutto ciò che serve è creare più forme e modificare gli stili di colori / livelli. Essenzialmente, una volta che hai elementi di progettazione fondamentali, puoi creare moduli significativi dalla tua applicazione.
La parte migliore della creazione di un'interfaccia utente di "esempio" è che non richiede tanto sforzo quanto se si dovesse creare un set completo dell'interfaccia utente. Diciamo che non sei contento della direzione in cui sta andando l'interfaccia utente: è meglio allontanarsi da una piccola raccolta di elementi piuttosto che buttare via ore di lavoro. Questo approccio al flusso di lavoro ti consente anche di esplorare una serie di diversi temi dell'interfaccia utente e scegliere quello perfetto per la tua app.
Accentsconagua