Construiți-vă biblioteca vizuală: sfaturi și provocări de proiectare

Publicat: 2020-12-17

Una dintre diferențele mari dintre un designer experimentat și un junior este biblioteca vizuală pe care o construiește.

Ce este o bibliotecă vizuală?

Acesta este lucrul din capul tău când vine vorba de elemente de interfață și practici UX. Ceea ce ați construit și înțelegeți cum funcționează. Cu cât biblioteca dvs. este mai bogată, cu atât puteți veni mai repede cu soluții pe loc.

Să dăm un exemplu: în calitate de designer, aveți sarcina de a construi un nou site web.

Ce site web? S-ar putea să întrebați. Ei bine, asta sunt toate cerințele pe care le aveți. O provocare a unui coleg de serviciu. Oh, de asemenea, aveți o oră să o faceți. Aceasta este o provocare pe care am făcut-o la DevriX și iată unul dintre rezultate după 3600 de secunde:

Proiectat de Alex Dimitrov

Nu a fost prea mult timp pentru a lua în considerare subiectul, așa că a fost chiar în antet. Ce componente are un antet?

  • Un titlu sigur
  • Navigare
  • Bara de căutare
  • Câteva legături sociale
  • Unele butoane de apel la acțiune, în principal pentru a vă înregistra și / sau a crea un cont
  • Câteva navigări pentru a-l face interesant

De unde au venit toate acestea? Era o pagină necompletată. Nu a existat nici măcar un subiect, pentru început. Totul s-a întâmplat datorită bibliotecii vizuale care a fost creată în mintea designerului de-a lungul anilor de construire a site-urilor web, a aplicațiilor și a tot ceea ce le înconjura.

Câte moduri puteți proiecta un antet? Sute de moduri. Există atât de multe tipuri de elemente, topografii, culori, suprapuneri, butoane, elemente și multe altele. Este un experiment interesant de făcut.

Cum să construiți o bibliotecă vizuală

În timp ce răspunsul cel mai simplu este „să faci mai multe modele”, nu este unul foarte satisfăcător, pur și simplu pentru că există mult mai mult. Ceea ce este mai important este diversitatea. Construirea diferitelor modele. Un mod direct prin care puteți aborda acest lucru ar fi să faceți reproiectări de site-uri mari.

Iată câteva exemple:

Facebook:

Sursa imaginii: Dribbble

Gmail:

Sursa imaginii: Dribbble

Stare de nervozitate:

Sursa imaginii: Dribbble

Există doar atâtea exemple. Cu cât designul este mai complex, cu atât veți progresa mai repede. Dar, cum funcționează exact?

Să aruncăm o privire la o listă ca exemplu. O listă poate avea un antet care o numește, poate avea pictograme care pot fi colorate, similare în design sau diferite în design. Poate avea, de asemenea, un titlu și un subtitlu mai mare, poate o etichetă cu un număr. Apoi, puteți adăuga stări de cursor, elemente care pot fi selectate sau dezactivate etc. Cu toate aceste variante, puteți face o mare varietate de modele de liste.

Sursa imaginii: Dribbble

Pentru a putea veni cu atâtea configurații și machete este să ai o bibliotecă vizuală bună. Să știi că poți face acest lucru. Este ca și cum ai avea pe cineva lângă tine care să spună „Desenează-mi o cutie”, apoi „Adaugă un titlu” și o faci fără să te gândești. Toate aceste decizii sunt luate pentru că ați făcut-o înainte. Într-adevăr, urmează și fundamentele de proiectare, dar nu puteți ajunge la note sau cărți tot timpul. Este ca și cum ai antrena un AI - trebuie să construiești tipare folosind o „ordine de elemente reușită”.

Toți artiștii vizuali trebuie să construiască biblioteci

Un exemplu puternic în acest sens este Kim Jung Gi - un geniu care poate crea opere de artă asemănătoare vieții folosind orice perspectivă.

Artă de Kim Jung Gi

Într-un interviu, el spune că de-a lungul întregii sale vieți a privit toate obiectele din jurul său, încercând să le înțeleagă forma și să le atragă dintr-o altă perspectivă. Cu această abilitate, el este acum capabil să deseneze tot ceea ce vedeți în imaginea de mai sus, pur și simplu pornind de la o bucată de hârtie albă, fără nicio referință.

Sau mai bine spus - fără referințe la care poate ajunge pentru că referințele sale sunt în mintea lui - biblioteca sa vizuală. Acesta este un exemplu de muncă a unui maestru, care este un obiectiv minunat de a te strădui pentru un designer.

În același mod în care designerii web învață despre butoane, liste, carduri, câmpuri de introducere, ferestre pop-up și multe altele, artiștii digitali învață despre materiale, iluminat, siluete, modul în care funcționează mușchii, modul în care gravitația te trage în jos și pune presiune asupra ta corp și așa mai departe.

Grafic de Suzanne Helmigh

Acesta este un exemplu al modului în care artiștii digitali învață despre diverse materiale încercând să le aplice pe o sferă. Magma, lemn, blană, vin, ou, brânză, orice este valabil. Aflând despre asta, făcându-l folosind mâinile, îl imprimă încetul cu încetul în creier. Și când vine momentul să aplici acel material pe o pictură reală, acum ai o mai bună înțelegere a modului în care funcționează cu adevărat și a modului în care ar trebui să arate în mod realist rezultatul final.

Iată un exemplu în care pielea, pielea, metalul și părul sunt toate utilizate pentru a produce un produs final foarte frumos. Lipsa înțelegerii fundamentale a acestor materiale ar putea face ca metalul să arate ca plasticul, hârtia asemănătoare pielii și așa mai departe.

Sursa imaginii: Artstation

Componente de web design Provocări

Acum, să aruncăm o privire din nou asupra unor componente comune pe care le veți folosi adesea în designul web și câteva practici de făcut:

1 - Butoane

Una dintre cele mai fundamentale componente de pe un site web. Butoanele sunt de toate formele și dimensiunile. Puteți seta degradări, puteți schimba culorile, adăugați umbre text, adăugați margini (mai multe), puteți adăuga stil luciu, le puteți contura, le puteți schimba forma (pătrat, colțuri rotunjite, cerc), unele vin cu pictograme, altele au pictograme separate în zonă sub-clicabilă.

Sursa imaginii: Dribbble

Sarcină : Proiectați un buton în 20 de stiluri diferite. Cu cât diferența dintre ele este mai mare, cu atât mai bine. Pentru fiecare, continuați să urmați cele mai bune practici de proiectare în ceea ce privește contrastul, echilibrul și așa mai departe.

2 - Cărți

Cardurile sau cutiile sunt o altă componentă foarte comună. Poate conține orice tip de conținut, deși unele elemente comune ar putea fi un antet / subsol + conținut principal.

Sursa imaginii: Dribbble

Sarcină : folosind conținutul, formează cărțile de mai sus, proiectează 10 variante, în mod ideal cât mai diferite. Schimbați stilul, adăugați elemente noi, rotiți-le, utilizați gradiente, umbre, pictograme și ilustrații. Încercați să vă înnebuniți cu el.

3 - Comentarii

Aproape toate blogurile au o formă de sistem de comentare. Dar ați considerat că este posibil ca componenta de comentariu să nu conțină un comentariu real, ci mai degrabă o schimbare de „stare”?

Sursa imaginii: Dribbble

Sarcină: Exemplul de mai sus prezintă doar asta. Acum, încercați să veniți cu orice este legat de o componentă de comentariu - comentarii de la utilizatori, stări de actualizare a sarcinilor (care se află în zona de comentarii), comentarii de tip chat, orice altceva. Orice între 7-10 variante ar fi un număr bun. Din nou - încercați să le păstrați pe toate diferite. Caută mai multe, găsește idei, răsfoiește site-uri.

Scopul acestor exerciții este de a găsi modalități de a face elemente comune în moduri noi de care nu știați înainte.

4 - Glisoare

Sliderurile sunt una dintre componentele pe care mulți dezvoltatori front-end le urăsc din cauza cantității uriașe de probleme pe care le creează, precum și a JavaScript-ului greu care ar putea rula în fundal. Dar asta nu înseamnă că nu va trebui să faceți una.

Sursa imaginii: Dribbble

Sarcină: răsfoiți pe web și diverse modele pentru a afla mai multe despre diferitele aspecte și abordări. Poate aruncați o privire la bibliotecile JS unde fac diapozitive pentru a vedea ce au. De acolo, proiectați 10-15 modele diferite pentru glisoare. Din nou - încercați să faceți fiecare proiect cât mai diferit de cel anterior, nu folosiți doar ușoare îmbunătățiri.

5 - Formulare de intrare

Formularele de introducere sunt o altă parte esențială a aproape oricărui site web. Interesant pentru ei este că primesc informații în loc de o ieșire.

Sursa imaginii: Dribbble

Sarcină: Sarcina dvs. aici este să veniți cu cel mai ciudat tip de informații de care ar putea avea nevoie cineva pe un site web. Încărcați un fișier PDF sau PSD (alegeți unul), informații despre cardul de credit, adăugați o rețetă pentru cookie-uri, calculați rapoartele de amestecare a vopselei, creați un configurator de reprezentanță auto. Orice îți vine în minte, cu cât este mai unic, cu atât mai bine. Continuați să răsfoiți site-uri web pentru a vedea soluții reale. Proiectați cel puțin 10 forme unice diferite cu modele unice.

rezumat

Construirea unei biblioteci de design în calitate de designer este una dintre pietrele majore pentru îmbunătățirea fluxului de lucru, producerea de proiecte rapid, rezolvarea problemelor pentru clienții dvs. și venirea cu modalități unice și geniale de a îmbunătăți experiența utilizatorului. Când începeți să navigați și să priviți cu atenție fiecare element de pe web, începeți să luați în considerare acțiunile utilizatorului, ce vede și cum ar putea fi îmbunătățit acest lucru.

Folosirea sarcinilor de mai sus ca teme pentru a vă umple portofoliul. Nu vă limitați doar la cele 5 sarcini menționate, mergeți acolo, răsfoiți site-uri web, faceți reproiectări, studiați-le și continuați să vă dezvoltați simțurile de design și să vă construiți propria bibliotecă vizuală!