Briljante ideeën en trends voor prominente widgets voor functies
Het runnen van een succesvol online magazine vereist een solide publiek en veel hoogwaardig schrijven. Maar de lay-out van het tijdschrift speelt ook een cruciale factor in de betrokkenheid van bezoekers. Eén techniek is om een aanbevolen berichten widget bovenaan de startpagina. Dit toont de meest recent populaire artikelen om lezers idealiter verder naar de site te leiden.
In deze post wil ik graag ontwerptechnieken behandelen die kunnen worden gebruikt om een succesvolle aanbevolen postwidget te maken. Hoewel deze widget vaak het beste werkt in een lay-out in tijdschriftstijl, kunt u deze ook toepassen op kleinere blogs of websites met dynamische inhoud.
Typografisch contrast
De meeste aanbevolen berichten zijn gebaseerd op miniatuurafbeeldingen om de aandacht te trekken. Dit neemt vaak de vorm aan van een achtergrondafbeelding die is gekoppeld aan de kop van elk artikel.
Deze techniek ziet er fantastisch uit, maar dat is het moeilijk om merkbaar contrast tussen typografie en dynamische achtergrondafbeeldingen op te bouwen. Door andere tijdschriften te bestuderen, kunt u subtiele technieken ophalen om de leesbaarheid te verbeteren.
The Next Web is een groot online magazine met een prominente berichtenwidget op de startpagina. Elke miniatuur varieert in grootte, maar ze gebruiken allemaal donkere hellingen voor verbeterd contrast.
De koppen van het artikel worden onderaan miniaturenblokken boven donkere hellingen geplaatst. De lichte tekst is gemakkelijk te consumeren op een donkere achtergrond, toch dekt het ook niet het hele beeld.
Moderne ontwikkelingen in CSS3 stellen ontwikkelaars in staat om deze effecten met gemak te recreëren. Vaste verlopen zijn perfect als je ze kunt krijgen vloeiend van boven op elke miniatuur en toch laat genoeg van de afbeelding zien om aandacht te trekken.
Een enigszins andere techniek wordt gebruikt op de startpagina van Digital Trends. Deze berichtwidget gebruikt sterk contrastrijke achtergronden achter tekst om elke kop scherp en levendig te maken.
Het verschil hier is dat elke achtergrondkleur 100% vast is. U kunt de volledige miniatuurfoto dus niet zien kleine porties raken uit beeld verloren. Maar de tekst is duidelijk leesbaar wat net zo aantrekkelijk kan zijn voor bezoekers die voor het eerst op de startpagina van Digital Trends landen.
Het vinden van de juiste hoeveelheid contrast is lastig. Sommige websites zoals TechCrunch proberen tekst naast de thumbnail te plaatsen om dit probleem volledig te verwijderen.
Maar als u de ontwerpstijl van koptekst boven op een miniatuur wilt, dan wilt u dat overweeg hoe contrastfactoren in de vergelijking passen.
Sporadische beeldgroottes
De waarde van een aanbevolen berichtwidget is om functie inhoud bovenaan de pagina. Asymmetrie is een geweldige manier om ergens de aandacht op te vestigen, en in dit geval werken asymmetrische thumbnailgroottes prima.
Neem bijvoorbeeld de startpagina van ZDNet. In hun aanbevolen widget gebruikt het grootste artikel aan de linkerkant de breedste miniatuurafbeelding om meer ruimte in te nemen en hopelijk meer aandacht te trekken. Andere aanbevolen miniaturen vallen in kleinere formaten met kleinere koppen.
Merk op hoe deze rasterstructuur van nature je oog rond de pagina leidt. De blik van elke bezoeker neigt naar een bepaald gebied te vallen en beweegt dan tussen elke miniatuur totdat er iets eruit springt.
Ook plaatst ZDNet een donker verloop bovenop elke miniatuurafbeelding naar bouw typografisch contrast voor meer leesbare tekst. Fundamenteel is het een van de best gekenmerkte post-widgetontwerpen die ik ooit heb gezien.
Een zeer vergelijkbare ontwerpstijl is te vinden op de startpagina van CNET. De grootste miniatuur komt aan de linkerkant te staan, omdat de meeste bezoekers van links naar rechts lezen.
Bij het ontwerpen van je eigen aanbevolen berichtwidget voel je je niet verplicht om dezelfde techniek te volgen. U kunt elke grootte van de miniaturen gebruiken, zolang ze maar in samenhang passen en een uniforme rasterlay-out vormen.
Aangepaste miniatuurstijlen
Ontwerpkeuzen variëren sterk van lay-out tot lay-out, dus er is niemand perfecte oplossing. Gekenmerkte post-widgets zijn absoluut complexer om te ontwerpen, dus ze vereisen studie en geduld om in een aangepaste lay-out te passen.
De stijl van elke miniatuur heeft invloed op hoe de hele widget naar uw publiek kijkt. Neem bijvoorbeeld de aanbevolen widgetstijl op The Verge.
Elke miniatuur heeft een kleurrijk verloop bovenaan de foto. Dit verhoogt het contrast en verbetert de leesbaarheid, maar het voegt ook een zekere flair toe aan de website.
Sommige mensen houden niet van deze stijl omdat ze het opzichtig of onaantrekkelijk vinden. Maar het is ook nogal populair onder Verge-lezers en andere ontwerpers imiteren deze stijl.
Maar kleuren en fantasie technieken zijn niet de enige factor om te overwegen. Grids en miniaturen moeten ook zorgvuldig worden gekozen, omdat ze helpen bij het definiëren van de algehele widgetstijl voor posts.
Misschien is een van de beste voorbeelden het ontwerp van Mashable dat door de jaren heen vele fases heeft doorgemaakt. Nu beschouwd als een heersende stromingsbron voor nieuws, werkt Mashable om een groot aantal berichten op de startpagina te proppen voor gemakkelijk browsen.
Sommige berichten gebruiken kleine vierkante miniaturen terwijl hun belangrijkste scorebord een grote full-size thumbnail-banner aan het artikel aanpast. Dit vereist extra werk van de editor om ervoor te zorgen dat alle berichten de juiste foto's hebben met de juiste formaten.
Maar direct na het landen op de site zul je merken dat het zo is geeft een gevoel van geloofwaardigheid. Deze stijl voelt heel mainstream en kan door bijna elk type online magazine worden gebruikt om vertrouwen op te bouwen met de readerbasis. Het enige probleem is het schrijven van voldoende inhoud om de pagina te vullen!
Multi-post widgets
Sommige gekenmerkte post widgets tonen artikelen in a statisch raster. Dit is vaak de meest populaire keuze omdat het kan zijn responsief gemaakt en mooi met elkaar vermengd in elke lay-out.
Andere widgets vertrouwen op dynamische interacties zoals een diavoorstelling. Neem bijvoorbeeld de startpagina van Vanity Fair met hun gekenmerkte postblok bovenaan de pagina. Er wordt slechts één bericht tegelijkertijd weergegeven, maar nieuwe artikelen worden weergegeven wanneer ze boven een bepaalde kop worden gehouden.
Zowel de miniatuur- als titelautomatische update met een eenvoudige zweefinteractie. Een ding om op te merken is dat dit erg verwarrend kan zijn voor internetgebruikers die niet bekend zijn met deze dynamische hover-techniek.
Maar aan de positieve kant zal deze techniek Bespaar ruimte op de pagina door overtollige inhoud te verbergen.
Probeer de featured post-widgets niet als zwart-wit te beschouwen. Het zijn slechts paginasecties die worden gebruikt om de meest interessante of populaire artikelen weer te geven. De techniek (en) waarmee je deze taak uitvoert, kan altijd openstaan voor debat.
Complex magazine maakt gebruik van een volledige diashow-weergave voor hun widget. Elk bericht heeft een aanbevolen miniatuurweergave en het onderste verloop voor typografisch contrast.
Maar in plaats van elke thumbnail naast elkaar de artikelen te plaatsen dynamisch streamen door een diavoorstelling box. Navigatie kan automatisch worden ingesteld of geregeld door pijlkoppelingen. Dit ontwerp bespaart veel ruimte en zorgt ervoor dat de gebruiker meer bereid is om met de pagina te communiceren.
Afronden
Er is geen goed of fout ontwerp als het gaat om aanbevolen postdisplays. Ze delen allemaal veel vergelijkbare eigenschappen, maar elk tijdschrift gebruikt zijn eigen stijl voor het organiseren van aanbevolen inhoud.
Ik hoop dat dit bericht praktische tips biedt om te gebruiken bij het ontwerpen van je eigen widget met aanbevolen berichten. Als je je ooit vast voelt, kijk dan naar andere tijdschriften voor inspiratie. Zoek eigenschappen die u leuk vindt en zoek uit hoe u ze kunt nabootsen om op te nemen in uw eigen tijdschriftontwerp.
