Share
În partea anterioară a seriei, am parcurs definiția și importanța elementului "sidebar" pe blogurile WordPress și am verificat planurile cu una, două, trei și patru bare laterale (și fără bare laterale).
În această a doua parte, vom vedea cum să proiectăm o bară laterală și să ordonăm elementele - în mod special widgeturile - din interiorul acesteia.
Unul dintre principalele motive pentru care vizitatorii nu acordă atenție barelor laterale se ridică la opțiuni slabe de design. Alte motive ar putea fi folosirea prea multor sau prea puține elemente, afișarea conținutului plictisitor și neinteresant și nu ordonarea corectă a elementelor și așa mai departe.
Neglijarea pentru a proiecta bara laterală înseamnă afișări mai mici ale paginilor, clicuri pe anunțuri mai mici, rate de conversie mai mici și vânzări mai mici. Chiar dacă nu vă așteptați vreun venit de pe site-ul dvs. WordPress și așteptați doar ca utilizatorii să vă citească conținutul, trebuie să creați și bara laterală pentru a vă putea ghida vizitatorii cu elementele barei laterale de navigare.
Vom trece prin trei factori principali ai unui design bun al barei laterale: dimensiunile, culorile și elementele de bază ale tipografiei.
Bunul sens pentru lățimea barei laterale este de a reduce lățimea barei laterale în comparație cu aria principală de conținut. Aceasta este o abordare sensibilă, deoarece conținutul principal este aproape întotdeauna cel mai important element al unei pagini web și o zonă de conținut îngust, cu bare laterale largi de-accentuează conținutul.
O lățime între 20% și 40% este, de obicei, cea mai bună alegere pentru o singură bară laterală și, dacă intenționați să utilizați mai multe bare laterale, vă sugerăm să nu depășiți o lățime totală de 50% (20% + 20% și 15% + 35%, de exemplu).
Pentru o singură bară laterală, puteți utiliza și abordarea Golden Ratio, unde lățimea barei laterale este de aproximativ 38% din lățimea zonei principale de conținut. Puteți găsi mai multe informații despre Golden Ratio în Jarel Remick's Raportul de Aur în Web Design articol de la Nettuts+.
În ceea ce privește înălțimea, nu este prea mult să discutăm decât "pliul". Foldul este linia de jos a ecranului vizitatorului, unde vizitatorul trebuie să deruleze înainte de a vedea restul paginii. Îmi sfătuiesc clienții să încerce să rămână "deasupra ori", dar deoarece există o mulțime de dispozitive diferite (astfel, dimensiunile ecranului) și oamenii sunt foarte obișnuiți să deruleze, viața de sub fold nu mai este așa de înfricoșătoare.
Acestea fiind spuse, trebuie să vă gândiți la faptul că elementele de deasupra Foldului sunt primele elemente pe care vizitatorii le vor vedea. Vom vorbi despre acest lucru pe ultimul subiect, "Comandarea elementelor laterale".
Oh, apropo, într-adevăr, ar trebui să ai grijă să nu depășești înălțimea zonei cu conținut principal. Dacă sunt barele laterale mai lung decât conținutul, pare foarte urât.
Reamintim motto-ul de design, "mai puțin este mai mult"? Putem să o citim ca și "mai mult este mai puțin".
Culorile ar putea atrage și distrage atenția. Dacă utilizați atât de multe culori cum ar fi bara laterală de mai sus, niciunul dintre acele elemente colorate, urâte nu va primi cea mai mare atenție - ei vor primi cea mai mică atenție.
Dar dacă folosiți doar câteva culori pentru doar câteva elemente (care trebuie să atrageți cel mai mult vizitatorii), acestea vor atrage cea mai mare atenție. Trebuie să rețineți că, pentru a afișa un widget, trebuie să le repuneți pe ceilalți. "Contrast" este cuvântul cheie aici.
Imaginile pot fi o excepție. În timp ce toate lucrurile pe care le-am spus mai sus se aplică și graficii digitale, fotografiile ar putea fi folosite pentru a atrage atenția separat de elementele colorate. Dar, după cum vă puteți imagina, prea multe imagini vor distrage vizitatorul, de asemenea - de aceea anunțurile pot sau nu pot fi observate pe baza design-ului dvs. lateral.
Vă sugerez că, dacă puteți, ar trebui să utilizați imagini estompate (care se estompează pe hover) în widget-urile dvs. sidebar. Încearcă să vezi dacă arată bine sau nu.
Tipografia este întotdeauna importantă pentru un design bun. Cu o bună tipografie, este posibil să nu mai aveți nevoie de altceva pentru a face ca pagina dvs. Web să arate bine.
Cu barele laterale pe care le proiectez, îmi place să diminuez ușor dimensiunea fontului (10% la 20%) mai mare decât conținutul principal. Ea atrage atenția, dar nu distrage vizitatorul de conținutul principal - vizitatorii văd ce doresc să vadă și acesta este lucrul pe care ne-am propus să-l facem. Nu uitați că, uneori, și textul mai mic ar putea fi atrăgător.
De asemenea, îmi place să aliniez rubricile în centru și textul în dreapta, dar poți - și tu ar trebui să - faceți tot ceea ce considerați potrivit pentru designul dvs. Atâta timp cât nu ar părea dezordonat și fără legătură, este bine pentru tine.
Chiar dacă aveți doar două elemente ale barei laterale sau zece dintre ele, trebuie să vă gândiți să ordonați aceste elemente o practică crucială. Făcând-o corect va crește cu siguranță clicurile și vânzările și dacă o faci greșit poate să le strică!
Gândiți-vă la important elemente care ar trebui să fie cu siguranță văzute de toți vizitatorii și de nu-așa-importantă care nu trebuie neapărat să fie văzute de fiecare persoană care vizitează site-ul dvs. Web.
De exemplu: în timp ce formularele de abonament și butoanele sau listele de posturi recente / populare sunt considerate "importante", nu putem spune același lucru pentru cele mai recente liste de comentarii sau blogroll-uri. După ce identificați cele "importante", puteți să le comandați între ele și să aveți o bara laterală bine ordonată.
De asemenea, ar trebui să luați în considerare pliul: care elemente ar trebui să fie pe partea de sus și care ar putea fi în partea de jos a barei laterale? Având cele mai importante elemente (cum ar fi un formular de abonament prin e-mail și o listă de posturi populare și, eventual, o reclamă) deasupra paginii, veți beneficia atât pe dvs., cât și pe vizitatorii dvs..
Nu cred că ar trebui să urmați reguli stricte pentru un design bun, dar există întotdeauna "îndrumări" pentru a crea modele mai bune. Această serie este una din aceste linii directoare și sper că v-ați bucurat de ea.
Aveți ceva de adăugat sau de îmbunătățit? Împărtășește-ți ideile cu noi, lăsând un comentariu!
Accentsconagua