Idee e tendenze brillanti per i prominenti widget Feature Post

Gestire una rivista online di successo richiede un pubblico solido e molta scrittura di alta qualità. Ma il layout della rivista gioca anche un fattore cruciale nel coinvolgimento dei visitatori. Una tecnica è creare un widget di messaggi in primo piano nella parte superiore della home page. Questo mostra gli articoli più popolari per guidare idealmente i lettori più avanti nel sito.

In questo post mi piacerebbe illustrare le tecniche di progettazione che possono essere utilizzate per creare un widget post di successo. Sebbene questo widget funzioni spesso meglio su un layout in stile rivista, puoi applicarlo anche a blog più piccoli o a siti Web con contenuti dinamici.

Contrasto tipografico

La maggior parte dei post in primo piano si basano su immagini in miniatura per attirare l'attenzione. Questo spesso assume la forma di un'immagine di sfondo legata al titolo di ogni articolo.

Questa tecnica sembra fantastica ma è così Difficile creare contrasto tra la tipografia e le immagini di sfondo dinamiche. Studiando altre riviste puoi raccogliere tecniche sottili per migliorare la leggibilità.

The Next Web è una grande rivista online con un widget di post prominente sulla home page. Ogni miniatura ha dimensioni variabili ma tutte le utilizzano gradienti scuri per un migliore contrasto.

I titoli degli articoli sono posizionati nella parte inferiore dei blocchi di miniature in cima alle sfumature scure. Il il testo chiaro è facile da consumare su uno sfondo scuro, eppure non copre l'intera immagine neanche.

I progressi moderni in CSS3 consentono agli sviluppatori di ricreare questi effetti con facilità. I gradienti fissi sono perfetti se puoi ottenerli fluire naturalmente sopra ogni miniatura e ancora mostra abbastanza dell'immagine per catturare l'attenzione.

Una tecnica leggermente diversa viene utilizzata nella home page di Digital Trends. Utilizza questo widget post sfondi solidi ad alto contrasto dietro al testo per rendere ogni titolo nitido e vibrante.

La differenza qui è che ogni colore di sfondo è solido al 100%. Non puoi vedere l'intera miniatura della foto così piccole porzioni vengono perse dalla vista. Ma il testo è chiaramente leggibile, il che può essere altrettanto attraente per i visitatori che atterrano per la prima volta sulla homepage di Digital Trends.

Trovare la giusta quantità di contrasto è difficile. Alcuni siti Web come TechCrunch cercano di posizionare il testo accanto alla miniatura per rimuovere completamente questo problema.

Ma se ti piace lo stile di design del testo principale sopra una miniatura che vorresti considerare come i fattori di contrasto nell'equazione.

Dimensioni dell'immagine sporadica

Il valore di un widget di post in evidenza è contenuto della funzione in cima alla pagina. L'asimmetria è un ottimo modo per attirare l'attenzione su qualcosa, e in questo caso le dimensioni delle miniature asimmetriche funzionano alla grande.

Prendi ad esempio la homepage di ZDNet. Nel loro widget in primo piano, l'articolo più grande sul lato sinistro utilizza l'immagine in miniatura più ampia per occupare più spazio e, auspicabilmente, attirare più attenzione. Le altre miniature in primo piano cadono in dimensioni più piccole con titoli più piccoli.

Nota come questa struttura della griglia porti naturalmente lo sguardo intorno alla pagina. Lo sguardo di ogni visitatore tende a cadere in una particolare area, quindi si sposta tra ciascuna miniatura fino a quando qualcosa salta fuori.

Anche ZDNet piazza a gradiente scuro in cima a ciascuna immagine in miniatura costruire contrasto tipografico per un testo più leggibile. Fondamentalmente è uno dei migliori progetti di widget post che io abbia mai visto.

Uno stile di design molto simile può essere trovato sulla homepage di CNET. La miniatura più grande si trova sul lato sinistro poiché la maggior parte dei visitatori legge da sinistra a destra.

Quando progetti il ​​tuo widget di post in primo piano non ti senti obbligato a seguire questa stessa tecnica. Puoi andare con qualsiasi dimensione dell'anteprima a patto che si uniscano in modo coerente e formino un layout di griglia unificato.

Stili miniatura personalizzati

Le scelte di progettazione variano ampiamente dal layout al layout, quindi non esiste una soluzione perfetta. I widget post in primo piano sono decisamente più complessi da progettare, quindi richiedono studio e pazienza per adattarsi a un layout personalizzato.

Lo stile di ciascuna miniatura influisce sul modo in cui l'intero widget guarda al tuo pubblico. Prendiamo ad esempio lo stile widget in primo piano trovato su The Verge.

Ogni miniatura ha una sfumatura colorata sulla parte superiore della foto. Ciò aumenta il contrasto e migliora la leggibilità, ma aggiunge anche un certo tocco al sito web.

Ad alcune persone questo stile non piace perché lo trovano sgargiante o poco attraente. Ma è anche piuttosto popolare tra i lettori di Verge e altri designer stanno imitando questo stile.

Ma i colori e le tecniche di fantasia non sono l'unico fattore da considerare. Anche le griglie e le dimensioni delle miniature devono essere scelte con attenzione in quanto aiutano a definire lo stile del widget per i post in primo piano.

Forse uno dei migliori esempi è il design di Mashable che ha attraversato molte fasi nel corso degli anni. Considerata ormai una fonte principale di notizie, Mashable lavora per stipare un gran numero di post sulla homepage per una facile navigazione.

Alcuni post utilizzano piccole miniature quadrate mentre la loro classifica principale corregge un grande banner con miniature a grandezza naturale per l'articolo. Ciò deve richiedere un lavoro extra dall'editor per garantire che tutti i post abbiano le foto appropriate con le dimensioni corrette.

Ma subito dopo l'atterraggio sul sito lo noterai emana un senso di credibilità. Questo stile è molto tradizionale e può essere utilizzato da quasi tutti i tipi di riviste online per creare fiducia con il readerbase. L'unico problema è scrivere abbastanza contenuti per riempire la pagina!

Widget a più post

Alcuni widget post in vetrina visualizzano articoli in a griglia statica. Questa è spesso la scelta più popolare perché può essere reso sensibile e si mescola bene in qualsiasi layout.

Altri widget si basano su interazioni dinamiche come una presentazione. Prendiamo ad esempio la homepage di Vanity Fair con il loro postblocco in primo piano nella parte superiore della pagina. Viene mostrato un solo post per volta, ma i nuovi articoli vengono visualizzati quando si passa sopra un determinato titolo.

Aggiornamento automatico del titolo e della miniatura con una semplice interazione al passaggio del mouse. Una cosa da notare è che questo può essere molto confuso per gli utenti di Internet che non hanno familiarità con questa tecnica di hover dinamica.

Ma sul lato positivo questa tecnica lo farà risparmiare spazio sulla pagina nascondendo il contenuto in eccesso.

Cerca di non pensare ai widget post in evidenza come in bianco e nero. Sono solo sezioni di pagina utilizzate per presentare gli articoli più interessanti o più popolari. Le tecniche con le quali svolgi questo compito possono sempre essere aperte al dibattito.

La rivista complessa utilizza una visualizzazione di presentazione completa per il widget in primo piano. Ogni post ha una miniatura in primo piano insieme al gradiente in basso per il contrasto tipografico.

Ma invece di posizionare ogni miniatura una accanto all'altra, gli articoli flusso dinamico attraverso una finestra di presentazione. La navigazione può essere impostata automaticamente o controllata da collegamenti a freccia. Questo design consente di risparmiare molto spazio e consente all'utente di interagire maggiormente con la pagina.

Incartare

Non esiste un design giusto o sbagliato quando si tratta di display in primo piano. Tutti condividono molti tratti simili, ma ogni rivista utilizza il proprio stile per l'organizzazione di contenuti in primo piano.

Spero che questo post offra suggerimenti pratici da utilizzare durante la progettazione del widget per i messaggi in primo piano. Se ti senti mai bloccato basta guardare ad altre riviste per l'ispirazione. Trova i tratti che ti piacciono e scopri come replicarli per fonderti con il design della tua rivista.