Pagina principala » Web design » Idei și tendințe strălucitoare pentru widgeturile proeminente Feature Post

    Idei și tendințe strălucitoare pentru widgeturile proeminente Feature Post

    Realizarea unei reviste online de succes necesită o audiență solidă și o mulțime de scris de înaltă calitate. Dar aspectul revistei joacă, de asemenea, un factor crucial în implicarea vizitatorilor. O tehnică este crearea unui widget-ul postărilor recomandate în partea de sus a paginii de pornire. Acest lucru prezintă cele mai recente articole populare, pentru a duce în mod ideal cititorii în continuare pe site.

    În acest post aș dori să acopere tehnici de proiectare care pot fi folosite pentru a crea un widget de post feature feature. Deși acest widget funcționează cel mai bine într-un aspect în stil revistă, puteți aplica acest lucru și în cazul blogurilor mai mici sau al site-urilor cu conținut dinamic.

    Contrast tipografic

    Majoritatea postărilor recomandate se bazează pe imagini miniatură pentru a atrage atenția. Acest lucru ia adesea forma unei imagini de fundal legată de fiecare titlu al articolului.

    Această tehnică arată fantastic, dar este greu de construit un contrast evident între tipografia și imaginile de fundal dinamice. Prin studierea altor reviste poți să iei tehnici subtile pentru a îmbunătăți lizibilitatea.

    Următorul Web este o revistă online mare, cu un widget proeminent de postări pe pagina principală. Fiecare miniatură variază în funcție de mărime, dar toate utilizează gradiente întunecate pentru un contrast îmbunătățit.

    Titlurile articolelor sunt plasate în partea de jos a blocurilor de miniaturi deasupra gradientelor întunecate. textul ușor este ușor de consumat pe un fundal închis, totuși nu acoperă nici întreaga imagine.

    Progresele moderne în CSS3 permit dezvoltatorilor să recreeze cu ușurință aceste efecte. Gradienții fixați sunt perfecți dacă le puteți aduce curge natural peste fiecare miniatură și totuși scoateți suficient imaginea pentru a atrage atenția.

    O tehnică puțin diferită este utilizată pe pagina de pornire a Tendințelor Digitale. Acest widget post utilizează Contrast puternic de fundal solid în spatele textului, pentru ca fiecare titlu să fie clar și vibrant.

    Diferența este că fiecare culoare de fundal este 100% solidă. Nu puteți vedea întreaga fotografie miniatură porțiuni mici sunt pierdute din vedere. Dar textul este clar lizibil, ceea ce poate fi la fel de atrăgător pentru vizitatorii care aterizează prima dată pe pagina de pornire a tendințelor digitale.

    Găsirea cantității potrivite de contrast este dificilă. Unele site-uri precum TechCrunch încearcă să introducă text lângă miniatură pentru a elimina complet această problemă.

    Dar dacă vă place stilul de design al textului de titlu pe partea de sus a unei miniaturi veți dori să ia în considerare modul în care factorii de contrast în ecuație.

    Dimensiuni sporadice de imagine

    Valoarea unui widget post recomandat este de a conținut de conținut În partea de sus a paginii. Asimetria este o modalitate excelentă de a atrage atenția asupra unui lucru, iar în acest caz dimensiunile miniatură asimetrice funcționează excelent.

    Luați de exemplu pagina de pornire a ZDNet. În widgetul lor recomandat, cel mai mare articol din partea stângă folosește cea mai largă imagine miniaturală pentru a ocupa mai mult spațiu și, sperăm, atrage mai multă atenție. Alte miniaturi prezentate se încadrează în dimensiuni mai mici, cu titluri mai mici.

    Observați cum această structură a grilei vă duce în mod natural ochiul în jurul paginii. Viziunea fiecărui vizitator tinde să cadă într-o anumită zonă, apoi să se miște între fiecare miniatură până când ceva iese.

    De asemenea, ZDNet plasează a gradient întunecat deasupra fiecărei imagini miniatură construi contrastul tipografic pentru text mai ușor de citit. În mod fundamental, acesta este unul dintre cele mai bune modele de post widgeturi postate pe care le-am văzut vreodată.

    Un stil de design foarte asemănător poate fi găsit pe pagina de pornire a CNET. Cea mai mare miniatură își are locul în partea stângă, deoarece majoritatea vizitatorilor citește de la stânga la dreapta.

    Când vă proiectați propriul widget postat, nu vă simțiți obligat să urmați aceeași tehnică. Puteți merge cu orice dimensiune miniatură atâta timp cât ele se potrivesc împreună și formează o structură unificată a rețelei.

    Custom Stiluri de miniaturi

    Alegerile de proiectare variază foarte mult de la aspect la aspect, astfel încât nu există o soluție perfectă. Widgeturile postate recomandate sunt cu siguranță mai complexe pentru a fi proiectate, astfel încât acestea necesită studii și răbdare pentru a se încadra într-un aspect personalizat.

    Stilul fiecărei miniaturi afectează aspectul întregului widget pentru publicul dvs. Luați, de exemplu, stilul widget-ului recomandat găsit pe The Verge.

    Fiecare miniatură are un gradient colorat deasupra fotografiei. Acest lucru sporește contrastul și îmbunătățește lizibilitatea, dar, de asemenea, adaugă un anumit sens la site-ul web.

    Unii oameni nu-i plac acest stil pentru că îl consideră gălăgios sau neatins. Dar, de asemenea, este destul de popular printre cititorii Verge și alți designeri imită acest stil.

    Dar culorile și tehnicile fanteziste nu sunt singurul factor de luat în considerare. Grilele și dimensiunile de miniaturi trebuie, de asemenea, să fie alese cu atenție, deoarece acestea ajută la definirea stilului widget-urilor cu funcții generale.

    Poate că unul dintre cele mai bune exemple este designul lui Mashable care a trecut de mai multe etape de-a lungul anilor. Acum, considerat o sursă de masă pentru știri, Mashable lucrează pentru a mânca un număr mare de postări pe pagina de pornire pentru o navigare ușoară.

    Unele postări utilizează miniaturi pătrată mici, în timp ce panoul lor principal stabilește un articol de miniatură mare de dimensiuni mari. Acest lucru trebuie să necesite o muncă suplimentară din partea editorului pentru a vă asigura că toate postările au fotografiile corespunzătoare la dimensiunile corecte.

    Dar, imediat după aterizarea pe site veți observa asta creează un sentiment de credibilitate. Acest stil se simte foarte în masă și poate fi folosit de aproape orice tip de revistă online pentru a construi încrederea cu citirea. Singura problemă este scrierea unui conținut suficient pentru a umple pagina!

    Multi-Post Widgets

    Unele widget-uri postate afișate afișează articole într-un statică. Aceasta este adesea cea mai populara alegere pentru ca poate fi a făcut reactiv și se amestecă frumos în orice aspect.

    Alte widget-uri se bazează pe interacțiuni dinamice, cum ar fi o prezentare de diapozitive. Luați, de exemplu, pagina de pornire a Vanity Fair cu postul lor de prezentare prezentat în partea de sus a paginii. Un singur mesaj este afișat simultan, dar se afișează articole noi atunci când treceți peste un anumit titlu.

    Atât actualizarea automată a miniaturilor cât și a titlului, cu o simplă interacțiune de hover. Un lucru de remarcat este că acest lucru poate fi foarte confuz pentru utilizatorii de Internet care nu sunt familiarizați cu această tehnică dinamică de hover.

    Dar pe partea pozitivă această tehnică va fi economisiți spațiu în pagină, prin ascunderea conținutului în exces.

    Încercați să nu vă gândiți la widget-urile postate ca fiind alb-negru. Acestea sunt doar secțiunile de pagină folosite pentru a prezenta cele mai interesante sau populare articole. Tehnica (tehnicile) prin care îndepliniți această sarcină poate fi întotdeauna deschisă spre dezbatere.

    Revista complexă utilizează un afișaj complet de diapozitive pentru widget-ul lor recomandat. Fiecare post are o miniatură prezentată împreună cu gradientul inferior pentru contrastul tipografic.

    Dar, în loc de a plasa fiecare miniatură una lângă cealaltă, articolele dinamic printr-o cutie de diapozitive. Navigarea poate fi setată automat sau controlată de link-urile săgeată. Acest design economisește mult spațiu și îi menține pe utilizator mai dispus să interacționeze cu pagina.

    Învelire

    Nu există un design corect sau greșit atunci când vine vorba de afișe de posturi speciale. Toți împărtășesc multe trăsături asemănătoare, dar fiecare revistă utilizează propriul stil pentru a organiza conținutul prezentat.

    Sper că acest post oferă sfaturi practice pe care să le folosiți atunci când vă proiectați widget-ul dvs. de posturi recomandate. Dacă vreodată vă simțiți blocați, uitați-vă la alte reviste pentru a vă inspira. Găsiți trăsături care vă plac și dați seama cum să le replicați pentru a se amesteca în propria dvs. revistă.