Loistavia ideoita ja trendejä merkittäville Feature Post-widgeteille
Onnistuneen online-lehden käyttö edellyttää vankkaa yleisöä ja paljon laadukasta kirjoittamista. Aikakauslehden ulkoasulla on myös ratkaiseva tekijä kävijöiden sitoutumisessa. Yksi tekniikka on luoda a esillä olevien viestien widget etusivun yläosassa. Tämä esittelee viimeisimpiä suosittuja artikkeleita, jotka ihanteellisesti ajavat lukijoita edelleen sivustoon.
Tässä viestissä haluan kattaa suunnittelutekniikat, joiden avulla voidaan luoda onnistunut mainostyökalu. Vaikka tämä widget toimii usein parhaiten aikakauslehtisuunnittelussa, voit myös soveltaa tätä pienempiin blogeihin tai dynaamisiin verkkosivustoihin.
Typografinen kontrasti
Useimmat esillä olevat viestit tukeutuvat pienten kuvien kuviin. Tämä tapahtuu usein taustakuvana, joka on sidottu jokaisen artikkelin otsikkoon.
Tämä tekniikka näyttää upealta, mutta se on vaikea luoda huomattavaa kontrastia typografian ja dynaamisten taustakuvien välillä. Tutkiessasi muita aikakauslehtiä voit poimia hienovaraisia tekniikoita luettavuuden parantamiseksi.
Seuraava Web on suuri online-lehti, jossa on näkyvissä viestien widgetissä kotisivulla. Jokainen pikkukuva vaihtelee koon mukaan, mutta kaikki käyttävät niitä tummat kaltevuudet parantavat kontrastia.
Artikkelin otsikot sijoitetaan pikkukuvien lohkojen alaosaan tumman kaltevuuden päälle. kevyt teksti on helppo kuluttaa tummalla pohjalla, se ei kuitenkaan kata koko kuvaa.
CSS3: n nykyaikainen kehitys antaa kehittäjille mahdollisuuden luoda nämä vaikutukset helposti. Kiinteät kaltevuudet ovat täydellisiä, jos voit saada ne virtaa luonnollisesti kunkin pikkukuvan päälle ja silti näyttää tarpeeksi kuvaa kiinnittää huomiota.
Digitaalisten trendien kotisivulla käytetään hieman erilaista tekniikkaa. Tämä viesti-widget käyttää korkea kontrasti vankka tausta tekstin takana, jotta jokainen otsikko on terävä ja elinvoimainen.
Ero tässä on, että jokainen taustaväri on 100% kiinteä. Et näe koko pikkukuvaa niin pienet osat häviävät näkymästä. Teksti on kuitenkin selvästi luettavissa, ja se voi olla yhtä houkutteleva vierailijoille, jotka ensin lähtevät Digital Trendsin kotisivulta.
Oikean kontrastin löytäminen on hankalaa. Jotkut sivustot, kuten TechCrunch, yrittävät sijoittaa tekstin pikkukuvan viereen poistamaan tämän ongelman kokonaan.
Mutta jos pidät otsikon tekstin tyyliä pikkukuvan päälle, jonka haluat pohtia, miten kontrastitekijät yhtälöön.
Sporadic-kuvakoot
Esitetyn postin widgetin arvo on ominaisuuden sisältö sivun yläreunassa. Epäsymmetria on hyvä tapa tuoda huomiota johonkin, ja tässä tapauksessa epäsymmetriset pikkukuvat toimivat hyvin.
Ota esimerkiksi ZDNetin kotisivu. Vasemmanpuoleisessa artikkelissaan suurin artikkeli käyttää laajinta pienoiskuvaa ottamaan enemmän tilaa ja toivottavasti kiinnittää enemmän huomiota. Muut pienoiskuvat ovat pienempiä, pienemmät otsikot.
Huomaa, miten tämä ruudukon rakenne johtaa luonnollisesti sivusi ympärille. Kukin kävijän katse pyrkii laskemaan yhteen tietylle alueelle ja siirtymään sitten kunkin pikkukuvan välillä, kunnes jotain hyppää ulos.
Myös ZDNet sijoittaa a tumma gradientti kunkin pikkukuvan päälle rakentaa typografista kontrastia luettavampaa tekstiä. Pohjimmiltaan se on yksi parhaimmista nähtävistä postimuotokuvista.
Erittäin samanlainen muotoilu löytyy CNET: n kotisivulta. Suurin pienoiskuva sijoittuu vasemmalle puolelle, koska useimmat kävijät lukevat vasemmalta oikealle.
Suunnitellessasi omaa mainostasi, älä tunne velvollisuutta noudattaa samaa tekniikkaa. Voit mennä mihin tahansa pikkukuvaan niin kauan kuin ne sopivat yhteen ja muodostavat yhtenäisen ruudukon asettelun.
Mukautettujen pikkukuvien tyylejä
Suunnitteluvalinnat vaihtelevat suuresti asettelusta toiseen, joten ei ole olemassa täydellistä ratkaisua. Esitetyt postimainokset ovat ehdottomasti monimutkaisempia suunnitteluun, joten ne edellyttävät opiskelua ja kärsivällisyyttä mukautetun asettelun mukaan.
Jokaisen pikkukuvan tyyli vaikuttaa siihen, miten koko widget näyttää yleisösi. Otetaan esimerkiksi The Verge -lehdessä näkyvä varustellun widget-tyyli.
Jokaisessa pikkukuvassa on värikäs kaltevuus valokuvan päällä. Tämä lisää kontrastia ja parantaa luettavuutta, mutta lisää myös tiettyä tunnelmaa myös verkkosivustolle.
Jotkut eivät pidä tätä tyyliä, koska he pitävät sitä raivokkaana tai epämiellyttävänä. Mutta se on myös melko suosittu Verge-lukijoiden keskuudessa ja muut suunnittelijat jäljittelevät tätä tyyliä.
Mutta värit ja kuvitteelliset tekniikat eivät ole ainoa tekijä, jota kannattaa harkita. Verkot ja pikkukuvat on myös valittava huolellisesti, koska ne auttavat määrittelemään yleisesti esillä olevien viestien widget-tyylin.
Ehkä yksi parhaista esimerkeistä on Mashablein muotoilu, joka on vuosien varrella käynyt läpi useita vaiheita. Nyt katsotaan, että uutiset ovat valtavirtaistettu lähde, Mashable tekee töitä suurelle joukolle viestejä kotisivulle selaamisen helpottamiseksi.
Jotkut viestit käyttävät pieniä neliön pikkukuvia, kun taas niiden tärkein johtajataulukko korjaa artikkelin suuren täysikokoisen pienoiskuvan. Tämä edellyttää editorilta ylimääräistä työtä sen varmistamiseksi, että kaikilla viesteillä on asianmukaiset kuvat oikeassa koossa.
Mutta heti sivuston laskeutumisen jälkeen huomaat, että se on antaa uskottavuutta. Tämä tyyli tuntuu hyvin valtavirralta ja sitä voi käyttää melkein minkä tahansa tyyppinen online-aikakauslehti luottamuksen luomiseksi reader-alustaan. Ainoa ongelma on kirjoittaa tarpeeksi sisältöä täyttääkseen sivun!
Monen postin widgetit
Jotkut esillä olevat postimainokset näyttävät artikkeleita a staattinen verkko. Tämä on usein suosituin valinta, koska se voi olla on reagoinut ja sulautuu hienosti mihin tahansa asetteluun.
Muut widgetit tukeutuvat dynaamisiin vuorovaikutuksiin kuten diaesitykseen. Otetaan esimerkiksi Vanity Fairin kotisivu, jossa on sivun yläreunassa näkyvä postilohko. Vain yksi viesti näytetään kerrallaan, mutta uusia artikkeleita näytetään, kun se ylittää tietyn otsikon.
Sekä pikkukuva että nimikkeen automaattinen päivitys, jossa on yksinkertainen hover-vuorovaikutus. On huomattava, että tämä voi olla hyvin hämmentävää Internetin käyttäjille, jotka eivät tunne tätä dynaamista hover-tekniikkaa.
Mutta positiivisella puolella tämä tekniikka tulee säästää tilaa sivuun piilottamalla ylimääräistä sisältöä.
Yritä olla ajattelematta esillä olevia postimainoksia mustavalkoisina. Ne ovat vain sivuja, joita käytetään mielenkiintoisimpien tai suosituimpien artikkeleiden esittämiseen. Tekniikka (-menetelmät), joilla voit suorittaa tämän tehtävän, voi aina olla avoinna keskustelua varten.
Monimutkainen aikakauslehti käyttää täydellistä diaesityksen näyttöä niiden varustellun widgetin osalta. Jokaisella viestillä on esillä oleva pikkukuva sekä pohjan kaltevuus typografista kontrastia varten.
Mutta sen sijaan, että jokainen pikkukuva olisi vierekkäin, artikkelit virtaa dynaamisesti diaesityksen ruutuun. Navigointi voidaan asettaa automaattisesti tai ohjata nuolipainikkeilla. Tämä muotoilu säästää paljon tilaa ja pitää käyttäjän mieluummin vuorovaikutuksessa sivun kanssa.
Paketoida
Ei ole oikeaa tai väärää muotoilua, kun kyseessä on esillä olevien viestien näyttö. Ne kaikki jakavat monia samankaltaisia piirteitä, mutta jokainen aikakauslehti käyttää omaa tyyliään esillä olevan sisällön järjestämiseen.
Toivon, että tämä viesti tarjoaa käytännöllisiä vinkkejä, joita voi käyttää omien esillä olevien viestien widgetin suunnittelussa. Jos ikinä tuntuu jumissa, katsokaa muita lehtiä inspiraatiota varten. Etsi ominaisuuksia, jotka haluat ja selvittää, miten voit replikoida ne omaan aikakauslehtisuunnitteluun.
