21 preisgekrönte Website-Designs & Was sie richtig gemacht haben
Das Internet ist voll von einigen erstaunlichen und inspirierenden Websites.
Diese speziellen Schneeflocken sind diejenigen, die innovative Wege finden, jedes mögliche Design und jede technologische Grenze zu ihrem Vorteil zu nutzen, um Erfahrungen zu schaffen, die sich viele Organisationen wünschen.
Diese Diamanten im Rohzustand zu finden, kann eine unglaubliche Herausforderung sein, besonders wenn Sie ein Website-Redesign planen und sich nicht sicher sind, wo Sie anfangen sollen.,
Zum Glück, Websites wie CSS Awards, Awwwards, Webby Awards, etc. existieren, um die Websites hervorzuheben, die wir selbst zum Nachdenken anregen sollten.
Um einige dieser preisgekrönten Websites zu präsentieren, tauchte ich in jede dieser preisgekrönten Websites ein und zog diejenigen heraus, die nicht nur schöne Beispiele für modernes Design sind, sondern auch UX, UI, Informationsarchitektur, Conversion-Rate-Optimierung, Videomarketing und Taktik in vollen Zügen ausüben Potenzial.
Wenn Sie sich jede Site ansehen, ist es wichtig zu verstehen, dass diese nicht als Vorlagen angesehen werden sollten, die Sie kopieren möchten., Analysieren Sie sie stattdessen und finden Sie die Teile von ihnen, die Design – /Marketing – /Inhaltsstrategien verwenden, die wiederverwendet und in etwas überarbeitet werden können, das zu Ihrem Publikum passt.
Genießen Sie diese 17 Killer-Beispiele für preisgekrönte Website-Designs, die richtig gemacht wurden.
Lieber zuschauen? Hier sind 5 meiner Favoriten!,
ESPN Sport Programmierung
Featured on Awwwards
ESPN nimmt seine sport inhalt und programmierung auf die nächste ebene mit dieser dynamischen und auffälligen Website mit großen, hochauflösenden Bildern und Videos gefüllt. Die Website verwendet Hintergrundvideos, um mit der Energie und den Abschnitten des Sportnetzwerks mit subtilen Hover-und Übergangseffekten Schritt zu halten und die Benutzererfahrung reibungslos zu gestalten., Der Schieberegler „Featured Sports“ ist durch und durch faszinierend und bietet neben interessanten Statistiken und informativen Details zu den verfügbaren Programmen eine hervorragende Möglichkeit, jede Sportart zu präsentieren.
Montage
Featured on Awwwards
Montage bringt das Vorführen seines Produkts auf die nächste Ebene mit dieser einfach zu manövrierenden Homepage, die klar umreißt, was sein Produkt ist, wie es aussieht, Produktqualität und Testimonials., Die Website ist ein hervorragendes Beispiel für einen Ansatz, mit dem Sie Ihr Produkt hervorheben können, und die wichtigsten Punkte, auf die sich Ihre Benutzer konzentrieren würden, um Antworten zu finden. Mit der klebrigen Unternavigation können Benutzer einfach auf der Seite navigieren, um genau das zu finden, wonach sie suchen.
Zillow
Featured on The Webby Awards
Bei der Suche nach dem perfekten Zuhause geht es darum, genau das zu recherchieren, wonach Sie suchen, zu speichern und zu speichern, was Ihnen gefällt, und alles später leicht zu finden., Zillow trifft den Nagel auf den Kopf für alle drei dieser Punkte mit seiner intuitiven Immobilien-Website. Der Suchbereich innerhalb des Heldenbereichs erleichtert neuen Benutzern die schnelle Auswahl und Suche von Auflistungen, ohne nach einer versteckten Suchseite suchen zu müssen.
Revols
sehen auf CSS-Design-Awards
Revols hat einen kühnen Ansatz auf seiner website, indem er seine kleinen, raffinierten Kopfhörer über makro Fotografie und video., Die Fotografie und das Video machen die Website unglaublich produktorientiert, so dass die Benutzer langsam mehr und mehr in die Erfahrung eintauchen, die diese Kopfhörer Ihnen bieten können. Die große Schriftbehandlung auf dieser Seite ist auch eine nette Geste und trägt zur überlebensgroßen Ohrhörer-Fotografie bei.
Fiftythree Bleistift
Featured on SiteInspire
Fiftythree erfasst alle Funktionen und Vorteile für Ihre Bleistift Stift in diesem standalone-Produkt-Seite., Diese Funktionen und Vorteile werden von Bildern begleitet, die das Produkt in Aktion veranschaulichen, damit der Benutzer sie leichter visualisieren und wie er das Produkt anwenden kann. Das Layout und die visuelle Behandlung des Anatomieabschnitts des Produkts sind ebenfalls sehr einzigartig und dienen als dynamische Möglichkeit, Benutzer dazu zu bringen, mehr über das Produkt zu lesen, im Gegensatz zu statischen Abschnitten nacheinander.,
Morgan Stanley
Bei den Webby Awards
Im Gegensatz zu herkömmlichen produktorientierten Websites übertrifft Morgan Stanley seine Homepage mit einem Artikel, zu dem sie hoffen, eine erhebliche Menge an Traffic zu generieren (insbesondere da er sich mit den Familienfeiern verbindet, an denen wir voraussichtlich teilnehmen werden). Der Rest des Layouts jenseits des Homepage-Helden spielt mit einem rasterorientierten Layout, um das Sortiment der neuesten Artikel zu organisieren, die sie gepostet haben.
7., Boosted
Featured on Awwwards
Boosted brachte das, was man als durchschnittliches Skateboard hätte sehen können, auf die nächste Stufe, indem es erstaunlich detaillierte Fotos seines Produkts mit detaillierten Beschreibungen auf seiner Website vorstellte. Die Grautöne und weißen Hintergründe der Website helfen dabei, den Fokus auf die orangefarbenen Call-to-Action-Schaltflächen und das bunte Skateboard zu richten, das sie als Beispiel für das Produkt verwenden., Ich liebe auch die Tatsache, dass sie einen Blog haben, der Probleme hervorzuheben scheint, die sie mit dem Produkt angesprochen haben/haben, und dem Unternehmen ein wunderbares Maß an Transparenz verleiht.
8. Wozber
Featured on SiteInspire
Wozber hat einen killer job brechen die schritt für schritt prozess es dauert, um sicherzustellen, dass ihr lebenslauf ist perfekt für die traumjob sie suchen. Seine Homepage skizziert deutlich die Schritte nach vorne, die dann in einzelnen Abschnitten weiter unten erläutert werden.,
Die Website enthält sogar Beispiele für einige der Lebensläufe, die sie erstellt haben, sodass Sie ganz einfach sehen können, wie das fertige Produkt aussehen könnte, bevor Sie sich für eine Anmeldung entscheiden.
Opus Wächst
Featured CSS-Sieger
Opus fährt nach Hause organische, Natürliche, und die gesundheitlichen Vorteile von Boden durch hinzufügen von bountiful Mengen der Vegetation auf der gesamten Website. Bei so vielen verschiedenen Möglichkeiten zum Einpflanzen von Böden kann es schwierig sein zu entscheiden, welche für Ihre Pflanzen oder Ihren Garten am gesündesten ist., Opus beweist, dass sein Produkt am besten ist, indem es die Inhaltsstoffe und physikalischen Eigenschaften anspricht, die seine Böden bieten, die es von Ihrer traditionellen Marke unterscheiden. Ich war auch sehr erfreut zu sehen, dass sie gebloggt und gelegentlich in entzückendere Beiträge gemischt, um ein breiteres Publikum wie dieses zu erreichen.
Null Finanz
Featured on Awwwards
viel zu oft software-Unternehmen haben sehr schöne Webseiten, die komplett fehlende Bilder von Ihre Produkte., Wenn Sie sich gerade in dieser Position befinden und nach Inspiration suchen, ist Zero ein fantastischer Ort für Inspiration. Die Verwendung von Bildern, die von beschreibendem Text begleitet werden, der jedes erklärt, macht das Produkt für Interessierte viel realer und relatabler.
Cap HPI
Featured on Awwwards
Cap HPI hilft, eine Vielzahl von Automobil-Daten zu einer Vielzahl von verschiedenen personas. In diesem Sinne hat Cap HPI seine Website erstellt, damit diese Personen leicht die Art von Lösung finden können, nach der sie suchen., Um dies zu erleichtern, haben sie die Navigation optimiert, sodass Sie schnell verstehen können, ob CAP HPI Ihnen helfen kann oder nicht.
Darüber hinaus sorgen das Design, die subtilen Animationen und die einzigartige Farbpalette der Website für ein entzückendes und erfrischendes visuelles Erlebnis in einem Markt, der sonst ein sehr mildes Unternehmenslayout haben könnte.
Köcher
Featured on Awwwards
Obwohl die Seite kleiner ist als andere, Köcher schafft es immer noch, unter den anderen zu glänzen.,
ich Liebe die Tatsache, dass Sie nutzen die emotion sofort, wenn Sie ankommen auf der homepage mit hintergrund und das kopieren. Sie haben es sogar geschafft, dort ein Anmeldeformular zu erhalten, anstatt nur eine Schaltfläche zu enthalten, die Besucher auf eine separate Anmeldeseite sendet.
Köcher Produkt-und Features Seiten tun einen schönen Job der Anzeige des Aussehens der Software mit kleinen interaktiven Elementen begleitet, um zu zeigen, wie das Produkt funktioniert.,
Wordstack
Featured on CSS Winner
Wordstack hat hervorragende Arbeit geleistet, um seine Website klein, kompakt und organisiert zu halten und gleichzeitig den gesamten Wert zu liefern, den das Produkt bietet. Die großen, Bilder in voller Breite und die konsistente Farbpalette und das Styling auf den Seiten sorgen für ein unglaublich einheitliches Design, das sehr gut zum Farbgeschmack der Software passt.,
Campos Coffee
Featured on CSS Design Awards
Bestimmte Kunden lieben es, Produkte zu genießen, von denen sie wissen, dass sie von Unternehmen hergestellt und kreiert werden, die ihren Kunden Qualitätsprodukte liefern möchten. Und Unternehmen wie Campos Coffee wissen genau, wie sie auf diese Käufer eingehen können.
Campos nutzt seine Website, um die Zeit und Mühe hervorzuheben, die sein Team in seinen Kaffee steckt, wie es der Community zugute kommt und warum Sie sich gut fühlen, wenn Sie es kaufen., All diese Punkte werden in eine wunderbare Geschichte verpackt,die sie auf der Homepage und auf jeder anderen Seite anzeigen.
Kin
Featured on SiteInspire
Anstatt nur Funktionen hervorzuheben, geht Kin zum nächsten Schritt und nutzt seine Homepage, um die Vorteile seiner Produkte zu präsentieren, damit die Leute genau wissen, wofür das Produkt verwendet werden kann, bevor sie sich in andere Bereiche der Website wagen.,
In Bezug auf das Design trägt Kins Verwendung der größeren Serifenschrift auf der gesamten Website, begleitet von echter Bürofotografie, dazu bei, seiner Marke eine enorme Glaubwürdigkeit zu verleihen. Es lässt den Kunden auch wissen, dass hinter dem erstaunlichen Produkt echte, sympathische Menschen stehen, anstatt es Vermutungen zu überlassen.
SeaStreak
Featured on Webby Awards
auf der Suche zu Reisen mit der Fähre, aber Sie wissen nicht, wo zu gehen? SeaStreak hat dich in guten Händen. Die Benutzeroberfläche der Website ist so organisiert, dass Sie schnell einen Fährplan erstellen können, der für Sie funktioniert., Ich finde auch die Navigation sehr interessant. Das Menü Routen und Zeitpläne wird angezeigt, um Ihnen alle verfügbaren Optionen anzuzeigen, und das Menü Tagesausflüge und Kurzurlaube ist bereits für Benutzer segmentiert, die genau das auf der Website suchen. Diese Elemente helfen, Komfort für den Benutzer UND die Geschwindigkeit zu schaffen, so dass sie nicht in einem dunklen Loch der Website gelassen werden, um herauszufinden, wie sie nach dem suchen, was sie wollen.,
S Flasche
Featured CSS-Sieger
S Flasche schlankes Produkt ist gegeben eine Besondere Behandlung in die Gestaltung der website zu Höhepunkt seiner innovativen Schönheit und nutzen. Die Verwendung der Flasche in verschiedenen Animationen hat die Website ansprechender gemacht und das Interesse geweckt, mehr über das Produkt zu erfahren.
Ozean Gesundheit Index
Featured on W3 Awards
Ozean Gesundheit Index hilft bringen die schönheit der ozean zu die web mit seine stunning layout, visuelle bilder, und kühlen ton farbe palette., Die große Verwendung von Schriftart auf der gesamten Website hilft auch, es leicht zu lesen und professionell zu halten.
19. WealthSimple
Featured on Awwwards
Die Verwendung von Speicherplatz auf Wealthsimple macht es unglaublich einfach, jeden Abschnitt seiner Seiten zu segmentieren. Die schönen GIFs auf der ganzen Seite sorgen auch für ein aufregendes Erlebnis, zumal sie sich nicht direkt auf Investitionen beziehen.
Die Website macht Investitionen scheinen, dass viel mehr Spaß., Anstatt Tabellenkalkulationen, Geldstapel und klebrige Sprache zu präsentieren, stellen sie sicher, dass sie die Marke WealthSimple unterscheiden, sodass es nicht wie jede andere Investitionssoftware oder-dienstleistung aussieht
Toggl
Auf CSSDesignAwards
Die skurrile Animation auf Toggls Homepage lenkt die Aufmerksamkeit des Benutzers sofort bei der Ankunft. Dieser Bildstil wird in den verbleibenden Abschnitten mit einfachen Gruppen von Inhaltsfeldern direkt nebeneinander ausgeführt.
Toggl achtet auch sorgfältig darauf, wie sich die Dinge beim Laden der Seite animieren., Beispielsweise wird die Preisseite von Toggl im Helden und dann in jedem Preisbereich von links nach rechts ausgeblendet. Die Aufmerksamkeit auf diese Details macht das Gefühl der Website, dass viel mehr poliert.
Shademaster
Featured on CSSDesignAwards
Das Betrachten von Roofing klingt für den durchschnittlichen Hausbesitzer möglicherweise nicht angenehm, aber Shademaster stellt sicher, dass dies möglich ist.
Sie segmentierten die Art ihrer Arbeit strategisch in Dachkonstruktionen im Nav, die den Benutzer auf einzelne Seiten schicken, wo er sein ideales Dach planen und gestalten und ein Angebot erhalten kann., Dieser Ansatz macht den Dachkaufprozess für Benutzer viel autonomer; Es ist nicht erforderlich, dass jemand Ihr Haus besucht, nur um etwas anzufangen.
Auf der Suche nach einem eigenen Website-Redesign?
Ihre Website soll das Gesicht Ihrer Online-Präsenz sein und eine Möglichkeit, Ihre Marke virtuell darzustellen. Wenn Ihre Website kein Design beibehält, das Ihrer Wahrnehmung entspricht, wird es letztendlich nicht optimal funktionieren., IMPACT arbeitet gerne mit anderen Unternehmen zusammen, um zu verstehen, wie Ihre Website wirklich aussehen soll, damit wir Ihnen bei der Strategie helfen können, sie in die Realität umzusetzen.
Denken Sie, dass es Zeit für Ihre Website ist, das Facelift zu erhalten, das sie verdient, um Ihre Marke besser darzustellen und letztendlich ihre Leistung zu steigern? Sprechen Sie mit uns und erzählen Sie von den Zielen und Bestrebungen Ihrer Website.
