Kickstarting di un Web design utilizzando un'immagine come base

In questo breve tutorial ti mostrerò una delle scorciatoie preferite per avviare un web design. Questo è un metodo che ho usato molto nel design freelance, e ti aiuterà davvero a superare quell'ostacolo iniziale in cui dovrai capire quale sarà la combinazione di colori e il "feel" generale.

Questa tecnica è semplice, ma non è necessariamente ovvia fino a quando non si è passati attraverso il processo un paio di volte. Tutto inizia selezionando l'immagine perfetta. Detto questo, tuffiamoci dentro!

Guarda lo Screencast

Selezione di un'immagine

Come detto, tutto inizia con un'immagine. Qualcosa che è collegato al sito web che stai progettando. Spesso userò Unsplash perché è fantastico, ma anche il volume di foto di ispirazione ora disponibili su Envato Elements è eccellente. 

Scegli qualcosa di rilevante, ma qualcosa che contiene anche colori che puoi immaginare andranno bene per il tuo progetto. Se stai progettando qualcosa per un'attività consolidata, potrebbe essere necessario rispettare i requisiti di branding, nel qual caso l'intero processo funzionerà altrettanto bene utilizzando un logo come punto di partenza.

Ecco l'immagine con cui comincerò, di Kyler Trautner (è bellissimo e ci offre una gamma di colori bilanciati):

Puoi vedere il nero bluastro dall'asfalto, più quello che sarà una sfumatura arancione dalla tundra se alzeremo la saturazione, oltre a ciò che sembra grigio, ma in realtà è una sfumatura di blu dalla nuvola bassa.

Importare un'immagine in Adobe XD

Ho scaricato e salvato l'immagine, quindi ora aprirò Adobe XD (che in questo caso è il mio strumento preferito in questo caso, puoi usare qualcosa che ti è più familiare se preferisci). 

Vai a File> Importa e seleziona l'immagine per portarla sulla tua tela. Ridimensiona come meglio credi.

Scegliere i colori

Posizionando oggetti UI sulla tela, possiamo quindi prendere il selettore dei colori e riempire ognuno con le sfumature della nostra immagine. 

Per esempio:

• Posiziona un rettangolo del corpo per fungere da sfondo, quindi dargli una sfumatura "media" dall'asfalto.
• Crea un altro rettangolo per l'elemento principale del wrapper, quindi dai una tonalità più scura alla strada.
• Aggiungi un'ombra allo stesso elemento wrapper e assegnagli un'ombreggiatura blu / grigio adatta in modo corrispondente.
• Un colore del cielo chiaro si adatta ad un elemento della pagina al di sotto dell'immagine.
• Lo stesso vale per il testo, alcuni dei quali dovranno essere scuri alla luce e viceversa.

Questo è quello che ho finora:

Elementi dell'interfaccia utente contrastanti

Ora usiamo alcuni colori arancioni contrastanti per alcuni pulsanti. Posiziona dei rettangoli di pulsanti sulla pagina e scegli una tonalità beige / arancione dalla macchia accanto alla strada.

L'effetto iniziale è quasi "noioso", quindi usando il Riempire strumento di selezione trascina il selettore verso l'alto e verso destra per aumentare la saturazione.

Prova lo stesso con un colore blu a contrasto, per un pulsante secondario.

Conclusione

Da una sola immagine adatta puoi dare il via a uno schema di colori completo e alla base di un web design completo. 

L'esempio che hai seguito è tratto da un prossimo corso intitolato "Code-Friendly Design With Adobe XD" quindi tieni d'occhio!

Se sei interessato alla teoria dei colori potresti anche voler controllare queste altre risorse di apprendimento: