Cum să stăpânești designul layout-ului

Un ghid complet pentru a învăța elementele de bază ale designului vizual.

Întrebarea de un milion de dolari: care este secretul unui design bun?

Putem deveni filozofi în această privință, dar, în general, proverbialul "secret" al unui design bun constă în modul în care vă organizați elementele vizuale, în relație cu pânza și între ele. Practic, tocmai am descris designul de layout. Care, dacă te gândești la el, este peste tot unde te uiți.

Să luăm de exemplu aspectul unei reviste. Designul lor urmează un sistem clasic de grilă (vom învăța totul despre grile într-un minut). Totul este, de obicei, aliniat la stânga, la dreapta și în partea de jos. Coloanele au în special o aliniere justificată distinctă, care face ca pagina să fie nu doar atractivă din punct de vedere vizual, ci și ușor de citit și autoritară. Titlurile mari atrag privitorulatenție, în timp ce subtitlul vine ca un contrast de mărime pentru a crea o ierarhie vizuală a informațiilor.

Linda Gaom, Behance

Toate aceste calități fac ca designul paginii să fie curat, structurat și ușor de citit și sunt în ton cu sfaturile despre care vom vorbi în continuare. Dar mai întâi, să înțelegem mai multe despre designul layout-ului în sine.

Ce este designul de layout?

Designul de machetare se referă la aranjarea elementelor grafice pentru a atrage atenția cititorului și a transmite un anumit mesaj într-un mod atractiv din punct de vedere vizual.

Nu vorbim aici de designul de logo, ci de designul materialelor tipărite, cum ar fi ziarele, revistele, posterele, precum și de designul digital, dar și de designul web, de aplicații sau de UX/UI.

Cuvântul "layout" ne oferă o mulțime de indicii. Înseamnă un aranjament de elemente prestabilite pe o pagină.

Atunci când o machetă este eficientă, arată bine și ghidează privitorul să înțeleagă mesajul pe care designul încearcă să îl transmită. Înțelegerea machetei este, prin urmare, esențială pentru a crea compoziții atractive, eficiente, ușor de utilizat și plăcute.

Dacă o machetă nu transmite bine mesajul către public sau, cu alte cuvinte, nu se "citește bine", designul va fi ineficient, indiferent cât de la modă ar arăta. În domeniul designului de machetă, conținutul înlocuiește tendințele și trucurile.

Scopul designului Layout

Pentru a transmite rapid un mesaj

Acest lucru este esențial. Designul de layout stabilește relația dintre activele grafice pentru a obține un flux lin de mișcare a ochilor pentru o eficiență și un impact maxim.

Pentru a crea echilibru

Utilizarea principiilor de proiectare a aspectului este cel mai simplu mod de a crea un sentiment de echilibru și simetrie în proiectele de design fără a deveni plictisitor.

Pentru a crea coeziune

Layout-ul vă ajută să aranjați numeroasele elemente ale designului dumneavoastră într-un mod ușor de digerat, coerent și logic.

Pentru a crea frumusețe

Echilibrul și structura creează în mod natural frumusețea. Dacă designul layout-ului este realizat corect, acesta va deveni automat atractiv din punct de vedere vizual pentru privitor. Cu cât mai puțin efort trebuie să depună privitorii pentru a înțelege un mesaj, cu atât mai atractiv va părea design-ul dvs.

Designer de Frank Philippin pentru cartea sa "I Used to Be a Design Student: Then - Now." Sursa: DesignBoom

Elementele designului de layout

Text

Acest lucru include nu doar corpul textului sau paragrafele, ci și titlurile, subtitlurile, anteturile și subsolurile. Alegerea tipografiei, culorii și dimensiunii va avea efecte diferite asupra modului în care macheta dvs. va fi percepută de public.

Imagine

Cele mai frecvente tipuri de imagini sunt fotografiile, ilustrațiile sau infografiile.

Forme

Formele pot fi geometrice, care sunt foarte unghiulare, sau pot fi organice, imitând lumea naturală. Ele pot fi, de asemenea, abstracte. Formele abstracte au fost foarte la modă în ultimul an, deoarece am văzut designeri web care le-au încorporat în compoziții complexe și vaste.

Formele pot înlocui o imagine sau pot fi folosite pentru a adăuga elemente grafice la o pagină, pentru a evidenția textul sau pentru a delimita spațiul dintre alte elemente vizuale.

Spațiu alb

Orice layout va avea o anumită cantitate de spațiu alb care va permite elementelor dvs. să respire și să se evidențieze de la sine.

Principiile de aur ale designului de layout

Veți observa că principiile de proiectare a aspectului urmează multe dintre principiile fundamentale ale designului, cum ar fi utilizarea culorilor într-un anumit mod, tipografia, repetiția, contrastul, ierarhia și echilibrul.

Principiul #1. Folosiți grile

Grilele îi ajută pe designeri să poziționeze diverse elemente de design, cum ar fi textul și imaginile, într-un mod coerent și ușor de urmărit.

Acestea oferă un sentiment de ordine, împiedică elementele să se suprapună unele pe altele și, cel mai important, grilele vă vor corecta și alinierea. Astfel, munca dvs. va fi mai curată și mai profesională.

Sursa: hgmlegal.com

Anatomia grilelor

S-ar putea să credeți că este vorba doar de linii verticale și orizontale, dar o grilă este alcătuită din mai multe părți. De fapt, multe. Iată cea mai importantă terminologie pe care trebuie să o cunoașteți într-o grilă de bază:

• Format este întreaga suprafață a designului final. Astfel, dacă proiectați ceva pentru tipar, formatul este pagina, iar dacă sunteți un designer web, formatul este pagina web sau fereastra browserului.
• Marje sunt spațiile goale intenționate dintre format și design.
• Linii de curgere sunt liniile orizontale care separă macheta în secțiuni paralele. Liniile de flux ajută la lizibilitatea designului dvs. și ghidează cititorul să urmărească corect conținutul.
• Module sunt blocurile care sunt formate de liniile orizontale și de liniile de curgere verticale ale oricărei grile. Dacă vă gândiți bine, acestea sunt blocurile de construcție ale oricărei grile. Toate modulele verticale vă creează coloanele, în timp ce toate grilele orizontale vă creează rândurile.
• Regiuni sunt grupuri de module conectate, fie pe verticală, fie pe orizontală. Nu există reguli privind modul în care decideți să le organizați.

Sursa: Radversity

Tipuri de grile

Grilele de dispunere au fost folosite pentru prima dată pentru a aranja scrisul de mână pe hârtie.

Ele datează încă din secolul al XIII-lea, când artistul francez Villard De a îmbinat sistemul de grilă cu raportul de aur pentru a produce machete de pagini tipărite cu margini. Acest sistem de grilă poate fi văzut până în ziua de azi, așa cum o dovedesc majoritatea machetelor tipărite ale cărților și revistelor. Editorii, redactorii și designerii preferă să folosească grilele standard nu numai pentru că arată bine, ci și pentru că cititorii au ajuns săse așteaptă ca anumite elemente de design să se afle într-un anumit loc.

Grilele pot fi proiectate în două moduri: simetric sau asimetric. Grile simetrice urmează o linie mediană, în care regiunile verticale și orizontale sunt egale între ele, iar coloanele au aceeași lățime.

Într-un grilă asimetrică , așa cum sugerează și numele, marginile și coloanele nu sunt toate identice.

Pe baza acestei clasificări, există cinci tipuri principale de grile de prezentare utilizate la nivel mondial, pe care vă puteți baza:

Grile de manuscris sunt cel mai comun tip de grilă pentru documente. Acestea separă antetul, subsolul și marginile și, practic, creează un dreptunghi în interiorul formatului (sau al paginii) care oferă limitele textului dvs. Sunt baza revistelor, ziarelor și cărților. Deci, este probabil aspectul cu care sunteți cel mai familiarizat.

Sursa: UXplanet

Sursa: Radversity

Grile de coloană sunt un alt favorit în publicarea revistelor. O machetă tipică de revistă folosește grilele de coloane pentru a separa textul în secțiuni ușor de citit. Dar ele sunt foarte populare și pentru site-urile web. Puteți folosi orice, de la două până la șase grile. Mai mult este posibil, dar nu este ceva obișnuit. Un lucru foarte important la grilele de coloane este că spațierea dintre coloane, sau jgheaburile, sunt distanțate în mod egal de fiecarealtele.

Grilele cu coloane simetrice sunt folosite de ziare, de exemplu, în timp ce o grilă cu coloane asimetrice este preferată în designul web.

Sursa: UX Planet

Sursa: Radversity

Grile modulare sunt similare cu grila de coloane, dar țin cont și de liniile de curgere orizontale. Acest tip de grilă este necesar atunci când trebuie să organizați diverse elemente în macheta dvs. și grilele de coloane pur și simplu nu sunt suficiente.

Grilele modulare au module de dimensiuni egale, ceea ce facilitează foarte mult vizualizarea zonelor spațiale în diferite moduri.

Sursa: UX Planet

Sursa: Radversity

Grile de referință sunt fantastice pentru compozițiile bazate pe text. Linia de bază este linia pe care se sprijină textul atunci când îl dactilografiați, iar chenarul este spațierea dintre două linii de bază. Vă întrebați cât de mare ar trebui să fie titlul sau subtitlurile?

Grilele de linie de bază sunt aici pentru a vă ajuta să dați textului dumneavoastră un ritm cursiv.

Sursa: UX Planet

Sursa: Fragaria

Grile ierarhice seamănă mai puțin cu o grilă decât toți omologii lor. Cu toate acestea, sunt foarte utile atunci când organizează elementele de design în ordinea importanței lor. Grilele ierarhice se pot baza pe grile modulare sau puteți chiar să vă creați propria grilă. Site-urile web folosesc foarte mult această grilă, în special revistele și ziarele digitale tind să se bazeze mai mult pe grile ierarhice decât pe grilele cu coloane în tranziția lor de a devenidigitale.

Sursa: UX Plane

Principiul #2. Folosiți spațiul negativ

Adesea credem că golul, tăcerea sau lipsa de culoare sunt un lucru rău, dar nu ne gândim că ele reprezintă fundamentul solid al contrastului.

Numit și spațiu alb, spațiul negativ este acea zonă din designul tău care nu are niciun element propriu-zis. Este zona lăsată goală. Nu doar că îți înconjoară activele, ci creează și legăturile necesare între ele. Din acest motiv, spațiul negativ este un element de design de drept și are un impact masiv asupra eficienței designului tău de layout.

Spațiu negativ bun vs rău

Spațiul negativ va ajuta la separarea diferitelor zone din designul dvs., permițând în același timp ca aspectul dvs. să respire. Ajută la ierarhia vizuală și la echilibrul vizual; stabilește concentrarea utilizatorului asupra elementelor de bază; reduce nivelul de distragere a atenției; și, în cele din urmă, adaugă stil și eleganță designului dvs.

Designerii neexperimentați ar putea avea tendința de a umple cât mai mult posibil din pânza lor, mărind textul sau amplificând un logo sau o imagine. Dar dacă oferiți spațiu de manevră elementelor dvs., telespectatorul va putea sesiza mai repede și mai confortabil anumite indicii de informații.

Dacă totul strigă după atenția spectatorului, nu se aude nimic.

- Aaron Walter, "Design pentru emoție

O modalitate ușoară de a determina spațiul negativ este utilizarea unei grile modulare. Plasând-o deasupra designului dvs., puteți vizualiza cu ușurință care module pot rămâne goale și care ar trebui completate.

Designer by Brunswicker, Sursa: Codesignmag.com

Principiul nr. 3. Alegeți un singur punct focal

Ți-a cerut vreodată un client să mărești logo-ul și apoi să mărești și mai mult titlul?

Nu poți pune accent pe tot, pentru că ar fi împotriva scopului unui design bun. La fel ca și timpul, concentrarea este relativă. Pentru ca un element să iasă în evidență, altul trebuie să servească drept fundal. Unele elemente trebuie să le domine pe altele pentru ca designul tău să prezinte o ierarhie vizuală.

Punctul focal într-un design este elementul cu cea mai mare greutate vizuală. Este elementul care atrage mai întâi privirea, mai mult decât orice altceva din macheta dumneavoastră.

Un punct focal va anunța publicului unde începe călătoria de vizualizare a designului dvs., deci este începutul poveștii pe care o spuneți.

Acest lucru poate fi realizat, de obicei, prin utilizarea unei imagini mari sau a unei surse mari de tipografie. Observați cât de eficient este punctul focal de mai jos

Realizat de Braulio Amado pentru Bloomberg Businessweek, Sursa: Este frumos că

Dar, în timp ce un punct focal va atrage atenția publicului, următoarea regulă vă va ajuta să îl ghidați.

Principiul nr. 4. Gândiți-vă la proximitate și la flux

Principiul proximității este simplu: asigurați-vă că elementele care sunt legate între ele sunt plasate împreună.

Apropierea strânsă indică faptul că activele vizuale sunt conectate și devin o unitate vizuală care ajută la organizarea aspectului.

Așadar, grupați numai activele de design care au o relație între ele și utilizați buzunare de informații în designul dvs. pentru a vă ghida publicul către conținutul relevant pe care trebuie să îl consume. Acest lucru se mai numește și principiul fluxului.

Sursa: Satori Graphics

Un design cu o bună fluiditate va conduce cu ușurință ochiul privitorului de-a lungul layout-ului, de la un element la altul. Punctele dvs. focale vor atrage privirea și vor deveni locul de odihnă, în timp ce alte elemente vor da o direcție.

Vezi si: Cum de a desena o frunză

Un mod simplu de a înțelege acest lucru este să luăm exemplul site-ului nostru web, de exemplu. Grafica este clar separată de text, la fel ca și apelurile la acțiune, astfel încât atenția privitorului navighează de la un grup de informații la următorul.

Principiul #5. Folosiți contrastul

Asigurați-vă că aveți suficient contrast în designul dumneavoastră.

Contrastul vă ajută să vă organizați designul și va stabili o ierarhie foarte necesară și va pune accentul pe ceea ce este important.

Mai mult decât atât, o bună utilizare a contrastului adaugă, de asemenea, interes vizual în tot designul dvs. Să recunoaștem, un aspect în care totul are aceeași dimensiune, formă sau culoare va arăta plictisitor. Contrastul condimentează lucrurile.

Primul dvs. gând ar putea fi contrastul de culoare, cum ar fi cald versus rece, întunecat versus deschis, albastru versus portocaliu. Dar în timp ce culoarea este un principiu extrem de esențial al contrastului, există, de asemenea, contraste de tip, aliniere și dimensiune. Și nu uitați, contrastul este, de asemenea, relativ. Are sens doar în juxtapunere cu alte elemente.

Iată câteva exemple de machete care folosesc această regulă într-un mod inteligent și frumos. Observați contrastul în tipografie, culoare și chiar și contrastul în ceea ce privește dimensiunea dintre elemente.

Sursa: Planul de acțiune pentru reconciliere al GIC

Principiul #6. Repetiție, model, ritm

Când ne gândim la repetiție, ne gândim la același element din nou și din nou.

Dar în design este diferit. În mod sigur nu este atât de plictisitor. Atunci când este folosită corect, repetiția poate, de fapt, să vă potențeze designul.

Încercați să identificați și să refolosiți un motiv pe tot parcursul layout-ului, astfel încât diverse zone să se simtă conectate și să facă parte din aceeași compoziție. Aceasta va ajuta designul dvs. să aibă o temă. Prin repetarea elementelor, nu numai că veți livra conform așteptărilor publicului dvs., dar veți îmbunătăți și experiența utilizatorului. Fiind consecvent, utilizatorii se simt mai confortabil.

Puteți face acest lucru repetând forme sau simboluri sau chiar o schemă de culori, un tip de caractere și același stil în general.

Un bun obicei pe care trebuie să îl dobândiți este să folosiți un tip de caractere cu o familie mare. Limitați numărul diferit de modele, greutăți/stiluri de linii și culori și repetați-le pe tot parcursul. De asemenea, încercați să păstrați același stil al imaginilor și graficii. De exemplu, folosiți ilustrații ale aceluiași artist.

Sursa: Thepentool.co

Acestea sunt cele șase principii care vă vor ajuta să vă organizați designul și să obțineți un aspect mai curat, mai profesional și mai echilibrat.

Vezi si: Fiecare design spune o poveste: Liam Brazier

Dar călătoria dvs. nu se termină aici. Designul grafic nu este o știință exactă și nu ar trebui să se limiteze la sfaturi și principii. Așa cum este adevărat în toate domeniile de creație, nu există o regulă de bază dură. Ieșirea din aceste sfaturi în moduri subtile va adăuga profunzime și varietate la desenele dvs.

Cu toate acestea, sunt un punct de plecare excelent și vă încurajăm să le încercați. Și să ne spuneți cum au funcționat!

Descărcați Vectornator pentru a începe

Duceți-vă desenele la nivelul următor.

Descărcați fișierul