21 bekroonde websiteontwerpen & wat ze goed deden
het internet staat vol met enkele verbazingwekkende en inspirerende websites.
deze speciale sneeuwvlokken zijn degenen die innovatieve manieren vinden om elk mogelijk ontwerp en technologische grens in hun voordeel te gebruiken om ervaringen te creëren die veel organisaties wensen te hebben.
het vinden van deze diamanten in de ruwe kan een ongelooflijke uitdaging zijn, vooral als u een website herontwerp plant en niet zeker weet waar u moet beginnen.,
Gelukkig, sites zoals CSS Awards, Awwwards, Webby Awards, etc. bestaan om te helpen markeren de sites die we moeten duwen onze eigen te reflecteren.
om een aantal van deze bekroonde sites te laten zien, dook ik in elk van deze bekroonde sites en trok de sites die niet alleen mooie voorbeelden van modern design zijn, maar ook UX, UI, informatiearchitectuur, conversieoptimalisatie, videomarketing, tactieken tot hun volle potentieel.
wanneer u naar elke site kijkt, is het belangrijk om te begrijpen dat deze niet moeten worden gezien als sjablonen die u moet proberen te kopiëren., In plaats daarvan, analyseer ze en vind de delen van hen die gebruik maken van ontwerp/marketing/content strategieën die kunnen worden hergebruikt en herzien in iets dat past bij uw publiek.
met dat gezegd zijnde, geniet van deze 17 killer voorbeelden van bekroonde website ontwerpen goed gedaan.
liever kijken? Hier zijn 5 van mijn favorieten!,
ESPN Sports Programming
Featured on Awwwards
ESPN tilt zijn sportinhoud en-programmering naar een hoger niveau met deze dynamische en opvallende site gevuld met grote afbeeldingen en video ‘ s met hoge resolutie. De site maakt gebruik van achtergrondvideo om gelijke tred te houden met de energie en secties van het sportnetwerk met subtiele hover-en overgangseffecten en om de gebruikerservaring soepel te houden., De’ featured sports ‘slider is grondig betoverend en doet een uitstekend werk van de presentatie van elk van de sporten naast interessante statistieken en informatieve details over de beschikbare programma’ s.
Montage
Featured on Awwwards
Montage brengt het product naar een hoger niveau met deze eenvoudig te manoeuvreren homepage die duidelijk aangeeft wat het product is, hoe het eruit ziet, productkwaliteit en getuigenissen., De site is een uitstekend voorbeeld van een aanpak die u kunt gebruiken om uw product te markeren en de belangrijkste punten uw gebruikers zou zich bezighouden met het vinden van antwoorden op. De sticky sub-navigatie stelt gebruikers in staat om eenvoudig te navigeren rond de pagina om precies te vinden wat ze zoeken.
Zillow
Featured op de Webby Awards
het vinden van de perfecte woning draait allemaal om het gemakkelijk vinden van wat u zoekt, opslaan en opslaan van wat u wilt, en het gemakkelijk maken om het allemaal later te vinden., Zillow slaat de spijker op de kop voor alle drie deze punten met zijn intuã tieve onroerend goed website. Het zoekgebied binnen het hero-gebied maakt het gemakkelijk voor nieuwe gebruikers om snel te selecteren en zoeklijsten zonder te zoeken naar een verborgen zoekpagina.
Revols
Featured on CSS Design Awards
Revols neemt een gedurfde aanpak op zijn website door het vergroten van zijn kleine, geavanceerde hoofdtelefoon met behulp van macro fotografie en video., De fotografie en video maken de site ongelooflijk productgericht, zodat de gebruikers langzaam meer en meer worden ondergedompeld in de ervaring die deze hoofdtelefoon U kan geven. De grote lettertype behandeling op deze site is ook een leuke touch en draagt bij aan de groter-dan-leven oordop Fotografie.
Vijftree potlood
Featured on SiteInspire
Vijftree legt alle functies en voordelen voor zijn Potloodstift op deze standalone productpagina vast., Deze functies en voordelen gaan gepaard met afbeeldingen om het product in actie te illustreren, zodat de gebruiker een gemakkelijkere tijd heeft om ze te visualiseren en hoe ze het product kunnen toepassen. De lay-out en visuele behandeling van de anatomie sectie van het product zijn ook zeer uniek en fungeren als een dynamische manier om gebruikers te leiden om meer te lezen over het product, in tegenstelling tot statische secties de een na de ander.,
Morgan Stanley
Featured on The Webby Awards
In tegenstelling tot traditionele productgerichte sites, kopt Morgan Stanley zijn homepage met een artikel waar ze een aanzienlijke hoeveelheid verkeer naar hopen te sturen (vooral omdat het verbonden is met de vakantie familie bijeenkomsten die we verwachten bij te wonen). De rest van de lay-out buiten de homepage hero speelt met een grid-gerichte lay-out om het assortiment van recente artikelen die ze hebben geplaatst te organiseren.
7., Boosted
Featured on Awwwards
Boosted tilde wat gezien had kunnen worden als een gemiddeld skateboard naar een hoger niveau door verbazingwekkend gedetailleerde foto ‘ s van zijn product te introduceren, vergezeld van gedetailleerde beschrijvingen op zijn site. De site ‘ s grijze tinten en witte achtergronden helpen houden de focus op de oranje call-to-action knoppen en de felgekleurde skateboard ze gebruiken als voorbeeld van het product., Ik hou ook van het feit dat ze een blog die lijkt te benadrukken problemen die ze hebben/aanpakken met het product, het toevoegen van een prachtig niveau van transparantie aan het bedrijf.
8. Wozber
Featured on SiteInspire
Wozber heeft het stap voor stap proces afgebroken dat nodig is om ervoor te zorgen dat uw cv perfect is voor die droombaan die u zoekt. De homepage schetst duidelijk de stappen vooruit, die vervolgens verder worden uitgelegd in de afzonderlijke secties hieronder.,
de site heeft zelfs voorbeelden van een aantal CV ‘ s die ze hebben gemaakt, waardoor het voor u gemakkelijk is om precies te zien hoe het eindproduct eruit zou kunnen zien voordat u besluit om u aan te melden.
Opus groeit
Featured on CSS Winner
Opus zorgt voor de biologische, natuurlijke en gezondheidsvoordelen van zijn bodem door overvloedige hoeveelheden groen toe te voegen over het hele gebied. Met zo veel verschillende opties voor potgrond die er zijn, kan het moeilijk zijn om te beslissen welke het gezondst is voor uw planten of tuin., Opus bewijst zijn product is het beste door het aanpakken van de ingrediënten en fysieke eigenschappen van de bodem bieden dat segment het van uw traditionele merk. Ik was ook erg blij om te zien dat ze geblogd en af en toe gemengd in meer heerlijke berichten om te helpen een breder publiek te bereiken, zoals deze.
Zero Financial
Featured on Awwwards
veel te vaak hebben softwarebedrijven zeer mooie websites die geen afbeeldingen van hun producten hebben., Als je op dit moment in deze positie bent en op zoek bent naar inspiratie, dan is Zero een fantastische site voor inspiratie. Het gebruik van beelden vergezeld van beschrijvende tekst die elk verklaart maakt het product dat veel realistischer en relatable voor mensen die geïnteresseerd zijn.
Cap HPI
Featured on Awwwards
Cap HPI levert een breed scala aan automotive data aan verschillende persona ‘ s. Met dat in het achterhoofd, Cap HPI heeft haar website gebouwd, zodat die persona ‘ s hebben een gemakkelijke tijd het vinden van het type oplossing die ze zoeken., Om dit te vergemakkelijken, hebben ze de navigatie geoptimaliseerd, zodat u snel kunt begrijpen of CAP HPI u kan helpen of niet. bovendien zorgen het ontwerp, de subtiele animaties en het unieke kleurenpalet van de site voor een heerlijke en verfrissende visuele ervaring in een markt die anders misschien een zeer saaie, corporate lay-out zou hebben.
Quiver
Featured on Awwwards
hoewel de site kleiner is dan andere, Weet Quiver nog steeds te schitteren onder de rest.,
Ik hou van het feit dat ze emotie onmiddellijk gebruiken wanneer je op de homepage komt met de achtergrond en de kopie. Ze slaagden er zelfs in om een inschrijfformulier te krijgen, in plaats van alleen een knop op te nemen die bezoekers naar een aparte aanmeldingspagina stuurt.
Quiver ’s product en functies pagina’ s doen een mooi werk van het weergeven van het uiterlijk van de software vergezeld van kleine interactieve elementen om te helpen laten zien hoe het product werkt.,
Wordstack
Featured on CSS Winner
Wordstack heeft uitstekend werk geleverd door zijn website klein, gecondenseerd en georganiseerd te houden, terwijl het toch alle waarde leverde die het product biedt. De grote, volledige breedte beelden en consistente gebruik kleurenpalet en styling door de pagina ‘ s zorgen voor een ongelooflijk uniform ontwerp dat zeer goed paren met het kleurenpalet van de software.,
Campos Coffee
Featured on CSS Design Awards
bepaalde klanten genieten graag van producten waarvan ze weten dat ze zijn vervaardigd en gemaakt door bedrijven die kwaliteitsproducten aan hun klanten willen leveren. En bedrijven als Campos Coffee weten precies hoe ze aan die kopers moeten voldoen.
Campos gebruikt haar website als een manier om de tijd en moeite te benadrukken die hun team in hun koffie stopt, hoe het de Gemeenschap ten goede komt en waarom je je goed voelt om het te kopen., Al deze punten krijgen verpakt in een prachtig verhaal dat ze weer te geven op de homepage en in elke andere site pagina.
Kin
Featured on SiteInspire
in plaats van alleen functies te markeren, neemt Kin het mee naar de volgende stap en gebruikt de homepage om de voordelen van zijn producten te laten zien, zodat mensen precies weten waarvoor het product kan worden gebruikt voordat ze naar andere gebieden op de site gaan., in termen van ontwerp, Kin ‘ s gebruik van de grotere serif lettertype door de hele site vergezeld van echte kantoor Fotografie helpt een enorme hoeveelheid geloofwaardigheid toe te voegen aan het merk. Het laat ook de klant weten dat er echte, vriendelijke mensen achter het geweldige product, in plaats van het te laten aan gissingen.
SeaStreak
Featured on Webby Awards
Looking to travel by ferry but not sure where to go? SeaStreak heeft je in goede handen. De site UI is georganiseerd, zodat je in staat bent om snel een veerboot schema dat werkt voor u te bouwen., Ik vind de navigatie ook zeer interessant. Het menu routes en schema ‘ s daalt naar beneden om u alle beschikbare opties te laten zien, en de dagtochten en uitje menu is al gesegmenteerd voor gebruikers die op de site op zoek naar precies dat. Deze elementen helpen bij het creëren van gemak voor de gebruiker en snelheid, zodat ze niet in een donker gat van de site proberen om erachter te komen hoe te zoeken naar wat ze willen.,
s Bottle
Featured on CSS Winner
s Bottle ‘ s slanke product krijgt een speciale behandeling gedurende het ontwerp van de website om de innovatieve schoonheid en voordelen ervan te benadrukken. Met behulp van de fles in verschillende animaties heeft de site boeiender gemaakt en voegt interesse in het leren van meer over het product.
Ocean Health Index
Featured on W3 Awards
Ocean Health Index helpt de schoonheid van de oceaan op het web te brengen met zijn verbluffende lay-out, visuele beelden en koele kleurenpalet., Het grote gebruik van lettertype op de website helpt ook om het gemakkelijk te lezen en professioneel te houden.
19. WealthSimple
Featured on Awwwards
het gebruik van ruimte op Wealthsimple maakt het ongelooflijk eenvoudig om elke sectie van zijn pagina ‘ s te segmenteren. De mooie GIF ‘ s in de hele pagina zorgen ook voor een spannende ervaring, vooral omdat ze niet direct betrekking hebben op het investeren.
de site maakt investeren veel leuker., In plaats van spreadsheets, stapels contant geld en smakeloze taal te tonen, zorgen ze ervoor dat ze het rijke eenvoudige merk onderscheiden zodat het niet lijkt op elke andere investeringssoftware of dienst
Toggl
Op CSSDesignAwards
de eigenzinnige animatie op Toggl ‘ s homepage pagina trekt de aandacht van de gebruiker onmiddellijk bij aankomst. Deze stijl van beelden wordt gedragen door de resterende secties met eenvoudige groepen van inhoud dozen direct naast elkaar.
Toggl besteedt ook aandacht aan hoe dingen animeren bij het laden van pagina ‘ s., Bijvoorbeeld, Toggl ‘ s Prijzen pagina vervaagt in de held en vervolgens elke prijs gebied van links naar rechts. Aandacht voor deze gegevens maakt het gevoel van de site dat veel meer gepolijst.
Shademaster
Featured on CSSDesignAwards
kijken naar dakbedekking klinkt misschien niet leuk voor de gemiddelde huiseigenaar, maar Shademaster zorgt ervoor dat het kan.
ze segmenteerden het soort werk dat ze deden strategisch in dakontwerpen in de nav die de gebruiker naar individuele pagina ‘ s sturen waar ze hun ideale dak kunnen plannen en ontwerpen en een offerte kunnen ontvangen., Deze aanpak maakt het dak aankoopproces dat veel meer autonoom voor gebruikers; er is geen noodzaak voor iemand om uw huis te bezoeken alleen maar om iets te beginnen.
op zoek naar uw eigen website herontwerp?
uw website is bedoeld als het gezicht van uw online aanwezigheid en een manier om uw merk virtueel te vertegenwoordigen. Als uw website niet een ontwerp dat overeenkomt met de manier waarop u wilt worden waargenomen te handhaven, dan zal het uiteindelijk niet optimaal presteren., IMPACT werkt graag samen met andere bedrijven in een gezamenlijke inspanning om te begrijpen hoe u wilt dat uw website er echt uitziet, zodat we u kunnen helpen door de strategie om het te realiseren.
denk je dat het tijd is voor uw website om de facelift te krijgen die het verdient om uw merk beter te vertegenwoordigen en uiteindelijk zijn prestaties te verhogen? Praat met ons en vertel over de doelen en aspiraties van uw website.