Brilantné nápady a trendy pre významné funkcie funkcií

Spustenie úspešného online časopisu vyžaduje solídne publikum a veľa vysoko kvalitného písania. Rozloženie časopisu však zohráva rozhodujúci význam aj v náväznosti návštevníkov. Jednou z metód je vytvoriť prispôsobené príspevky widget v hornej časti domovskej stránky. Toto zobrazuje najnovšie populárne články, ktoré ideálne poháňajú čitateľov ďalej na stránky.

V tomto príspevku by som chcel pokryť dizajnérske techniky, ktoré sa dajú použiť na vytvorenie úspešného prispôsobeného príspevku. Aj keď tento widget často funguje najlepšie v rozložení v štýle časopisu, môžete ho použiť aj na menšie blogy alebo webové stránky dynamického obsahu.

Typografický kontrast

Najčastejšie zobrazené príspevky sa spoliehajú na miniatúry, ktoré upozorňujú. Toto často má podobu obrázka pozadia viazaného na každý nadpis článku.

Táto technika vyzerá fantasticky, ale je to je ťažké vytvoriť výrazný kontrast medzi typografiou a dynamickými fotkami na pozadí. Prostredníctvom štúdia iných časopisov môžete vyzdvihnúť jemné techniky, ktoré vám pomôžu zlepšiť čitateľnosť.

Ďalšia webová stránka je veľký on-line časopis s dôležitým príspevkom widget na domovskej stránke. Každá miniatúra sa mení podľa veľkosti, ale všetky používajú tmavé gradienty pre lepší kontrast.

Nadpisy článku sú umiestnené v dolnej časti miniatúrnych blokov na vrchole tmavých sklonov. svetlý text je ľahko konzumovateľný na tmavom pozadí, ale nezahŕňa ani celý obrázok.

Moderný pokrok v systéme CSS3 umožňuje vývojárom ľahko obnoviť tieto efekty. Pevné prechody sú dokonalé, ak ich môžete dostať tečie prirodzene nad každú miniatúru a stále ukázať dostatok obrázka zachytiť pozornosť.

Na domovskej stránke digitálnych trendov sa používa trochu iná technika. Tento widget príspevku používa vysoko kontrastné pevné pozadie za text, aby sa každý titulok stal ostrým a žiarivým.

Rozdiel je, že každá farba pozadia je 100% pevná. Nemôžete vidieť celú miniatúru tak malé časti sa stratia z pohľadu. Text je však jasne čitateľný, čo môže byť rovnako atraktívne pre návštevníkov pristávajúcich na domovskej stránke služby Digital Trends.

Hľadanie správneho množstva kontrastu je zložité. Niektoré webové stránky ako TechCrunch sa pokúšajú umiestniť text vedľa miniatúry, aby tento problém odstránili úplne.

Ale ak sa vám páči dizajnový štýl hlavného textu nad miniatúrou, ktorú budete chcieť zvážte, aké sú kontrastné faktory do rovnice.

Sporadické veľkosti obrázkov

Hodnota miniaplikácie zobrazených príspevkov má hodnotu obsah v hornej časti stránky. Asymetria je skvelý spôsob, ako upriamiť pozornosť na niečo a v tomto prípade veľké miniatúry asymetrických funkcií.

Vezmite napríklad domovskú stránku ZDNetu. Vo svojom miniaplikácii najväčší článok na ľavej strane používa najširší miniatúrny obrázok, aby zaujal viac priestoru a dúfajme, že získa väčšiu pozornosť. Ostatné miniatúry spadajú do menších veľkostí s menšími titulkami.

Všimnite si, ako táto štruktúra siete prirodzene vedie vaše oko okolo stránky. Náhľad každého návštevníka má tendenciu spadnúť do jednej konkrétnej oblasti, potom sa pohybuje medzi každou miniatúrou, až niečo vyskočí.

Aj ZDNet miesta a tmavý gradient na každom miniatúre vytvoriť typografický kontrast pre čitateľnejší text. Zásadne je to jeden z najlepších vylepšených návrhov widgetu, ktoré som kedy videl.

Veľmi podobný štýl dizajnu nájdete na domovskej stránke CNET. Najväčšia miniatúra sa stáva na ľavej strane, pretože väčšina návštevníkov číta zľava doprava.

Pri navrhovaní vlastného prispôsobeného príspevku sa nemusíte riadiť tou istou technikou. Môžete ísť s ľubovoľnou veľkosťou miniatúr tak dlho, ako sa zmestí spolu a tvoria jednotné rozloženie mriežky.

Vlastné štýly miniatúr

Voľba dizajnu sa značne líši od rozloženia po rozloženie, takže neexistuje žiaden dokonalý riešenie. Odporúčané príspevkové miniaplikácie sú určite zložitejšie na dizajn, takže si vyžadujú štúdium a trpezlivosť, aby sa zmestili do vlastného rozloženia.

Štýl každej miniatúry ovplyvňuje, ako sa celá miniaplikácia pozerá na vaše publikum. Vezmite si napríklad štýl widgetu, ktorý nájdete na stránke The Verge.

Každá miniatúra má na vrchole fotografie farebný prechod. To zvyšuje kontrast a zlepšuje čitateľnosť, ale na webovej stránke pridáva určitý vkus.

Niektorí ľudia sa tomuto štýlu nepáči, pretože to považuje za klamlivé alebo nepríťažlivé. Ale je to takisto populárne medzi čitateľmi Verge a iní dizajnéri napodobňujú tento štýl.

Farby a šikovné techniky nie sú jediným faktorom, ktorý je potrebné zvážiť. Mriežky a veľkosti miniatúr musia byť tiež starostlivo vybrané, pretože pomáhajú definovať celkový štýl widgetov s prispôsobenými príspevkami.

Možno jedným z najlepších príkladov je dizajn Mashable, ktorý prešiel mnohými fázami v priebehu rokov. Teraz považovaný za hlavný zdroj správ pre novinky, Mashable pracuje na napĺňanie veľkého počtu príspevkov na domovskú stránku pre jednoduché prehliadanie.

Niektoré príspevky používajú malé námestie náhľady, zatiaľ čo ich hlavná tabuľka určuje veľký veľkoplošný náhľad na článok. To musí vyžadovať od redaktora ďalšiu prácu, aby sa zabezpečilo, že všetky príspevky majú príslušné fotografie v správnych veľkostiach.

Ale hneď po pristátí na webe si to všimnete dáva pocit dôveryhodnosti. Tento štýl je veľmi bežný a môže ho použiť takmer akýkoľvek typ online magazínu na budovanie dôvery s readerbase. Jediným problémom je napísanie dostatočného obsahu na vyplnenie stránky!

Viacúčelové miniaplikácie

Niektoré zobrazené miniaplikácie zobrazujú články v a statická mriežka. Toto je často najobľúbenejšia voľba, pretože to môže byť robila reagovať a dobre sa mieša do akéhokoľvek usporiadania.

Ostatné miniaplikácie sa spoliehajú na dynamické interakcie, ako je prezentácia. Vezmite si napríklad domovskú stránku Vanity Fair s ich obľúbeným blokom v hornej časti stránky. Zobrazí sa iba jeden príspevok, ale nové články sa zobrazia, keď sa pohybuje nad určitým nadpisom.

Funkcia automatického aktualizovania miniatúry a titulu s jednoduchou interakciou vznášania. Treba poznamenať, že to môže byť veľmi mätúce pre používateľov internetu, ktorí nie sú oboznámení s touto dynamickou technikou vznášania.

Ale na pozitívnej strane táto technika bude ušetríte priestor na stránke skrytím nadbytočného obsahu.

Snažte sa myslieť na odporúčané miniaplikácie ako čierne a biele. Sú to len sekcie stránok, ktoré slúžia na zobrazenie najzaujímavejších alebo najpopulárnejších článkov Technológia (y), pomocou ktorej splníte túto úlohu, môže byť vždy otvorená na diskusiu.

Komplexný časopis používa plný zobrazovací program pre svoj obľúbený widget. Každý príspevok obsahuje miniatúru spolu so spodným gradientom pre typografický kontrast.

Ale namiesto umiestnenia každej miniatúry vedľa seba, článkov prúd dynamicky cez slideshow box. Navigácia môže byť nastavená automaticky alebo riadená šípkami. Tento dizajn šetrí veľa priestoru a udržuje používateľa viac ochotný komunikovať so stránkou.

Zabaliť

Neexistuje žiadny správny alebo nesprávny dizajn, pokiaľ ide o najdôležitejšie post displeje. Všetci zdieľajú mnohé podobné črty, ale každý časopis používa svoj vlastný štýl na organizovanie uvádzaného obsahu.

Dúfam, že tento príspevok ponúka praktické tipy, ktoré môžete používať pri navrhovaní vlastného miniaplikácie zobrazených príspevkov. Ak sa niekedy cítite zaseknuté, len sa pozrite na iné časopisy, ktoré chcete inšpirovať. Nájdite vlastnosti, ktoré sa vám páčia, a zistite, ako ich kopírovať, aby ste sa zmestili do vlastného dizajnu časopisu.