Brilliant Ideas & Trends för framträdande Feature Post Widgets
Att driva en framgångsrik online magasin kräver en solid publik och mycket högkvalitativt skrivande. Men magasinens layout spelar också en avgörande roll för besökarnas engagemang. En teknik är att skapa en featured inlägg widget högst upp på hemsidan. Detta visar de senaste populära artiklarna för att idealiskt köra läsare vidare på webbplatsen.
I det här inlägget vill jag täcka designtekniker som kan användas för att skapa en framgångsrik inbyggd post widget. Även om den här widgeten ofta fungerar bäst i en magasinlayout, kan du också använda den på mindre bloggar eller webbplatser med dynamisk innehåll.
Typografisk kontrast
Mest presenterade inlägg litar på miniatyrbilder för att dra uppmärksamhet. Detta tar ofta formen av en bakgrundsbild kopplad till varje artikelrubrik.
Denna teknik ser fantastiskt ut, men det är det svårt att skapa märkbar kontrast mellan typografi och dynamiska bakgrundsbilder. Genom att studera andra tidskrifter kan du hämta subtila tekniker för att förbättra läsbarheten.
Nästa webb är en stor onlinemagasin med en framstående inläggs widget på hemsidan. Varje miniatyrbild varierar i storlek men alla använder dem mörka gradienter för förbättrad kontrast.
Artikelrubriker placeras längst ner på miniatyrbilderna ovanpå mörka gradienter. De lätt text är lätt att konsumera på en mörk bakgrund, men det täcker inte heller hela bilden.
Moderna framsteg i CSS3 tillåter utvecklare att enkelt återskapa dessa effekter. Fasta gradienter är perfekta om du kan få dem till flöde naturligt ovanpå varje miniatyrbild och fortfarande visa upp tillräckligt med bilden att fånga uppmärksamhet.
En något annorlunda teknik används på hemsidan för Digital Trends. Denna post widget använder hög kontrast fast bakgrund bakom text för att göra varje rubrik skarp och vibrerande.
Skillnaden här är att varje bakgrundsfärg är 100% solid. Du kan inte se hela miniatyrbildet så små portioner är förlorade från utsikten. Men texten är tydlig läsbar vilket kan vara lika tilltalande för besökare som landar först på Digital Trends hemsida.
Att hitta rätt mängd kontrast är knepigt. Några webbplatser som TechCrunch försöker placera text bredvid miniatyren för att helt och hållet ta bort problemet.
Men om du gillar designstilen för rubriktext ovanpå en miniatyrbild så vill du överväga hur kontrastfaktorerna i ekvationen.
Sporadiska bildstorlekar
Värdet på en inbäddad inläggs widget är till innehållsinnehåll längst upp på sidan. Asymmetri är ett bra sätt att få uppmärksamhet mot någonting, och i så fall fungerar asymmetriska miniatyrstorleken bra.
Ta till exempel hemsidan för ZDNet. I sin utvalda widget använder den största artikeln på vänster sida den bredaste miniatyrbilden för att ta upp mer utrymme och förhoppningsvis uppmärksamma mer. Andra miniatyrer i miniatyrer faller i mindre storlekar med mindre rubriker.
Lägg märke till hur den här rutnätstrukturen naturligtvis leder ditt öga runt sidan. Varje besökares blick tenderar att falla i ett visst område, sedan flytta mellan varje miniatyrbild tills något hoppar ut.
ZDNet placerar också a mörk gradient ovanpå varje miniatyrbild till bygg typografisk kontrast för mer läsbar text. Grunden är det en av de bästa presenterade inlägget widgetar jag någonsin har sett.
En mycket liknande designstil finns på CNET: s hemsida. Den största miniatyrbilden tar sin plats på vänster sida eftersom de flesta besökare läser från vänster till höger.
När du utformar din egen inbyggda post-widget känner du dig inte skyldig att följa samma teknik. Du kan gå med en miniatyrstorlek så länge de passar samman sammanhängande och bildar en enhetlig rutnätlayout.
Anpassade miniatyrstilar
Designalternativ varierar mycket från layout till layout så det finns ingen perfekt lösning. Utvalda post widgets är definitivt mer komplexa att designa, så de kräver studier och tålamod att passa in i en anpassad layout.
Stilen på varje miniatyrbild påverkar hur hela widgeten ser ut till din målgrupp. Ta till exempel den utvalda widgetstilen som finns på The Verge.
Varje miniatyrbild har en färgstark gradient ovanpå bilden. Detta ökar kontrast och förbättrar läsbarheten, men det lägger också till en viss känsla för webbplatsen också.
Vissa människor gillar inte den här stilen eftersom de tycker att det är galet eller obehagligt. Men det är också ganska populärt bland Verge-läsare och andra designers efterliknar denna stil.
Men färger och snyggingstekniker är inte den enda faktorn att överväga. Grids och miniatyrstorlekar måste också väljas noggrant eftersom de hjälper till att definiera den övergripande inlägget widgetstil.
Kanske är ett av de bästa exemplen Mashables design som har gått igenom många faser genom åren. Nu betraktas som en vanlig källa för nyheter, arbetar Mashable för att klämma in ett stort antal inlägg på hemsidan för enkel surfning.
Vissa inlägg använder små fyrkantiga miniatyrbilder medan deras huvudsakliga leaderboard åtgärdar en stor full-size miniatyrbanner till artikeln. Detta måste kräva extra arbete från redaktören för att säkerställa att alla inlägg har sina lämpliga foton i rätt storlek.
Men strax efter landningen på platsen märker du det ger en känsla av trovärdighet. Denna stil känns väldigt vanligt och kan användas av nästan vilken typ av onlinemagasin som helst för att bygga förtroende med läsaren. Det enda problemet är att skriva tillräckligt med innehåll för att fylla på sidan!
Multi-Post Widgets
Några utvalda post widgets visar artiklar i en statiskt rutnät. Detta är ofta det mest populära valet eftersom det kan vara gjort responsivt och smälter fint in i vilken layout som helst.
Andra widgets bygger på dynamiska interaktioner som ett bildspel. Ta till exempel hemsidan för Vanity Fair med deras utvalda postblock högst upp på sidan. Endast ett inlägg visas samtidigt, men nya artiklar visas när de svävar över en viss rubrik.
Både miniatyrbilden och den automatiska uppdateringen av titeln med en enkel hover-interaktion. En sak att notera är att detta kan vara mycket förvirrande för Internetanvändare som inte är bekanta med denna dynamiska svängteknik.
Men på den positiva sidan kommer denna teknik att spara utrymme på sidan genom att dölja överskjutande innehåll.
Försök att inte tänka på utvalda post widgets som svartvit. De är bara sidavsnitt som används för att presentera de mest intressanta eller populära artiklarna. Tekniken (erna) genom vilken du utför denna uppgift kan alltid vara öppen för debatt.
Komplexa tidningen använder en fullständig bildspelskärm för deras utrustade widget. Varje inlägg har en featured miniatyrbild tillsammans med den nedre gradienten för typografisk kontrast.
Men i stället för att placera varje miniatyr sida vid sida, artiklarna strömma dynamiskt genom en bildspelslåda. Navigering kan ställas in automatiskt eller styras av pillänkar. Denna design sparar mycket utrymme och håller användaren mer villig att samverka med sidan.
Sammanfatta
Det finns ingen rätt eller fel design när det gäller utvalda inläggsskärmar. De delar alla många liknande drag, men varje tidning använder sin egen stil för att organisera innehållet.
Jag hoppas att detta inlägg erbjuder praktiska tips att använda när du utformar din egen inbyggda inläggs widget. Om du någonsin känner dig fast, titta bara på andra tidningar för inspiration. Hitta egenskaper som du gillar och ta reda på hur du replikerar dem för att blanda in i din egen tidningsdesign.
