Blog Design Inspiratie

We weten allemaal hoe belangrijk inhoud is voor elke marketingcampagne.

De blog, bijvoorbeeld, is de hoeksteen geworden van elke succesvolle website; hij begeleidt gebruikers met doelgerichte, relevante en boeiende inhoud en maakt ze uiteindelijk zo blij dat ze zich converteren en abonneren om meer te krijgen.

Maar wat als uw blogontwerp het doel mist?

Feit is dat meer gebruikers uw website zullen betreden (en uw merk zullen vinden) via uw blogartikelen dan ooit uw homepage, dus uw blogontwerp zou uw “beste beentje voor moeten zetten”.

Dat is een van de belangrijkste redenen waarom we ons Blog Optimalisatie Pakket hebben gemaakt, om u snel de mogelijkheid te geven uw blog te vernieuwen en uw gebruikerservaring te optimaliseren.

Als het gaat om het ontwerp van een blog, zijn er verschillende factoren om naar te kijken, waaronder lettergrootte, hiërarchie, calls-to-action en tekstbreedte.

Met zoveel dingen om rekening mee te houden, kan het zenuwslopend zijn om een nieuw blogontwerp aan te nemen (maar daar kunnen we u natuurlijk mee helpen).

Dat is precies de reden waarom ik een aantal geweldige voorbeelden van gebruikersgerichte blogontwerpinspiratie wilde compileren om u te helpen uw inhoud te leveren en uw lezers terug te laten komen voor meer!

Opmerking van de auteur: Al deze blogs worden bekeken op een 13″ Macbook Pro. Wat je bekijkt kan veranderen op basis van je schermformaat. Maar het moet een consistent scherm voor de gebruikerservaring zijn.

1. Wistia
Het grootste advies dat ik kan geven bij het ontwerpen van uw blog voor gebruikers is om het leesbaar te maken.

Wat bedoel ik daarmee? Simpel gezegd, leesbaarheid en verteerbaarheid. Gebruik schone lettertypen, koppen en leg de nadruk op de inhoud.

Wistia doet dit geweldig op haar blog.

We worden geïntroduceerd met een kort overzicht van nieuwe en uitgelichte stukken, evenals een korte, specifieke themalijst.

Merk op dat er 4 onderwerpen zijn –niet 25. Hierdoor wordt de gebruikerservaring gestroomlijnd en krijgen ze gemakkelijk de inhoud waar ze het meest om geven en wordt het giswerk uit het navigeren gehaald.

Ik kan je niet vertellen hoe vaak ik naar een blog ben gegaan, alleen maar om begroet te worden met tonnen categorieën met een blogbericht erin. Waarom? Er moet een betere manier zijn!

via GIPHY

Wistia geeft je ook alle informatie die je nodig hebt om het bericht te evalueren voordat je erop klikt — de categorie, een duidelijke kop, plus een geweldig uittreksel waardoor je meer wilt lezen.

Het benadrukt ook de auteur en wanneer het gepubliceerd werd, wat misschien een kleinigheid lijkt, maar eigenlijk heel belangrijk is. Gebruikers willen weten wat ze lezen is niet verouderd en dat het is geschreven door een expert.

Het laatste stuk dat Wistia’s lijstpagina geweldig maakt in mijn boek, is de contextuele functie-afbeeldingen. Deze beelden brengen de fragmenten echt tot leven en grijpen je oog.

Schreeuw naar Chris Lavigne voor een geweldige afbeelding en artikel (het is eigenlijk super behulpzaam, check it out!)

Wistia heeft ook een super schoon en leesbaar artikelontwerp dat de nadruk legt op de inhoud en de inhoud alleen.

Het gebruik van lettertype-hiërarchieën om de secties op te splitsen maakt het makkelijker om te skimmen en het ontbreken van een sidebar helpt de bezoeker echt om nul op de inhoud te zetten, niet om afgeleid te worden.

2. 2. Drift
Het blogontwerp van Drift is een ander ontwerp dat de leesbaarheid zeker ten goede komt.

De lijstpagina is een minimale, enkele kolom met grote, mooie beelden om de interesse van de gebruiker echt te wekken en ze te laten lezen.

Virtuele verkoopsite
Het toevoegen van een geschatte leestijd is iets wat vergeten is, maar kan absoluut cruciaal zijn voor uw gebruikers.

Bent u ooit een artikel tegengekomen dat u echt wilde lezen, maar dat u niet dacht dat u genoeg tijd had en dat ook nooit heeft gedaan? Het geven van enige begeleiding over de hoeveelheid inspanning die uw gebruiker zal moeten leveren is een geweldige manier om het lezerspubliek te verbeteren. Dit laat gebruikers weten wanneer ze een artikel moeten bookmarken, in plaats van een kwart te lezen en naar iets anders te springen zonder te eindigen.

Het eigenlijke artikelontwerp van Drift is ook indrukwekkend.

Nogmaals, het volgen van de één-kolom route en het elimineren van afleidingen is een geweldige manier om de lezer aan te moedigen om de volledige blogpost af te maken en uiteindelijk het conversiepunt te bereiken dat u strategisch heeft geplaatst aan het einde — of had moeten plaatsen.

Het team doet er goed aan om zijn berichten op te splitsen met volledige kolomafbeeldingen, zodat de gebruiker niet wordt geconfronteerd met een gevreesde “muur van tekst”.

Er is geen snellere manier om iemand af te schrikken van het lezen van uw inhoud dan het te laten lijken op een ontmoedigende ervaring. Het breken van lange berichten met de juiste koppen en geweldige beelden is een veilige manier om uw lezerspubliek en leesbaarheid te vergroten.

Dat is precies waarom ik Drift moest hebben als een voorbeeld van grote gebruikersgerichte inspiratie voor het ontwerp van blogs.

3. 3. Sigstr
Een andere geweldige lay-out van de bloglijst is te zien bij Sigstr.

Het email signature bedrijf maakt gebruik van een “kaart” stijl lay-out, wat heel goed (in dit geval) of heel slecht gedaan kan worden.

U ziet meestal drie-koloms-kaartvermeldingspagina’s, waardoor de inhoud moeilijk te verteren is. Het Sigstr team heeft echter gekozen voor een tweekoloms-opmaak, wat het aantal opties beperkt en voorkomt dat er te veel berichten in één keer worden verstuurd.

Door het gebruik van de afbeeldingen wordt elke afzonderlijke kaart gemarkeerd en wil de gebruiker door alle inhoud scrollen om te zien wat hij of zij nog meer kan leren.

De enige update die ik zou aanbevelen zou zijn om het postfragment te verlengen om de gebruiker een beetje meer inzicht te geven in wat het artikel zal zijn. Met die aanpassing heb je een echte winnaar!

Als je naar het ontwerp van het artikel kijkt, is het zeer goed in elkaar gezet en gericht op de leesbaarheid voor de gebruiker.

De keuze van het lettertype en de lettergrootte van de pagina is uiterst gemakkelijk voor het oog en helpt u de pagina te doorlopen.

Een van de belangrijkste redenen waarom ik Sigstr in mijn blog webdesign inspiratielijst wilde opnemen, is het grote gebruik van de juiste lettertypes. Het gebruik van een verkeerde lijnhoogte, of die nu te groot of te klein is, kan uw leesbaarheid ernstig aantasten. Te groot en de inhoud voelt uitgerekt en moeizaam om te lezen; Te klein en het is een rommelige puinhoop die verandert in een stevig tekstblok.

Door het implementeren van een visueel aantrekkelijke regelhoogte helpt u de inhoud de ademruimte te geven die het nodig heeft om te worden geabsorbeerd en behouden.

4. 4. InVision
De blog van InVision doet een heleboel dingen heel goed.

Het grootste pluspunt voor mij is het gebruik van beschrijvende titels. Intern is het niet meer nodig om volledige postfragmenten te gebruiken, wat heel goed werkt met de aanbevolen postschuifregelaar.

Normaal gesproken ben ik tegen sliders of carrousels, maar hiervoor werkt het goed met de blogtitels en grote afbeeldingen op de achtergrond.

Onder de aanbevolen post slider, gebruikt inVision ook een 3-koloms-indeling met korte en zoete fragmenten, die bijna one-liner beschrijvingen zijn.

Het strategische gebruik van de witruimte laat elke post “ademen” en helpt de gebruiker zich te concentreren op het vinden van de inhoud waar hij om geeft in plaats van te worden gebombardeerd door te veel opties tegelijk — wat gebruikelijk is met een 3-koloms-look.

Het eigenlijke artikelontwerp is, net als bij onze andere bloginspiratiesites, eenvoudig en bestaat uit één kolom.

Mijn favoriete ding dat InVision doet is het nemen van de social sharing knoppen en de belangrijkste call-to-action (CTA) en ze te plaatsen in een navigatiebalk die plakt aan de onderkant van het scherm als de gebruiker scrolt.

Dat is een geweldige manier om ze voor ogen te houden en gemakkelijk toegankelijk te maken, zonder de aandacht af te leiden.

5. 5. DigitalMarketer
Meer inspiratie voor blogs is te vinden op DigitalMarketer.

De opleidingsorganisatie koos voor een vergelijkbare lay-out als InVision, maar dan zonder de slider/carrousel. Omdat de bovenkant van de lay-out niet uw typische blog listingpagina is, prikkelt het zeker de interesse van de gebruiker en krijgt het hem of haar te lezen.

DigitalMarketer benadrukt ook zijn gekenmerkte post in de eerste sectie die, net als anderen op deze lijst, gebruik maakt van een beschrijvende titel om de gebruiker te boeien en hem of haar meer te laten lezen.

Mijn favoriete onderdeel van deze lay-out is hoe de vier meest recente berichten worden weergegeven onder de held met nummers om ze te bestellen. Het trekt het oog, geeft een gevoel van richting, en zorgt ervoor dat je de titels bijna meteen kunt lezen.

Onder deze “featured section” krijg je een meer traditionele blog layout met de post feed aan de linkerkant en een sidebar aan de rechterkant. De post feed maakt gebruik van uittreksels om de gebruiker meer context te geven in waar het artikel over gaat en bevat een prominente lees meer knop die niet gemist kan worden.

Over het algemeen doet DigitalMarketer zijn werk door de sidebar niet te vertroebelen met advertenties of CTA’s.

Het team heeft ervoor gekozen om een eenvoudige zoekopdracht op een blog op te nemen, de populairste berichten en een enkele, waardevolle CTA-aanbieding die u op de pagina volgt.

6. Sprout Social
De volgende is Sprout Social. Ik ga het een “full-width” kaart layout noemen; het is geblokkeerd maar elke individuele blogpost vecht niet voor aandacht in het oog van de gebruiker.

De grote afbeeldingen op de blog geven een grote visuele belangstelling en leiden het oog van de lezer naar de titel. Deze lay-out zorgt ervoor dat u wilt scrollen, of door talrijke artikelen wilt vegen om te zien wat u nog meer kunt leren.

De lay-out van de typografie en de lettertype-hiërarchie zijn ook erg schoon, en net als bij de andere voorbeelden, helpen ze de lezer bezig te houden door het gemakkelijk te maken de inhoud af te romen en daadwerkelijk te verteren.

Een groot ding om te benadrukken dat Sprout Social en anderen het goed doen is niet het gebruik van volledig zwart als het lettertype kleur.