În Tutoriale

Resurse gratuite pentru designul interfețelor + tutorial

cover_interior_articol

Sunt multe aspecte de acoperit în timpul creării unui website şi fiecare dintre ele trebuie tratat atât individual, cât şi în raport cu celelalte.

Acest material face parte din: Tema lunii iunie

În articolul de astăzi, o să îţi prezint o serie de resurse gratuite, grupate pe categorii, care să te ajute în procesul de creare a unor interfețe grafice cât mai eficiente, mai ales dacă te afli la începutul activității tale profesionale.

După care, trecem la treabă şi vedem aplicat cum poţi realiza o astfel de interfaţă.

Introducere

Crearea unui website necesită câteva aptitudini, cât şi un echilibru şi o bună înţelegere a unor principii precum: tipografie, teoria culorilor, amplasare, proporţii etc.

La fel ca orice alte lucruri, aceste aptitudini pot fi învăţate şi perfecţionate cu răbdare şi multă practică.

Fie că te consideri o persoană creativă sau nu, în acest tutorial o să încerc să-ţi descriu paşii pe care trebuie să îi urmezi pentru o introducere potrivită în lumea web designului, iar la final poţi să decizi pentru tine dacă acesta este genul de muncă pe care vrei să o atragi.

Mediul de lucru

mediu_lucru
Există o gamă variată de opţiuni potrivite pentru lucrul cu resurse vizuale: Adobe Photoshop, Sketch, Affinity Photo, GIMP, Paint.Net, Corel Pro etc.

Fiecare tehnologie are avantajele ei precum şi un timp diferit de adaptare la mediul de lucru.

Dintre toate acestea, campionul nedisputat şi standardul în industrie rămâne Adobe Photoshop, un editor bun la toate, care a devenit de-a lungul timpului sinonim cu procesul de creare şi editare imagini.

 

Tipografie

 

tipografie

Internetul este în mare parte informaţie text.

Cuvintele trebuie să arate impecabil când le integrăm în site-ul pe care îl construim.

Tipografia presupune alegerea tipului de font potrivit, precum şi mărimea acestuia în funcţie de context.

Este necesară stabilirea unei ierarhii vizuale pentru ca informaţia să fie uşor de urmărit şi înţeles de către vizitatori.

Când încep un proiect nou, aleg să folosesc Google Fonts, deoarece fonturile puse la dispoziţie sunt destul de plăcute şi uşor de integrat, întrucât sunt susţinute de majoritatea browserelor.

Pentru consistenţă, este recomandat să folosim 2 sau maxim 3 tipuri de fonturi.

Resurse pentru tipografie:

Google Fonts
Top 5 Recommended Google Font Combinations
8 Amazing Google Font Combinations
The 41 greatest free web fonts

Teoria culorilor

teoria_culori

Teoria culorii se referă la combinațiile de culori și la emoțiile pe care le provoacă.

Alegerea culorilor presupune crearea unei armonii vizuale care are rolul să ghideze atenţia utilizatorului prin completare sau contrast.

Atunci când dorim să punem în evidenţă anumite elemente ale paginii, putem să folosim culori care se află la poluri opuse ale spectrului.

Acestea au un impact direct asupra experienţei utilizatorului.

Dacă alegerea unei anumite culori pentru text este prea apropiată ca nuanţă de culoarea aleasă pentru fundal, informaţia o să fie greu de citit.

Trebuie luat în considerare şi faptul că monitoarele interpretează diferit culorile.

Din acest motiv este util să creăm o ierarhie echilibrată bazată pe culori.

La fel ca în cazul fonturilor, încercaţi să păstraţi paleta cu 2, 3 culori principale.

Resurse utile:

Adobe Color
Paletton

Amplasare şi spaţiere

amplasare

Există sisteme standard pentru dispunerea informaţiilor în cărţi, reviste, ziare.

Acest lucru s-a transmis şi pe web unde există sisteme pentru afişarea datelor, bazate pe rânduri şi coloane.

Aceste sisteme au fost gândite pentru o lume modernă, unde este foarte posibil ca un site să fie vizualizat pe o varietate de tipuri de ecrane.

Cel mai popular sistem este cel de 12 coloane de la Twitter Bootstrap, în care determinăm câte coloane poate să ocupe la un moment dat un element din cele 12 coloane.

Dacă vrem să ocupe 1 / 3 din spaţiu o să-i atribuim un spaţiu de 4 coloane din 12, pentru că 1 / 3 = 4 / 12.

Acesta poartă numele şi de responsive web design şi presupune livrarea unei experienţe consistente atât pe dispozitive mobile, tablete cât şi laptop-uri şi monitoare desktop.

Imagini

imagini

Este util să folosim imagini sugestive care pot ajuta la comunicarea informaţiei.

Imaginile pot să întărească ideile transmise prin text, să construiască legături cu audienţa sau să creeze interes pentru elementele cheie ale website-ului.

Prea multe imagini sau imagini care nu îşi au locul o să distragă atenţia şi nu vor adăuga valoare.

Este important de determinat cum o să ajute plasarea unei imagini într-un anumit context.

De exemplu, dacă vrei ca cineva să-ţi citească un articol de blog, ar fi util să adăugăm şi o imagine specifică pentru a genera interes pentru acel conţinut.


Resurse utile (
pe care le puteţi folosi în scop comercial):

Pexels
StockSnap
Unsplash

 

Iconiţe

iconite

Sunt nelipsite din orice proiect şi vin în completarea elementelor, pentru a face o interfaţă grafică mult mai simplu de utilizat.

La fel ca în cazul imaginilor, acestea trebuie alese cu grijă în funcţie de audienţă şi de context.

Resurse utile:

FlatIcon
IconFinder
IconMonstr

 

Până acum avem o imagine de ansamblu, fiecare dintre aceste secţiuni merita un studiu în sine, dar lucrurile acestea vin şi din experienţă.

Este util să cunoşti ce se potriveşte pentru tipul de proiect la care lucrezi şi să ştii unde să cauţi pentru a obţine rezultatele dorite.

Sa înveţi ceva doar din teorie poate să pară dificil.

Există o şansă mai mare să înveţi ceva când vezi exemple concrete, de aceea astăzi o să poţi vedea cum se construieşte un site de prezentare: de la plan la rezultat.

La finalul acestui tutorial o să facem disponibile resursele pentru a le descărca şi utiliza aşa cum îţi doreşti.

Să începem lucrul

În continuare vă prezint ce o să creăm astăzi:

webpage

 

De obicei, un client ne oferă (după o serie de întrebări) o listă cu secţiunile cheie care trebuie să apară pe site.

Pentru exerciţiul de astăzi avem libertate totală, de aceea, am ales să includem câteva secţiuni recurente care apar în site-urile de prezentare:

  • Antet (Header)
  • Imagine banner
  • Secţiune Despre
  • Secţiune Servicii
  • Secţiune Clienţi
  • Secţiune Contact
  • Secţiune Hartă
  • Subsol (Footer)

Plan

Odată ce cunoaştem cerinţele, începem prin a schiţa imaginea de ansamblu într-o formă de bază, precum şi câteva elemente din secţiunile pe care urmează să le creăm.

Puteţi să folosiţi creion şi hârtie pentru a produce rapid câteva concepte.

sketch

Design de interfeţe

Odată ce avem stabilită o strategie, putem să deschidem Adobe Photoshop şi să începem să experimentăm.

File -> New

tutorial_1

O sa începem prin crearea antetului. Acesta este dispus pe orizontală (în general) sau pe verticală şi conţine logo-ul şi un meniu de navigare.

tutorial_2

Am ales familia de fonturi Open Sans şi Montserrat pentru acest website şi #3764fe culoarea principală.

Pentru imaginea de banner, am descărcat o imagine de pe un site menţionat la categoria de imagini şi pentru a obţine acel efect, am adăugat un layer nou (culoarea principală) deasupra imaginii şi am redus opacitatea acestui layer la 90%.

tutorial_3

După, am adăugat informaţii relevante pentru a stabili o ierarhie vizuală.

tutorial_4

Pentru a centra textul, folosim unealta „Horizontal Type Tool” şi selectăm:

tutorial_5

Pentru a crea un buton rotund, folosim unealta „Rounded Rectangle Tool” şi setăm o valoare de „rotunjire” mai mare sau egală cu 50:

tutorial_6

Urmează secţiunea „Despre noi”, care este destul de simplu construită.

În tot acest timp folosesc un sistem de 12 coloane de la Bootstrap (menţionat mai sus) pentru a păstra stilul şi proporţiile consistente pe parcursul procesului de creaţie.

tutorial_7

Pentru secţiunea „Servicii”, am descărcat 3 iconiţe sugestive şi mi-am dorit ca acestea să aibă aceeaşi mărime în pagina noastră.

Am folosit opţiunea de ghid (guide) din Photoshop. Meniu View -> New Guide.

Aceasta opţiune o să producă o linie orizontală sau verticală ce poate fi mutată pe planşa noastră şi este folosită ca să ne ajute cu poziţionarea şi proporţiile elementelor.

tutorial_8 tutorial_9

Următoarea secţiune este „Clienţi” şi dacă aţi citit până aici, o să împart cu voi un secret din web design. Cred că este un moment potrivit.

De fiecare dată când vedeţi un rezultat superb este foarte probabil să gândiţi că acel designer este un geniu.

Doar se aşază la birou şi transformă în Photoshop viziunea lui perfectă.

Nu este magie, toţi designerii ştiu că dacă încerci fiecare posibilă variaţie a unui element o să găseşti, eventual, cea mai bună soluţie.

Pot exista zeci, sute de variante, în funcţie colecţia de variabile care formează elementul: tipografie, culori, spaţiu etc.

Cu destulă răbdare şi multe iteraţii poţi să ajungi la un rezultat cu totul deosebit.

tutorial_10

Am adăugat formularul de contact, nelipsit pentru un site de prezentare, harta şi secţiunea de subsol (footer).

tutorial_11

[Descarcă pagina de prezentare]

Încotro de aici?

Este foate util să-ţi antrenezi ochii să devină mult mai critici cu resursele vizuale. Trebuie să te întrebi constant „Ce ar face acest design mult mai bun?”

Este foarte important să observi şi munca celorlalţi şi să cauţi feedback pentru ce creezi tu. De aceea, îţi recomand să începi să-ţi creezi portofoliul şi să aderi la o comunitate de designeri.

Câteva recomandări:

Behance
UpLabs
Dribbble

Sau poate vrei să începi cu o serie de provocări: Daily UI Challenge


Bubu DragosDragoş Bubu,  UI/UX Designer @Magni

Dragoş are o experienţă de 3 ani în livrarea de soluţii digitale. Momentan, îşi îmbunătăţește un spectru mai mare de aptitudini în calitate de co-fondator la Magni.