Compoziția se referă la prezentarea tuturor ideilor și a elementelor de proiectare într-un întreg; compuneți designul tău. Vom combina toate lecțiile anterioare pe care le-am acoperit și, din acest motiv, face ca compoziția să devină unul dintre acele aspecte cu adevărat dificile de a proiecta ceva.
Crearea unei compoziții bune va spori experiența utilizatorilor atunci când navighează în jurul site-ului dvs. și va ajuta la mutarea unui design mai bun în ansamblu. Vrem spre aliniere, consistență și unitate puternică. Compoziția ne ajută, de asemenea, să adăugăm o relevanță vizuală aspectului nostru, astfel încât să putem ajuta utilizatorii noștri să înțeleagă mai multe despre călătoria lor pe un site web, unde ar trebui să se îndrepte.
Compoziția este, fără îndoială, cea mai importantă parte a procesului dvs. de proiectare - oprire completă.
Așa cum am învățat la începutul acestei serii, proiectarea este aceea de a "decide asupra aspectului și a funcției (unei clădiri, a unei îmbrăcăminte sau a altui obiect), de obicei făcând un desen detaliat al acesteia" - și compoziția înseamnă "a scrie sau a crea “. Prin urmare, atunci când le punem împreună, în stadiul compunerii noastre compunem (creând) aspectul și funcția designului nostru - în esență, acum punem totul împreună.
În designul tradițional de tipărire, există o mulțime de compoziții de imprimare și machete care s-au dovedit a funcționa bine în timp. Multe dintre acestea își găsesc acum drumul pe web - și cu un motiv bun. Deși poate fi dificil să traduci aceste aspecte în termeni absoluți pentru proiectarea pe web, acesta poate cel puțin să ne ofere o idee mică și să ne concentrăm asupra layout-urilor pe care am dori să le încercăm în crearea.
Există multe tipuri de compoziții sau layout-uri populare în jurul valorii de - dar am de gând să vorbesc despre doar câteva aici.Există atât de multe resurse online pentru a privi la acestea mai departe, și în timp ce aceste aspecte tradiționale sunt importante vreau să merg, de asemenea, în mai multe detalii pe alte aspecte ale compoziției.
Primul este structura vizuală unică.
Un exemplu excelent al aspectului Visual Unic, așa cum se vede pe site-ul Creative People.Acest lucru este destul de simplu - este acolo unde există un aspect important al unui design care acționează ca un focar vizual unic. De exemplu, puteți crea un design cu o fotografie mare în fundal, cu o mulțime de spații albe și tipărire simplă.
Z-layout-ul este destul de auto-explicativ și se referă în mare măsură la aspectul pe care îl alegeți pentru elementele de design.
Z-Layout, după cum se vede în acțiune pe BBC News.Pur și simplu, modelul Z urmează modelul natural pe care ochii noștri îl pot lua în mod normal atunci când scanăm un site Web. Dacă nu vă puteți imagina deja, acest lucru se întâmplă uneori în cercetarea prezentată ca fiind în forma literei "Z" - care curge din stânga sus, de-a lungul spre dreapta, în jos în diagonală și apoi din nou peste.
Acest lucru poate fi foarte util atunci când vă gândiți la locul în care puteți plasa elementele dvs. astfel încât acestea să fie relevante pentru utilizator. Vă poate ajuta să dați greutate elementelor importante.
Un principiu de design folosit în fotografie și filmare (și mult mai mult), regula a treia este o bună structură compozițională pentru proiectarea pentru web.
Regimul treimilor este o orientare care propune ca o imagine să fie împărțită în nouă părți egale (trei peste, trei în jos), cu elemente ale acelei imagini sau aliniate la marginile fiecăreia dintre aceste părți. Acest lucru este deosebit de util în designul web, deoarece ne poate ajuta să creăm proporții și layout-uri mai bune în desenele noastre.
Regula de a treia este o mare compoziție instrument și aspect. Deși nu este ceva care ar trebui întotdeauna strict urmărit, poate fi un mare ajutor în proiectarea cu un echilibru mai mare. Poate fi folosit și alături de alte aspecte vizuale sau de compoziție, cum ar fi vizualul unic sau chiar când creați sistemele de rețea.
Puternic implicat în matematică, raportul de Aur (sau secțiunea de Aur, dacă preferați să o numiți așa) este una dintre cele mai recunoscute (în nume, cel puțin) compoziții sau instrumente de orice formă de design.
Deseori crezut că a fost creat de grecii antice (oamenii deștepți, ei erau) Raportul de Aur descrie relația dintre două proporții. Rata de Aur este de 1.618 (03398875 ...) și se pare că o mulțime de elemente în natură sunt adesea găsite corespunzând acestui raport. De aceea este întotdeauna ceva mai liniștitor și plăcut pentru ochii noștri umani.
Pentru că este un model cunoscut pentru noi, este logic să încercăm să folosim raportul de aur în desenele noastre; pentru a crea un echilibru armonios care pare să se simtă bine și să aibă sens.
O modalitate ușoară pe care o putem implementa în desenele noastre este să luăm numărul raportului de aur (1.618) și să folosim un pic de matematică. În designul nostru am putea avea o zonă în care noi, de exemplu, dorim să punem conținut și o mică parte sau o bara laterală. Doar divizând acest lucru în desenele noastre, fără a ne gândi la ele, ar putea fi ușor - mai ales dacă aveți un sistem simplu de rețea în loc - dar când ne gândim la el în ceea ce privește raportul de aur, am putea obține un rezultat mai bun în final.
Deci, avem acest domeniu pe care dorim să-l împărțim în două, folosind numărul nostru de raporturi de aur. Pentru a face acest lucru, măsurați lățimea zonei disponibile (hai să mergem cu 950 de pixeli de dragul acestui articol) și împărțiți-o cu 1.618.
Dacă lățimea noastră disponibilă este de 950px, înseamnă că primul nostru calcul (pentru conținutul nostru principal) ar trebui să fie: 950 / 1.618 = 587.144622991 (pe care vom rotunji până la 587px).
Apoi, vom scădea pur și simplu această cifră din lățimea noastră disponibilă inițială pentru a obține a doua lățime, pentru bara laterală sau la o parte: 950 - 587 = 363px.
Deoarece conținutul nostru principal este mai relevant și dorim ca acesta să fie accentul în această parte a proiectului, putem folosi cea mai mare dintre cele două cifre finale pentru lățimea acelui conținut. Apoi putem folosi figura mai mică pentru bordul sau bara laterală. Și acolo o avem - raportul nostru perfect de aur a început să fie proiectat!
Notă: Extrapolând această relație face parte din crearea unei scări modulare pentru designul dvs..
Compoziția este, de asemenea, despre spațiu. Acest lucru nu înseamnă că lăsați zonele vaste și goale în desenele dvs., dar este în schimb să fii inteligent cu spațiul pe care îl ai la dispoziție. Folosirea spațiilor libere este la fel de importantă pentru a vă concentra atenția asupra conținutului dvs., deoarece lăsați zone goale.
Acestea fiind spuse, folosiți căptușeala și spațiile libere în avantajul dvs. - nimeni nu va găsi ușor navigarea pe un site care este aglomerat, are o ierarhie mică și unde elementele sunt înghesuite și nu au cameră de respirație. În schimb, introduceți spațiu în locuri pe care le puteți pentru a permite o experiență de ansamblu mai bună pentru designerii dumneavoastră.
După ce ne-am prezentat conceptul de compoziție, în secțiunea următoare vom examina în continuare spațiul în desenele noastre. Ne vedem acolo!