Strålende ideer og trender for fremtredende Feature Post Widgets
Å kjøre et vellykket nettmagasin krever et solid publikum og mye høykvalitetsskriving. Men magasinets layout spiller også en avgjørende rolle i besøkendes engasjement. En teknikk er å skape en utvalgt innlegg widget øverst på hjemmesiden. Dette viser de nyeste artiklene som ideelt sett kjører leserne videre inn på nettstedet.
I dette innlegget vil jeg gjerne dekke designteknikker som kan brukes til å lage en vellykket funksjonell innleggsmodul. Selv om denne widgeten ofte fungerer best i et magasinformat, kan du også bruke dette til mindre blogger eller dynamiske innholdswebsteder.
Typografisk kontrast
Mest kjente innlegg stole på miniatyrbilder for å trekke oppmerksomhet. Dette tar ofte form av et bakgrunnsbilde knyttet til hver artikkeloverskrift.
Denne teknikken ser fantastisk ut, men det er vanskelig å bygge merkbar kontrast mellom typografi og dynamiske bakgrunnsbilder. Ved å studere andre magasiner kan du plukke opp subtile teknikker for å forbedre lesbarheten.
Next Web er et stort nettmagasin med en fremtredende innleggsmodul på hjemmesiden. Hver miniatyrbilde varierer i størrelse, men de bruker alle mørke gradienter for bedre kontrast.
Artikkeloverskrifter plasseres på bunnen av miniatyrblokkene på toppen av mørke gradienter. De Lett tekst er lett å konsumere på en mørk bakgrunn, men det dekker heller ikke hele bildet.
Moderne fremskritt i CSS3 tillater utviklere å gjenskape disse effektene med letthet. Faste gradienter er perfekte hvis du kan få dem til flyte naturlig på toppen av hver miniatyrbilde og fremdeles vise nok av bildet å fange oppmerksomhet.
En litt annen teknikk brukes på hjemmesiden til Digital Trends. Denne innlegg-widgeten bruker høy kontrast solid bakgrunn bak tekst for å gjøre hver overskrift skarp og levende.
Forskjellen her er at hver bakgrunnsfarge er 100% solid. Du kan ikke se hele miniatyrbildet slik små porsjoner går tapt fra utsikten. Men teksten er tydelig lesbar, noe som kan være like attraktiv for besøkende som lander først på Digital Trends hjemmeside.
Å finne riktig mengde kontrast er vanskelig. Noen nettsteder som TechCrunch prøver å plassere tekst ved siden av miniatyrbildet for å fjerne dette problemet helt.
Men hvis du liker design stilen med overskriftstekst på toppen av et miniatyrbilde du vil vurdere hvordan kontrastfaktorer inn i ligningen.
Sporadiske bildestørrelser
Verdien av en omtalt innlegg-widget er å funksjonsinnhold øverst på siden. Asymmetri er en fin måte å gi oppmerksomhet mot noe, og i så fall fungerer asymmetriske miniatyrstørrelser stor.
Ta for eksempel hjemmesiden til ZDNet. I deres utvalgt widget bruker den største artikkelen på venstre side det bredeste miniatyrbildet til å ta opp mer plass og forhåpentligvis trekke mer oppmerksomhet. Andre funksjoner som miniatyrbilder faller i mindre størrelser med mindre overskrifter.
Legg merke til hvordan denne nettstrukturen naturlig fører øyet rundt siden. Hvert besøkendes blikk har en tendens til å falle i et bestemt område, og deretter flytte mellom hver miniatyrbilde til noe hopper ut.
Også ZDNet plasserer a mørk gradient på toppen av hvert miniatyrbilde til bygge typografisk kontrast for mer lesbar tekst. I utgangspunktet er det en av de mest populære innleggsmodelldesignene jeg noensinne har sett.
En veldig lignende design stil kan bli funnet på CNETs hjemmeside. Den største miniatyrbilden tar plass på venstre side siden de fleste besøkende leser fra venstre til høyre.
Når du designer din egen funksjonelle innleggsmodul, føler du deg ikke forpliktet til å følge denne samme teknikken. Du kan gå med hvilken som helst miniatyrstørrelse så lenge de passer sammen sammen og danner et samlet gridoppsett.
Tilpassede miniatyrer stiler
Designvalg varierer mye fra layout til layout, så det er ingen perfekt løsning. Utvalgte post-widgets er definitivt mer komplekse å designe, så de krever studier og tålmodighet for å passe inn i et tilpasset layout.
Stilen på hver miniatyrbilde påvirker hvordan hele widgeten ser ut til publikum. Ta for eksempel den populære widgetstilen som finnes på The Verge.
Hver miniatyrbilde har en fargerik gradient på toppen av bildet. Dette øker kontrasten og forbedrer lesbarheten, men det legger også til en viss flair på nettsiden også.
Noen mennesker liker ikke denne stilen fordi de finner det skinnende eller unappealing. Men det er også ganske populært blant Verge-leserne, og andre designere etterligner denne stilen.
Men farger og fancy teknikker er ikke den eneste faktoren å vurdere. Grids og miniatyrstørrelser må også velges nøye ettersom de bidrar til å definere den generelle funksjonen for innleggets widget.
Kanskje et av de beste eksemplene er Mashables design som har gått gjennom mange faser gjennom årene. Nå regnes som en generell kilde til nyheter, arbeider Mashable for å legge et stort antall innlegg på hjemmesiden for enkel surfing.
Noen innlegg bruker små firkantede miniatyrbilder mens deres hovedlederbrett retter en stor fullstendig miniatyrbanner til artikkelen. Dette må kreve ekstra arbeid fra redaktøren for å sikre at alle innlegg har de riktige bildene i riktige størrelser.
Men rett etter landingen på nettstedet vil du legge merke til det gir en følelse av troverdighet. Denne stilen føles veldig vanlig og kan brukes av nesten alle typer nettmagasin for å bygge tillit med leserbase. Det eneste problemet er å skrive nok innhold for å fylle opp siden!
Multi-post Widgets
Noen funksjoner som inneholder widgets, viser artikler i en statisk rutenett. Dette er ofte det mest populære valget fordi det kan være gjort responsive og blander pent inn i hvilken som helst layout.
Andre widgets stole på dynamiske interaksjoner som en lysbildeserie. Ta for eksempel hjemmesiden til Vanity Fair med deres omtalt postblokk øverst på siden. Bare ett innlegg vises samtidig, men nye artikler vises når du svinger over en bestemt overskrift.
Både miniatyrbilde og tittel automatisk oppdatering med en enkel sveverinteraksjon. En ting å merke seg er at dette kan være veldig forvirrende for Internett-brukere som ikke er kjent med denne dynamiske hoverteknikken.
Men på den positive siden vil denne teknikken spare plass på siden ved å gjemme overflødig innhold.
Forsøk å ikke tenke på funksjoner som widgets som svart-hvitt. De er bare sidestykker som brukes til å ha de mest interessante eller populære artiklene. Teknikken (e) som du utfører denne oppgaven kan alltid være åpen for debatt.
Kompleksmagasinet bruker en full lysbildefremvisning for deres utvalgt widget. Hvert innlegg har et omtalt miniatyrbilde sammen med bunngradienten for typografisk kontrast.
Men i stedet for å plassere hver miniatyr side om side, artiklene streame dynamisk gjennom en lysbildefremvisning. Navigasjon kan settes automatisk eller styres av pilekoblinger. Dette designet sparer mye plass og holder brukeren mer villig til å samhandle med siden.
Wrap Up
Det er ingen riktig eller feil design når det gjelder funksjonelle innleggskilder. De deler alle mange liknende egenskaper, men hvert magasin bruker sin egen stil for å organisere utvalgt innhold.
Jeg håper dette innlegget inneholder praktiske tips som skal brukes når du designer din egen populære innleggspakke. Hvis du føler deg fast, bare se på andre magasiner for inspirasjon. Finn trekk som du liker og finne ut hvordan du replikerer dem for å blande inn i ditt eget magasindesign.
