O introducere cuprinzătoare a rețelelor în designul web

Dacă nu ați făcut-o niciodată cu utilizarea grilelor în desenele dvs., acest articol este scris pentru dvs. În el veți învăța teoria lingo-ului de bază și veți vedea prin exemple de site-uri autentice modul în care grilele sunt folosite în sălbăticie.

Subiecte

În acest ghid, vom acoperi destul de mult, inclusiv:

• Grile?
• Terminologie
• Regula al treilea
• 12 Grilă unitate
• Accent
• limitări
• Harta mintală

Grile?

O rețea poate crea o structură de bază, un schelet pentru designul dvs. Acestea constau din linii "invizibile" pe care pot fi plasate elementele de design. Făcându-le astfel, le îmbină împreună într-un "sistem" general și vă sprijină compoziția - rațional. 

BBC

Grilele vă ajută să obțineți o aliniere eficientă și coerență cu puțin efort. "Winging it" și bazându-te pe intestin nu scade atât de bine. Dacă sunt executate corect, desenele dvs. vor apărea atent, organizat, elegant și structural.

Alinierea bună, la fel de mult ca și designul, ar trebui să fie aproape neobservată de utilizatorii dvs. Mai puțin este mai mult. Fiți prea inteligenți și riscați să distrageți utilizatorul de scopul principal de a căuta conținut specific și de a-l digera repede. Asta ar trebui să vă fie în centrul atenției - nu arătați cât de minunat puteți fi cu abilitățile de proiectare. Chiar și mai rău ar fi reinventarea roții pentru a provoca un punct. Lipsa alinierii este foarte vizibilă și creează o impresie neclară. Acest lucru ar putea duce foarte bine la o lipsă de încredere din partea utilizatorilor care vă consumă designul - cu excepția cazului în care lipsa de aliniere este ceva la care intenționați din orice motiv creativ.

Terminologie

Unitate

Unitățile reprezintă blocurile de bază ale fiecărei rețele. Mai multe unități formează grila generală. În exemplul de mai jos de la BBC se uită la o rețea de 12 unități. Dungile mov reprezintă fiecare o unitate.

Jgheab

Dungile înguste înguste de pe ilustrația de mai jos reprezintă jgheaburile care separă fiecare unitate. Jgheaburile sunt o formă de spațiu alb care oferă grilă o cameră de respirație. 

Coloană

Acum devine mai interesant. Mai multe unități și jgheaburi formează împreună coloane care sunt în mod eficient containere în care să plasați conținutul dvs. în mod strategic. Este posibil să nu pară inițial cazul, dar lucrarea în cadrul unor astfel de constrângeri poate fi eliberatoare. Constrângerile pot lua decizii cu privire la locul în care pot fi plasate mult mai ușor și mai repede. 

În exemplul de mai jos, puteți vedea trei coloane diferite la serviciu. Fiecare coloană este dimensionată pentru o anumită formă de conținut sau pentru crearea unui accent.

După cum puteți vedea, aveți multe opțiuni pentru a amesteca diverse forme de conținut și elemente de design. Ceea ce puteți observa este că aceste coloane formează împreună o structură solidă care dă consecvență și ordine prin aliniere. Nu este un preț rău pentru a plăti pentru a stabili câteva linii și pentru unele constrângeri, nu?

Camp

Coloanele câmpurilor de conținut care sunt diviziuni orizontale ale paginilor. Nu este o idee proastă să vă depuneți eforturi pentru a vă deplasa paginile cu înălțimi egale. În practică, acest lucru nu este întotdeauna ușor de realizat. Dacă câmpurile dvs. se termină cu aceeași înălțime și funcționează pentru desenele dvs., mare, dacă nu, deplasați și prăjiți pești mai mari.

Regula al treilea

"Regula terților" utilizează o mini-rețea și implică faptul că atunci când plasați conținut pe anumite linii care împart conținutul în treimi, rezultatul va fi mai plăcut pentru ochiul uman. Aceasta este o abordare foarte frecvent utilizată în fotografie, de exemplu. Deși ar putea fi un bun punct de pornire și de multe ori vă va face în parcul de bilete potrivite, aș sugera să luați acest lucru cu un bob de sare.

Când oamenii vorbesc despre "intersecții magice", care ar trebui să vă ajute să plasați elemente de design, vă invit să respirați și să luați în considerare potențialul de puf. Este ușor să beți doar ajutorul răcoros, mai ales că nu este greu să urmați această "regulă", dar nimic despre acest lucru nu pare să fie deosebit în mod matematic sau biologic - și cu siguranță nu este magic. 

Și nu uitați că noi nu percepem cu toții lumea în același mod. Suntem cu toții diferiți. Noi nu suntem mașini care aderă la un punct de vedere matematic precis atunci când privim lumea. Uitați-vă la Reddit, de exemplu. Se pare că le pasă de intersecții magice?

Da, regula a treia este o îndrumare bună - sau poate fi cel puțin - atunci când se potrivește și "aliniază" imaginii, designului sau a oricui, dar nu o luați prea în serios. Întrerupeți regulile ori de câte ori are sens. Fă ceea ce simți bine și mergi cu intestinul tău în cadrul liniilor directoare și tehnicilor pe care le înveți pentru munca ta de proiectare. "Nimic nu este adevărat, totul este permis" în design - să citeze pe niște Nietzsche din context. Din punct de vedere filosofic, acest lucru poate fi argumentat la moarte - pe bună dreptate, dar în design, aceasta reprezintă o îndrumare fermă pentru a vă explora creativitatea fără restricții "magice". 

Du-te nebun, sparge regulile, te distrezi și, dacă ești norocos, găsește noi frontiere! 

Diviziuni?

În timp ce suntem în domeniul magic al lucrurilor în proiectare, permiteți-mi să fiu o secundă despre ceva înrudit: oamenii au crezut de mult că folosirea proporției "divine" a raportului de aur are ca rezultat ceva special, divin și plăcut pentru ochiul uman. Au fost experimente care pun la îndoială aceste presupuneri "pre-moderne" cu o cauză bună. 

Vitruvianul de Leonardo da Vinci

Verdictul final este încă în legătură cu aceste probleme pe care le presupun - și ar putea fi pentru o lungă perioadă de timp - dar nimic nu ar trebui să ne împiedice să ne menținem o minte deschisă pentru a pune la îndoială aceste ipoteze transmise. Chiar ar trebui să mergem dincolo de gândirea magică. Pentru o vreme mi-a fost logic că "mijlocul de aur" ar putea fi super plăcut pentru noi, deoarece în natură suntem bine înconjurați de ea. Dar, din nou, dovezile convingătoare ar fi drăguțe. Poate, poate nu, dar nu este ceva ce vreau să iau de la sine și să mă construiesc.

Doisprezece unități de rețea

Înapoi la mai multe ape pragmatice. Aș dori să discut despre o rețea foarte versatilă și să începeți cu ceva concret, ceea ce face ca un prim sistem bun să vă construiască machetele. O rețea de 12 unități este prietenul tău. 

Etsy

De ce sunt douăsprezece unități la îndemână? Pentru început, pentru că se încadrează frumos în trei, patru și șase coloane, care sunt suficient de flexibile pentru a trata tot felul de conținut destul de ușor. În plus, le puteți face simetrice sau asimetrice - ceea ce vă oferă o mulțime de opțiuni pentru a juca fie în siguranță, fie pentru a crea niște aspecte dinamice care depășesc simetria simplă. 

Să ne uităm la câteva modele care fac uz de flexibilitatea oferită de această rețea.

Patru coloane de coloane

Principalele beneficii ale unei rețele de patru coloane sunt simplitatea, echilibrul și că este, de asemenea, foarte fiabilă. Fiecare coloană cuprinde trei unități. Partea inversă este că este foarte simetrică care poate părea puțin plictisitoare. 

Adesea, aveți nevoie de o secțiune principală pentru conținutul subliniat și apoi o bara laterală pentru preocupări secundare. În primul exemplu de mai jos, puteți vedea că prima coloană este utilizată pentru branding, cele două coloane de mijloc sunt pentru conținutul principal, în timp ce ultima este pentru conținut care necesită mai puțin evidențiere.

formăHarvard Design MagazineEtsyTapetMarie Claire

Trei coloane de coloane

Cu această grilă, fiecare coloană cuprinde patru unități. Această variantă este un pic mai mult implicată, deoarece este o rețea asimetrică și trebuie să fii mai inteligent în privința găsirii unui echilibru în desenele tale. Formatele asimetrice ca acestea sunt adesea considerate mai active și mai abilitate. Aceasta poate și ar trebui să fie pusă la îndoială, bineînțeles!

TapetKickstarterKickstarterTapetWIRED

Șase coloane de coloane

În acest exemplu, fiecare coloană cuprinde două unități, făcând lucrurile puțin mai dificile decât grila de coloane. Se împarte fiecare coloană dintr-o rețea cu trei coloane în două coloane suplimentare. Cele șase coloane de coloane vă oferă mai multe opțiuni și oportunități pentru a regla detaliile mai mici. Dacă lucrați la un site bogat în conținut și trebuie să parcați o mulțime de informații, o rețea de șase coloane ar putea fi un punct de plecare inteligent pentru experimentare. Deoarece poate o rețea avansată, aș fi recomandat să nu începeți cu prima rodeo.

TapetThe New York Times

Combinații

Puteți, de asemenea, să combinați grilele în cadrul designurilor dvs., motiv pentru care un sistem de rețea cu douăsprezece unități este foarte util. Vă permite să combinați cu ușurință blocuri de trei, patru și șase coloane. 

EtsyBBCEtsyEtsyBBCEtsyEtsyEtsy

Accent

Planurile echilibrate și simple se simt adesea mai confortabile decât cele prea complicate. Flip-ul este că trebuie să ai grijă să nu-l joci prea în siguranță tot timpul și riscând să cauți plictisitor. Pentru accentuare, puteți să vă despărțiți de grilă sau să evidențiați anumite elemente de design prin mărime - prin combinarea mai multor coloane, de exemplu. Acest lucru poate crea interes vizual și poate stabili o ierarhie mai bună în cadrul elementelor principale de design. 

Etsy

Ruperea rețelei pentru a crea accent poate fie să îmbunătățească masiv designul prin evidențierea pieselor esențiale, fie poate să arate cu adevărat, bine, prost. Wallpaper a făcut o treabă excelentă la ruperea celor patru coloane și accentuarea profundă a videoclipului pe care doresc să îl urmăriți.

TapetformăTapet

Dar trebuie să fii atent, ruperea ritmului rețelei prea adesea rezultă într-un aspect care arată spart sau prea mult accentuează prea multe părți astfel încât nimic nu mai ezită.

limitări

O întrebare care apare frecvent este când să folosiți o rețea în proiectare? Mereu! Este întotdeauna o decizie bună de a merge cu o rețea deoarece ei ajută la echilibru, ierarhie, aliniere și consecvență. 

Apoi, există întotdeauna argumentul că o grilă vă constrânge munca. Dar asta este a bun deoarece o rețea poate să vă faciliteze creativitatea și să vă ghideze deciziile în mod constructiv. Astfel de restricții pot fi un bun punct de plecare pentru munca dvs. Deci, când aveți constante, cum ar fi dimensiunea anunțurilor care vă sunt oferite de clientul dvs., aveți un punct de plecare pentru a vă construi modelele în jurul acestuia. Dimensiunea grilei dvs. poate și ar trebui să acorde atenție unor astfel de limitări.

În exemplul de mai jos de la The Wall Street Journal, puteți observa că dimensiunea unui anunț, marcat cu verde, a dus la o decizie de proiectare pentru a construi o parte a rețelei având în vedere această dimensiune.

Harta mintală

Dacă reușiți, rețeaua dvs. vă va ajuta să construiți un model mental al site-ului dvs. și al paginilor sale individuale. Acest lucru implică, de asemenea, că structura paginilor dvs. nu trebuie să fie complet diferită una de alta - un numitor comun care se adaptează la posibilitățile fiecărei pagini ar trebui să facă parte din planul dvs.. 

Să ne uităm din nou la câteva exemple despre modul în care Etsy a rezolvat cu succes acest lucru. Numai de această dată, să ne concentrăm asupra modului în care rețelele lor suportă nevoile lor diferite de conținut și modul în care acestea se amestecă de la o pagină la alta. După părerea mea, ei au făcut o treabă excelentă de a păstra un fel de coerență care creează o impresie unificată, legând paginile împreună cu ușurință. Astfel, ei ghidează utilizatorul prin conținut și utilizatorul știe la ce să se aștepte. Hărțile lor mentale sunt sigure și nu au surprize care pot deraina experiența utilizatorului în mod structural.

Ei au creat un ritm frumos pentru paginile lor, iar grila lor arată elegant, pentru că au jucat simplu.

Gândurile finale

În general, alinierea conținutului în mod sistematic este cheia esențială pentru eliminarea acestui subiect. Nimic nu este mai eficient în legarea diferitelor forme de conținut împreună decât în ​​liniile consistente ale rețelei. Creați o axă puternică pe care un utilizator o poate urmări pentru orientare și ghidare a ochilor și a acțiunilor cum ar fi ancorele vizuale. De obicei, aceasta are ca rezultat relații mai puternice care leagă munca dumneavoastră împreună și creează coeziune. Nu te complica! Proiectele tale vor fi mai ușor de întreținut și de construit.