Et koskaan saa toisen mahdollisuuden tehdä ensimmäinen vaikutelma — se on miksi etusivulle on epäilemättä yksi tärkeimmistä web-sivuja sivustosi.
mille tahansa yritykselle kotisivu on sen virtuaalinen etuovi. Jos Uusi vierailija ei pidä näkemästään, hänen polvitaklausreaktionsa on lyödä ”takaisin”-nappia.
se on oikein — valitettavasti moni vielä arvioi kirjaa sen kannen perusteella.
mikä tekee sivuston kotisivujen suunnittelusta loistavaa blahin sijaan?, No, se vaatii enemmän kuin näyttää yksin-sen täytyy myös toimia hyvin. Siksi tämän listan loistavimmat kotisivut eivät ole vain kauneudeltaan korkeita, vaan myös aivoiltaan. 
Mutta ennen kuin voimme sukeltaa 16 esimerkkejä, katsotaanpa leikellä joitakin parhaita käytäntöjä aloitussivun suunnittelu.
mikä tekee hyvän sivuston kotisivujen suunnittelusta
kaikki tässä esitetyt kotisivujen mallit hyödyntävät seuraavien elementtien yhdistelmää., Ei jokainen sivu on täydellinen, mutta paras kotisivu malleja saada monet oikein:
1) Se selvästi vastaa ”Kuka minä olen”, ”Mitä teen,” ja/tai ”Mitä voit (vierailija) tehdä täällä.”
Jos olet tunnettu brändi tai yritys (eli Coca Cola) voit ehkä saada pois, joilla ei ole kuvata, kuka olet ja mitä teet, mutta todellisuus on, useimmat yritykset vielä vastata näihin kysymyksiin niin, että jokainen kävijä tietää, että he ovat ”oikeassa paikassa.,”
Steven Krugg kiteyttää parhaiten hänen myydyin kirja, Älä Tee Minut Ajattelemaan: Jos kävijöitä ei voi tunnistaa, mitä se on sinun tehdä muutamassa sekunnissa, ne eivät tartu noin pitkä.
2) Se resonoi kohdeyleisön kanssa.
kotisivut on keskitettävä suppeasti oikeille ihmisille heidän kielellään. Parhaat kotisivut välttävät ”corporate gobbledygook”, ja poistaa fluff.
3) se viestii pakottavasta arvolupauksesta.
kun vierailija saapuu kotisivullesi, sen on pakotettava heidät jäämään., Kotisivu on paras paikka kynsien arvolupaus niin, että mahdollisuudet valita pysyä teidän verkkosivuilla ja navigoida kilpailijoiden.
4) se on optimoitu useille laitteille.
Kaikki kotisivut lueteltu tässä ovat erittäin käyttökelpoinen, eli ne on helppo navigoida ja ei ole ”flashy” esineitä, jotka saavat tavalla selailu, kuten flash-bannerit, animaatiot, pop-up, tai liian monimutkaisia ja tarpeettomia elementtejä. Monet niistä ovat myös mobiilioptimoituja, mikä on uskomattoman tärkeä must-have nykypäivän mobiilimaailmassa.,
5) Se sisältää calls-to-action (CTAs).
jokainen tässä lueteltu Kotisivu käyttää tehokkaasti ensisijaisia ja toissijaisia käyntejä ohjatakseen kävijät seuraavaan loogiseen vaiheeseen. Esimerkkejä ovat” ilmainen kokeiluversio”,” ajoittaa Demo, ”” Osta nyt ”tai” Lue lisää.”(Tässä 30 esimerkkiä great CTAs lisää inspiraatiota.)
muista, että kotisivun tavoitteena on pakottaa kävijät kaivautumaan syvemmälle sivustoosi ja siirtämään ne suppiloa alemmas. Ctat kertovat heille, Mitä tehdä seuraavaksi, jotta he eivät hukkuisi tai eksyisi., Vielä tärkeämpää on, että CTAs muuttaa kotisivusi myynti-tai lyijyn sukupolven moottoriksi eikä vain esitteen kulumiseksi.
6) se muuttuu aina.
parhaat kotisivut eivät aina ole staattisia. Jotkut heistä, kuten Whitehouse.gov, muuttuvat jatkuvasti vastaamaan tarpeita, ongelmia ja kysymyksiä heidän vierailijat. Jotkin kotisivut muuttuvat myös A / B-testauksesta tai dynaamisesta sisällöstä.
7) se työllistää suurta kokonaissuunnittelua.
hyvin suunniteltu sivu on tärkeää luottamuksen rakentaminen, kommunikointi-arvo, ja navigointi kävijöitä seuraavaan vaiheeseen., Sellaisenaan, nämä kotisivut tehokkaasti käyttää asettelua, CTA sijoitus, whitespace, värit, fontit, ja muut tukevat elementit.
nyt, valmistaudu oppimaan erinomaisesta kotisivujen suunnittelusta seuraavien 16 tosielämän esimerkin kautta.
Sivuston Suunnittelu Inspiraatiota: 16 Paras Kotisivu Malleja
1) FreshBooks
katso KOKO KOTISIVU
Miksi Se on Loistava
- Se on helppo kuluttaa. On paljon keskustelua siitä, toimivatko lyhyet tai pitkät kotisivut paremmin., Jos päätät tehdä jälkimmäisen, sinun täytyy tehdä helppo vierittää ja lukea-ja juuri niin tämä sivusto tekee. Se melkein toimii kuin tarina.
- on hyvä käyttää kontrastia ja paikannus ensisijainen calls-to-action — se on selvää, mitä yritys haluaa voit muuntaa, kun saavut.
- ”Try it Free for 30 Days”-kutsuissa käytetty kopio on erittäin vakuuttava.
- alaotsikko on myös suuri: ”Join 5 miljoonaa ihmistä käyttää FreshBooks kivuttomasti lähettää laskuja, seurata aikaa ja tallentaa kulut.,”Se nollia yhteinen kipu piste freelancereita ja pienyrityksille (FreshBooks’ kohderyhmä) — tyypillisesti kirjanpito-ohjelmisto on usein ”tuskallisen monimutkainen.,”
2) Airbnb
katso KOKO KOTISIVU
Miksi Se on Loistava
- kotisivu on upea omasta: Se tervehtii sinua koko näytön video-kaunis, high-definition kuvamateriaalia matkailijoille, tekee toiminnan kuten jos he ovat paikallisia, ruoanlaitto keittiössä ostaa paikallisia juustoja ajo mopo kaduilla. Se on hyvin inhimillistä ja autenttista.,
- se sisältää määränpää-ja päivämäärähakulomakkeen, jota suurin osa kävijöistä tulee etsimään, suoraan edessä, opastaen kävijöitä loogiseen seuraavaan vaiheeseen.
- hakulomake on ”smart” eli se täyttää käyttäjän viimeisen haun automaattisesti, jos he ovat kirjautuneet sisään.
- ensisijainen call-to-action (”Haku”) kontrastit taustaan ja erottuu, mutta toissijainen call-to-action isännät on näkyvissä taitteen yläpuolella, liian.,
3) Minttu
katso KOKO KOTISIVU
Miksi Se on Loistava
- Se on super yksinkertainen muotoilu voimakas, ei-jargon otsikko ja osa-otsikoihin.
- Kotisivu antaa varman mutta helpon fiiliksen, mikä on tärkeää taloudellista tietoa käsittelevälle tuotteelle.
- se sisältää myös yksinkertaisen, suoran ja pakottavan call-to-action-kopion: ”Rekisteröidy ilmaiseksi.”Myös CTA: n muotoilu on loistavaa — varmistettu Lukko-ikoni iskee jälleen kerran kotiin turvaviestin.,
4) Dropbox (Kuluttaja)
Miksi Se on Loistava
- Dropbox on kotisivu ja sivusto on äärimmäinen esimerkki yksinkertaisuus. Se rajoittaa kopioinnin ja visuaalisuuden käyttöä, ja se kattaa valkotilan.
- Se on vaikea kertoa staattinen kuvakaappaus edellä, mutta tämä sivusto kaappaa huomiota sen hienovarainen käyttö hassu animaatio, että graafinen.
- heidän alaotsikkonsa on yksinkertainen, mutta tehokas: ”Hanki kaikki tiedostosi mistä tahansa, millä tahansa laitteella ja jaa ne kenen tahansa kanssa.,”Ei tarvitse purkaa jargon selvittää, mitä Dropbox todella tekee.
- se keskittyy yhteen ensisijaiseen call-to-actioniin, ”Rekisteröidy ilmaiseksi.”Mutta Googlen mahdollistama rekisteröitymisominaisuus vähentää kitkaa kävijöille, jotka inhoavat pitkien rekisteröintilomakkeiden täyttämistä.
5) Dropbox (Business)
katso KOKO KOTISIVU
Miksi Se on Briliant
- Se on hyvä esimerkki tarjota eri verkkosivuilla kokemus eri yleisölle., Toisin kuin niiden tärkein kotisivu, joka oli alun perin rakennettu kuluttajan puolella (yllä), niiden liiketoiminta käyttäjät tarvitsevat lisää tietoa ja uusia todisteita pistettä, että Dropbox for Business-turvallinen ja skaalautuva ratkaisu yrityksille (käsitys asiasta, että Dropbox-osoitteet heidän kotisivu suoraan).
- Dropbox jatkaa yli se on yksinkertainen muotoilu ja brändäys. Se sisältää vain sen, mikä on tärkeää: suuri, asiaa kuvaa tukevat kopioida, ja ”Kokeile ilmaiseksi 30 päivän ajan” call-to-action-painike
6) Whitehouse.,gov
Miksi Se on Loistava
- Rakentaa sivusto, joka tukee koko kansakunnan ei ole helppo tehtävä. Whitehouse.gov on jatkuvasti vastaamaan alkuun huolenaiheet ja painopisteet — kotisivu yksin on käynyt läpi satoja tarkistuksia. Testaus ja optimointi on keskeinen osa nerokasta etusivun suunnittelua.
- Mikä on erityisen hienoa Whitehouse.gov on, että se on täysin toisin kuin useimmat hallitus-sivuille. Se on rakenteeltaan puhdas ja vaalii yhteisöä.,
- Se on melko helppo löytää mitä etsit, kun maa täällä. Ja jos et löydä sitä heti, siellä on jopa kätevä hakulaatikko.
7) 4 Joet Tupakointitilan
Miksi Se on Loistava
- Kuolaa. Sitä mieltä olen, kun saavun verkkosivuilla 4 Rivers Smokehouse. Yhdistettynä loistavaan valokuvaukseen otsikko ” Brisket. 18 vuotta mestariksi. Sinun nautittavaksesi.”kuulostaa kokeilemisen arvoiselta kokemukselta.,
- parallaksi vieritys opastaa sinut kiertueella läpi niiden palveluja, valikko, ja ihmiset ottaa hauskaa — suuri käyttää tätä suosittu muotoilu trendi.
- ainoa negatiivinen? En asu tarpeeksi lähellä tätä paikkaa. Boo.
8) Cobb Pediatric Therapy Services
katso KOKO KOTISIVU
Miksi Se on Loistava
- otsikko ja alaotsikko valittaa vierailijoiden emotionaalinen puoli: ”Työskennellä Yritys, Joka Saa Sen”; ”Luota meihin., Mekin olemme olleet siellä! Löydämme työpaikkoja, joissa voit menestyä.”Tuo arvolupaus on ainutlaatuinen ja vakuuttava.
- vaikea sanoa kuvakaappaus edellä, mutta otsikko on pyörivä karuselli, joka palvelee erityisiä persoonia, työ hakijoiden ihmiset etsivät terapeutti niiden kouluissa.
- On olemassa useita reittejä kävijät voivat ottaa, kun he saapuvat sivulla, mutta calls-to-action on sijoitettu hyvin, muotoiltu yksinkertaisesti, ja kontrasti muun sivun.,
9) Jill Konrath
katso KOKO KOTISIVU
Miksi Se on Loistava
- Se on helppoa ja saa suoraan asiaan. Alkaen otsikko ja osa-otsikoihin, se on selvää, mitä Jill Konrath ei (ja miten hän voi auttaa yritystäsi).
- Se myös antaa helppo pääsy Jill on ajatus johtajuutta materiaaleja, jotka on tärkeää luoda hänen uskottavuutensa keynote-puhuja.,
- Se on helppo tilata uutiskirjeen ja saada yhteyttä — kaksi hänen ensisijainen calls-to-action.
- se sisältää news outlet-logot ja suosittelut sosiaalisena todisteena.
10) Evernote
Miksi Se on Loistava
- vuosien varrella, Evernote on muuttunut yksinkertainen huomautus säästävä sovellus osaksi suite yritysten tuotteita. Tämä ei ole aina helppoa välittää kotisivulla, mutta Evernote tekee mukavaa työtä pakkaamalla monia mahdollisia viestejä muutamaan keskeiseen hyötyyn.,
- Tämä kotisivu on käyttää yhdistelmä rikas, hillityt värit video ja niiden allekirjoitus kirkkaan vihreä ja valkoinen kohokohtia tehdä muuntaminen polut erottuvat.
- yksinkertaisen otsikon (”Remember Everything”) jälkeen silmäpolku johtaa sitten heidän kutsuun-to-action, ”Rekisteröidy ilmaiseksi.”
11) Telerik Edistyksen
Miksi Se on Loistava
- ”Tukkoinen enterprise” ei ole tunne saat, kun saavut Telerik: n verkkosivuilla., Yritykselle, joka tarjoaa monia teknologiatuotteita, niiden rohkeat värit, hauskat mallit ja videografia antavat pois Google-tyylisen tunnelman. Vain yksi tärkeä näkökohta saada vierailijat tuntemaan tervetulleiksi ja kertoa heille, että he ovat tekemisissä todellisten ihmisten kanssa.
- I love the simple, high-level overview to their six product offers. Se on hyvin selkeä tapa viestiä, mitä yritys tekee ja miten ihmiset voivat oppia lisää.
- kappale on kevyt ja helppolukuinen. He puhuvat asiakkaidensa kieltä.,
12) Boxbee
katso KOKO KOTISIVU
Miksi Se on Loistava
- otsikko on call-to-toiminta kohdistuu suoraan niiden kohderyhmä: yrittäjät varastointi teollisuudessa.
- sillä on hyvin puhdas ja yksinkertainen muotoilu. Suunnittelu korostaa otsikko, ja sitten heti näyttää ensisijainen call-to-action — ei paljon muuta.
- ensisijainen call-to-action on hyvin erottuva väri, joten se erottuu.,
13) eWedding
Miksi Se on Loistava
- niille, jotka rakastavat lintuja suunnittelu niiden suuri päivä, eWedding on hyvä kohde rakentaa mukautetun häät verkkosivuilla. Kotisivu ei ole sekainen ja sisältää vain tarvittavat elementit, jotta ihmiset alkavat rakentaa verkkosivustojaan.
- sub-headline ”Yli 750.000 häät sivustoja, rakennettu!”on suuri sosiaalinen todiste.,
- He ovat mukana erinomainen tuote grafiikka, suuri otsikko, ja call-to-toiminta, joka vähentää kitkaa kopioi, ”Aloittaa verkkosivuilla.”
14) Basecamp
Miksi Se on Loistava
- pitkään, Basecamp on ollut loistava kotisivut, ja täällä voit nähdä, miksi. Niissä on usein mahtavia otsikoita ja näppäriä piirrettyjä.
- call-to-action on lihavoitu ja sen yläpuolella.,
- tässä esimerkissä yritys valitsi enemmän blogi-kuten kotisivu (tai yhden sivun sivuston lähestymistapa), joka tarjoaa paljon enemmän tietoa tuotteesta.
15) hyväntekeväisyys: vesi
Miksi Se on Loistava
- Tämä ei ole tyypillinen ei-voittoa verkkosivuilla. Monet visuaalit, luova kopio ja interaktiivisen web-suunnittelun käyttö tekevät tästä erottuvan.
- animoitu otsikko on loistava tapa tallentaa useita viestejä yhdellä rivillä.,
- suurta videokuvan ja valokuvauksen käyttöä erityisesti toimintaa aiheuttavien tunteiden vangitsemisessa.
16) TechValidate
Miksi Se on Loistava
- Tämä kotisivu on kauniisti suunniteltu. Pidän erityisesti valkoisen tilan käytöstä, kontrastiväreistä ja asiakaslähtöisestä muotoilusta.
- otsikko on selkeä ja vakuuttava, koska ovat calls-to-action.,
- Siellä on myös paljon tietoa hierarkia, joten se on helppo skannata ja ymmärtää sivun nopeasti.