Grid System – UI Design

Ce este un Grid System in Designul UI/UX?

Grid system se refera la un cadru bidimensional care modeleaza structura unui user interface. El creeaza o diagrama uniforma prin stabilirea unui echilibru intre elementele si spatiile negative.

Un grid system imparte ecranul pentru a plasa si alinia perfect toate UI elements ale unei platforme. Acest lucru permite unui UI UX designer sa creeze o diagrama consistenta pentru toate platformele digitale. Astfel, continutul apare natural, coeziv si mai placut din punct de vedere estetic - indiferent de dispozitivul sau dimensiunea ecranului utilizat.

‍

Anatomia unui Grid System in UI UX Design

Un grid system in UI UX design este format din coloane, gutters si margini.

1. Coloane

Intr-un grid system, spatiul orizontal este impartit in mai multe unitati numite „coloane”. Acestea definesc latimea zonelor de continut si sunt folosite pentru a aranja continutul alaturi pe un schelet de pagina. Astfel, continutul este plasat in interiorul acestor coloane.

2. Gutters

Gutters sunt spatiile negative dintre coloane. Ele ofera spatiere intre elementele UI pentru a asigura claritate vizuala.

Cu cat gutter-ul este mai mic, cu atat mai multa aglomerare se creeaza. Grid system-urile cu gutters mai largi creeaza diagrame care sunt vizual linistitoare, deoarece elementele (coloanele) din ecran au mai mult spatiu de respiratie, reducand tensiunea dintre ele.

Latimea unui gutter poate fi similara cu latimea marginilor, in functie de nevoile unui UI UX designer.

3. Margini

Marginile se refera la zona din jurul unui grid system intr-un UI UX design. Ele definesc distanta dintre grila si marginile ecranului sau ale containerului, marginile prevening aparitia continutului prea aproape de margini.

Pro Tip: Nu confunda marginile cu padding-ul, care reprezinta spatiul din interiorul coloanelor in sine.

‍

Cum sa folosesti Grid System in UI/UX Design

• Metoda Unitatii de Baza

Unitatea de baza reprezinta masuratoarea de referinta care ajuta un UI UX designer sa inteleaga cum ar trebui sa fie scalate spatiile intre elemente. Pentru a mentine consistenta in spatiere, un grid system in UI UX design se bazeaza pe considerarea dimensiunii ecranului. De obicei, unitatea de baza este de 8px, deoarece majoritatea ecranelor sunt divizibile cu 8.

• Specificatii ale Grid System

Numarul de coloane si gutters poate varia in functie de configuratia grid system-ului.

‍

Specificatii ale Grid System

1. Grid System pentru Mobile

Un grid system standard pentru mobile design include 4 coloane. 

2. Grid System pentru Tablet

Un grid system standard pentru designul tabletelor include 6 coloane, iar zona de margine al unui UI UX design depinde de dimensiunea ecranului – cu cat dimensiunea ecranului este mai mare, cu atat zona de margine este mai larga.

3. Grid System pentru Desktop

Un grid system standard pentru desktop design include 12 coloane, iar zona de margine al unui UI UX design depinde de dimensiunea ecranului.

‍

Grid Systems Responsive in UI/UX Design

Pentru a proiecta grid systems responsive si a controla zona, este important ca un UI UX designer sa stabileasca breakpoints. Grilele devin adaptabile la orice tip sau dimensiune de dispozitiv, iar designerii pot transforma rapid un design pentru mobil intr-un design pentru desktop - sau invers.

Breakpoint-uri pentru Dispozitive:

• Mobile: de la 320px la 480px;
• Tablete: de la 481px la 768px;
• Desktop-uri cu ecran mic: de la 769px la 1024px;
• Desktop-uri cu ecran mare: de la 1025px la 1200px.

Comportament unui Grid System

• Comportament Fix

In fixed grid systems, latimea ecranului si componentele sale raman constante. Singurul element care se modifica este dimensiunea marginilor, iar cresterea sau scaderea dimensiunii ecranului declanseaza acest aspect. In cazul ecranelor mari, acest lucru poate duce la prea mult spatiu ramas intre margini si coloane.

• Comportament Fluid

Un comportament fluid va intinde sau va contracta latimea ecranului impreuna cu elementele sale in functie de dimensiunea ecranului. Componentele (coloanele, gulerele, marginile si continutul) sunt ajustate automat pentru a se potrivi spatiului disponibil, mentinand proportiile intre ele constante. Acest lucru faciliteaza tranzitia de la un UI UX design pentru desktop la cel pentru tableta si mobil - si invers.