Share
In het vorige deel van de serie hebben we de definitie en het belang van het "zijbalk" -element op WordPress-blogs doorgenomen en lay-outs met één, twee, drie en vier zijbalken (en geen zijbalken).
In dit tweede deel gaan we bekijken hoe je een zijbalk ontwerpt en de elementen - met name de widgets - daarbinnen ordenen.
Een van de belangrijkste redenen waarom bezoekers geen aandacht aan de sidebars besteden, komt neer op slechte ontwerpkeuzes. Andere redenen kunnen zijn het gebruik van te veel of te weinig elementen, het weergeven van saaie en oninteressante inhoud en het niet correct bestellen van de elementen, enzovoort.
Als u uw zijbalk niet ontwerpt, betekent dit lagere paginaweergaven, lagere advertentieklikken, lagere conversieratio's en lagere verkopen. Zelfs als u geen inkomsten verwacht van uw WordPress-website en verwacht dat mensen uw inhoud lezen, moet u uw zijbalk (en) nog steeds goed ontwerpen om uw bezoekers te kunnen begeleiden met uw navigatiezijbalkelementen.
We gaan door drie belangrijke factoren van een goed ontwerp van de zijbalk: afmetingen, kleuren en basisbeginselen van typografie.
Gezond verstand voor de breedte van de zijbalk is om de breedte van de zijbalk (en) te verkleinen ten opzichte van het gebied met de hoofdinhoud. Dit is een verstandige aanpak, omdat de hoofdinhoud bijna altijd het belangrijkste element van een webpagina is en een smal inhoudsgebied met brede zijbalken minder de nadruk legt op de inhoud.
Een breedte tussen 20% en 40% is meestal de beste keuze voor een enkele zijbalk en als u meer dan één zijbalk wilt gebruiken, raad ik aan dat u een totale breedte van 50% (20% + 20% en 15% + 35%, bijvoorbeeld).
Voor een enkele zijbalk kunt u ook de Golden Ratio-benadering gebruiken, waarbij de breedte van de zijbalk ongeveer 38% van de breedte van het hoofdinhoudsgebied is. U kunt meer informatie vinden over Golden Ratio in Jarel Remick's De gulden snede in webontwerp artikel bij Nettuts+.
Wat betreft de hoogte, er is niet veel te bespreken, behalve "de vouw". De vouw is de onderste regel op het bezoekersscherm, waar de bezoeker moet scrollen voordat hij de rest van de pagina ziet. Ik adviseerde mijn cliënten altijd om "boven de vouw" te blijven, maar aangezien er heel veel verschillende apparaten zijn (dus schermafmetingen) en mensen heel erg gewend zijn om te scrollen, is het leven onder de vouw niet zo eng meer.
Dat gezegd hebbende, moet u er rekening mee houden dat de elementen boven de vouw de eerste elementen zijn die de bezoekers zullen zien. We zullen erover praten over het laatste onderwerp, "De elementen van de zijbalk bestellen".
Oh trouwens, je moet echt voorzichtig zijn om de hoogte van het hoofdinhoudsgebied niet te overschrijden. Als de zijbalken zijn langer dan de inhoud, het lijkt erop heel lelijk.
Denk aan het motto van design, "less is more"? Nou, we kunnen het ook lezen als "meer is minder".
Kleuren kunnen zowel aantrekken als afleiden. Als je zoveel kleuren zoals de zijbalk hierboven gebruikt, krijgt geen van die kleurrijke, lelijke elementen de meeste aandacht - ze krijgen de minste aandacht.
Maar als je slechts een paar kleuren gebruikt voor slechts een paar elementen (die je het meest nodig hebt om bezoekers aan te trekken), zullen ze de meeste aandacht trekken. U moet er rekening mee houden dat u om een widget te openen, de andere moet terugzetten. "Contrast" is hier het sleutelwoord.
Afbeeldingen kunnen echter een uitzondering zijn. Hoewel alle bovenstaande dingen ook van toepassing zijn op digitale afbeeldingen, kunnen foto's worden gebruikt om de aandacht apart van de gekleurde elementen te trekken. Maar zoals u zich kunt voorstellen, zullen te veel afbeeldingen de bezoeker ook afleiden - daarom kunnen advertenties al dan niet worden opgemerkt op basis van uw zijbalkontwerp.
Ik stel voor dat je, als je kunt, vervaagde foto's (die vervagen bij zweven) gebruikt in je zijbalk-widgets. Probeer eens te kijken of dat er leuk uitziet of niet.
Typografie is altijd belangrijk voor een goed ontwerp. Met goede typografie heb je misschien niets anders nodig om je webpagina er goed uit te laten zien.
Met de zijbalken die ik ontwerp, vind ik het leuk om de lettergrootte iets in te stellen (10% tot 20%) groter dan de hoofdinhoud. Het trekt de aandacht maar leidt de bezoeker niet af van de hoofdinhoud - de bezoekers zien wat ze willen zien en dat is het doel dat we willen bereiken. Vergeet niet dat kleinere tekst soms ook aantrekkelijk kan zijn.
Ik houd er ook van om de kopjes in het midden uit te lijnen en de tekst rechts, maar je kunt - en jij moeten - doe alles dat u geschikt acht voor uw ontwerp. Zolang ze er niet rommelig en niet-gerelateerd uitzien, is het goed voor je.
Zelfs als je slechts twee zijbalkelementen of tien ervan hebt, zou je moeten overwegen om die elementen een cruciale praktijk te maken. Als u het goed doet, zullen uw klikken en verkopen zeker toenemen en als u dit verkeerd doet, kunt u hen in de steek laten!
Denk aan de belangrijk elementen die absoluut door alle bezoekers moeten worden gezien, en de niet zo belangrijk degenen die niet noodzakelijkerwijs moeten worden gezien door elke persoon die uw website bezoekt.
Bijvoorbeeld: terwijl abonnementsformulieren en knoppen of meest recente / populaire berichtenlijsten als "belangrijk" worden beschouwd, kunnen we niet hetzelfde zeggen voor de laatste commentarenlijsten of blogrolls. Zodra u de "belangrijke" hebt geïdentificeerd, kunt u ze tussen elkaar bestellen en een mooi geordende zijbalk hebben.
Overweeg ook de vouw: welke elementen zouden bovenaan moeten staan en welke zouden onderaan de zijbalk kunnen staan? Het hebben van de belangrijkste elementen (zoals een e-mailabonnement en een populaire berichtenlijst en mogelijk een advertentie) boven de vouw zal zowel u als uw bezoekers ten goede komen..
Ik geloof niet dat je strikte regels moet volgen voor een goed ontwerp, maar er zijn altijd "richtlijnen" om betere ontwerpen te maken. Deze serie is een van die richtlijnen en ik hoop dat je ervan hebt genoten.
Heb je iets toe te voegen of te verbeteren? Deel uw ideeën met ons door een opmerking achter te laten!
Accentsconagua