Brilliant Ideas & Trends for Prominent Feature Post Widgets
At køre et vellykket online magasin kræver et solid publikum og masser af høj kvalitet skriftligt. Men magasinets layout spiller også en afgørende rolle i gæsternes engagement. En teknik er at skabe en featured indlæg widget øverst på hjemmesiden. Dette viser de seneste populære artikler, der ideelt set kører læsere længere ind på webstedet.
I dette indlæg vil jeg gerne dække designteknikker, som kan bruges til at skabe en vellykket fremhævet post-widget. Selvom denne widget ofte fungerer bedst på et bladformatlayout, kan du også anvende det på mindre blogs eller dynamiske indholdswebsteder.
Typografisk kontrast
Mest populære indlæg stole på miniaturebilleder for at henlede opmærksomheden. Dette tager ofte form af et baggrundsbilde knyttet til hver artiklen overskrift.
Denne teknik ser fantastisk ud, men det er svært at opbygge mærkbar kontrast mellem typografi og dynamiske baggrundsbilleder. Ved at studere andre magasiner kan du hente underlige teknikker for at forbedre læsbarheden.
Next Web er et stort online magasin med en fremtrædende indlæg widget på hjemmesiden. Hver miniaturebillede varierer i størrelse, men de bruger alle mørke gradienter for forbedret kontrast.
Artikeloverskrifter placeres i bunden af miniatureblokke oven på mørke gradienter. Det let tekst er let at forbruge på en mørk baggrund, men det dækker heller ikke hele billedet.
Moderne fremskridt i CSS3 giver udviklere mulighed for at genskabe disse effekter med lethed. Faste gradienter er perfekte, hvis du kan få dem til flyde naturligt oven på hver miniature og stadig vise nok af billedet at fange opmærksomhed.
En lidt anden teknik bruges på hjemmesiden for Digital Trends. Denne indlæg widget bruger høj kontrast solid baggrund bag teksten for at gøre hver overskrift skarp og levende.
Forskellen her er, at hver baggrundsfarve er 100% solid. Du kan ikke se hele miniaturebilledet så små portioner er tabt fra visning. Men teksten er tydelig læselig, hvilket kan være lige så attraktivt for besøgende, der lander først på Digital Trends hjemmeside.
At finde den rigtige mængde kontrast er vanskelig. Nogle websteder som TechCrunch forsøger at placere tekst ved siden af miniaturen for at fjerne dette problem helt.
Men hvis du kan lide design stilen på overskriften tekst oven på en miniature, vil du gerne overvej hvordan kontrastfaktorer indgår i ligningen.
Sporadiske billedstørrelser
Værdien af en featured post-widget er at funktion indhold øverst på siden. Asymmetri er en fantastisk måde at gøre opmærksom på noget, og i så fald fungerer asymmetriske thumbnailstørrelser godt.
Tag for eksempel hjemmesiden til ZDNet. I deres udvalgte widget bruger den største artikel på venstre side det bredeste miniaturebillede til at optage mere plads og forhåbentlig øge opmærksomheden. Andre udvalgte miniaturebilleder falder i mindre størrelser med mindre overskrifter.
Bemærk, hvordan denne netstruktur naturligt fører øjet rundt på siden. Hvert besøgendes blik har tendens til at falde i et bestemt område, og derefter flytte mellem hver miniature, indtil noget hopper ud.
Også ZDNet placerer a mørk gradient oven på hvert miniaturebillede til bygge typografisk kontrast for mere læsbar tekst. Grundlæggende er det en af de bedst fremhævede post widget designs, jeg nogensinde har set.
En meget lignende design stil findes på CNET's hjemmeside. Den største miniaturebillede er placeret på venstre side, da de fleste besøgende læser fra venstre mod højre.
Når du designer din egen featured post-widget, føler du dig ikke forpligtet til at følge denne samme teknik. Du kan gå med enhver miniature størrelse, så længe de passer sammen sammen og danner et samlet grid layout.
Brugerdefinerede miniaturebilleder
Design valg varierer meget fra layout til layout, så der er ingen perfekt løsning. Udvalgte indlæg widgets er absolut mere komplekse at designe, så de kræver undersøgelse og tålmodighed for at passe ind i et brugerdefineret layout.
Stilen på hver miniaturebillede påvirker, hvordan hele widgeten ser ud til dit publikum. Tag for eksempel den udvalgte widgetstil, der findes på The Verge.
Hver miniaturebillede har en farverig gradient oven på billedet. Dette øger kontrast og forbedrer læsbarheden, men det tilføjer også en vis flair til hjemmesiden.
Nogle mennesker kan ikke lide denne stil, fordi de finder det skinnende eller ubehageligt. Men det er også temmelig populært blandt Verge-læsere, og andre designere efterligner denne stil.
Men farver og fancy teknikker er ikke den eneste faktor at overveje. Grids og thumbnail størrelser skal også vælges omhyggeligt, da de hjælper med at definere den generelle indstillede indlæg widget stil.
Måske er et af de bedste eksempler Mashables design, der har gennemgået mange faser gennem årene. Nu betragtes som en generel kilde til nyheder, arbejder Mashable for at få fat i et stort antal indlæg på hjemmesiden for nem browsing.
Nogle indlæg bruger små firkantede miniaturebilleder, mens deres vigtigste leaderboard retter en stor fuld størrelse miniature banner til artiklen. Dette skal kræve ekstra arbejde fra redaktøren for at sikre, at alle indlæg har deres relevante fotos i de rigtige størrelser.
Men lige efter landing på stedet vil du bemærke det giver en følelse af troværdighed. Denne stil føles meget almindelig og kan bruges af næsten enhver form for online magasin til at opbygge tillid med læseren. Det eneste problem er at skrive nok indhold til at fylde siden!
Multi-Post Widgets
Nogle featured post widgets viser artikler i en statisk net. Dette er ofte det mest populære valg, fordi det kan være gjort lydhør og smelter godt sammen ind i ethvert layout.
Andre widgets er afhængige af dynamiske interaktioner som et diasshow. Tag for eksempel hjemmesiden til Vanity Fair med deres featured postblok øverst på siden. Kun ét indlæg vises ad gangen, men nye artikler vises, når du svinger over en bestemt overskrift.
Både miniaturen og titlen auto-opdatering med en simpel hover interaktion. En ting at bemærke er, at dette kan være meget forvirrende for internetbrugere, der ikke er bekendt med denne dynamiske hoverteknik.
Men på den positive side vil denne teknik spare plads på siden ved at gemme overskydende indhold.
Prøv ikke at tænke på featured post widgets som sort-hvid. De er bare sideafsnit, der bruges til at indeholde de mest interessante eller populære artikler. Den teknik (er), hvormed du udfører denne opgave, kan altid være åben til debat.
Komplekse magasin bruger et komplet lysbilledshow for deres udvalgte widget. Hvert indlæg har et fremhævet miniaturebillede sammen med den nederste gradient for typografisk kontrast.
Men i stedet for at placere hver miniature side om side, artiklerne strømme dynamisk gennem et lysbilledshow. Navigation kan indstilles automatisk eller styres af pilekoblinger. Dette design sparer meget plads og holder brugeren mere villig til at interagere med siden.
Wrap Up
Der er intet rigtigt eller forkert design, når det kommer til featured postdisplays. De deler alle mange lignende træk, men hver magasin bruger deres egen stil til at organisere fremhævet indhold.
Jeg håber, at dette indlæg tilbyder praktiske tips til brug, når du designer din egen featured indlægs widget. Hvis du nogensinde har det, skal du bare kigge på andre magasiner til inspiration. Find træk, du kan lide, og find ud af, hvordan du replikerer dem til at blande ind i dit eget bladdesign.
