Viime aikoina ”otsikko” verkkosuunnittelussa viittasi tyypillisesti verkkosivustojen yläosassa olevaan kaistaleeseen, joka sisälsi logon, navigointipalkin ja ehkä joitakin yhteystietoja ja hakupalkin. Nykyään ”otsikolla” viitataan useammin koko etusivun yläpuolella olevaan tilaan.
Jos joku ei ole löytänyt sivustoasi sosiaalisessa mediassa jaetun blogikirjoituksen tai toisen sivuston suosituksen kautta, on todennäköistä, että hän tulee sivustollesi etusivun kautta. Ja ensimmäinen asia, jonka he näkevät, on yläreunan parhaimmat kiinteistöt paljaina.
Olen aiemminkin kirjoittanut siitä, että kävijät reagoivat paremmin tiettyjen elementtien (kuten logon ja CTA:n) ennakoitavaan sijoitteluun verkkosivustollasi. Suunnittelemalla verkkosivusto siten, että sen tavoitteena on vastata kävijöiden odotuksiin ja parantaa heidän viihtyvyyttään tekemällä kokemuksesta jonkin verran ennakoitavampaa, voit tehokkaasti parantaa klikkaus- ja konversiolukuja.
Ajattele nyt tuota otsikkotilaa etusivulla.
Vähemmistö ihmisistä on tottunut luottamaan siihen, että etusivut antavat heille lintuperspektiivistä käsityksen siitä, mistä yrityksessä tai verkkosivustossa on kyse, joten sinulla ei ole varaa hukata tätä tilaisuutta, jossa pystyt täyttämään nämä odotukset. Aloitussivun otsikkosuunnittelu voi tietysti olla brändillesi ominainen, mutta sen sisältämien elementtien ei todellakaan pitäisi olla. Kävijät odottavat, että vierittäminen ei ole välttämätöntä, jotta he saavat selville, mitä sivusto tekee heidän hyväkseen. Pohjimmiltaan otsikkosi pitäisi olla 10 sekunnin tarina, joka todistaa kävijöille, mitä arvoa sivusto tuo heille.
Mitä siis teet tällä tilalla herättääksesi kävijöiden mielenkiinnon?
Keskustellaanpa joistakin otsikkosuunnittelun trendeistä vuonna 2017, siitä, mitä voit tehdä hyödyntäessäsi tätä näkyvästi näkyvää kiinteää omaisuutta, ja katsellaan matkan varrella muutamia mielenkiintoisia esimerkkejä otsikoista.
14 Trends in Header Web Design in 2017
Ei ole niin, etteivät kävijäsi olisi tietämättömiä siitä, että he voivat vierittää sivua alaspäin tai napsauttaa navigaation läpi saadakseen lisätietoja sivuston takana olevasta brändistä. Mutta miksi heidän pitäisi tehdä niin? Otsikossa on tarpeeksi tilaa tarjota tiivis viesti, joka kertoo heille kaiken tarpeellisen. Ja jos 50 sanaa tai vähemmän ei riitä, taustakuva tai muotoilu kertoo loput tarinasta.
Kotisivun otsikko voi ennen kaikkea tehdä tai rikkoa kävijöiden ensivaikutelman, ja siksi tämän osion onnistuminen on niin tärkeää.
Jos kamppailet etsiessäsi tapaa aloittaa sivustosi ryminällä, ehkä löydät inspiraatiota seuraavista vuoden 2017 otsikkosuunnittelutrendeistä:
Ylikokoinen sankarikuva
Sivujen modulaarisen suunnittelutyylin ansiosta, jotta ne olisivat responsiivisia, useimmat mallit on nykyään jaettu erillisiin lohkoihin ja osiin. Tämä suunnittelutyyli sattuu soveltumaan hyvin näille täysleveille sankarikuville, jotka kansoittavat niin monia verkkosivustoja.
Ota esimerkiksi Cleverbird Creativen verkkosivusto. Se käyttää yksittäistä ja silmiinpistävää kuvaa, joka on päällystetty yksinkertaisella tekstillä, toivottaakseen kävijät tervetulleiksi. Ei ole epäilystäkään siitä, mitä he tavoittelevat tässä: yksinkertaistettua kauneutta.
Liukukuvat
Luulen, että ei ole kovinkaan kaukana menneisyydessä oli aika, jolloin monet meistä kyseenalaistivat liukukuvan käyttökelpoisena suunnitteluelementtinä. Monet suunnittelijat ovat kuitenkin hyödyntäneet sitä hienosti otsikoissa. On liukukuvia, jotka vierivät automaattisesti yhdestä kauniista korkearesoluutioisesta kuvasta toiseen, ja on Pierren kaltaisia liukukuvia, jotka pyytävät kävijöitä ottamaan kokemuksen hallintaansa itse.
Transformative Parallax Imagery
Parallax scrolling on edelleen vahvassa kasvussa, ja otsikko on osoittautunut täydelliseksi paikaksi soveltaa tämäntyyppistä visuaalista ”illuusiota” verkkomuotoiluun. Viime aikoina on kuitenkin nähty, että suunnittelijat antavat parallaksirullaukselle muuntavan särmän, luultavasti yllättääkseen kävijät rullauksen odottamattomalla lopputuloksella. Australialainen UX-suunnittelutoimisto August on tehnyt juuri näin otsikossaan.
Videotaustat
Videotaustat ovat toinen niistä viimeaikaisista trendeistä, jotka todella toimivat parhaiten, kun niitä sovelletaan etusivun otsikkoon. Tämä Le 28:n käyttämä tausta luo hienosti tunnelmaa ravintolan verkkosivuille ja näyttää videoita ruokapaikan etu- ja takaosasta.
Hidden Navigation
Vaikka voidaan väittää, että hampurilaisvalikko kuuluu mobiililaitteilla katseltaviin verkkosivustoihin (kuten alun perin oli tarkoitus), on jotain sanottavaa siitä, mitä tällainen navigoinnin minimalismi tekee otsikolle. +rehabstudion sivusto on tästä hyvä esimerkki. Kun navigaatio on piilotettu pois, huomio kiinnittyy välittömästi plus-symbolin sisällä olevaan jännittävään visuaaliseen ilmeeseen… ja sitten tajuaa, että sen ympärillä on pieniä animaation vivahteita.
Brand Mascot
Jos otsikko on paikka, jossa vierailijat esitellään sivustollesi, mikä olisikaan parempi tapa aloittaa se kuin esittelemällä heille ”hahmot”, jotka he tapaavat matkan varrella? Jos sivustollasi käytetään brändin maskotteja – kuten WPMU DEV:n sivustolla – tämä on oikea aika ja paikka esitellä ne.
Silmiä hivelevä typografia
Sivuston typografialle voi tehdä paljonkin. Joskus kyse ei kuitenkaan ole siitä, että valitset hienoimman kursiivifontin, jonka voit heittää ihmisten naamalle. Jos katsot yllä olevaa Slackin esimerkkiä, huomaat, että kyse on fontin koosta. Heidän valitsemassaan typografiassa ei ole mitään erityistä, mutta se on niin puhdasta ja selkeää. Tämä yhdistettynä pääviestin kokoon tekee siitä niin huomiota herättävän.
Sisältö ensin
Sivustoilla, joilla keskitytään ensisijaisesti toimittamaan kävijöille sankoin joukoin sisältöä (ajattele mitä tahansa merkittävää uutissivustoa tai -blogia), sisältö ensin -strategia otsikon osalta on järkevin. Tässä ei todellakaan kannata kiertää sanoja. Ihmiset ovat tulleet sivustollesi lukemaan sisältöäsi, eikä heidän tarvitse jarrutella etusivulla ylimääräisellä lukemisella, joten voit siirtyä suoraan asiaan, kuten Glamour tekee.
Tuotteet ensin
Samoilla linjoilla verkkokauppasivustojen ei tarvitse vaivautua käyttämään otsikkoa tarttuvan otsikon kirjoittamiseen tai tarjota yrityksestä kertovaa videota. Kävijät tietävät, mitä varten he ovat tulleet sivustolle, joten voit siirtyä suoraan asiaan. Toisin kuin sisällöntuottajat, tuotekauppiaat voivat kuitenkin käyttää tätä ensiluokkaista kiinteistöä esittelemään myydyimpiä tuotteitaan tai uusimpia julkaisujaan houkutellakseen kävijöitä eteenpäin, kuten Apple tekee.
CTA Front-and-Center
Voi kuitenkin tulla hetki, jolloin sivustollasi voi olla jotakin aidosti erikoista esiteltävää kävijöitäsi kohtaan, jotakin, jonka haluat, että kävijät lataisivat ladattavaksi tai ostaisivat. Vaikka se ei ehkä olisikaan sivustosi tärkein vetonaula, voit käyttää otsikkoa joko väliaikaisesti tai pysyvästi korostamaan tätä erityistä toimintakutsua, kuten Everywhereist-bloggaaja tekee kirjansa kanssa.
Värikkäät värit ja tekstuurit
Ehkä yksi hienoimmista asioista, joita Google Material Design on tuonut mukanaan, on halukkuutemme käyttää eloisampia värejä, kerroksia ja kaltevuuksia verkkosuunnittelussa. Niiden ei enää tarvitse rajoittua toimintakutsupainikkeisiin, vaan niitä voidaan käyttää kokonaisia lohkoja verkkosivustolla, kuten Stripe tekee värikkäällä ja teksturoidulla otsikollaan.
Animation
Ei ole mitään väärää siinä, että kotisivun otsikkosivun muotoilu on staattista, varsinkaan, jos halutaan kiinnittää huomio johonkin toimintakutsupainikkeeseen (CTA:han) tai videoon. Pidä se yksinkertaisena, jotta ei ole häiriötekijöitä, jotka estävät kävijöitä tekemästä haluamaasi toimenpidettä. Mutta sivustoille, jotka haluavat mielenkiintoisen tavan jakaa viestinsä lukijoille, animaatiot voivat olla viisas valinta. Baianat käyttää pientä animaatiota jakamaan useita viestejä samassa tilassa, mikä estää sitä näyttämästä sekavalta tai informaatiota täynnä olevalta.
Geometriset muotoilut
Geometrinen web-suunnittelu sattuu olemaan tällä hetkellä todella iso juttu, sillä se sopii hyvin responsiivisen muotoilun edellyttämiin loogisiin ja puhtaisiin linjoihin. Ei siis ole yllätys, että yhä useammat verkkosivustot, kuten tämä Perspective API -verkkosivusto, integroivat geometrisia elementtejä otsikon muotoiluun. On myös muita, kuten Stripe ja WPMU DEV, jotka käyttävät diagonaalisia linjoja luodakseen kävijöille ainutlaatuisen ja odottamattoman visuaalisen maiseman.
Experimentaalinen
Viimeiseksi tulemme kokeellisiin header-malleihin. Avain näihin ei yleensä ole se, että otsikko on äärettömän outo ja epätavallinen. Se häiritsisi kävijöitä liikaa. Sen sijaan tulisi keskittyä luomaan jokin odottamaton efekti, joka aiheutuu pelkästä liikkeestä otsikon poikki.
Otetaan esimerkiksi Teamgeek-suunnittelu. Voit nähdä, että sivun keskellä olevassa logossa ja viestissä on jotain ”outoa”, mutta vasta kun paneudut siihen, huomaat, että siihen on rakennettu erityinen käänne.
Pakkaus
Kuten näet, WordPress-sivuston otsikon voi suunnitella monella eri tavalla. Jos kuitenkin katsot tarkkaan yllä olevia esimerkkejä, huomaat, että suunnittelijat olivat hyvin strategisia sen suhteen, millaista otsikkotyyliä he käyttivät ja mitä elementtejä siihen sisällytettiin. Kun on aika suunnitella otsikko seuraavaan verkkosivustoprojektiisi, harkitse, tarvitsetko seuraavia:
- Logo
- Traditionaalinen vs. piilotettu
- Sankariotsikkoosa vs. piilotettu
- Sankariotsikkoosa. päästä suoraan sisältöön
- Tagline tai toiminta-ajatus
- Yhteystiedot
- Sosiaalisen median linkit
- Hakupalkki
- Monikielinen vaihtovalikoima
- Varastokori
- Merkin maskotti
- Kuvakamera vs. Todellinen valokuva yrityksestä, ihmisistä tai tuotteesta
- Staattinen kuva vs. liukuvat kuvat vs. taustavideo
- Sisäänrakennettu mainosvideo
- Toimintakutsupainike
- Yhteydenottolomake
- Tervehdyspalkki
Voi olla, että löydät muitakin kohteita, jotka sopivat kotisivusi tähän yläotsikon osaan. Kyse on oikeastaan vain siitä, mikä on sivuston kannalta järkevintä. Toisin sanoen, mitkä elementit kertovat brändisi tarinan, kouluttavat ja sitouttavat yleisöäsi heti alkuun ja herättävät tarpeeksi luottamusta, jotta he etenevät sivustollasi eteenpäin…
Tunnisteet:
- design
- headers