16 van de beste Website Homepage ontwerp voorbeelden

u krijgt nooit een tweede kans om een eerste indruk te maken — daarom is uw homepage ongetwijfeld een van de belangrijkste webpagina ‘ s op uw website.

voor een bepaald bedrijf is de homepage de virtuele voordeur. Als een nieuwe bezoeker het niet leuk vindt wat ze zien, is hun reactie om op de “terug” knop te drukken.

dat klopt-helaas beoordelen veel mensen nog steeds een boek op zijn kaft.

wat maakt het ontwerp van de homepage van een website briljant in plaats van blah?, Nou, het kost meer dan alleen lijkt-het moet ook goed werken. Daarom scoren de meest briljante homepages op deze lijst niet alleen hoog in schoonheid, maar ook in hersenen.

maar voordat we in de 16 voorbeelden duiken, laten we enkele van de best practices van homepage design ontleden.

wat maakt een goede Website Homepage ontwerp

alle hier getoonde homepage ontwerpen maken gebruik van een combinatie van de volgende elementen., Niet elke pagina is perfect, maar de beste homepage ontwerpen krijgen veel van deze goed:

1) het antwoord duidelijk “wie ik ben,” “wat ik doe,” en/of “wat kunt u (de bezoeker) hier doen.”

als je een bekend merk of bedrijf bent (i. e. Coca Cola) kun je er misschien mee wegkomen dat je niet hoeft te beschrijven wie je bent en wat je doet; maar de realiteit is dat de meeste bedrijven nog steeds deze vragen moeten beantwoorden zodat elke bezoeker weet dat ze op de “juiste plaats zijn.,”

Steven Krugg vat het het beste samen in zijn bestverkopende boek, Laat me niet denken: als bezoekers niet kunnen identificeren wat je binnen enkele seconden doet, zullen ze niet lang blijven hangen.

2) het resoneert met de doelgroep.

een homepage moet eng gefocust zijn — spreken met de juiste mensen in hun taal. De beste homepages te vermijden “corporate gobbledygook,” en elimineren de pluis.

3) het communiceert een overtuigende waardepropositie.

wanneer een bezoeker op uw homepage aankomt, moet het hen dwingen om te blijven., De homepage is de beste plek om nagel uw value proposition, zodat prospects ervoor kiezen om te blijven op uw website en niet navigeren naar uw concurrenten’.

4) Het is geoptimaliseerd voor meerdere apparaten.

alle hier vermelde homepages zijn zeer bruikbaar, wat betekent dat ze gemakkelijk te navigeren zijn en er zijn geen “flitsende” objecten die het browsen in de weg staan, zoals flash banners, animaties, pop-ups, of te ingewikkelde en onnodige elementen. Veel van hen zijn ook geoptimaliseerd voor mobiele apparaten, wat een ongelooflijk belangrijke must-have is in de mobiele wereld van vandaag.,

5) Het omvat calls-to-action (CTA ‘ s).

elke hier vermelde homepage gebruikt effectief primaire en secundaire calls-to-action om bezoekers naar de volgende logische stap te leiden. Voorbeelden zijn “gratis proefperiode”, “een Demo plannen”, “Nu kopen” of ” meer informatie.”(Hier zijn 30 voorbeelden van grote CTA ‘ s voor meer inspiratie.)

onthoud, het doel van de homepage is om bezoekers te dwingen om dieper in uw website te graven en ze verder naar beneden te verplaatsen in de trechter. CTA ‘ s vertellen hen wat ze moeten doen zodat ze niet overweldigd of verloren raken., Belangrijker nog, CTA ‘ s Zet uw homepage in een verkoop – of lead-generatie motor, en niet alleen brochure-slijtage.

6) Het verandert altijd.

de beste homepages zijn niet altijd statisch. Sommigen van hen, zoals Whitehouse.gov, voortdurend veranderen om de behoeften, problemen en vragen van hun bezoekers weerspiegelen. Sommige homepages veranderen ook van A / B testen of dynamische content.

7) Het maakt gebruik van een groot algemeen ontwerp.

een goed ontworpen pagina is belangrijk voor het opbouwen van vertrouwen, het communiceren van waarde, en het navigeren van bezoekers naar de volgende stap., Als zodanig maken deze homepages effectief gebruik van lay-out, CTA-plaatsing, witruimte, kleuren, lettertypen en andere ondersteunende elementen.

nu, maak je klaar om te leren over uitstekende homepage ontwerp door middel van de volgende 16 real-life voorbeelden.

websiteontwerp inspiratie: 16 van de beste Homepageontwerpen

1) FreshBooks

bekijk de volledige HOMEPAGE

waarom het briljant is

• Het is gemakkelijk te consumeren. Er is veel discussie over de vraag of korte of lange homepages beter werken., Als u ervoor kiest om het laatste te doen, moet u het gemakkelijk maken om te scrollen en te lezen — en dat is precies wat deze site doet. Het gedraagt zich bijna als een verhaal.
• Er is veel gebruik van contrast en positionering met de primaire calls-to-action — Het is duidelijk wat het bedrijf wil dat u om te zetten op wanneer u aankomt.
• de kopie die gebruikt wordt in de calls-to-action “probeer het 30 dagen gratis” is erg overtuigend.
• de subheadline is ook geweldig: “doe mee met 5 miljoen mensen die FreshBooks gebruiken om pijnloos facturen te versturen, tijd bij te houden en kosten te vangen.,”Het nullen in op een gemeenschappelijke pijnpunt voor freelancers en kleine bedrijven — FreshBooks’ doelgroep) – meestal accounting software is vaak “pijnlijk complex.,”

2) Airbnb

volledige HOMEPAGE

waarom het briljant is

• de homepage is prachtig op zijn eigen: het begroet u met een full-screen video van prachtige, high-definition beelden van reizigers die activiteiten doen alsof ze de lokale bevolking, van koken in de keuken tot het kopen van lokale kazen om het rijden van een brommer door de straten. Het is heel menselijk en authentiek.,
• Het bevat het zoekformulier voor bestemming en datum waar de meeste bezoekers naar op zoek zijn, recht vooruit, en leidt bezoekers naar de logische volgende stap.
• het zoekformulier is “smart”, wat betekent dat het automatisch de laatste zoekopdracht van de gebruiker zal invullen als ze ingelogd zijn.
• de primaire call-to-action (“Search”) contrasteert met de achtergrond en valt op; maar de secundaire call-to-action voor hosts is ook zichtbaar boven de fold.,

3) Mint

bekijk de volledige HOMEPAGE

waarom het briljant is

• Het is een super eenvoudig ontwerp met een sterke, no-jargon headline en sub-headline.
• de homepage geeft een veilige maar easy-going vibe, wat belangrijk is voor een product dat financiële informatie verwerkt.
• Het bevat ook eenvoudige, directe en meeslepende call-to-action copy: “Sign up free.”Het CTA-ontwerp is ook briljant — het beveiligde slotpictogram raakt opnieuw de veiligheidsboodschap.,

4) Dropbox (Consumer)

waarom het briljant is

• Dropbox ‘ s homepage en website is het ultieme voorbeeld van eenvoud. Het beperkt het gebruik van kopie en visuals, en omarmt witruimte.
• het is moeilijk te zien aan de statische schermafbeelding hierboven, maar deze site vangt uw aandacht met zijn subtiele gebruik van grillige animatie in die afbeelding.
• hun sub-headline is eenvoudig, maar krachtig: “Ga naar al uw bestanden vanaf elke locatie, op elk apparaat, en deel ze met iedereen.,’Het is niet nodig om jargon te decoderen om erachter te komen wat Dropbox echt doet.
• het heeft een focus op één primaire call-to-action, “meld je gratis aan.”Maar de Google-enabled sign-up functie vermindert wrijving voor bezoekers die een hekel aan het invullen van lange registratieformulieren.

5) Dropbox (Business)

bekijk de volledige HOMEPAGE

waarom het helder is

• Het is een geweldig voorbeeld van het bieden van een andere website ervaring voor een ander publiek., In tegenstelling tot hun belangrijkste homepage, die oorspronkelijk werd gebouwd voor de consument kant (hierboven), hun zakelijke gebruikers meer informatie en extra bewijspunten die Dropbox for Business een veilige en schaalbare oplossing voor bedrijven (een perceptieprobleem dat Dropbox adressen op hun homepage direct).
• Dropbox blijft het eenvoudige ontwerp en branding overdragen. Het bevat alleen wat belangrijk is: een grote, relevante afbeelding met ondersteunende kopie, en een” probeer 30 dagen gratis ” call-to-action button

6) Whitehouse.,gov

waarom het briljant is

• het bouwen van een website die een hele natie ondersteunt is geen gemakkelijke taak. Whitehouse.gov is een voortdurend veranderende om top zorgen en prioriteiten weerspiegelen-de homepage alleen al is gegaan door honderden herzieningen. Testen en optimalisatie is een belangrijk onderdeel van een briljant homepage ontwerp.
• Whitehouse.gov is dat het volledig in tegenstelling tot de meeste overheid-gerelateerde websites. Het heeft een schoon ontwerp en bevordert een gemeenschap.,
• Het is vrij gemakkelijk om te vinden wat je zoekt als je hier landt. En als je het niet direct kunt vinden, is er zelfs een handig zoekvak.

7) 4 Rivers Smokehouse

Why It ‘ s Brilliant

• Drool. Dat denk ik ook als ik op de website van 4 Rivers Smokehouse aankom. Gecombineerd met geweldige fotografie, de kop ” Brisket. 18 jaar tot meester. Van jou mag je genieten.”klinkt als een ervaring die het proberen waard is.,
• de parallax scrolling begeleidt u tijdens een tour door hun diensten, menu en mensen die een geweldige tijd hebben — een groot gebruik van deze populaire designtrend.
• de enige negatieve? Ik woon niet dicht genoeg bij deze plek. Boe.

8) Cobb pediatrische therapiediensten

bekijk de volledige HOMEPAGE

waarom het briljant is

• het beroep op headline en subheadline aan de emotionele kant van de bezoekers: “werk met een bedrijf dat het begrijpt”; “vertrouw ons., Wij zijn er ook geweest! We zullen banen vinden waar je kunt gedijen.”Die waardepropositie is uniek en meeslepend.
• Het is moeilijk te zeggen uit de screenshot hierboven, maar de kop is op een draaimolen die geschikt is voor specifieke persona ‘ s, van sollicitanten tot mensen die op zoek zijn naar een therapeut voor hun school.
• er zijn verschillende routes die bezoekers kunnen nemen wanneer ze op de pagina aankomen, maar de calls-to-action zijn goed gepositioneerd, eenvoudig geformuleerd en contrasteren met de rest van de pagina.,

9) Jill Konrath

bekijk de volledige HOMEPAGE

waarom het briljant is

• Het is eenvoudig en komt meteen ter zake. Uit de kop en sub-kop, het is duidelijk precies wat Jill Konrath doet (en hoe ze kan helpen uw bedrijf).
• Het geeft ook gemakkelijk toegang tot Jill ‘ s thought leadership materialen, wat belangrijk is voor het vestigen van haar geloofwaardigheid als keynote speaker.,
• Het is gemakkelijk om u in te schrijven voor de nieuwsbrief en contact op te nemen — twee van haar primaire calls-to-action.
• Het bevat logo ‘ s en getuigenissen van nieuwsuitzendingen als sociaal bewijs.

10) Evernote

waarom het briljant is

• in de loop der jaren is Evernote van een eenvoudige app voor het opslaan van notities veranderd in een reeks zakelijke producten. Dit is niet altijd gemakkelijk over te brengen op een homepage, maar Evernote doet een mooi werk verpakken veel potentiële berichten in een paar belangrijke voordelen.,
• deze homepage maakt gebruik van een combinatie van rijke, gedempte kleuren in de video en hun kenmerkende heldere groene en witte hoogtepunten om conversiepaden te laten opvallen.
• na een eenvoudige kop (“onthoud alles”), leidt het oogpad je vervolgens naar hun call-to-action, “meld je gratis aan.”

11) Telerik by Progress

Why It ‘ s Brilliant

• ” Stuffy enterprise ” is niet het gevoel dat je krijgt als je op de website van Telerik aankomt., Voor een bedrijf dat veel technologieproducten biedt, geven hun gedurfde kleuren, leuke ontwerpen en videografie een Google-achtige sfeer. Slechts een belangrijk aspect om bezoekers zich welkom te laten voelen en hen te laten weten dat ze te maken hebben met echte mensen.
• ik hou van het eenvoudige overzicht op hoog niveau van hun zes productaanbiedingen. Het is een zeer duidelijke manier om te communiceren wat het bedrijf doet en hoe mensen meer kunnen leren.
• de kopie is licht en gemakkelijk te lezen. Ze spreken de taal van hun klanten.,

12) Boxbee

volledige HOMEPAGE

waarom het briljant is

• de headline is een call-to-action direct voor hun doelgroep: ondernemers in de opslagindustrie.
• Het heeft een zeer schoon en eenvoudig ontwerp. Het ontwerp benadrukt de kop, en dan onmiddellijk toont de primaire call-to-action – niet veel anders.
• die primaire call-to-action is in een sterk contrasterende kleur, waardoor het opvallen.,

13) ooien

Why It ‘ s Brilliant

• voor liefdes die hun grote dag plannen, is ooien een geweldige bestemming om een aangepaste bruiloft website te bouwen. De homepage is niet rommelig en bevat alleen de nodige elementen om mensen te krijgen om te beginnen met het bouwen van hun websites.
• de sub-headline ” meer dan 750.000 huwelijkswebsites gebouwd!”is een groot sociaal bewijs.,
• ze hebben uitstekende product visuals, een geweldige koptekst, en een call-to-action die wrijving met de kopie vermindert, “Start website.”

14) Basecamp

waarom het briljant is

• sinds lange tijd heeft Basecamp briljante homepages, en hier kunt u zien waarom. Ze bevatten vaak geweldige krantenkoppen en slimme cartoons.
• de call-to-action is vet en boven de fold.,
• In dit voorbeeld koos het bedrijf voor een meer blog-achtige homepage (of single page site approach), die veel meer informatie over het product biedt.

15) liefdadigheid: water

waarom het briljant is

• dit is niet uw typische non-profit website. Veel visuals, creatieve kopie, en het gebruik van interactieve webdesign maken dit opvallen.
• de geanimeerde kop is een geweldige manier om meerdere berichten op één regel vast te leggen.,
• groot gebruik van video en fotografie, met name bij het vastleggen van emoties die actie veroorzaken.

16) techvalidate

waarom het briljant is

• deze homepage is prachtig ontworpen. Ik hou vooral van hun gebruik van witte ruimte, contrasterende kleuren en klantgericht ontwerp.
• de kop is duidelijk en overtuigend, net als de calls-to-action.,
• er is ook een grote informatiehiërarchie, waardoor het gemakkelijk is om de pagina snel te scannen en te begrijpen.