Ragyogó ötletek és trendek a kiemelkedő Feature Post widgetekhez
A sikeres online magazin futása szilárd közönséget és sok jó minőségű írást igényel. De a magazin elrendezése döntő szerepet játszik a látogatók elkötelezettségében is. Az egyik technika az a megjelenített widget a honlap tetején. Ez bemutatja a legutóbbi népszerű cikkeket, amelyek ideálisan meghajtók olvashatók tovább a webhelyen.
Ebben a bejegyzésben szeretném lefedni azokat a tervezési technikákat, amelyekkel sikerült létrehozni egy sikeres, megjelenített postai widgetet. Bár ez a widget gyakran működik legjobban egy magazin-stílusú elrendezésen, ezt kisebb blogokra vagy dinamikus tartalmi webhelyekre is alkalmazhatja.
Tipográfiai kontraszt
A legtöbb megjelenített hozzászólás a miniatűr képekre támaszkodik, hogy felhívja a figyelmet. Ez gyakran az egyes cikkcímekhez kötött háttérképek formájában jelenik meg.
Ez a technika fantasztikusnak tűnik, de ez az a tipográfia és a dinamikus háttérképek között nehéz észrevehető kontrasztot kialakítani. Más magazinok tanulmányozásával finom technikákat vehet fel az olvashatóság javítása érdekében.
A Következő Web egy nagy online magazin, amely a főoldalon kiemelkedő bejegyzésekkel rendelkezik. Minden bélyegkép nagysága változik, de mindegyik használ sötét színátmenetek a jobb kontraszthoz.
A cikkcímek a miniatűr blokkok alján helyezkednek el a sötét színátmenetek tetején. A a világos szöveg sötét háttéren könnyen fogyasztható, mégis nem terjed ki az egész képre sem.
A CSS3 modern fejlesztései lehetővé teszik a fejlesztők számára, hogy ezeket a hatásokat könnyedén újraépítsék. A rögzített színátmenetek tökéletesek, ha el tudják érni őket természetesen áramlik az egyes bélyegképek tetején és még mindig mutasson eléggé a képre a figyelmet.
A Digital Trends honlapján kissé eltérő technikát alkalmaznak. Ez a hozzászólás widget használja nagy kontrasztú szilárd hátterek a szöveg mögött, hogy minden fejléc éles és élénk legyen.
A különbség itt az, hogy minden háttérszín 100% szilárd. Nem láthatja a teljes indexképet a kis részek elvesznek a nézetből. A szöveg azonban jól olvasható, ami ugyanolyan vonzó lehet a látogatók számára, amikor a digitális trendek honlapján először leszálltak.
A megfelelő kontraszt megszerzése trükkös. Néhány olyan webhely, mint a TechCrunch, megpróbálja elhelyezni a szöveget a miniatűr mellett a probléma teljes eltávolításához.
De ha szereted a főcímszöveg tervezési stílusát egy indexkép tetején fontolja meg, hogy a kontraszt-tényezők milyenek az egyenletben.
Sporadikus képméretek
A megjelenített postai widget értéke a tartalom tartalma az oldal tetején. Az aszimmetria nagyszerű módja annak, hogy felhívjunk valamit, és ebben az esetben az aszimmetrikus miniatűrök nagyszerűen működnek.
Vegyük például a ZDNet honlapját. A baloldalon található legnagyobb cikk a legszélesebb bélyegképet használja, hogy több helyet foglaljon el, és remélhetőleg nagyobb figyelmet szenteljen. A többi kiemelt kép kisebb méretűre, kisebb címsorokra esik.
Figyelje meg, hogy ez a rácsszerkezet természetesen vezeti a szemét az oldal körül. Minden látogató tekintete általában egy bizonyos területre esik, majd az egyes bélyegképek között mozog, amíg ki nem ugrik.
A ZDNet a sötét gradiens az egyes miniatűrképek tetejére építsen tipográfiai kontrasztot olvashatóbb szöveget. Alapvetően ez az egyik legjobb megjelenített postimodell, amit valaha láttam.
Egy nagyon hasonló tervezési stílus megtalálható a CNET honlapján. A legnagyobb miniatűr a bal oldalon jelenik meg, mivel a legtöbb látogató balról jobbra olvas.
A saját megjelenésű widget tervezésekor nem érzi magát köteles követni ezt a technikát. Bármilyen miniatűr méretben mehetsz, amíg összeilleszkednek egymással, és egységes hálós elrendezést alkotnak.
Egyedi bélyegképstílusok
A tervezési döntések az elrendezés és az elrendezés között igen eltérőek, így nincs tökéletes megoldás. Kiemelt postai widgetek határozottan bonyolultabbak a tervezéshez, így tanulmányokra és türelemre van szükségük, hogy illeszkedjenek az egyéni elrendezésbe.
Az egyes bélyegképek stílusa befolyásolja, hogyan néz ki az egész widget a közönségre. Vegyük például a The Verge-n található jellegzetes widgetstílust.
Minden bélyegkép színes színátmenettel rendelkezik a fotó tetején. Ez növeli a kontrasztot és javítja az olvashatóságot, de egyúttal egy bizonyos hangulatot is hozzáad a honlaphoz.
Vannak, akik nem kedvelik ezt a stílust, mert bosszantónak vagy csalódásnak találják. De a Verge olvasók körében is nagyon népszerű, és más tervezők imitálják ezt a stílust.
De a színek és a divatos technikák nem az egyetlen tényező, amit figyelembe kell venni. A rácsok és a bélyegképek méretét is gondosan kell megválasztani, mivel ezek segítenek meghatározni az általános megjelenítésű widget stílus stílusát.
Talán az egyik legjobb példa a Mashable tervezése, amely az évek során számos szakaszon ment keresztül. A Mashable a hírek legfőbb forrásának tekinthető, hogy nagy számú hozzászólást tömörítsen a honlapra a könnyű böngészés érdekében.
Néhány hozzászólás kis négyzet alakú bélyegképeket használ, míg a fő ranglistájuk nagy méretű teljes méretű indexképet rögzít a cikkhez. Ehhez extra munkát kell tennie a szerkesztőtől annak biztosítása érdekében, hogy minden hozzászólás megfelelő képeket tartalmazzon a megfelelő méretben.
De közvetlenül a helyszínen való leszállás után észre fogod venni, hogy ez lesz hitelességet kelt. Ez a stílus nagyon általánosan érezhető, és szinte bármilyen típusú online magazin használhatja a bizalom megteremtéséhez. Az egyetlen probléma az oldal elégséges tartalmának írása!
Multi-Post Widgetek
Néhány megjelenített postai widget az a statikus rács. Ez gyakran a legnépszerűbb választás, mert lehet reagált és jól keveredik bármilyen elrendezésbe.
Más widgetek dinamikus kölcsönhatásokra támaszkodnak, mint a diavetítés. Vegyük például a Vanity Fair honlapját az oldal tetején található kiemelt postai blokkjukkal. Egyszerre csak egy bejegyzés jelenik meg, de az új cikkek akkor jelennek meg, ha egy adott címsor felett lebegnek.
Mind a miniatűr, mind a cím automatikus frissítése egyszerű hover interakcióval. Megjegyzendő, hogy ez nagyon zavaró lehet az internetes felhasználók számára, akik nem ismerik ezt a dinamikus hover technikát.
De a pozitív oldalon ez a technika fog helyet takaríthat meg az oldalt a túlzott tartalom elrejtésével.
Próbálj meg nem gondolkodni a kiemelt postai widgetekkel, mint fekete-fehér. Ezek csak oldalszakaszok, amelyek a legérdekesebb vagy népszerűbb cikkek megjelenítésére szolgálnak. A technika (ok), amellyel ezt a feladatot elvégezheti, mindig nyitva áll a vitára.
A komplex magazin teljes diavetítéses megjelenítéssel rendelkezik a megjelenített widgetjeikhez. Minden egyes hozzászólásnak van egy jellegzetes indexképe, valamint az alsó gradiens a tipográfiai kontraszthoz.
De ahelyett, hogy mindegyik bélyegképet egymás mellett helyeznénk el, a cikkek dinamikusan áramlik egy diavetítés dobozon keresztül. A navigáció automatikusan beállítható vagy nyílhivatkozásokkal vezérelhető. Ez a kialakítás rengeteg helyet takarít meg, és a felhasználót jobban hajlandó kommunikálni az oldallal.
Csomagolja fel
Nincs olyan helyes vagy rossz tervezés, amikor a megjelenített üzenetek megjelenítésére kerül sor. Mindegyiknek sok hasonló tulajdonsága van, de minden magazin saját stílusát használja a tartalmi tartalom szervezésére.
Remélem, hogy ez a hozzászólás olyan praktikus tippeket kínál, amelyekkel saját megjelenésű widget-jét tervezheted. Ha valaha úgy érezte, elakad, nézd meg más magazinokra az ihletet. Keresse meg azokat a tulajdonságokat, amelyekre tetszik, és kitalálják, hogyan replikálhatják őket a saját magazintervezéséhez.
