Anatomi av en perfekt sidebar - Nyanser av et godt design

I den forrige delen av serien har vi gått gjennom definisjonen og betydningen av elementet "sidebar" på WordPress-blogger og sjekket ut layouter med en, to, tre og fire sidebar (og ingen sidebjelker).

I denne andre delen skal vi se hvordan du utformer et sidebar og bestiller elementene - spesielt widgetene - innsiden av det.


Designe den perfekte sidebaren

En av hovedgrunnene til at besøkende ikke tar hensyn til sidebjelkene, utgjør dårlige designvalg. Andre grunner kan bruke for mange eller for få elementer, vise kjedelig og uinteressant innhold og ikke bestiller elementene riktig, og så videre.

Ved å unngå å designe sidebjellet betyr lavere sidevisninger, lavere annonseklikk, lavere konverteringsfrekvenser og lavere salg. Selv om du ikke forventer inntekt fra WordPress-nettstedet ditt, og bare forventer at folk skal lese innholdet ditt, må du fortsatt utforme sidebarene dine godt for å kunne veilede de besøkende med dine navigasjonssidebarelementer.

Vi skal gå gjennom tre hovedfaktorer av en god sidebar design: dimensjoner, farger og typografi grunnleggende.

Bredde og høyde på sidefeltet

Sunn fornuft for bredden på sidefeltet er å redusere bredden på sidefeltet (r) i forhold til hovedinnholdsområdet. Dette er en fornuftig tilnærming, siden hovedinnholdet er nesten alltid det viktigste elementet i en nettside og et smalt innholdsområde med brede sidebar de-understreker innholdet.

En bredde på mellom 20% og 40% er vanligvis det beste valget for et enkelt sidebjelke, og hvis du skal bruke mer enn ett sidebar, foreslår jeg at du ikke overskrider en total bredde på 50% (20% + 20% og 15% + 35%, for eksempel).

For en enkelt sidebar kan du også benytte Golden Ratio-tilnærmingen, hvor bredden på sidebjelken er rundt 38% av hovedinnholdets bredde. Du finner mer informasjon om Golden Ratio i Jarel Remicks The Golden Ratio i Web Design artikkel på nettuts+.

Når det gjelder høyden, er det ikke mye å diskutere annet enn "folden". Fold er bunnlinjen på besøkers skjerm, hvor den besøkende må rulle før du ser resten av siden. Jeg pleide å råde mine klienter til å prøve å holde seg "over brettet", men siden det er mange forskjellige enheter (dermed skjermdimensjoner) og folk er veldig vant til å bla, er livet under brettet ikke så skummelt lenger.

Når du sier det, bør du huske det faktum at elementene over Fold er de første elementene de besøkende vil se. Vi snakker om det på det siste emnet, "Bestille elementene på sidefeltet".

Å forresten, du virkelig, bør virkelig være forsiktig med å ikke overskride høyden på hovedinnholdsområdet. Hvis sidefeltene er lenger enn innholdet, ser det ut veldig stygg.

Bruke farger og bilder

Husk designmottoet, "mindre er mer"? Vel, vi kan lese det som "mer er mindre" også.

Farger kan både tiltrekke seg og distrahere. Hvis du bruker så mange farger som sidebjæret ovenfor, vil ingen av de fargerike, stygge elementene få mest oppmerksomhet - de vil få minst oppmerksomhet.

Men hvis du bruker bare noen få farger for bare noen få elementer (som du trenger for å tiltrekke besøkende mest), vil de trekke mest oppmerksomhet. Du må huske på at for å kunne skape en widget, må du sette tilbake de andre. "Kontrast" er nøkkelordet her.

Bilder kan imidlertid være et unntak. Mens alle de tingene jeg sa ovenfor gjelder for digital grafikk også, kan bilder brukes for å trekke oppmerksomheten separat fra de fargete elementene. Men som du kan forestille deg, vil for mange bilder også distrahere den besøkende også - derfor kan annonser kanskje eller ikke bli lagt merke til basert på din sidefeltdesign.

Jeg foreslår at hvis du kan, bør du bruke falmede bilder (som fades inn på hover) i sidebar widgets. Prøv å se om det ser fint ut eller ikke.

Font størrelser og justering av elementene

Typografi er alltid viktig for god design. Med god typografi kan det hende du ikke trenger noe annet for å gjøre websiden din ser bra ut.

Med sidebjørne jeg designer, liker jeg å sette skriftstørrelsen litt (10% til 20%) større enn hovedinnholdet. Det trekker oppmerksomhet, men distraherer ikke besøkende fra hovedinnholdet - besøkende ser hva de vil se, og det er det vi vil sikte på å gjøre. Ikke glem at noen ganger mindre tekst kan være attraktivt også.

Jeg liker også å justere overskriftene til sentrum og teksten til høyre, men du kan - og deg bør - gjør alt du ser passer til designen din. Så lenge de ikke ser rotete ut, er det bra for deg.


Bestille elementene på sidefeltet

Selv om du bare har to sidebarelementer eller ti av dem, bør du vurdere å bestille disse elementene en viktig praksis. Å gjøre det riktig vil sikkert øke klikk og salg og gjøre det galt kan plummet dem!

Tenk på viktig elementer som bør definitivt sett av alle besøkende, og ikke-så-viktig De som ikke nødvendigvis må sees av hver enkelt person som besøker nettstedet ditt.

For eksempel: Mens abonnementsskjemaer og knapper eller siste / populære innleggslister betraktes som "viktige", kan vi ikke si det samme for de siste kommentarlister eller blogroller. Når du har identifisert de "viktige" de, kan du bestille dem mellom hverandre og ha et pent ordnet sidebar.

Også bør du vurdere folden: Hvilke elementer skal være på toppen og hvilke kan være nederst på sidefeltet? Å ha de viktigste elementene (som et abonnement på e-post og en populær innleggsliste og muligens en annonse) over folden vil være til nytte både for deg og dine besøkende.


Konklusjon

Jeg tror ikke at du bør følge strenge regler for en god design, men det er alltid "retningslinjer" for deg å skape bedre design. Denne serien er en av disse retningslinjene, og jeg håper du har hatt det.

Har du noe å legge til eller forbedre? Del ideene dine med oss ​​ved å legge igjen en kommentar!