Direcția conținutului vizual Ce trebuie să știți
direcția vizuală a conținutului este un aspect mai puțin discutat, dar esențial al designului web de înaltă conversie. Fiecare vizitator "scufundă" un nou site pe prima încărcare a paginii - indiferent dacă o fac în mod conștient sau nu.
Estetica joacă un rol, dar este mai mult despre percepția generală a designului. Acest sentiment poate fi afectat de spații albe, tipografie, simetrie, dar mai ales relaţii între elementele de pagină.
Designerii doresc vizitatori stați pe pagină și păstrați defilare prin captarea atenției și păstrarea intereselor acestora. Principiile de proiectare ar trebui să se concentreze întotdeauna pe funcție înainte de formular. Aceasta înseamnă că ar trebui proiectat completarea conținutului, nu-l strângeți ca o gândire ulterioară.
În acest post, aș dori să vă arăt câteva sfaturi despre cum puteți îmbunătățiți aspectul și fluxurile de conținut vizual pe site-ul dvs..
Concentrați-vă pe Compoziție
Fiecare parte a unui site construiește pe aspectul general. Acest aspect general creează o compoziție care urmează regulile teoriei Gestalt care afirmă că întregul este întotdeauna mai mare decât suma părților.
Zonele individuale ale unei pagini vin împreună formează un întreg. Elementele de proiectare trebuie să construiască o Forta gravitationala pe conținut; tot ce trebuie să fie în pagină în mod normal, îi îndrumă pe vizitatori în continuare până ajung în partea de jos a paginii.
De aceea, relațiile dintre diferite părți ale conținutului (vizuale, text, butoane etc.) contează atât de mult pentru a fi proiectate.
Scopul dvs. ar trebui să fie încurajarea oamenilor pentru a răsfoi site-ul din propria lor înclinație. Este mai ușor de zis decât de făcut, dar puteți învăța foarte mult studiind exemple reale.
Pagina de pornire pentru Monkop este un exemplu excelent de ierarhie vizuală cu atât text cât și vizuale. O mulțime de spațiu este folosit între elemente, iar tipografia completează ilustrațiile vectoriale de marcă.
Pe măsură ce defilați, veți observa drepte blocuri de pagini orizontale împărțită pe culori, granițe și grafică. Acestea sunt construite cu modele de design în minte pentru oferă consistență pe toată pagina.
Spre fund, veți găsi o împărțirea în două coloane cu imagini pe o parte, text pe cealaltă. Imaginile de asemenea swap părți într-un model de dreapta-stânga-dreapta-stânga. Acest lucru atrage atenția și distruge monotonia a paginii tipice în timp ce încă păstrând un flux natural în conținut.
A design estetic similar pot fi găsite pe site-ul Picjumbo, o pagină de destinație pentru un addon foto pentru utilizatorii Photoshop și Sketch.
Pagina de start își concentrează atenția asupra logo-ului și a videoclipului de previzualizare. Pe măsură ce defilați, veți observa animații personalizate care se mișcă pe întreaga pagină. Această animație este într-adevăr captează atenția, și primește spectatorul interesați să păstreze defilarea.
Per ansamblu, pagina se simte deschis și ușor de navigat. Conținutul este împărțite în blocuri orizontale cu tipografie clare și icoane curate.
Luați în considerare modul în care diferite elemente de pagină echilibrați împreună, spațiul dintre elemente, contrastul dintre culori și diferite forme. Toate aceste lucruri joacă un rol în compoziția generală. Fiecare site atrage în mod natural o anumită greutate asupra conținutului.
Nu există un răspuns absolut, deoarece este diferit pentru fiecare site. De exemplu, unele link-uri de navigare arata mai bine atunci cand sunt mari si supradimensionate. Alții se potrivesc mai bine atunci când sunt mic cu majuscule.
Vă sugerez să studiați alte site-uri în nișă. Într-adevăr analizează modul în care sunt puse împreună. Chiar încercați să reconstruiți machetele pentru a vedea care elemente în final fac designul "veniți împreună".
Tipuri de probleme de proiectare
Modul în care proiectați tipografia voastră afectează direcția conținutului pe site-ul dvs. Acest lucru are legătură cu ierarhia de tip și cu stiluri de design ale diferitelor elemente de pagină cum ar fi paragrafe, anteturi, liste cu marcatori, citate și elemente speciale de aspect cum ar fi coloanele sau tabelele.
visuals poate afecta aspectul, deci este o idee bună să proiectați conținut cu o evoluție naturală. Scrieți conținut într-o manieră care curge în jos pagina, și ține oamenii să citească prin fiecare paragraf.
Cel mai mare instrument pe care îl aveți la dispoziție este ochiul tău pentru design. Învățați să recunoașteți diferențele dintre elementele tipografice și modul în care acestea se raportează la alte elemente de pagină. Creați relații între secțiunile de pagină pentru a distinge zonele de conținut.
Unele lucruri pe care le-ai putea considera:
- Mărimea textului
- Familie de fonturi
- Contrast color
- Pagina relații secțiune
- Înălțimea liniei și marginile paragrafelor
- Distanta dintre litere si majuscule
De exemplu, consultați pagina de pornire a Monitorului de campanie. Legăturile de navigare de sus utilizează toate capacele cu litere mici. Alte anteturi pe pagină urmați același design cu toate capacele care creează un sentiment de uniformitate.
Alte anteturi mai mari pe site sunt mult mai proeminent, și într-adevăr sari de pe pagină. Doar prin uita la un design tipic antet, ar trebui să fie ușor să spune diferența între un antet și copia corpului său asociat.
Stilurile tipografice de design de pe monitorul campaniei sunt rafinate, și ele se amestecă în mod natural în aspect. Este nevoie de practică pentru a obține un rezultat ca acesta, dar cu cât încerci mai mult, cu atât mai ușor va fi.
Pentru a învăța ceva mai mult, recomand foarte ușor următoarele linkuri:
- Principii de proiectare: Greutatea vizuală și direcția
- Lucrul cu greutatea vizuală în desenele dvs.
- 19 Factori care au impact asupra echilibrului compozițional
Conținutul îndrumător
Ințelege asta diferite tipuri de site-uri web avea diferite metode pentru ghidarea vizitatorilor prin intermediul site-ului. De exemplu, paginile de destinație vor să-i îndrume vizitatorii tidbits of information, mici icoane, capturi de ecran, și marturii.
Alte site-uri, cum ar fi blogurile, nu aduc de obicei pe oameni pagina de start deodată. Majoritatea oamenilor teren pe o pagină de articol, astfel încât planurile de postări pe blog sunt menite să evidențiați titlul, și atrageți oamenii în continuare în conținut. Aceasta este în cazul în care copywriting de calitate intră în joc, deoarece doriți cititori suspendarea fiecare cuvânt.
Rețelele sociale și aplicațiile web au nevoie experiență de utilizator de calitate, așa că este un subiect ușor diferit, dar ia în considerare modul în care este proiectat feedul Facebook încurajați derularea și interacțiunea cu utilizatorul.
Metodele de proiectare pe care le folosiți pentru a păstra persoanele care navighează pe site vor schimbare de-a lungul timpului. Dar, în general, scopul tău este să ghidul vizitatorilor cu o direcție vizuală a conținutului.
Să aruncăm o privire la a pagina de destinație și a blog design pentru a identifica diferențele.
Cactus este un generator de site-uri statice pentru OS X. Pagina lor de start urmărește îndeaproape stilul de design al Apple - o mulțime de spații albe și subțiri de fonturi sans-serif.
Conținutul este organizat în coloane, blocuri și bucăți de text cu grafică simplă. Aceeași estetică este comun cu produsele Apple, astfel încât utilizatorii de Mac se vor bucura de acest stil de design.
Informații despre produs - inclusiv caracteristici și setări - sunt afișate chiar pe pagina de pornire. Pagina în sine încurajează defilare prin conținut unic, pictograme de bază și un model de coloană alternând blocurile de conținut stânga / dreapta.
Scopul aici este de a oferi informații utilizatorii existenți, și să vândă noi utilizatori ideea de Cactus.
Acum comparați design-ul cu pagina de pornire pentru The Next Web. Conținutul este mult mai sporadice pe o pagină de pornire a blogului, pentru că există o mulțime de subiecte postate diferite.
Dreptunghiurile creează un sistem de rețea care încapsulează postări multiple într-un singur aspect. Scopul este aici obțineți utilizatorilor lectură de conținut pe site. Nu contează dacă vizitatorii descarcă ceva, dar contează dacă ele stați în jur pentru a citi ceva.
Felul în care oamenii se citesc este cu poze minunate și captivante titluri. TNW face o treabă extraordinară și are aspectul lor construit pentru a menține oamenii de navigare cu miniaturi postate în bara laterală și post-conținut.
Ghidarea vizitatorilor la o anumită acțiune este diferită pe fiecare site. Dar puteți învăța o mulțime studiind ceea ce fac alte site-uri de succes și învățând cum să copiați.
Încrede-te în ochii tăi
Proprietățile individuale de proiectare pot fi explicate în mod analitic, dar modificările implementării pentru fiecare site. O imagine eroică cu o legătură "Scroll further" nu face același lucru pe toate site-urile web.
Învățarea de a proiecta este foarte mult a proces vizual. Ochiul pentru design este cel mai important aspect. Trebuie să vezi lucrurile în mod corespunzător pentru a identifica acest lucru ierarhia vizuală. Dacă îl puteți vedea pe alte site-uri web, veți putea să-l replicați pe propriile site-uri.
Cel mai bun sfat pe care-l am doar ai încredere în ochii tăi. Creați o listă cu site-urile dvs. preferate și petreceți câte 5 minute în căutarea fiecăruia. Notați elementele dvs. preferate pe pagină și modul în care ele afectează designul. Acest lucru vă va ajuta internalizează aceste concepte dintr-o perspectivă UI / UX, mai degrabă decât perspectiva unui utilizator.
De asemenea, nu vă fie teamă să încercați chestii! Nimeni nu sa descurcat la design doar prin citirea articolelor despre design. Da, ei ajută - pot ajuta foarte mult. Dar tu nevoie la creați lucruri de la zero pentru a afla ce lucrări si ce nu.
Antrenează-ți ochii studiind aspectul site-urilor pe care le placi și le recreezi. În timp, veți crea o bibliotecă de modele în mintea dvs., ceea ce face proiectarea de noi site-uri mult mai ușor.
Înfășurarea în sus
Sperăm că aceste sfaturi vă vor începe să vă dați o foaie de parcurs de bază. Nu este ușor să deveniți un designer de web, dar lumea are nevoie de talent și nu a fost niciodată mai ușor să vă învățați aceste concepte fundamentale.
Studiu cele mai bune exemple de site-uri cu elemente de pagină pe care le bucurați. Tren ochiul tău de a recunoaște relațiile și tu vei repede dezvolta abilitățile necesare replica acele relații în munca ta.
