32 av de bästa webbplatsdesignerna för att inspirera dig 2020

Ibland stöter jag på en webbplats som verkligen drar mig in. Så jag hittade 32 av dem att visa dig.

Dessa webbplatser skjuter gränserna för vad som är känt för att vara möjligt på webben. Oavsett om det är designens estetik, användbarhet, interaktivitet, ljuddesign eller värde som webbplatsen erbjuder, var och en är ett mästerverk i sin respektive bransch och något att inspireras av.

Inte överraskande finns det många organisationer som lyfter fram dessa webbplatser och deras bidrag till webben. För att hjälpa till att få fram några av de mest inspirerande designen samlade jag 32 prisvinnare som har kommit igenom flera viktiga prisutdelningsorganisationer - inklusive Awwwards, UX Awards, The Webby Awards, SiteInspire, Best Website Gallery och FWA.

Klicka på länkarna nedan för att hoppa till en grupp webbdesign som krossade den under de senaste åren:

Under den här listan hittade jag också ytterligare sex webbplatser vars hemsidesdesign bara är cool och värt att lära sig av.

När du bläddrar igenom listan, vet att varje webbplats utmärker sig på sitt eget sätt och försöker tjäna ett unikt syfte. Medan en webbplats kan vara ett utmärkt exempel på visuell design, kan en annan vara ett utmärkt exempel på interaktivitet. Det betyder att inte alla dessa webbplatser kan vara ”konverteringsmaskiner” eller idéer som du enkelt kan kopiera till din webbplats.

Snarare är de fantastiska sätt att få lite webbdesigninspiration och se den banbrytande marknadsföring som händer i de olika hörnen på webben.

Bästa webbplatsdesign

  1. Virgin America
  2. Feed
  3. ETQ
  4. Mikiya Kobayashi
  5. Klimatförändringens historia
  6. Beagle
  7. Vävd tidskrift
  8. JOHO's Bean
  9. SWISS-värld
  10. Regnskogsväktare
  11. Protest sportkläder
  12. Lärarnas gilde
  13. Inuti Abbey Road
  14. Helt enkelt choklad
  15. NU
  16. Citrix: Den nya mobila arbetskraften
  17. crypton.trading
  18. Sydväst: Heart of Travel
  19. Reduktress
  20. Svämma över
  21. Frans Hals Museum
  22. Minimum
  23. Octopus: Design Blog av IDEO
  24. Nomadisk stam
  25. MovieMark
  26. Guillaume Tomasi
  27. District
  28. Tej Chauhan
  29. Amanda Martocchio Arkitektur
  30. District
  31. Tej Chauhan
  32. Amanda Martocchio Arkitektur

Vackra prisbelönta webbplatser

Och priserna går till ...

Bästa webbplatsdesigner från 2014 - 2015

1. Jungfru Amerika

Pris: Mest betydande branschutveckling, UX Awards 2014

I en värld där flygbolags webbplatser är kända för att vara full av stora användbarhetsfrågor, Virgin America har en av de bästa webbplatserna som driver användbarhet, tillgänglighet och lyhörd design framåt. Faktum är att det har utsetts till den första riktigt lyhörda flygbolagswebbplatsen, ett nytt prejudikat i branschen.

Homepage of Virgin America, en prisbelönt webbplatsPresenteras av UX Awards

2. Mata

Pris: Dagens webbplats (6-6-2015), Awwwards

Det är inte bara Feed ett intressant koncept, men det har också ett fantastiskt utförande som utmanar vår förståelse för vad som är möjligt på webben. Genom en kreativ blandning av animation och video fördjupar webbplatsen användaren i en mycket engagerande upplevelse. Som en atypisk webbplats innehåller den också flera unika användbarhetselement, inklusive en navigering som fungerar som en rullningsförloppsindikator.

Hemsidan för Feed, en prisbelönt webbplatsPresenterad av Awwwards

3. ETQ

Pris: Dagens webbplats (5-19-2015), Awwwards

ETQ tar en mycket minimalistisk inställning till e-handel med sin avskalade webbplats med stora, övertygande bilder av sin produkt. Enkla, platta, färgbaserade bakgrunder tillsammans med stark typografi hjälper till att hålla fokus på exakt vad användaren kom dit för att se: skor.

Hemsidan för ETQ, en prisbelönt webbplatsPresenterad av Awwwards

4. Mikiya Kobayashi

Pris: Dagens webbplats (7-4-2015), Awwwards

Mikiya är en produktdesigner med en minimalistisk portfölj som visar sitt arbete genom stark fotografering och subtila animationer. Hans fullständiga webbplats skapades ursprungligen på japanska och översattes sedan till engelska, vilket hjälpte till att demonstrera den internationella skalbarheten i hans design.

Hemsida för Mikiya Kobayashi, en prisbelönt webbplatsPresenterad av Awwwards

5. Klimatförändringens historia

Pris: Dagens webbplats (6-23-2015), Awwwards

Följ Luc Jacquets fotspår när Wild-Touch tar dig längs denna visuella och pedagogiska resa om historia om global klimatförändring. En blandning av historiska medier och unika animationer hjälper till att berätta historien.

Hemsidan för klimatförändringens historia, en prisbelönt webbplatsPresenterad av Awwwards

6. Beagle

Pris: Dagens webbplats (4-19-2015), bästa webbplatsgalleri

Beagle gör ett exceptionellt jobb för att visuellt och successivt berätta historien om sin produkt på ett enkelt och lätt att smälta. Detta är en stor utmaning för många nystartade företag, särskilt när de introducerar nya koncept till befintliga marknader. Folk vill veta ”Vad är din produkt? Hur fungerar det? Varför bryr jag mig? ” Beagle svarar på alla dessa frågor och visar samtidigt sin produkt och tvingar användaren att köpa. Dessutom är de en av få webbplatser som faktiskt implementerat "rullkapning" korrekt.

Hemsida för Beagle, en prisbelönt webbplatsPresenteras av Best Website Gallery

7. Vävd tidskrift

Pris: Dagens webbplats (4-4-2015), bästa webbplatsgalleri

Vävd är en online-publikation som firar både konstnärer, hantverkare och tillverkare. För mig representerar de en bekräftelse på att publikationer kan (och borde) ha vackra, engagerande webbplatser med lättläst innehåll. Fri från distraktioner som popup-fönster och påträngande annonser, den här webbplatsen handlar om upplevelsen av själva innehållet.

Hemsidan för Woven Magazine, en prisbelönt webbplatsPresenteras av Best Website Gallery

8. JOHO's Bean

Pris: Dagens FWA (8/7/2015), Favoritwebbplatser

Webbplatsen för JOHO's Bean har otroliga bilder, interaktivitet, berättande, visuell design och framför allt ljudteknik. Dessa samlas alla för att skapa en övertygande, emotionell och engagerande webbplats som berättar historien om en kaffebönas resa.

Hemsida för JOHO's Bean, en prisbelönt webbplatsPresenterad av FWA

9. SWISS-värld

Pris: Bästa användargränssnitt, 2015 Webby Awards

Ett annat flygbolag ?! Vad händer?! Japp, SCHWEIZISK flygbolagen byggde en otroligt uppslukande webbplats som berättar sin historia och beskriver hur det är att flyga med dem - och de gjorde helt enkelt för mycket jobb för att ignoreras. Starka bilder och animationer introducerar användaren till olika delar av webbplatsen som är fyllda med information utöver den vanliga försäljnings- och marknadsföringsnivån som är så vanligt idag.

World of SWISS hemsida, en prisbelönt webbplatsPresenterad av The Webby Awards

Bästa webbplatsdesigner från 2016

10. Regnskogsväktare

Pris: Bästa aktivismwebbplats, 2016 Webby Awards

Regnskogsväktare blev en av de mest uppslukande ideella webbplatserna 2016. För att skapa medvetenhet kring avskogning, tillåter webbplatsen användare att "besöka" olika byar, infödingar och vattenvägar som utgör Amazonas regnskog. Webbplatsen sätter interaktivitet i centrum för användarupplevelsen - ett klokt val om ditt mål är att få människor att ansluta till din sak och konvertera till volontärer.

regnskog-vårdnadshavare-bästa-webbplats-design-2016

Presenterad av The Webby Awards

11. Protest sportkläder

Pris: Årets webbplats (2016), Awwwards

Awwwards ringer Protest sportkläder en "shoppable look book", och det är precis vad den här webbplatsen är. Som klädutrustare har den här webbplatsen återuppfunnit hur de marknadsför sin produkt: Istället för att marknadsföra kläder, främjar Protest Sportswear "utseende". Detta gör företagets produkt till den mest tilltalande delen av webbplatsen, med hjälp av ett collage av stilar för att designa en hemsida som ändras så ofta som kundens stilar gör.

protest-sportkläder-bästa-webbplats-design-2016

Presenterad av Awwwards

12. Lärarnas guild

Pris: Bästa föreningswebbplats, 2016 Webby Awards

Lärarnas gilde är en professionell gemenskap av lärare vars webbplats publicerar innehåll som tar upp dagens mest kritiska utmaningar inom utbildning. Vad som gör den här webbplatsen prisbelönt är hur den balanserar olika innehållstyper - program, lösningar, tillvägagångssätt och samarbeten - utan att överväldiga besökarna. Inte bara är dess bakgrundsbilder framträdande, men de använder också vitt utrymme för att betona de skriftliga uppmaningarna till mitten, som visas på skärmdumpen nedan.

lärare-guild-bästa-webbplats-design-2016

Presenterad av The Webby Awards

13. Inuti Abbey Road

Pris: Bästa musikwebbplats, 2016 Webby Awards

Google slog det ur parken med detta mycket interaktiva webbplats, som tillåter användare att gå in i Abbey Road Studios. Strålande ljuddesign, navigationsmekanik och grafik blandat med den vanliga "Google-känslan" hjälper alla att locka besökare till denna välgjorda webbegendom.

Hemsida för Googles Inside Abbey Road, en prisbelönt webbplatsPresenterad av The Webby Awards

Bästa webbplatsdesigner från 2017

14. Helt enkelt choklad

Pris: Årets webbplats (2017), Awwwards

Du får ett sug efter choklad bara genom att titta på den här webbplatsen - och på ett sätt så är det Helt enkelt chokladwebbplats fungerar som designad.

Den här aptitretande webbplatsen är den för en dansk chokladtillverkare som heter Simply Chocolate. Dess webbplats använder en mängd olika färger (och kreativa produktnamn) för att marknadsföra varje chokladkaka. Och när du rullar från en produkt till en annan verkar de alla vara konsekventa i varumärket. Det tredimensionella utseendet på varje chokladkaka gör att du känner att du kan ta bort den från din datorskärm, medan CTA: n "Lägg till i rutan" längst upp till vänster är idealiskt för användare att välja de produkter de vill ha medan de surfar.

helt enkelt-choklad-bästa-webbplats-design-2017

Presenterad av Awwwards

15. NU

Pris: Bästa kulturblogg / webbplats, Webby Awards 2017

Nowness är kanske den häftigaste massbaserade videobloggen på internet idag. Det var en munfull ... vad betyder allt detta?

NU"Crowdsourced" natur är en del av det som gör det till en prisvinnare. Det betyder att det mesta av innehållet kommer från oberoende annonser - ett alltmer populärt sätt för företag att publicera innehåll. NOWNESS är också en videoblogg, vilket innebär att allt dess blogginnehåll är i videoformat. Tillsammans bidrar dessa kvaliteter till att göra Nowness till ett fängslande nav för de berättelser som varumärken överallt strävar efter att berätta.

Hemsidan för NOWNESS, en prisbelönt webbplatsPresenterad av The Webby Awards

16. Citrix: Den nya mobila arbetskraften

Pris: Dagens webbplats (11-23-2017), bästa webbplatsgalleri

Denna webbplats - dedikerad till Red Bulls partnerskap med Citrix, ett molnbaserat programvaruföretag - är fantastiskt.

Den nya mobila arbetskraften, en webbplats som ägs av Citrix, använder panoramafotografering för att visa besökare hur Citrix stöder Red Bull Racings nya racerbil. Även om du inte är en bilracingentusiast är det svårt att ignorera webbplatsens smarta animationer för att förklara en komplicerad bilteknik.

Hemsida för The New Mobile Workforce av Citrix, en prisbelönt webbplatsPresenteras av Best Website Gallery

Bästa webbplatsdesigner från 2018

17. krypton.trading

Pris: Dagens webbplats (4-3-2018), Awwwards

Möt crypton.trading, din robotbokföring.

Crypton.trading är ett handelscentrum för kryptovalutor som Bitcoin, som använder artificiell intelligens för att förutsäga förändringar i en valutas värde och identifiera viktiga köp- och försäljningsmöjligheter. Webbplatsen rankades högt för sin utveckling och design, eftersom den gradvis förklarar mer av utvecklarens metoder ju längre ner besökarna bläddrar.

Denna prisbelönta webbplats får tekniskt kunniga besökare att känna sig riktigt hemma när Cryptons hälsning dyker upp över hemsidan, en bokstav i taget.

Hemsida för crypton.trading, en prisbelönt webbplatsPresenterad av Awwwards

18. Sydväst: Heart of Travel

Pris: Bästa Visual Design - Estetisk, 2018 Webby Awards

När Southwest Airlines ville bevisa att sina kunder var ”mer än bara ett dollartecken” skapade företaget en webbplats vars design var sammansatt med hjälp av formerna på deras kunders flygvägar.

Webbplatsen heter Hjärta av resor, tillåter till och med besökare att skapa sina egna konstverk ur en resa de kanske planerar att ta. På detta sätt är Southwests webbplats en produkt av deras mest lojala passagerare.

Hemsida för Heart of Travel av Southwest Airlines, en prisbelönt webbplatsPresenterad av The Webby Awards

19. Reduktress

Pris: Bästa humorwebbplats, Webby Awards 2018

Det är inte så svårt att få någon att skratta på internet; så mycket av det vi läser och konsumerar online är tänkt att vara underhållande. Men det är svårt att göra det konsekvent för en stor publik. Reduktress är en satirisk tidskrift vars rubriker och allmänna läsupplevelse är toppnivå i humoravdelningen - vilket gör webbplatsen till en kvalitetsegenskap.

Hemsida för Reductress, en prisbelönt webbplatsPresenterad av The Webby Awards

20. Överflöde

Pris: Dagens webbplats (3-20-2018), bästa webbplatsgalleri

Svämma över är ett designverktyg som låter människor och företag skapa historieliknande flödesdiagram över sina idéer så att de är lättare för andra att förstå. Bortsett från att detta bara är en bra service, övar Overflow-webbplatsen vad den predikar: Tillsammans med levande röda uppmaningsknappar för nedladdning av verktyget marknadsför den här webbplatsen sin produkt på det bästa sättet den vet hur - med hjälp av ett flödesschema.

Webbplatsen levererar detta flödesschema i form av en video. Och medan inbäddade videor kan se ganska klumpiga ut mitt på en webbplats andra designelement, är Overflow perfekt placerad och exakt vad du vill se när du landar på webbplatsen för första gången.

överflöd-bästa-webbplats-design-2018

Presenteras av Best Website Gallery

21. Frans Hals Museum

Pris: Årets webbplats (2018), Awwwards

Det kan vara svårt för ett museum, vars varumärke är baserat på en mängd otroliga konstverk, att sammanföra allt på en sammanhängande webbplats. Det är det som gör webbplatsen för Frans Hals Museum så imponerande.

Beläget i Nederländerna har detta museum skapat en webbplats som använder en kombination av digitala designelement och egna utställningar. Denna blandning hjälper besökare att förstå vad de kommer att se, när de kan se det och var de annars kan få en smak av vad detta museum har att erbjuda. På tal om det sistnämnda marknadsför museet sitt Instagram-konto direkt på sin hemsida - ett lysande drag för ett museum som vill utöka sin publik över sina onlinekanaler.

frans-hals-museum-bästa-webbplats-design-2018

Presenterad av Awwwards

Prisbelönta mönster från 2019

22. 1917: I diken

Pris: Awwwards bästa webbplats för dagen

Denna hemsida, gjord för att marknadsföra filmen 1917, låter dig gå runt diken och utföra samma uppdrag som karaktärerna gjorde i filmen. Du kan också se deras kartor eller få tillgång till andra verktyg.

Detta är ett utmärkt exempel på en webbplats som. gick utöver interaktivitet samt en webbplats som utnyttjar sitt eget innehåll och förskrivna historia för att marknadsföra sin film. Denna webbplats vann Dagens sajt av Framåt vilket gör det möjligt för designers att rösta och nominera en bra webbplats som de ser dagligen.

1917 hemsida

23. Octopus: En designblogg av IDEO

Award: Business Blog / Webbplats 2019 Webby Award

IDEO, ett globalt designföretag, vann Webby-utmärkelsen Business Blog / Website 2019 för sin Octopus-blogg och med goda skäl. bloggen har en snygg, svartvitt bläckfiskritning som sin startsida och använder gult, svart och vitt för att skapa ett sammanhängande tema när du rullar.

Om du svävar över ett blogginlägg markeras titeln i gult och om du svävar över en bild dras bilden mot dig - två små funktioner som gör stor skillnad när det gäller att skapa en unik och engagerande användarupplevelse.

bläckfiskwebbplats

24. Nomadisk stam

Pris: Nominering av Awwwards 'Site of the Year

Denna webbplats, som nominerades till Awwards årets webbplats, är en av de mer engagerande webbplatserna jag har sett. Hemsidan börjar omedelbart spela en fantastisk video med en man som går över en öken, följt av underbara landskapsscener och text som "Har du turen att kalla dig en äventyrare?".

Texten i hela hemsida är lekfull, med färgglada pinks och apelsiner och gula, och hemsidan är logiskt utformad, med uppmaningar placerade i hela det intervallet i engagemangsnivå från "Läs mer" till "Titta nu" och slutligen "Ladda ner appen". I slutändan är webbplatsen vackert utformad med stor uppmärksamhet på detaljer och berättar en övertygande historia hela tiden.

nomadisk stamwebbplats

25. Diana Danieli

Pris: Webby 2019

Denna Webby 2019 vinnande webbplats visar bilder av konst och arkitektur med antingen hög kontrast eller kraftig exponering. Som besökare på webbplatsen kan du klicka och dra musen för att ändra bilder och variationer. Varje bild visar ett arbete som belyser konstnären som äger webbplatsen.

prisbelönta webbplats för inredning

26. George Nakashima Träarbetare

Pris: Webby 2019

Denna webbplats för träbearbetning betonar naturen och omsorgen för träbearbetning. Det är i grunden ett bildspel med vackra skogs- och jordbruksbilder. När en ny bild kommer på skärmen kommer också ett nytt citat relaterat till trä eller träd. Detta är otroligt avkopplande för besökaren och visar att träarbetarna känner igen trädens och miljön. Denna webbplats också vann en Webbie 2019.

Prisbelönt träbearbetningsplats

Andra häftiga webbdesigner

27. Minimum

Minimum tar en väldigt djärv inställning till hur de visar sitt innehåll, utnyttjar en nätbaserad webbdesign, stor typografi och högkvalitativa bilder i full bredd. Deras webbplats fungerar som ett riktigt bra exempel på hur man korrekt utför en rutnätstruktur samtidigt som man behåller en fin visuell hierarki i designen.

Hemsida för minimum, en cool webbdesign

28. MovieMark

MovieMark är en byrå för marknadsföring av tillväxt och HubSpot-partner, vars webbplats täcks topp mot tå i tjänsten den erbjuder: digital berättande. Beläget i Colombia gör byrån video till ett centralt fokus för sitt varumärke, så det passar bara det MovieMarkwebbplats följer detta tema. Och åh, hur visuellt tilltalande är videorna på webbplatsen ...

film-mark-cool-webbplats-design

29. Guillaume Tomasi

Som fotograf i Montreal, Guillaume Tomasi har byggt en portfölj som verkligen passar för att hysa hans unika och imponerande fotografi. Hans surrealistiska fotostil står intill sin enkla, platta, tomma och minimalistiska portföljdesign som lägger hela fokus på själva verket.

Hans unika serienavigering i kombination med konstgalleri-inspirerade arbetsintroduktioner och perfekta rullningsinteraktioner ger en upplevelse som påminner om ett riktigt galleri.

Guillaume Tomasi hemsida, en cool webbplats med stor användning av fotografering30. Distriktet

Denna varumärkesbyrå tar sina bilder på allvar, och det borde det - det hanterar alla mediekanaler för sina kunder. Distriktets webbplatsensam är en resa genom några av de vackraste konstverk och fotografier du någonsin har sett.

Dessa provocerande brickor förändras snabbt när du utforskar webbplatsen, och ju knäppare de verkar, desto mer intresserad blir du av att lära dig mer om deras tidigare arbete.

Hemsidan för The District, en cool företagswebbplats med abstrakt design

31. Tej Chauhan

Tej Chauhan har gjort impressionistiska konstverk till en affärsmodell med denna spännande webbplats. Varje bild på produktutvecklarens hemsida glider ut för att täcka den föregående bilden och erbjuder lite sammanhang runt objektet du nu ser framför dig.

Men är inte den bristen på sammanhang exakt vad som får dig att vilja lära dig mer? Tagline, "Souvenirs of the Near Future", antyder att dessa objekt är en del av deras produktserie - och en möjlighet för dig att få dessa innovativa objekt in i ditt liv.

Hemsida för Tej Chauhan, en vacker företagswebbdesign med abstrakt fotografi

32. Amanda Martocchio Arkitektur

Ett arkitektföretag kanske inte är specialiserat på webbutveckling, men dess webbplats bör fortfarande visa sitt engagemang för visuellt tilltalande design. Amanda Martocchio tog det till hjärtat med denna underbara webbplats.

Det är ingen hemlighet att Amanda Martocchio Arkitektur älskar sitt arbete - varje bild på webbplatsens hemsida är en förtrollande bild av husen företaget designar. Webbplatsen märker varje hus du bläddrar igenom med den typ av design som var avsedd, tillsammans med många vinklar mot varje byggnad.

Hemsida för Amanda Martocchio Architecture, en företagswebbplats med vacker fotografi

Webbplatsdesignidéer

Nu när du har sett ett antal vackert designade och prisbelönta plattformar, kom ihåg dessa potentiella idéer när du skapar dina egna.

  • Tänk på sätt som du kan göra din webbplats interaktiv, som 1917-exemplet.
  • Skapa en webbplats som betonar mobilupplevelsen, även om den fortfarande har en bra UX på stationära datorer.
  • Skapa en webbplats som berättar en historia om ditt varumärke med foton, text eller video.
  • Om du inte kan skapa en starkt interaktiv webbplats, kan du överväga att dra i ögonen med en webbplats som visar ett bildspel av dina foton.
  • Se till att dina uppmaningar är lätta att se och uppmuntra besökare att fortsätta utforska din webbplats
  • Håll navigeringen ren. Se till att dina besökare alltid vet hur de kommer tillbaka till hemsidan.
  • Integrera dina sociala mediasidor via sociala inbäddningsknappar så att besökare enkelt kan följa dig på dina olika sociala kanaler.
  • Håll var och en av dina webbsidor konsekvent i design - inklusive typsnitt, färger, bilder och meddelanden.
  • Testa din webbplats användbarhet med en värmekarta, som visar dig på vilka webbsidor dina besökare är mest benägna att studsa.
  • Inkludera en livechatt eller chatbot för att ge besökare möjlighet att interagera med dig direkt på din webbplats om de föredrar livechatt framför telefonsamtal. Livechatt kan automatisera funktioner för dina säljare och servicemedarbetare och skapa en bättre kommunikationsupplevelse för kunden.
  • Få en SSL-certifikat för att säkerställa att din webbplats är säker. SSL är en del av Googles sökrankingsalgoritm, så ett SSL-certifikat kan hjälpa dig att ranka högre i sökningen.

Vill ha mer exempel på webbdesign? Kolla in dessa fantastiska Produktsidor du vill kopiera omedelbart.

Ursprungliga artikel