11 verkkosivustojen asettelua, jotka antoivat sisällölle loistaa vuonna 2017

Miksi ihmiset todella käyvät verkkosivustoilla? Useimmissa tapauksissa kunkin vierailun ensisijainen syy on sisältö. Sisältö on ensiarvoisen tärkeää, ja jokainen suunnittelija haluaa esitellä sen hyödyllisimmällä ja intuitiivisimmalla tavalla. Ei siis ole yllättävää, että sisällöllesi asettelun valitseminen on yksi ensimmäisistä asioista, jonka suunnittelijat tekevät aloittaessaan uuden projektin.

Monien suunnittelijoiden mielestä kunkin verkkosivuston, jonka he työskentelevät, ulkoasun tulisi olla täysin ainutlaatuinen projektin tavoitteiden saavuttamiseksi - tämä on kaukana totuudesta. Jos vierailet suosituilla verkkosivustoilla, huomaat, että monet niistä käyttävät samanlaisia ​​asetteluja. Tämä ei ole sattumaa tai tehty laiskuudesta, koska näillä asetteluilla on kolme merkittävää etua:

  • Ne ovat käyttökelpoisia. Yleisistä asetteluista on tullut niin yleisiä, koska ne ovat osoittaneet, että käyttäjät voivat työskennellä heidän kanssaan.
  • He ovat tuttuja. Hyvä käyttökokemus luodaan rakentamalla tuntemus käyttäjille. Vierailijat tuntevat miellyttävän deja-vu-tunteen, kun näkevät tutut piirteet sellaisina kuin ne voisivat odottaa. Tämän seurauksena ihmiset viettävät aikaa sisällön sulattamiseen sen sijaan, että keskittyisivät sivun yksilölliseen suunnitteluun.
  • He säästävät rahaa. Nykyisten asetteluiden uudelleenkäyttö on aikaa säästävä. Suunnittelijat viettävät vähemmän aikaa asettelun kokeiluun ja keskittyvät enemmän visuaaliseen hierarkiaan ja muihin suunnittelun näkökohtiin, joilla on suora vaikutus käyttäjäkokemukseen.

Vaikka jokainen projekti on ainutlaatuinen ja vaatii yksilöllistä lähestymistapaa, on hyödyllistä tuntea yleiset asettelut. Tässä artikkelissa tarkastellaan 11 hyvin yleistä asettelua, jotka löydätte tänään lukemattomilta sivustoilta.

1. Yksi sarake.

Yhden sarakkeen asettelut esittävät pääsisällön yhdessä pystysuorassa sarakkeessa. Tämäntyyppinen asettelu on kenties yksinkertaisin luettelosta ja on käyttäjille helpointa navigoida. Vierailijat vain vieritä alas nähdäksesi enemmän sisältöä.

Yksinkertaisuudesta huolimatta yhden sarakkeen asettelut ovat melko suosittuja monien verkkosivustojen keskuudessa. Mobiilivallankumous vaikutti myös tämän tyyppisen asettelun suosioon - yhden sarakkeen asettelut sopivat mobiililaitteiden näytöihin täydellisesti.

Milloin sitä käytetään.

Tämä asettelu löytyy sovelluksesta monissa henkilökohtaisissa blogeissa, jotka perustuvat minimalistisiin suunnitteluperiaatteisiin. Tämä on yleinen asettelu mikroblogille, kuten Tumblr.

Medium, suosittu blogialusta, käyttää tällaista asettelua tarinoidensa esittämiseen. Kaikki Mediumia koskevat artikkelit on esitetty yhdessä sarakkeessa.

Suunnitteluvihjeitä

  • Harkitse tarttuvia valikoita pitkille sivuille. Koska yhden sarakkeen asettelua käytetään usein pitkään vierittävillä sivuilla, on tärkeää pitää navigointi aina näkyvissä. Sticky navigointi auttaa sinua välttämään kävijöiden tarpeen vierittää koko sivun yläreunaan navigoimiseksi.
Kuvan lähde: codemyui

2. Jaa näyttö

Jaettu näyttö (tai yksi ruutu, joka on jaettu kahteen) on täydellinen sivulle, jolla on kaksi yhtä tärkeätä pääsisältöä. Sen avulla suunnittelijat voivat näyttää molemmat tuotteet samanaikaisesti ottaen samalla huomioon yhtäläisesti.

Kaksi keskeistä elementtiä näytetään samanaikaisesti. Kuvalähde: 62 mallia

Milloin sitä käytetään

Jaetun näytön asettelut ovat täydellisiä, kun sivustosi tarjoaa kaksi dramaattisesti erilaista variaatiota käyttäjän matkasta, kuten kaksi erityyppistä käskyä, kuten näemme alla olevassa Dropbox-esimerkissä.

Jaetun näytön asettelut ovat myös ihanteellisia kontrastia varten, ja siksi suunnittelijat usein käyttävät tätä asettelua asettaakseen kaksi tuotetta toisiinsa.

Kaksinaisuuden vastakkaiset piirteet (vastakkaiset värit). Kuvalähde: Google Star Wars -asiakkaat

Suunnitteluvihjeitä.

  • Vältä liiallisen sisällön käyttämistä jaetuissa osissa. Jaetun näytön mallit eivät laajene hyvin, kun sisältö kasvaa, joten on parempi välttää tämän tyyppisen asettelun valitsemista, jos joudut toimittamaan paljon teksti- tai visuaalista tietoa jaetuissa osissa.
  • Harkitse animaation lisäämistä. Voit luoda dynaamisemman kokemuksen sisällyttämällä animoidut yksityiskohdat.
Kuvalähde: Tšehov on elossa

Epäsymmetria on tasa-arvon puute asettelun kahden puolen välillä. Epäsymmetria on pitkään suosittu tekniikka taidemaailmassa, ja siitä on viime aikoina tullut suosittua web-suunnittelijoiden keskuudessa.

Monet sekoittavat epäsymmetrian epätasapainoon, mutta itse asiassa epäsymmetrian tavoitteena on luoda tasapaino, kun on mahdotonta tai ei ole toivottavaa käyttää yhtä suurta painoa kahdessa osassa. Epäsymmetrian käyttö mahdollistaa jännityksen ja dynaamisuuden luomisen, ja epäsymmetria helpottaa skannauskäyttäytymistä keskittymällä käyttäjän huomiossa yksittäisiin esineisiin (polttopisteisiin). Muuttamalla jokaisen epäsymmetrisen sisällön leveyttä, laajuutta ja väriä suunnittelija kehottaa vierailijaa pysymään visuaalisesti kiinnostuneena.

Milloin sitä käytetään.

Tämän tyyppistä asettelua voidaan käyttää, kun suunnittelijat haluavat luoda mielenkiintoisia ja odottamattomia asetteluita, samalla kun ne korostavat suuntaa. Asianmukaisesti sovellettu epäsymmetria voi luoda aktiivisen tilan, joka ohjaa silmää elementistä toiseen, jopa tyhjyyden yli. Mieti, kuinka Dropbox näyttää selvästi tarkennuspisteet alla olevassa esimerkissä.

Epäsymmetria tekee Dropbox-kotisivusta näyttämään energisemmältä.

Suunnitteluvihjeitä.

  • Varmista, että sisältösi voidaan esittää epäsymmetrisesti. Epäsymmetrinen asettelu ei ole käytännöllinen kaikissa sivustoissa. Se toimii todennäköisesti parhaiten minimalistisissa asetteluissa.
  • Lisää tarkennus väreillä. Epäsymmetria perustuu ajatukseen, että visuaalisesti painoisempi esine kiinnittää siihen ensin huomiota. Voit lisätä elementtejä, joilla on korkea värikontrasti, lisätäksesi visuaalista painoa mallin tiettyihin osiin.
Korkea värikontrasti lisää visuaalista painoa suunnittelun tietyille osille. Kuvalähde: Culture PL

4. Korttiruudukko.

Kortit ovat loistavia asioita napsautettavissa olevaa tietoa varten - - niiden avulla suunnittelijat voivat tarjota suuren määrän tietoa sulavasti. Bite-kokoiset esikatselut (yleensä kuva ja lyhyt kuvaus) auttavat kävijöitä löytämään haluamansa sisällön ja sukeltamaan yksityiskohtiin napsauttamalla tai napauttamalla korttia.

Tärkein asia korttiruudussa on, että tämäntyyppinen asettelu on melkein äärettömästi manipuloitavissa. Ristikot voivat vaihdella kooltaan, etäisyydellä ja sarakkeiden lukumäärällä, ja korttityypit voivat vaihdella näytön koon mukaan (kortit voidaan järjestää sopimaan mihin tahansa näytölle). Siksi korttiruudut toimivat niin hyvin reagoivien mallien kanssa.

Milloin sitä käytetään.

Korttiristikko on hyvä sisältöraskaille sivustoille, jotka näyttävät paljon kohteita, joilla on sama hierarkia.

YouTube on tiukka ruudukkoasettelu; suorat korttirivit on ryhmitelty luokkiin.Jokainen Pinterest-taulun nasta on esitetty korttina.

Suunnitteluvihjeitä.

  • Tee koko kortista napsautettava, ei vain tiettyjä osia. Käyttäjän vuorovaikutus kortin kanssa on paljon mukavampaa, kun käyttäjien ei tarvitse napsauttaa tarkalleen kortin otsikkoa tai kuvaa päästäksesi sisällön yksityiskohtiin.
  • Jos korttisi sisältää kuvan, harkitse miltä se näyttää pienemmällä näytöllä. Kuva, joka ei ole mittakaavassa hyvin ja tulee lukukelvottomaksi pienillä näytöillä, luo huono käyttökokemuksen.
  • Kiinnitä huomiota korttien väliseen tyhjään tilaan, koska se vaikuttaa vierailijoiden selailuun. Lisää tilaa korttien välillä hidastaa selaamista, mutta kävijät kiinnittävät enemmän huomiota jokaiseen korttiin. Pieni tila mahdollistaa nopean skannauksen, mutta lisää myös riskejä siitä, että kävijät saattavat jättää tietyn sisällön huomiotta.
  • On mahdollista sisällyttää animoitu palaute. Kortti näkyy napsautettavana elementtinä.
Smashing Magazine on upea animoitu palaute korteilleen.

Tämä on ehkä monimutkaisin asettelu, joka mainitaan tässä viestissä. Kuten nimestä voi päätellä, sanomalehdet ja aikakauslehdet popularisoivat alun perin tätä asettelua, ja niillä oli ongelma tuoda lukijaan valtavia määriä tietoja helposti seurattavalla tavalla. Painatussuunnittelijat käyttivät ruudukkojärjestelmää tähän tarkoitukseen. Asettelu on rakennettu käyttämällä modulaarista ruudukkoa, joka mahdollistaa joustavuuden - monisarakkeinen asettelu käyttää erilaista visuaalista painoa tiedon priorisoimiseksi.

Lehden asettelun avulla lukijat voivat skannata, lukea. ja ymmärtää sivu nopeasti. Kuvalähde: New York Times

Samoin kuin paperilehdissä, digitaalisissa lehdissä käytetään monisammaista ruudukkoa, jonka avulla voit luoda monimutkaisen hierarkian ja integroida tekstiä ja kuvia. Ensisijainen tavoite on sama - kävijöiden on kyettävä skannaamaan, lukemaan ja ymmärtämään sivu nopeasti. Suunnittelijat pyrkivät luomaan visuaalisen rytmin. He yrittävät helpottaa silmän skannata sivun osia ja antaa silmän liikkua luonnollisesti lohkosta toiseen. Samanaikaisesti suunnittelija yrittää estää erilaisia ​​lohkoja kilpailemasta huomiosta.

Milloin sitä käytetään.

Lehden asettelu on hyvä valinta julkaisuille, joiden hierarkia on monimutkainen ja sivulla on paljon sisältöä. Ilman ruudukon tehokasta käyttöä on todennäköistä, että kaikki kotisivun sisältö näyttäisi olevan sotempi ja vähemmän järjestetty.

Lehtityylinen asettelu on paras uutissivustoille, joilla on paljon säännöllisesti päivitettävää sisältöä useissa luokissa.

Suunnitteluvihjeitä.

  • Tämä asettelu korostaa otsikoita ja kuvia. Otsikon / kuvan koko liittyy suoraan sen käskyyn. Näkyvämmät elementit vetävät käyttäjän keskittymisen nopeammin kuin vähemmän näkyvä. Otetaan esimerkiksi New York Times - sivun tärkeimmässä sisällössä on suurempia pikkukuvia, suurempia otsikoita ja yksityiskohtaisempaa tekstiä.
New York Times käyttää eri kokoista tekstiä tärkeyden tunteen luomiseen - tekstin koko vaihtelee visuaalisen hierarkian luomiseksi.
  • Ruudukon asettaminen vaatii huomion sekä vaaka- että pystysuunnassa, ja ne ovat yhtä tärkeitä, jos haluat luoda hyvän asettelun. Harkitse eroa seuraavien esimerkkien välillä. Ensimmäisessä esimerkissä ruudukko on yhdenmukainen pylvään leveyden ja vaakavälin kanssa, mutta monipuolinen pystysuuntainen etäisyys luo visuaalista kohinaa. Toisessa tapauksessa vaakasuuntainen sarakeväli ja pystysuora elementtiväli ovat yhdenmukaisia, ja tämä tekee kokonaisrakenteesta puhtaamman ja mukavamman sisällön visuaalisesti käyttävälle käyttäjälle.

6. Laatikot.

Tässä asettelussa on suuri otsikon leveyslaatikko ja muutama pienempi laatikko, jotka kumpikin vievät osan suuremman ruudun näytön kiinteistöistä. Pienempien laatikoiden määrä voi vaihdella kahdesta viiteen. Jokainen ruutu voi olla linkki, joka johtaa suuremmalle, monimutkaisemmalle sivulle.

Milloin sitä käytetään.

Tämä on melko monipuolinen asettelu, jota voidaan käyttää sekä yksittäisissä portfolion kaltaisissa sivustoissa että yritys- / verkkokauppasivustoissa.

Kuvalähde: mrporter

Suunnitteluvihjeitä.

  • Yhdistä laatikot kertoaksesi tarinan. Suuria laatikoita voidaan käyttää tuotteiden esittelyyn, kun taas pienemmät laatikot voivat tarjota lisätietoja tuotteesta.
Kuvalähde: Microsoft Surface

Navigointi on kriittinen osa mitä tahansa verkkosivustoa - päävalikko on ensimmäinen asia, jota useimmat käyttäjät etsivät, kun he haluavat navigoida. Yläpuolella olevan vaakasuuntaisen navigoinnin ohella on mahdollista pitää valikkovaihtoehdot näkyvissä asettamalla se kiinteään sivupalkkiin. Sivupalkki on pystysuora sarake sivun vasemmalla tai oikealla puolella. Tätä asettelua varten sivupalkki pysyy paikallaan ja pysyy aina näkyvänä, kun loput sivu muuttuu, kun käyttäjät vierittävät sivua alas. Tällä tavalla navigointi pysyy saatavana.

Milloin sitä käytetään.

Tämä asettelu toimii hyvin verkkosivustoilla, joilla on suhteellisen rajoitettu määrä navigointivaihtoehtoja. On suositeltavaa, että kaikki vaihtoehdot ovat näkyvissä, kun käyttäjä tulee sivulle.

Kuvan lähde: mitattu

Suunnitteluvihjeitä.

  • Sivupalkit voivat sisältää myös muuta sisältöä kuin valikkoa tai sen lisäksi, kuten sosiaalisen median linkkejä, yhteystietoja tai jotain muuta, jonka haluat vierailijoiden löytävän helposti.
Trefecta tarjoaa muutoskielen ja sivunjakoasetukset sivupalkissa.

Tämä asettelu perustuu ajatukseen, että kuvien käyttäminen suunnittelussa on nopein tapa myydä tuote. Kuvilla on mahdollisuus luoda tunnepitoinen yhteys kävijöihin - iso, lihavoitu valokuva tai esimerkki esineestä antaa vahvan lausunnon ja luo upean ensivaikutelman.

Milloin sitä käytetään.

Tämä asettelu on hieno, kun joudut osoittamaan vain yhden tuotteen / palvelun ja keskittämään käyttäjän koko huomion siihen.

Muiden elementtien puute tässä asettelussa ohjaa käyttäjän huomion kokonaan tuotteeseen.

Tämän tyyppisen asettelun avulla on mahdollista luoda todella syvällinen, tunnepitoinen kokemus. Yksi hieno esimerkki on Pieces in Pieces, joka tarjoaa rikkaan kokemuksen ja lisää tietoisuutta uhanalaisista lajeista.

Kuvalähde: lajit paloina

Suunnitteluvihjeitä.

  • Varmista, että kuvasi on riittävän hyvä esittelemään näkyvästi. Kuvan, valokuvan tai piirroksen tulee olla sekä asiaankuuluvan viestin suhteen että korkealaatuisia.
  • Harkitse typografiaa. Typografia seuraa kuvaa. Koko, kirjasimen paino ja väri ovat kaikki kirjasintyypin ominaisuuksia, joita on käytettävä suunnittelun vahvistamiseen.

9. F-muodon asettelu.

Tämän tyyppinen asettelu luotiin sen perusteella, miten käyttäjät lukevat sisältöä verkossa. FN-muotoinen skannauskuvio, jonka alun perin määritteli NNGroup, toteaa, että käyttäjät skannaavat tyypillisesti raskaita sisältölohkoja kuviossa, joka näyttää F- tai E-kirjaimelta. Silmämme alkavat sivun oikeasta yläkulmasta, skannaavat vaakasuunnassa, sitten pudota seuraavalle riville ja tee sama uudestaan ​​ja uudestaan, kunnes löydämme jotain, joka kiinnittää huomioamme (mielenkiintoinen sisältö). Tämä skannausmalli on merkityksellinen paitsi pöytäkoneiden käyttäjille myös matkapuhelinten käyttäjille.

Milloin sitä käytetään.

Tämä asettelu on hyvä sivuille, joiden on esitettävä paljon erilaisia ​​vaihtoehtoja ja joiden avulla käyttäjät voivat skannata ne nopeasti. Vierailijat reagoivat paremmin F-kuvion asetteluun, joka jäljittelee luonnollista skannauskuviota. Tämä on hyödyllinen uutissivuston kotisivulle tai sivulle, joka sisältää hakutuloksia.

New Yorker käyttää F-muodon asettelua kotisivullaan.

Suunnitteluvihjeitä.

  • Säädä sisältöä skannauskäyttäytymisen mukaan. Kannattaa sijoittaa tärkein sisältö sivun vasemmalle ja oikealle puolelle, josta käyttäjä aloittaa ja lopettaa vaakasuuntaisen skannauksen. Kun vierailijat saavuttavat rivin lopun, he pysäyttävät sekunnin ajan ennen siirtymistä seuraavaan riviin, ja tämä tauko antaa sinulle mahdollisuuden esitellä sisältöä.
  • Käytä visuaalisia vihjeitä ohjaamaan vierailijaa. On mahdollista keskittää käyttäjän huomio tiettyyn elementtiin lisäämällä siihen enemmän visuaalista painoa. Voit esimerkiksi korostaa avainsanoja tekstissä kohdistaaksesi käyttäjän huomion.

10. Z-muotoinen asettelu.

Z-kuvion asettelu jäljittelee myös luonnollisia skannaustapoja. Sivuston vierailijat (länsimaisista kulttuureista) alkavat vasemmasta yläkulmasta. Ne skannaavat vasemmasta yläkulmasta oikealle ylöspäin muodostaen vaakasuoran viivan. Seuraava vaihe on kuitenkin hiukan erilainen - sen sijaan, että putoaa suoraan alas, kuten F-muodossa, heidän silmänsä vaeltelevat alas ja sivun vasemmalle puolelle muodostaen vinoviivan. Viimeiseksi, vilkaisu takaisin oikealle, muodostaen toisen vaakasuoran viivan.

Milloin sitä käytetään.

Vaikka F-malli on parempi skannaamaan paljon sisältöä, Z-malli sopii paremmin sivustoille, joilla on yksilöllinen tavoite ja vähemmän sisältöä. Tämä kuvio on tehokas ohjaamaan käyttäjän huomio tiettyihin pisteisiin käyttämällä hyvin sijoitettuja visuaalisia kuvia, tekstiä ja CTA: ta.

Tämä asettelu on hieno, kun sivustolla on tietty esityslista tai toimintakehotus, jonka käyttäjien on tarkoitus olla vuorovaikutuksessa. Kuvalähde: Basecamp

Suunnitteluvihjeitä.

  • Kiinnitä käyttäjiä siksak (tai jatkuva Z-malli). On mahdollista saada käyttäjät skannaamaan vuorottelemalla tekstiä ja kuvia muutaman kerran siksak.
Siksak-kuvio on Z-kuvio, joka toistetaan muutaman kerran samalla sivulla. Zig-zags luo rytmin, joka pitää vierailijat kiinnostuneina. Kuvalähde: Evernote

Tämän asettelun ydin on yksi iso valokuva, jota käytetään sivun taustana. Sitä käytetään vierailijoiden tutustumiseen sivuston sisältöön. Tällä asettelulla on mahdollisuus luoda vahva ensivaikutelma ja se rohkaisee käyttäjän vuorovaikutusta.

Milloin sitä käytetään.

Tämä asettelu on hieno, kun haluat sanoa vähemmän ja näyttää enemmän.

Kuvalähde: etsitkö Syyriaa

Suunnitteluvihjeitä.

  • Valitse taustakuva huolellisesti. Koska asettelu perustuu yhteen ainoaan kuvaan, on välttämätöntä valita oikea. Merkityksetön kuva voi helposti hämmentää kävijöitä.
  • Käytä kävijöitä videoiden sijaan kuvien sijasta. Ehkä kannattaa käyttää videota valokuvan sijasta, etenkin kun on osoitettava jotain toiminnassa.
Video antaa sinulle paremman mahdollisuuden houkutella kävijöitä staattisen kuvan yli. Kuvan lähde: Tesla
  • Älä anna mallin vähentää luettavuutta. Kuvan peittokuvana käyttämäsi tekstin tulee olla riittävän kontrastinen, jotta se olisi luettavissa. Jos teksti ei ole tarpeeksi kontrastinen, harkitse lisäkuvan lisäämistä kuvaan.
Kuvalähde: Google Wallet

Sivua suunniteltaessa on tärkeää muistaa, että sisältö on aina kuningas. Sivuston päätarkoitus on edelleen helposti sulavan sisällön julkaiseminen. Monien sisältömuunnelmien joukosta on välttämätöntä valita se, joka saa sisällön loistamaan.

Alun perin julkaistu osoitteessa theblog.adobe.com 13. joulukuuta 2017.