Sivuston otsikko, johon viitataan myös yläpuolella olevana osiona, on kiistatta verkkosivuston tärkein osa. Lähinnä siksi, että se on verkkosivuston ensimmäinen osa, jonka kävijät näkevät saapuessaan verkkosivustolle.
Sivustojen kohdalla ensivaikutelmalla on paljon merkitystä. Ja otsikko-osalla on siinä merkittävä rooli. Itse asiassa erään tutkimuksen mukaan suurin osa verkkosivuston kävijöistä viipyy verkkosivustolla vain noin 15 sekuntia ennen kuin he lähtevät sieltä.
Sivustosi otsikkosuunnittelu on avainasemassa sen suhteen, pystytkö vakuuttamaan kävijän jäämään sivustolle pidemmäksi aikaa kuin 15 sekuntia.
Oikein suunnitellulla otsikkosuunnittelulla voit vaikuttaa kävijöihin, jotta he jatkaisivat sivuston selaamista. Voit myös suunnitella otsikon niin, että se saa kävijät vakuuttuneiksi myös toimimaan.
Voidaksemme auttaa sinua löytämään inspiraatiota ja oppimaan muutamia niksejä tehokkaasta otsikkosuunnittelusta, poimimme käsin joitakin parhaita esimerkkejä verkkosivuston otsikkosuunnittelusta inspiraatioksesi. Nämä mallit auttavat sinua varmasti saamaan omat otsikkosi erottumaan joukosta.
2 Million+ Digital Assets, With Unlimited Downloads
Saa rajattomasti ladata yli 2 miljoonaa suunnitteluresurssia, teemoja, malleja, valokuvia, grafiikkaa ja paljon muuta. Envato Elements alkaa 16 dollarista kuukaudessa, ja se on paras luovan alan tilaus, jonka olemme koskaan nähneet.
Explore Digital Assets
5 vinkkiä tehokkaaseen verkkosivuston otsikkosuunnitteluun
Ennen kuin siirrymme esimerkkeihin, tutustutaan keskeisiin elementteihin, jotka tekevät verkkosivuston otsikosta tehokkaamman.
Käytä oikeaa fonttia
Oikea fontti
Oikea otsikko tai otsikko on verkkosivuston otsikkosuunnittelun keskipisteessä. Se auttaa kävijöitä ymmärtämään, mistä verkkosivustossa on kyse. Otsikon on siis oltava suuri, rohkea ja selvästi näkyvä.
Oikealla fontilla voit suunnitella täydellisen otsikon, joka herättää huomiota. Vaikka rohkean sans-serif-fontin käyttäminen on paras valinta otsikoissa, joillekin brändeille sopii paremmin myös serif-fontti. Varmista ennen kaikkea, että otsikkosi, alaotsikkosi ja tekstisi näkyvät selvästi taustan yläpuolella.
Lisää kuvitus
Kuva- ja videotaustat ovat edelleen varsin suosittuja. Uusin trendi verkkosivuston otsikkosuunnittelussa on kuitenkin kuvitusten käyttäminen.
Kuvitusten käyttämisessä otsikkosuunnittelussa on se hieno puoli, että sen avulla voit lisätä persoonallisuutta verkkosivustosi suunnitteluun. Voit askarrella käsin kuvituksen, joka sopii yritykseesi ja brändiisi. Ja käytä sitten samantyylisiä kuvituksia koko verkkosivuston suunnittelussa, jotta käyttäjäkokemus olisi sujuva.
Luo toimintakutsu (CTA)
Toimintakutsu on tietysti otsikkosuunnittelun toiseksi tärkein elementti (ensimmäisenä tulee otsikko). CTA:n avulla voit suostutella kävijöitä ryhtymään toimiin ja rekisteröitymään palveluun, etsimään kohteita, tilaamaan uutiskirjeen, ostamaan tuotteen ja paljon muuta.
Mutta CTA:n sijoittelussa on oltava tarkkana. Hyvä strategia on A/B-split-testata otsikkomalleja, jotta löydät täydellisen väriyhdistelmän ja oikean paikan CTA:n sijoittamiseen.
Valitse sopiva valikkotyyli
Navigointilinkit ovat myös tärkeitä, mutta niiden ei välttämättä tarvitse olla osa otsikkomalliasi. Voit suunnitella otsikon, jossa on piilotettu navigointijärjestelmä, joka tulee näkyviin vain alaspäin vierittäessä. Tai jopa piilottaa navigoinnin hampurilaisvalikkoon.
Se riippuu tavoitteista, jotka haluat saavuttaa verkkosivustollasi. Selkeästi näkyvä navigaatio auttaa kävijöitä tarkastelemaan verkkosivustosi muita sivuja nopeammin. Jos haluat välttää häiritsemästä kävijöitä ja kannustaa heitä lukemaan lisää tuotteesta, harkitse navigoinnin piilottamista.
Ole luova, mutta noudata standardeja
Suunnittelijoita rohkaistaan usein olemaan luovia verkkosivustoja suunnitellessaan. Käytä kuitenkin aina myös tavanomaisia suunnitteluohjeita.
Käytä esimerkiksi mittoja, kun lisäät logoja, painikkeita ja kuvakkeita. Ja noudata myös web-suunnittelun perusohjeita löytääksesi sopivat sijoitukset kullekin elementille. Tämä auttaa luomaan johdonmukaisuutta koko verkkosivujen suunnittelussa.
Katso alla olevia esimerkkejä verkkosivujen otsikoista nähdäksesi, miten se tehdään.
PenzGidroMash
Olipa uskomatonta tai ei, tämä on Venäjällä sijaitsevan teollisuuslaitteita valmistavan yrityksen verkkosivu. Ja sillä on yksi luovimmista verkkosivujen otsikoista, joita olemme nähneet.
Vaikka useimmat yrityssivustot valitsevat yleensä vanhanaikaisen ja klassisen verkkosivumuotoilun, tämän yrityksen moderni muotoilutapa on virkistävä.
Kaikki sen otsikosta, fonttivalinnoista, väreistä ja erityisesti kuvien käytöstä 3D-tyyppisen muotoilun luomiseksi tekee tästä verkkosivuston otsikosta todella oppitunnin tehokkaasta web-suunnittelusta.
Creative Dreams Design
Tämä verkkosivuston otsikkosuunnittelu on loistava esimerkki malleista, jotka kertovat, että ”vähemmällä saadaan enemmän”. Äärimmäisen minimalistinen ulkoasu yksinkertaisella animoidulla kuvituksella auttaa tätä verkkosivustoa saavuttamaan tärkeän tavoitteen – näyttämään luovuutta. Ja juuri siihen luovan suunnittelutoimiston verkkosivuston tulisi pyrkiä.
Yksinkertainen toimintakutsu, ihastuttava kuvitus, animaatiot ja värit puhtaan valkoisen taustan päällä antavat tälle otsikkosivulle ansaitsemansa huomion.
Digital Horizon
Sijoitusyritys Digital Horizonin verkkosivusto tarjoaa loistavan oppitunnin otsikkotaustan suunnittelusta. Se antaa valtavan osan otsikkotilastaan animoidulle taustalleen, joka sopii täydellisesti yrityksen nimeen ja konseptiin. Lisäksi se korostaa otsikkoa ja toimintakutsua varsin hyvin.
Kuvataustojen ja animoitujen taustojen käyttö on edelleen ajankohtaista. On vain löydettävä oikea tapa naittaa otsikkosuunnittelu yrityksen brändin kanssa.
Okb Interactive Studio
Korostettu otsikkosuunnittelu tarvitsee ison rohkean otsikkofontin. Tämä elämyksellinen suunnittelustudio on löytänyt täydellisen yhdistelmän otsikkofontista ja fontin koosta luodakseen todella mieleenpainuvan otsikkosuunnittelun.
Ei ole kyse vain otsikon koosta tai fontin valinnasta. Myös tapa, jolla teksti paljastaa osia taustasta ja piilottaa valikko, linkit ja jopa yrityksen nimi antaakseen otsikolle sen kipeästi kaipaamaa tilaa, tekee tästä suunnittelusta merkittävän.
IdeaBuddy
Kun on kyse SaaS-laskeutumissivujen otsikoiden suunnittelusta, joskus on helpompaa vain näyttää, mitä sovellus osaa, kuin vain sanoa se. Ideoiden validointisovellus IdeaBuddy käytti tätä yksinkertaista lähestymistapaa suunnitellakseen tehokkaamman otsikon.
Kuvitusten luovan käytön lisäksi otsikossa ja koko sivustolla se käyttää myös kuvakaappauksia sovelluksesta esitelläkseen, mitä palvelu tarjoaa.
Together For Animals
Sivustoja ja otsikoita suunniteltaessa muotoilun psykologian sisällyttäminen suunnittelun psykologiaan on tärkeää. Etenkin voittoa tavoittelemattomilla ja hyväntekeväisyyssivustoilla tällaiset strategiat ovat ratkaisevassa asemassa tunteiden herättämisessä.
Tämän eläinten hyväntekeväisyyssivuston verkkosivusto käyttää suunnittelupsykologiaa hyvin lisäämällä yhden kuvan, joka koskettaa kävijöiden sydäntä ja sielua.
Stuart
Slidereiden käyttäminen on toinen suosittu konsepti, jota käytetään verkkosivustojen otsikkosuunnittelussa. Vanhat tavat käyttää kuvaslidereja ovat kuitenkin hitaasti häviämässä nykyaikaisista me-malleista. Tämä jakelupalvelusivusto vei vanhan slider-konseptin uudelle tasolle.
Se käyttää täydellistä yhdistelmää laadukkaita kuvia läpinäkyvillä taustoilla, pastellivärejä ja animoituja otsikoita luodakseen erittäin viihdyttävän otsikkosuunnittelun, jossa on sisällön liukusäädin.
Handwrytten
Handwrytten on hyvin ainutlaatuinen palvelu, joka tarjoutuu toimittamaan kirjoituksiasi käsinkirjoitetuissa viesteissä. Otsikon suunnittelu tällaiselle palvelulle on varmasti haasteellista. Ja he näyttävät luoneen täydellisen muotoilun esittelemään yritystä houkuttelevalla tavalla.
Tämä otsikko sisältää todellisen esimerkin käsinkirjoitetusta viestistä, jota ympäröivät luovasti animoidut kuvitukset, ja se kuvaa täydellisesti tämän palvelun ja yrityksen tarkoitusta ja päämäärää.
Wild Side Design
Tämä verkkosivujen otsikkokuvio on toinen loistava esimerkki siitä, miten kuvituksia käytetään tarinan kertomiseen. Tässä tapauksessa otsikossa käytetään käsintehtyä piirrosta, joka visualisoi tämän yrityksen viestin. Joka tarjoaa yrityksille brändisuunnittelua, joka vie ne tavallisista yrityksistä suuruuteen.
Tämä on oppitunti siitä, miten yksi ainutlaatuinen kuvitus voi lisätä niin paljon persoonallisuutta verkkosivuston otsikkoon.
Stef Ivanov
Freelance-suunnittelija Stef Ivanovin portfoliosivustolla on yksi ainutlaatuisimmista otsikkosuunnitelmista, joka tekee siitä erottuvan. Kyse ei ole vain hänen valokuvansa upeasta luonnospiirroksesta tai hänen päänsä ympärillä surisevista mehiläisistä. Vaan ennen kaikkea se, miten hän käyttää kaikkia elementtejä, fontteja, värejä ja valkoista tilaa yhdessä luodakseen mieleenpainuvan elämyksen.
Pragmaattiset aivot
Kokonaisen yrityksen kiteyttäminen tai toimiston kaikkien palveluiden esitteleminen otsikkoalueen rajallisessa tilassa on vaikeaa. Jotenkin Pragmatic Brains -verkkosivusto on onnistunut sisällyttämään kaikki heidän konsultointipalvelunsa otsikkokenttään. Sotkematta suunnittelua.
Ensi silmäyksellä se näyttää tavalliselta verkkosivuston otsikolta, jossa on nippu kuvituksia. Mutta taika tapahtuu, kun viet hiiren kursorin noiden korttikuvioiden päälle. Ne paljastavat yksityiskohtia jokaisesta toimiston tarjoamasta palvelusta. Melko nokkela ja tehokas otsikkosuunnittelu.
AirPods Pro
Emmekä voi jättää huomiotta Applen tuotesivujen nerokkaita verkkosivusuunnitelmia, varsinkaan luodessamme luetteloa luovista otsikkosuunnitelmista. Apple on vuosien varrella oppinut mestarillisesti vangitsemaan käyttäjien huomion uskomattoman yksinkertaisilla verkkosivumuotoiluillaan.
AirPods Pro -tuotesivuston otsikkosuunnittelussa on myös radikaali muotoilu. Se on yksinkertainen ja antaa käyttäjien ymmärtää nopeasti, mistä verkkosivustolla on kyse.
Pixelwithin
Tämä verkkosivuston otsikkosuunnittelu sopii täydellisesti sen web-suunnittelutoimiston brändiviestintään. Se käyttää hyvin yksinkertaistettua otsikkoa ilman monia värejä, kuvia tai tekstiä osoittaakseen minimalistisen ja ”mutkattoman” suunnittelun voiman.
Sheetal Ice Cream
Tämän intialaisen jäätelöyrityksen verkkosivusto näyttää yhtä maukkaalta kuin heidän tuotteensa itse. Erityisesti sivuston otsikko-osio onnistuu houkuttelemaan kävijöitä tehokkaasti siistillä ulkoasulla, jossa on värikäs tausta, joka korostaa vain yhtä jäätelön kuvaa. Kukaan ei pystyisi vastustamaan tämän verkkosivuston vierittämistä alaspäin, vaikka olisitkin laktoosi-intolerantikko.
Courses Australia
Yksi listamme tehokkaimmista otsikkosuunnitteluista kuuluu australialaiselle verkkosivustolle, joka toimii hakukelpoisena hakemistona australialaisten korkeakoulujen tarjoamille verkkokursseille.
Sen yksinkertainen muotoilu, joka asettaa hakujärjestelmän keskipisteeseen, toimii tehokkaana kehotuksena toimintaan. Sitä seuraa hakemisto, jonka avulla käyttäjät voivat tutkia kursseja eri aihealueilla, toimialoilla ja pätevyystasoilla.
Nämä ovat vain muutamia monista näkemistämme hämmästyttävistä otsikkosuunnitelmista. Jatka netin tutkimista löytääksesi lisää hämmästyttäviä malleja. Tutustu myös verkkosivujen rautalankamalleihimme ja Sketch-verkkosivumalleihimme saadaksesi lisää inspiraatiota.