Crea la tua libreria visiva: suggerimenti e sfide per la progettazione

Una delle grandi differenze tra un designer esperto e uno junior è la libreria visiva che costruisce.

Cos'è una libreria visiva?

Questa è la cosa nella tua testa quando si tratta di elementi dell'interfaccia utente e pratiche UX. Cosa hai costruito e hai una comprensione di come funziona. Più ricca è la tua libreria, più velocemente puoi trovare soluzioni sul posto.

Facciamo un esempio: come designer, hai il compito di creare un nuovo sito web.

Quale sito web? Potresti chiedere. Bene, questi sono tutti i requisiti che hai. Una sfida da un collega di lavoro. Oh, inoltre, hai un'ora per farlo. Questa è una sfida che abbiamo fatto a DevriX ed ecco uno dei risultati dopo 3600 secondi:

Design di Alex Dimitrov

Non c'era molto tempo per considerare l'argomento, quindi era proprio nell'intestazione. Quali componenti ha un'intestazione?

• Un titolo di sicuro
• Navigazione
• Barra di ricerca
• Alcuni collegamenti sociali
• Alcuni pulsanti di chiamata all'azione, principalmente per registrarsi e / o creare un account
• Qualche navigazione per renderlo interessante

Da dove viene tutto questo? Prima era una pagina bianca. Non c'era nemmeno un argomento, tanto per cominciare. Tutto è accaduto grazie alla libreria visiva che era stata creata nella mente del designer durante gli anni di costruzione di siti Web, applicazioni e tutto ciò che li circonda.

In quanti modi puoi progettare un'intestazione? Centinaia di modi. Ci sono così tanti vari tipi di elementi, topografie, colori, sovrapposizioni, pulsanti, elementi e molto altro ancora. È un esperimento interessante da fare.

Come costruire una libreria visiva

Anche se la risposta più semplice è "fare più progetti", non è molto soddisfacente semplicemente perché c'è molto di più. Ciò che è più importante è la diversità. Costruire design diversi. Un modo diretto in cui puoi avvicinarti a questo sarebbe riprogettare i grandi siti.

Ecco alcuni esempi:

Facebook:

Fonte immagine: Dribbble

Gmail:

Fonte immagine: Dribbble

Twitter:

Fonte immagine: Dribbble

Ci sono così tanti esempi. Più complesso è il design, più velocemente progredirai. Ma come funziona esattamente?

Diamo un'occhiata a un elenco come esempio. Un elenco può avere un'intestazione che lo nomina, può avere icone che possono essere colorate, simili nel design o differenti nel design. Può anche avere un titolo e un sottotitolo più grandi, magari un'etichetta con un numero. Quindi puoi aggiungere stati al passaggio del mouse, elementi che possono essere selezionati o disabilitati e così via. Con tutte queste variazioni, puoi creare un'ampia varietà di design di elenchi.

Fonte immagine: Dribbble

Essere in grado di creare così tante configurazioni e layout significa avere una buona libreria visiva. Sapere che puoi farlo in quel modo. È come avere qualcuno accanto a te che dice "Disegnami una scatola", poi "Aggiungi un titolo" e lo fai senza pensare. Tutte queste decisioni vengono prese perché l'hai già fatto. In effetti, segue anche i fondamenti del design, ma non puoi raggiungere i tuoi appunti o libri tutto il tempo. È come addestrare un'intelligenza artificiale: è necessario costruire modelli utilizzando un "ordine di elementi riuscito".

Tutti gli artisti visivi devono costruire biblioteche

Un chiaro esempio di ciò è Kim Jung Gi, un genio che può realizzare opere d'arte realistiche usando qualsiasi prospettiva.

Illustrazione di Kim Jung Gi

In un'intervista racconta come per tutta la sua vita abbia guardato tutti gli oggetti intorno a lui, cercando di capirne la forma e disegnarli da una prospettiva diversa. Con questa abilità, ora è in grado di disegnare tutto ciò che vedi nell'immagine sopra semplicemente partendo da un pezzo di carta bianco senza riferimenti.

O meglio detto - senza riferimenti che possa raggiungere perché i suoi riferimenti sono nella sua mente - la sua libreria visiva. Questo è un esempio del lavoro di un maestro, che è un grande obiettivo per lottare per un designer.

Allo stesso modo in cui i web designer apprendono pulsanti, elenchi, carte, campi di input, popup e molto altro ancora, gli artisti digitali apprendono materiali, illuminazione, sagome, come funzionano i muscoli, come la gravità ti tira giù e mette a dura prova il tuo corpo e così via.

Grafica di Suzanne Helmigh

Questo è un esempio di come gli artisti digitali apprendono vari materiali cercando di applicarli a una sfera. Magma, legno, pelliccia, vino, uova, formaggio, tutto è valido. Impararlo, farlo usando le mani, lo imprime a poco a poco nel tuo cervello. E quando arriva il momento di applicare quel materiale a un vero dipinto, ora hai una migliore comprensione di come funziona davvero e di come dovrebbe apparire realisticamente il risultato finale.

Ecco un esempio in cui pelle, cuoio, metallo e capelli vengono utilizzati per produrre un prodotto finale dall'aspetto molto bello. La mancanza di una comprensione fondamentale di questi materiali potrebbe rendere il metallo simile alla plastica, alla carta simile alla pelle e così via.

Fonte immagine: Artstation

Sfide dei componenti del web design

Ora, diamo un'occhiata di nuovo ad alcuni componenti comuni che utilizzerai spesso nel web design e ad alcune pratiche da fare:

1 - Pulsanti

Uno dei componenti più fondamentali di un sito web. I pulsanti sono disponibili in tutte le forme e dimensioni. È possibile impostare sfumature, modificare i colori, aggiungere un'ombreggiatura del testo, aggiungere bordi (più di uno), aggiungere uno stile lucido, contornarli, modificarne la forma (quadrato, angoli arrotondati, cerchio), alcuni sono dotati di icone, altri hanno icone separate area su cui è possibile fare clic.

Fonte immagine: Dribbble

Attività : progettare un pulsante in 20 stili diversi. Maggiore è la differenza tra loro, meglio è. Per ognuno, continua a seguire le migliori pratiche di progettazione in termini di contrasto, equilibrio e così via.

2 - Carte

Le carte o le scatole sono un altro componente super comune. Può contenere qualsiasi tipo di contenuto, anche se alcuni elementi comuni potrebbero essere un'intestazione / piè di pagina + contenuto principale.

Fonte immagine: Dribbble

Compito : utilizzando il contenuto, formare le carte sopra, progettare 10 varianti, idealmente il più diverse possibile. Cambia stile, aggiungi nuovi elementi, ruotali, usa sfumature, ombre, icone e illustrazioni. Prova a scatenarti con esso.

3 - Commenti

Quasi tutti i blog hanno una qualche forma di sistema di commenti. Ma hai considerato che il componente commento potrebbe non contenere un commento effettivo ma più simile a un cambiamento di "stato"?

Fonte immagine: Dribbble

Compito: l'esempio sopra mostra proprio questo. Ora, prova a inventare qualsiasi cosa relativa a un componente di commento: commenti degli utenti, stati di aggiornamento delle attività (che si trovano nell'area dei commenti), commenti simili a chat, qualsiasi cosa. Qualunque cosa tra 7-10 variazioni sarebbe un buon numero. Di nuovo, cerca di mantenerli tutti diversi. Cerca di più, trova idee, naviga nei siti.

L'obiettivo di questi esercizi è trovare modi per fare elementi comuni in modi nuovi che non conoscevi prima.

4 - Cursori

I cursori sono uno dei componenti che molti sviluppatori front-end odiano a causa dell'enorme quantità di problemi che creano e del pesante JavaScript che potrebbe essere in esecuzione in background. Ma questo non significa che non avrai bisogno di crearne uno.

Fonte immagine: Dribbble

Attività: esplorare il Web e vari progetti per saperne di più sui diversi layout e approcci. Forse dai un'occhiata alle librerie JS dove fanno diapositive per vedere cosa hanno. Da lì, progetta 10-15 diversi design per i cursori. Ancora una volta, cerca di rendere ogni design il più diverso possibile dal precedente, non utilizzare solo lievi miglioramenti.

5 - Moduli di input

I moduli di input sono un'altra parte fondamentale di quasi tutti i siti Web. Interessante con loro è che ricevono le informazioni invece dell'output.

Fonte immagine: Dribbble

Compito: il tuo compito qui è trovare il tipo più strano di informazioni di cui qualcuno potrebbe aver bisogno su un sito web. Carica un PDF o PSD (scegline uno), i dati della carta di credito, aggiungi una ricetta per i biscotti, calcola i rapporti di miscelazione delle vernici, crea un configuratore di concessionarie auto. Qualunque cosa ti venga in mente, più unica è, meglio è. Ancora una volta continua a navigare nei siti Web per vedere soluzioni reali. Progetta almeno 10 diverse forme uniche con design unici.

Sommario

Costruire una libreria di progetti come designer è uno dei principali trampolini di lancio per migliorare il flusso di lavoro, produrre rapidamente progetti, risolvere problemi per i tuoi clienti e trovare modi unici e geniali per migliorare l'esperienza dell'utente. Quando inizi a navigare e ad osservare da vicino ogni elemento sul Web, inizi a considerare le azioni dell'utente, ciò che vede e come potrebbe essere migliorato.

Usare le attività di cui sopra come compiti a casa ti aiuterà a riempire il tuo portafoglio. Non limitarti alle sole 5 attività menzionate, vai là fuori, esplora i siti web, riprogetti, studiali e continua a sviluppare i tuoi sensi di progettazione e costruire la tua libreria visiva!