21 prisbelönta Webbdesigner och vad de gjorde rätt
internet är fullt av några fantastiska och inspirerande webbplatser.
dessa speciella snöflingor är de som hittar innovativa sätt att utnyttja alla möjliga design och tekniska gränser till sin fördel för att skapa erfarenheter som många organisationer önskar att de hade.
att hitta dessa diamanter i grov kan vara en otrolig utmaning, särskilt om du planerar en webbplats redesign och är osäker på var du ska börja.,
lyckligtvis, webbplatser som css Awards, Awwwards, Webby Awards, etc. finns för att belysa de webbplatser som vi bör driva vår egen att reflektera.
för att hjälpa till att visa upp några av dessa vinnande webbplatser, duva jag in i var och en av dessa prisbelönta webbplatser och drog de som inte bara är vackra exempel på modern design utan också utöva UX, UI, informationsarkitektur, konverteringshastighetsoptimering, videomarknadsföring, taktik till sin fulla potential.
När du tittar på varje webbplats är det viktigt att förstå att dessa inte ska ses som mallar som du bör försöka kopiera., Istället analysera dem och hitta de delar av dem som använder design / marknadsföring / innehållsstrategier som kan återanvändas och revideras till något som passar din publik.
med detta sagt, njuta av dessa 17 killer exempel på prisbelönta webbplats mönster gjort rätt.
snarare titta? Här är 5 av mina favoriter!,
ESPN Sports Programming
presenterade på Awwwards
ESPN tar sitt sportinnehåll och programmering till nästa nivå med denna dynamiska och iögonfallande plats fylld med stora högupplösta bilder och video. Webbplatsen använder bakgrundsvideo för att hålla jämna steg med sport nätverkets energi och sektioner med subtila sväva och övergångseffekter och för att hålla användarupplevelsen smidig., Reglaget ”featured sports” är grundligt entrancing och gör ett utmärkt jobb med att visa upp var och en av sporterna tillsammans med intressant statistik och informativa detaljer om tillgängliga program.
Montage
Presenterat på Awwwards
Montage tar visar-off sin produkt till nästa nivå med denna lätt att manövrera hemsida som tydligt beskriver vad dess produkt är, hur det ser ut, produktkvalitet, och vittnesmål., Webbplatsen är ett utmärkt exempel på ett tillvägagångssätt som du kan använda för att markera din produkt och de viktigaste punkterna som användarna skulle vara oroade över att hitta svar på. Den klibbiga undernavigering tillåter användare att enkelt navigera runt sidan för att hitta exakt vad de letar efter.
Zillow
med på Webby Awards
att hitta det perfekta hemmet handlar om att enkelt kunna undersöka exakt vad du letar efter, spara och lagra vad du vill, och göra det enkelt att hitta allt senare., Zillow träffar spiken på huvudet för alla tre av dessa punkter med sin intuitiva fastigheter webbplats. Sökområdet inom hjälteområdet gör det enkelt för nya användare att snabbt välja och söka listor utan att behöva leta efter någon dold söksida.
Revols
med på css Design Awards
Revols tar ett djärvt tillvägagångssätt på sin webbplats genom att förstora sina små, sofistikerade hörlurar med hjälp av makrofotografering och video., Fotografering och video gör webbplatsen otroligt produktfokuserad, så dess användare blir långsamt mer och mer nedsänkt i upplevelsen dessa hörlurar kan ge dig. Den stora typsnittsbehandling på denna webbplats är också en fin touch och bidrar till större än livet öronsnäcka fotografering.
Fiftythree penna
med på SiteInspire
Fiftythree fångar alla funktioner och fördelar för sin penna Stylus hela denna fristående produktsida., Dessa funktioner och fördelar åtföljs av bilder för att illustrera produkten i aktion så att användaren har en enklare tid visualisera dem och hur de kan tillämpa produkten. Layouten och visuell behandling av produktens anatomi avsnitt är också mycket unik och fungera som ett dynamiskt sätt att leda användare att läsa mer om produkten, i motsats till statiska sektioner en efter en.,
Morgan Stanley
med på Webby Awards
Till skillnad från traditionella produktfokuserade webbplatser, Morgan Stanley rubriker sin hemsida med en artikel som de hoppas att driva en betydande mängd trafik till (särskilt eftersom den ansluter med semester familjen sammankomster vi förväntas delta). Resten av layouten utanför hemsidan hjälte spelar med ett rutnät fokuserad layout för att organisera sortimentet av senaste artiklar som de har skrivit.
7., Boosted
Presenterat på Awwwards
Boosted tog vad som kunde ha sett som en genomsnittlig skateboard till nästa nivå genom att införa otroligt detaljerade bilder av sin produkt tillsammans med detaljerade beskrivningar på sin webbplats. Webbplatsens gråtoner och vita bakgrunder hjälper till att hålla fokus på de orange call-to-action-knapparna och den färgglada skateboard de använder som ett exempel på produkten., Jag älskar också det faktum att de har en blogg som verkar lyfta fram frågor som de har/tar itu med produkten, lägga till en underbar nivå av öppenhet till företaget.
8. Wozber
med på SiteInspire
Wozber gjorde en mördare jobb bryta ner steg för steg process som krävs för att se till att ditt CV är perfekt för det drömjobb du letar efter. Dess hemsida beskriver tydligt stegen uppåt, som sedan förklaras ytterligare i enskilda avsnitt nedan.,
webbplatsen har även exempel på några av de meritförteckningar de har gjort, vilket gör det enkelt för dig att se exakt hur den färdiga produkten kan se ut innan du bestämmer dig för att registrera dig.
Opus växer
Presenterat på css vinnare
Opus driver hem organiska, naturliga och hälsofördelar av sin jord genom att lägga till rikliga mängder grönska i hela webbplatsen. Med så många olika alternativ för att plantera jordar där ute kan det vara svårt att bestämma vilken som är den hälsosammaste för dina växter eller trädgård., Opus bevisar att dess produkt är bäst genom att ta itu med ingredienserna och fysikaliska egenskaper som dess jordar erbjuder som segmenterar den från ditt traditionella varumärke. Jag var också mycket glad över att se att de bloggade och ibland blandade i mer härliga inlägg för att hjälpa till att nå bredare publik som den här.
Zero Financial
Presenterat på Awwwards
alltför ofta har mjukvaruföretag mycket vackra webbplatser som helt saknar bilder av sina produkter., Om du är för närvarande i denna position och letar efter inspiration, är Zero en fantastisk plats för inspiration. Användningen av bilder tillsammans med beskrivande text som förklarar var och en gör produkten så mycket mer verklig och relatable för personer som är intresserade.
Cap HPI
Presenterat på Awwwards
Cap HPI hjälper till att ge ett brett utbud av fordonsdata till en mängd olika personas. Med detta i åtanke har Cap HPI byggt sin webbplats så att de personas har en lätt tid att hitta den typ av lösning de letar efter., För att underlätta detta har de optimerat navigeringen så att du snabbt kan förstå om CAP HPI kan hjälpa dig.
utöver allt detta gör webbplatsens design, subtila animationer och unika färgpalett en härlig och uppfriskande visuell upplevelse på en marknad som annars kan ha en mycket intetsägande företagslayout.
Quiver
Presenterat på Awwwards
även om webbplatsen är mindre än andra, lyckas Quiver fortfarande lysa bland resten.,
Jag älskar det faktum att de använder känslor omedelbart när du anländer på hemsidan med bakgrunden och kopian. De lyckades till och med få ett registreringsformulär där, snarare än att bara införliva en knapp som skickar besökare till en separat registreringssida.
Quivers produkt och funktioner sidor gör ett vackert jobb med att visa utseendet på programvaran tillsammans med små interaktiva element för att visa hur produkten fungerar.,
Wordstack
Presenterat på css vinnare
Wordstack gjorde ett utmärkt jobb att hålla sin webbplats liten, kondenserad och organiserad, samtidigt leverera allt värde som produkten erbjuder. Den stora, full bredd bilder och konsekvent användning färgpalett och styling hela sidorna gör för en otroligt enhetlig design som par mycket bra med färg gommen av programvaran.,
Campos Coffee
med på css Design Awards
vissa kunder älskar att hänge sig åt produkter som de vet är tillverkade och skapade av företag som vill leverera kvalitetsprodukter till sina kunder. Och företag som Campos Coffee vet exakt hur man tillgodoser dessa köpare.
Campos använder sin webbplats som ett sätt att markera tid och ansträngning deras team sätter i sitt kaffe, hur det gynnar samhället, och varför du kommer att må bra att köpa den., Alla dessa punkter blir insvept i en underbar historia som de visar på Hemsidan och på alla andra sidor.
Kin
med på SiteInspire
i stället för att bara lyfta fram funktioner, tar Kin det till nästa steg och använder sin hemsida för att visa upp fördelarna med sina produkter så att folk vet exakt vad produkten kan användas för innan de begår sig till andra områden på webbplatsen.,
När det gäller design hjälper Kins användning av den större serif-teckensnittet på hela webbplatsen tillsammans med äkta kontorsfotografering att lägga till en stor trovärdighet för sitt varumärke. Det låter också kunden veta att det finns verkliga, personliga människor bakom den fantastiska produkten, snarare än att lämna det upp till gissningar.
SeaStreak
med på Webby Awards
Vill du resa med färja men inte säker på vart du ska åka? SeaStreak har dig i goda händer. Webbplatsens användargränssnitt är organiserat så att du snabbt kan bygga ett färjeschema som fungerar för dig., Jag tycker också navigeringen är mycket intressant. Rutter och scheman menyn faller ner för att visa dig alla tillgängliga alternativ, och dagsturer och getaway menyn är redan segmenterad för användare som är på webbplatsen letar efter exakt det. Dessa element bidrar till att skapa bekvämlighet för användaren och hastighet, så att de inte är kvar i ett mörkt hål på webbplatsen försöker lista ut hur man söker efter vad de vill.,
s flaska
Presenterat på css vinnare
s flaskans eleganta produkt ges särskild behandling under hela utformningen av webbplatsen för att belysa dess innovativa skönhet och fördelar. Att använda flaskan i olika animationer har gjort webbplatsen mer engagerande och lägger till intresse för att lära sig mer om produkten.
Ocean Health Index
med på W3 Awards
Ocean Health Index hjälper till att föra skönheten i havet till webben med sin fantastiska layout, visuella bilder och cool ton färgpalett., Den stora användningen av teckensnitt över hela webbplatsen hjälper också till att hålla det lätt att läsa och professionell.
19. WealthSimple
Presenterat på Awwwards
användningen av utrymme på Wealthsimple gör det otroligt enkelt att segmentera varje del av sidorna. De vackra GIFs hela sidan gör också för en spännande upplevelse, särskilt eftersom de inte relaterar direkt till investeringar.
webbplatsen gör investera verkar så mycket roligare., I stället för att visa upp kalkylblad, högar med kontanter och klibbigt språk ser de till att de skiljer WealthSimple-märket så att det inte verkar som alla andra investeringsprogram eller tjänster
Toggl
som finns på CSSDesignAwards
den udda animationen på Toggls hemsida drar användarens uppmärksamhet omedelbart vid ankomsten. Denna bildstil bärs genom de återstående sektionerna med enkla grupper av innehållslådor direkt bredvid varje.
Toggl ägnar också noggrann uppmärksamhet åt hur saker animerar in på sidan belastning., Till exempel bleknar Toggls prissättningssida i hjälten och sedan varje prisområde från vänster till höger. Uppmärksamhet på dessa detaljer gör känslan av webbplatsen så mycket mer polerad.
Shademaster
med på cssdesignawards
titta på tak kanske inte låter roligt för den genomsnittliga husägare, men Shademaster ser till att det kan vara.
de segmenterade strategiskt vilken typ av arbete de gjorde i takkonstruktioner i nav som skickar användaren ut till enskilda sidor där de kan planera och designa sitt ideala tak och få ett citat., Detta tillvägagångssätt gör taket köpprocessen som mycket mer autonom för användare; det finns ingen anledning för någon att besöka ditt hus bara för att få något igång.
letar du efter din egen webbplats redesign?
din webbplats är tänkt att vara ansiktet på din online-närvaro och ett sätt att representera ditt varumärke praktiskt taget. Om din webbplats inte upprätthåller en design som matchar det sätt du vill uppfattas, kommer det i slutändan att misslyckas med att utföra optimalt., IMPACT älskar att arbeta med andra företag i ett samarbete för att förstå vad du vill att din webbplats verkligen ska se ut så att vi kan hjälpa dig genom strategin för att göra det till en verklighet.
tycker du att det är dags för din webbplats att få den ansiktslyftning som den förtjänar att bättre representera ditt varumärke och i slutändan öka dess prestanda? Prata med oss och berätta om din webbplats mål och ambitioner.
