Die 15 besten Website-Beispiele für kreative und Conversion-steigernde Ideen im Jahr 2022

Verschiedene Business-Websites haben je nach Kernangebot, Geschäftsmodell und Branche unterschiedliche Ziele. Aber Website-Besucher, nun, wir haben anscheinend ein Ziel – sie zu beurteilen, und zwar gnadenlos.

75 % der Menschen geben zu, die Glaubwürdigkeit eines Unternehmens anhand des Website-Designs zu beurteilen. Die Betonung liegt auf dem Eingeständnis, weil meiner Meinung nach 25 % es einfach nicht zugeben. Und das ist nur der erste Eindruck. Wenn Sie Besucher dazu gebracht haben, auf Ihrer Website zu bleiben, liegt es jetzt an der Benutzererfahrung und der Website-Kopie, sie dort zu halten und sie dazu zu bringen, die Maßnahmen zu ergreifen, die Ihre Geschäftsziele unterstützen.

Was macht also eine großartige Website aus? Werfen wir einen Blick auf 17 Website-Beispiele aus einer Vielzahl von Branchen, um das herauszufinden – von Text bis Kreativ und alles dazwischen.

Beispiele für Websites kleiner Unternehmen

In der Vergangenheit waren Websites hauptsächlich für große Unternehmen mit großen Budgets gedacht. Aber mit der heutigen Technologie und den Tools sind sie für Unternehmen jeder Größe machbar. Diese Beispiele für Websites kleiner Unternehmen stammen aus der IT-, Gesundheits- und Immobilienbranche.

Beispiel einer IT-Website: Beast Code

Beast Code ist ein kleines bis mittelständisches Technologieunternehmen, das Softwarelösungen entwickelt. Als Technologieunternehmen und mit einem solchen Firmennamen hatte ich große Hoffnungen in diese Seite gesetzt, und sie hat mich nicht enttäuscht – nicht nur mit der Raumschiff-Homepage und dem Warfighter-Slogan.

Was macht es großartig

• Erster Eindruck: Es gibt zwar keinen auffälligen CTA-Button über der Falte, aber nicht wegen anderer ablenkender Elemente. Die Einfachheit dieser ersten Farbe (ein subtil animierter, futuristischer Raumschiffhintergrund) hinterlässt einen eigenen Eindruck in Ihrer Wahrnehmung der technischen Fähigkeiten dieses Unternehmens.
• Farbkontrast: Die roten CTA-Buttons heben sich vom schwarzen Hintergrund ab.
• Videoelemente: Im Z-Muster sind die visuellen Blöcke anstelle von statischen Bildern Videos. Unterbrechungsfreie, stille Videos, die der Seite Leben einhauchen.
• Das Verfassen von Texten: Der Gesprächston und die Fähigkeit, seine komplexen Prozesse in Laiensprache zu fassen, spiegeln Intelligenz, Professionalität und Humor wider.

Beispiel für eine Website eines Gesundheitsunternehmens: Aledade

Wir beginnen mit Aledade, einem Hausarztpartner, der eine Mischung aus Angeboten – Praxismanagementunterstützung, Partnerschaftsprogramme, eine App und mehr – für Privatpraxen, Gruppenpraxen und kommunale Gesundheitszentren anbietet. Aber trotz eines komplexen Angebots und Publikums leistet die Website hervorragende Arbeit bei der Führung der Besucher.

Was macht es großartig

• Gesamtgefühl : Das lächelnde Gesicht und die weichen Bilder, gepaart mit der fettgedruckten Großbuchstabenschrift, geben Ihnen ein sanftes, aber autoritäres Gefühl.
• Organisation: Intuitive, organisierte Überschrift sowie ein kleineres Menü unter der Überschrift, das den verschiedenen Segmenten des Publikums helfen soll, sich zurechtzufinden.
• Bewegung: Elemente erscheinen beim Scrollen und verleihen der Seite zusätzliche Bewegung und Leben.
• Ressourcen: Während die Homepage satte acht Ressourcen enthält, macht die Rolle im Kartenstil mit Miniaturbildern sie sauber und organisiert.

Beispiel einer Immobilienwebsite: Frisbie Realty

Mit diesem Website-Beispiel haben wir einen weiteren hervorragenden visuellen ersten Eindruck, aber diesmal zurück auf die Erde. Was Sie unten sehen, ist die Homepage von Frisbie, einem kleinen Immobilienunternehmen in Palm Beach.

Was macht es großartig

• Visuelle Botschaft: Das Bild lässt Sie sofort wissen, dass dies ein High-End-Makler ist, und doch vermitteln die warme Beleuchtung und der Titel „Willkommen zu Hause“ ein einladendes Gefühl.
• Funktionalität: Die Immobilien-Suchfunktion direkt unter dem Bild mit einem schönen kontrastierenden blauen Button.
• Bewegung: Ein gemeinsames Thema bei diesen Beispielen (und ein Website-Trend), die Elemente erscheinen und bewegen sich leicht beim Scrollen.
• Inhalt: Direkt auf der Homepage gibt es Nachbarschaftsführer, ein großartiges Beispiel für Content-Marketing.
• Barrierefreiheit: Die Barrierefreiheitsoptionen der Website unten links, z. B. Textgröße vergrößern oder verkleinern, Kontrast anpassen, Links unterstreichen und mehr.

Beispiele für E-Commerce-Websites

E-Commerce-Websites sind eine Art eigenes Tier, besonders wenn Sie viele Produkte anzubieten haben. Hier sind einige Beispiele aus verschiedenen Branchen.

Beispiel für eine E-Commerce-Website für Lebensmittel: Gopuff

Gopuff ist kein typischer Lieferort für Lebensmittel. So wie Tend (oben) die Zahnheilkunde anders macht, schafft Gopuff ein einzigartiges Online-Einkaufserlebnis für Lebensmittel/Convenience-Stores.

Was macht es großartig

• Layout: Während die meisten E-Commerce-Sites komplexe Mega-Menüs haben, hat GoPuff ein einfacheres Layout mit einem Karussellformat, das sich auf seine Unterkategorieseiten überträgt.
• Zugehörigkeit: Anhand der vorgestellten Produkte (Pringles, Bier, Mundwasser) und der verwendeten Kopie („Wir erhöhen oder erhöhen die Preise nicht. Ja, Sie haben richtig gelesen.“) können Sie feststellen, dass GoPuff seine Zielgruppe gut kennt.
• Konsistenz: Gopuff ist nicht für Ihren wöchentlichen Lebensmitteleinkauf gedacht. Es ist für Sie da, wenn Sie in Schwierigkeiten sind und in letzter Minute etwas brauchen. Die prägnante, nicht blumige Kopie auf der Website, die Einfachheit des Designs und sogar das Fehlen von 90-Grad-Winkeln auf der Website tragen alle zu diesem Gefühl der Bequemlichkeit und Leichtigkeit bei.

Beispiel für eine E-Commerce-Website zur Vermietung: Zumper

Zumper sagt, dass „die heutige Vermietungserfahrung gebrochen ist. Es ist veraltet, anstrengend und langsam“ und hat die Mission, „die Art und Weise, wie Sie mieten, für immer zu verändern“. Ich denke, sie haben einen großartigen Start hingelegt.

Was macht es großartig

• Die kleinen Details: Anstelle von „Geben Sie einen Ort ein“ lautet die Meldung im Suchfeld „Wo möchten Sie leben?“. In der Wohnungsabbildung auf der Homepage sind Handtücher über dem Balkongeländer drapiert. Diese kleinen Aufmerksamkeiten verleihen der Seite Charakter.
• Werte auf der Startseite: Scrollen Sie nach unten und Sie sehen die drei Kernwerte von Zumper – inklusiv, sicher und respektvoll – mit einem Link, um mehr zu lesen. Wie wir bereits in einigen der obigen Beispiele gesehen haben, wird dies für Unternehmen aller Branchen immer wichtiger.
• Grafiken: Handgezeichnete Illustrationen und flaches Design sind sowohl Website- als auch Landingpage-Trends, die wir dieses Jahr sehen, und Zumper trifft beides. Schauen Sie sich außerdem den Abschnitt „heißeste Städte“ an und Sie werden sehen, wie Emojis hervorragend verwendet werden.

Beispiel für eine E-Commerce-Website im Einzelhandel: Subtile asiatische Leckereien

Subtle Asian Treats – ein Wortspiel aus der beliebten Facebook-Gruppe – ist ein großartiges Beispiel für eine superkleine E-Commerce-Business-Website.

Was macht es großartig

• Animiertes Logo: Wie süß ist diese kleine Bubble-Tea-Ikone?
• Top Nanobar: Dies ist bei E-Commerce-Websites üblich, da Sie es für wichtige Ankündigungen, einschließlich Verkaufsförderung, verwenden können.
• Emojis: Heutzutage sehen wir immer mehr Emojis auf Websites. Wenn Sie sie hier zum Navigationsmenü hinzufügen, können Sie sie voneinander trennen – und sehen auch noch süß aus!
• Zentriertes Logo: Die meisten Websites haben oben links ein anklickbares Logo (zur Startseite). Dieses (wie auch das von Chinelle) befindet sich in der Mitte, unter einigen der anderen Navigationselemente – gerade anders genug, um einzigartig zu sein, aber dennoch intuitiv genug für eine reibungslose Benutzererfahrung.
• Nicht so subtil. 500 % Zucker. Fallbeispiel

Beispiele für Websites von Dienstleistungsunternehmen

Lead-Generierungs- oder dienstleistungsbasierte Unternehmenswebsites haben andere Ziele als E-Commerce-Websites. Hier sind einige Beispiele aus großen und kleinen Unternehmen.

Beispiel für eine Website einer Designagentur: Born & Bred

Für die meisten Unternehmen ist es am besten, sich an das traditionelle Layout und Design anderer Websites in Ihrer Branche zu halten. Aber als Designunternehmen kann man auch gegen den Strom schwimmen. Schließlich will man zeigen, was man kann. Nun, ein Screenshot hier wird der Website von Born & Bred nicht wirklich gerecht, weil es das Scroll-Erlebnis ist, das es wirklich cool macht, also schau es dir unbedingt an.

Was macht es großartig

• Das Tour-Thema: Die Website wurde entwickelt, um Sie beim Scrollen durch ein Tour-Erlebnis zu führen. Darüber hinaus hält die oben abgespielte Videorolle ungestellte Momente im Büro fest.
• Werte: Kernwerte direkt auf der Homepage. Meine Art von Seite.
• Die Kopie: Genau wie Beast Code haben diese Jungs eine Menge Spaß. Zum Beispiel: „Und rechts von Ihnen … weitere Fallstudien. Bitte halten Sie Ihre Augen und Ihren Cursor immer innerhalb des Browserfensters.“
• Nanobar: Die Leiste oben verlinkt auf einen Artikel über eine aktuelle Auszeichnung und zeigt einen schönen, auffälligen Hintergrund mit Farbverlauf.

Beispiel einer Zahnarzt-Website: Tend

Nach dem Design haben wir als nächstes ein Beispiel für eine Zahnarzt-Website – und zwar ein wirklich cooles. Der Slogan von Tend lautet „Dental anders gemacht“ und das können wir sofort auf der Homepage sehen. Lass uns einen Blick darauf werfen.

Was macht es großartig

• Das Video: Das stumm geteilte Video auf der Homepage zeigt in etwa 10 Sekunden Ausschnitte aus einem Patientenbesuch und zeigt Ihnen genau, wie Tend Dental anders macht. Kein herkömmliches Erklärvideo, aber sehr effektiv.
• Sauberes Design: Kein Wortspiel beabsichtigt, aber das einfache Layout macht diese Seite ansprechend.
• Sozialer Beweis: Es gibt nicht nur ein attraktives Testimonial-Karussell, sondern die vier Registerkarten, mit denen die Testimonials organisiert werden, dienen auch als Merkmale des Unternehmens. Sehr cleveres Dentalmarketing!

Beispiel für eine Werbewebsite: Elf

Genau wie bei einer Designagentur muss die Website einer Werbeagentur erstklassig sein, und Eleven enttäuscht nicht. Auch hier wird der Screenshot der Homepage nicht gerecht, aber Sie können trotzdem einen Vorgeschmack auf das Flair dieser fesselnden Site bekommen.

Was macht es großartig

• Videohintergrund: Das Hintergrundvideo in voller Breite auf der Homepage ist eine Highlight-Rolle mit unzähligen fantastischen Bildern, die Ihre Aufmerksamkeit erregen (Abbildung A oben).
• Sauberes Design: Es gibt keinen markanten CTA-Button in der ersten Farbe, und das geschmackvoll. Die einfachen weißen Elemente, die über den Videohintergrund gelegt werden, sorgen dafür, dass das Video im Mittelpunkt steht, was der Aufruf zum Handeln ist.
• Menschenzentriert: Eleven hat nicht nur einen klaren Abschnitt zu Vielfalt, Gerechtigkeit und Inklusion auf seiner „Über uns“-Seite, sondern widmet auch eine ganz eigene Seite den Kopfschüssen/Porträts aller seiner Mitarbeiter (plus ihrer Hunde).

Beispiel einer SaaS-Website: Chartbeat

SaaS-Websites können schwierig sein, weil Sie zeigen möchten, was Ihre Plattform kann, ohne die Besucher zu überwältigen. Chartbeat leistet hier mit seinen Illustrationen und prägnanten Texten hervorragende Arbeit.

• Der Titel: Nettes Wertversprechen im Titel mit „Schalten Sie den Wert in Ihren Inhaltsdaten frei.“
• Animation: Das Dashboard-Bild auf der Homepage wird mit genau der richtigen Geschwindigkeit animiert, um Ihnen verschiedene Aspekte des Tools zu zeigen, ohne dass es zu viel wird.
• Einzigartiges Navigationsmenü: Chartbeat minimiert den Platz, den das Navigationsmenü einnimmt, indem es die Elemente im Dropdown-Menü horizontal auflistet – eine andere, aber schöne Form der Organisation.
• Nicht viel geredet: Die Homepage hat sehr wenig Marketingtexte. Die Illustrationen und Kundenstimmen sprechen, während die Marketingtexte prägnant bleiben und alles miteinander verweben.

Beispiele für Portfolio-Websites

Portfolio-Websites werden von Studenten und Fachleuten verwendet, um ihre Arbeit zu präsentieren und eine Erweiterung ihres Lebenslaufs bereitzustellen. Designer, Entwickler, Fotografen, Veranstaltungsplaner und Models sind nur einige der vielen Branchen, die Websites im Portfolio-Stil verwenden.

Beispiel einer Fotografen-Portfolio-Website

Chinelle Rojas ist eine Selbstporträtfotografin, Logodesignerin und Unternehmerin mit einer sehr coolen Portfolio-Website. Treten Sie ein und Sie haben das Gefühl, in ihre Welt eingetreten zu sein.

Was macht es großartig

• Musik: Auf der Startseite können Sie einen von sechs Titeln auswählen, die Sie beim Surfen auf der Website abspielen möchten.
• Knallige Farben: Neben einer Collage als Hero-Image ist die Farbgebung im Mittelteil wie Musik für die Augen (? einfach mitmachen).
• Personalisierung: Alles auf dieser Seite hat ein handverlesenes Gefühl, das Ihnen das Gefühl gibt, dass Sie genau dort sind, wo Chinelle rumhängt.
• Galeriedesign : Ihre „My Black Self“-Galerie folgt einem einfachen Rasterformat auf der linken Seite mit der größeren Ansicht auf der rechten Seite – eine einfache und intuitive Möglichkeit, ihre Arbeiten zu durchsuchen.

Beispiel einer Webentwickler-Portfolio-Website: Brittany Chiang

Dies ist ein Beispiel für eine Portfolio-Website im Lebenslauf-Stil von einer Webentwicklerin namens Brittany Chiang.

Was macht es großartig

• Farbschema: Der dunkle Hintergrund und eher neutrale Farben heben die grünen Elemente hervor und lenken die Aufmerksamkeit auf ihren Firmennamen und ihren CTA-Button.
• Großer Titel: Auch hier sticht der große Titel auf der Homepage heraus. Bei Unternehmenswebsites ist dies normalerweise der Firmenname oder das Wertversprechen, aber die einfache Aussage hier fühlt sich für diese Portfolio-Website markenkonform an.
• 3-D-Feeling: Die „Experience“-Seite verwendet überlappende Elemente und transparente Überlagerungen, um den Effekt mehrerer Dimensionen zu erzeugen.
• Informationspräsentation: Die Präsentation von Webentwicklungsprojekten ist nicht so einfach wie Design oder Fotografie, wo Sie eine Galerie haben können, aber Brittanys „Arbeits“-Seite ist super organisiert und einfach anzusehen, obwohl sie nur aus Text besteht.

Beispiel einer Innenarchitekten-Portfolio-Website: Karim Rashid

Unsere letzte Portfolio-Website stammt vom produktiven Designer Karim Rashid. Es ist eine Art Hybrid aus einer Portfolio-Website und einer Business-Website.

Was macht es großartig

• Große Schrift: Das einzigartige Porträt, das Schwarz/Weiß/Grau-Thema, die minimale Kopie und die Bilder von Karims Werk haben ein ruhiges Gefühl, während die große Schrift und die kräftigen Farben, die beim Hover erscheinen, laut und klar sind – eine einzigartige Gegenüberstellung, die ausbalanciert schön raus.
• Parallaxe: Die Mischung aus Scrollgeschwindigkeiten ergibt den Effekt, dass die Seite mehrere Dimensionen/Ebenen hat – eine weitere Möglichkeit, Spaß mit Bewegung zu haben, aber ohne Animation.
• Die hinterhältige Seitenleiste: Der Abschnitt auf der rechten Seite, der so aussieht, als wären Sie vielleicht zu weit herausgezoomt oder sehen Sie einige Reaktionsprobleme? Das bringt Sie dazu, sich zu engagieren. Neugierig bewegen Sie den Mauszeiger darüber und es erweitert sich gerade genug, um Ihnen einen Pfeil mit „see pr—“ zu zeigen, dann wird es abgeschnitten. Sie klicken auf diesen Pfeil und Boom, Sie werden in eine neue Ansicht einer seiner Sammlungen gebracht. Oder vielleicht wird Ihr Blick von der weißen Menüschaltfläche angezogen, die sich auf dem abgedunkelten Hintergrund abhebt. Klicken Sie darauf und Boom, massive Menüelemente, die Sie nur zum Klicken auffordern.

Beispiele für gemeinnützige Websites

Unsere letzte Gruppe von Website-Beispielen sind gemeinnützige Organisationen. Sie werden feststellen, dass sie, obwohl sie gemeinnützig sind, immer noch konversionsorientiert sind, wobei die Konversionsaktion darin besteht, zu spenden.

Betrieb U-Bahn

Wenn Sie auf der Website von Operation Underground Railroad ankommen, können Sie sofort ihre laute und klare, null Toleranz und alles mögliche Denkweise verstehen.

Was macht es großartig

• Starkes Video: Der Videohintergrund auf der Startseite führt Sie durch eine Reihe von Emotionen. Von tanzenden Kindern über Handschellen der Polizei bis hin zu einer Reitmission spüren Sie Unschuld, Inspiration und Empörung auf einmal.
• Gelbe Akzente: Die gelben Grafiken heben sich nicht nur vom dunkelgrauen Hintergrund ab, sondern weil die auf der Seite verwendeten Bilder sehr echt sind und in den Schützengräben, sie nicht von höchster Qualität sind. Die gelben Konturen in den Bildern helfen, dies zu maskieren und sorgen für einen zusätzlichen Hauch von Action und Emotion.
• Menü im Schaltflächenstil: Bei einem so geschäftigen Hintergrundbild macht die Verwendung von soliden Blöcken als Menüelemente sie leicht lesbar und anklickbar.

Internationaler Frauenmedienfonds

Der International Women's Media Fund ist ein weiteres (nach eigenen Worten) knallhartes Beispiel einer gemeinnützigen Website mit aussagekräftigen Bildern und sachlichen Texten.

Was macht es großartig

• Bilder als Schaltflächen: Unter dem großen Bildkarussell befindet sich eine kleine Miniaturansicht dieses Bildes mit Text darüber, wodurch der Effekt einer Bildschaltfläche entsteht.
• Auffälliger Spenden-Button: Dies ist der CTA, den Sie auf den meisten gemeinnützigen Websites sehen werden, und das leuchtend rote Kästchen oben rechts macht ihn leicht zu erkennen.
• Mission in der Fußzeile: Anstelle der typischen Tintenliste in der Fußzeile sehen wir Schaltflächen für soziale Netzwerke, Kontaktinformationen und ihre Mission. Dies ist nicht üblich, aber die Idee, dass es unabhängig davon angezeigt wird, auf welcher Seite der Website Sie sich befinden, verleiht ihm eine zusätzliche Ebene der Integrität.
• Kraftvolle Worte: Überall auf der Website finden wir kraftvolle Wortwahlen wie „Wir entfesseln das Potenzial von Journalistinnen als Verfechterinnen der Pressefreiheit“ und „Lernen Sie die knallharten Journalisten kennen, die wir unterstützen.“

Verwenden Sie diese Website-Beispiele für Ideen und Inspirationen

Websites sind Kunstwerke. Während die meisten Branchen ihre eigenen grundlegenden Standards haben, wie eine Website in dieser Nische aussehen und funktionieren sollte, haben Sie die Freiheit, dieses Aussehen und diese Funktion auf unterschiedliche Weise zu erreichen. Und es steht Ihnen frei, auch Ideen aus anderen Branchen zu übernehmen. Verwenden Sie also die Website-Beispiele in diesem Beitrag, um über die vielen Möglichkeiten nachzudenken und sie zu testen, Besucher willkommen zu heißen, zu zeigen, wozu Sie fähig sind, sich von Ihrer besten Seite zu zeigen und Ihre Geschäftsziele zu erreichen.