Începerea unui design Web utilizând o imagine ca bază

În acest scurt tutorial vă voi arăta una dintre comenzile mele rapide preferate pentru a începe un design web. Aceasta este o metodă pe care am folosit-o foarte mult în designul independent și vă va ajuta într-adevăr să treceți peste obstacolul inițial în care trebuie să stabiliți ce va fi schema de culori și "simți" în general.

Această tehnică este simplă, dar nu este neapărat evidentă până când nu ați trecut prin acest proces de câteva ori. Totul începe prin selectarea imaginii perfecte. Cu ce ​​a spus, să ne aruncăm în apă!

Urmăriți ecranul

Selectarea unei imagini

Așa cum am menționat, totul începe cu o imagine. Ceva care este conectat la site-ul pe care îl proiectați. Folosesc adesea Unsplash deoarece este minunat, dar volumul de fotografii inspirationale disponibile acum pe Envato Elements este, de asemenea, excelent. 

Alegeți ceva relevant, dar ceva care conține și culori pe care le puteți imagina, se va potrivi bine proiectului dvs. Dacă proiectați ceva pentru o afacere stabilită, este posibil să trebuiască să rămâneți în limitele cerințelor de branding, caz în care întregul proces va funcționa la fel de bine folosind un logo ca punct de plecare.

Iată imaginea de la care încep cu Kyler Trautner (este frumos și ne oferă o gamă de culori echilibrate):

Puteți vedea negrul albastru de pe asfalt, plus ce va fi o nuanță portocalie din tundră dacă vom lovi saturația, plus ce pare a fi gri, dar de fapt este o nuanță de albastru de la norul scăzut.

Importarea unei imagini în Adobe XD

Am imaginea descărcată și salvată, așa că acum voi deschide Adobe XD (care se întâmplă să fie instrumentul meu de alegere în acest caz, puteți folosi ceva care vă este mai familiar dacă preferați). 

Mergi la Fișier> Import și selectați imaginea pentru ao aduce pe pânză. Redimensionați-o după cum doriți.

Alegerea culorilor

Prin plasarea obiectelor UI pe pânză, putem să luăm selectorul de culori și să umplem fiecare cu nuanțe din imaginea noastră. 

De exemplu:

• Plasați un dreptunghi de corp pentru a servi ca fundal, apoi dați-i o nuanță "medie" de la asfalt.
• Creați un alt dreptunghi pentru elementul principal de împachetare, apoi dați-i o nuanță mai închisă de la drum.
• Adăugați o umbră la același element de împachetare și dați-i o nuanță de culoare albastru închis / gri.
• O culoare roșie a cerului se va potrivi cu un element de pagină de sub imagine.
• Același lucru se aplică textului, dintre care unele vor trebui să fie întunecate pe lumină și invers.

Așa am făcut până acum:

Contrastul elementelor UI

Să folosim acum câteva nuanțe de portocal contrastante pentru unele butoane. Puneți niște dreptunghiuri de buton pe pagină și alegeți o nuanță de culoare bej / portocalie de la scrumiera de lângă drum.

Efectul inițial este aproape "plictisitor", deci folosiți Completati instrument de selecție trageți selectorul în sus și spre dreapta pentru a mări saturația.

Încearcă același lucru și cu o culoare albastră contrastantă, pentru un buton secundar.

Concluzie

De la o singură imagine potrivită, puteți să lansați o schemă de culori întregi și baza unui design web complet. 

Exemplul pe care l-ați urmărit este preluat de la un curs care urmează, intitulat "Design prietenos în funcție de cod cu Adobe XD", astfel încât să aveți grijă de acest lucru!

Dacă sunteți interesat de teoria culorii, vă recomandăm să consultați și alte resurse de învățare: