Lang ist es her, dass Website Design vor allem durch Tabellen-Optik, geringe Auflösung, blinkende Texte und GIFs sowie zweifelhafte Farbschemata aufgefallen sind. Gutes, modernes Website Design zeichnet sich hingegen durch ansprechende Ästhetik, einen Fokus auf die Nutzererfahrung und Funktionalität aus.
Im modernen Webdesign ist zwischen schlank-minimalistischem Design und aufmerksamkeitserregenden Visualisierungen und Effekten fast alles möglich. Damit ihr euch eine bessere Vorstellung davon machen könnt, wie zeitgemäßes, modernes Webdesign dann tatsächlich aussieht, möchte ich euch in diesem Beitrag ein paar ansprechende Beispiele präsentieren und erklären, was diese Designs so gut macht. Außerdem erfahrt ihr, welche Stile 2023 und 2024 besonders trendy sind und welche Gestaltungselemente auf eurer Website nicht fehlen dürfen, wenn sie besonders modern daherkommen soll. Zu guter Letzt erfahrt ihr in diesem Beitrag etwas über die Verbindung von KI und Webdesign – und darüber, ob künstliche Intelligenz für modernes Website Design eher Fluch oder Segen ist.
Ihr wisst schon, wo ihr hinwollt? Hier ist die Inhaltsübersicht für diesen Beitrag:
7 Beispiele für Modern Website Design
So wie auch gutes Design ein wandelbarer Begriff ist, gibt es kein wirkliches Grundrezept für gutes, modernes Website Design. Aber: Es gibt zahlreiche Websites mit einem Design, das zeitgemäß und funktional ist, das die Möglichkeiten moderner Webentwicklung und die Leistungsfähigkeit moderner Browser nutzt und sich dabei an aktuellen Trends, modernen Farbpaletten oder einer modernen (Symbol-)Sprache bedient.
Einige dieser Websites möchte ich euch hier vorstellen – ich habe versucht, möglichst viele unterschiedliche Branchen in dieser Liste aufzuführen, um euch zu zeigen, wie flexibel der Begriff ‘modern’ ist und wie man moderne Gestaltung und die eigenen Markenwerte zusammenführen kann.
frame.io – Parallax-Effekte und Dark Design
Frame.io ist ein Tool von Adobe für kollaborative Videobearbeitung – und das wird beim Besuch der Website auch sofort klar: Die H1 erklärt mit “Next generation creative collaboration” auf den ersten Blick, worum es hier geht. Es folgt ein kurzer, klar lesbarer, vertiefender Absatz zu dem Tool sowie ein unmissverständlicher CTA – ein vorbildlicher Above-the-Fold-Bereich also.
Auch der Rest der Website ist ein gutes Beispiel für Modern Website Design: Die Seite ist in dunklen Farben gehalten, dafür springen der Text sowie die Videos und Animationen sofort ins Auge. Apropos Videos und Animationen: Moderne Browser, Rechner und Laptops haben längst mehr als genug Power, um solche Animationen problemlos darzustellen – also nutzt Adobe diese Möglichkeit auch. Wie könnten sie bei einem Tool zur Videobearbeitung auch nicht auf Bewegtbilder setzen? Die aufschlussreichen, erklärenden Animationen, die subtilen Parallax-Effekte beim Scrollen, der abwechselnd links, rechts und mittig platzierte Text sowie das Grid-Design weiter unten auf der Seite machen diese Website zu einem guten Beispiel für modernes Webdesign
awork – farbenfrohe Illustrationen und Animationen
Auch awork ist ein Software-Tool, diesmal aus dem Bereich Arbeits- und Projektmanagement für Agenturen, Beratungs- und Tech-Unternehmen. Auch auf dieser Website geht schon aus der Headline unmissverständlich hervor, worum es geht. Auch der Einsatz großformatiger, aber kurzer Texte ist sehr zeitgemäß.
Am ehesten springen auf der Website von awork aber wohl die lebhaften Farben, die individuellen Illustrationen und die tollen Animationen ins Auge: Das Unternehmen nutzt die Website, um auf ganz lebendige Art zu zeigen, was die Software kann. Beim Scrollen verwandelt sich das “Management”-Tag aus der H1-Überschrift mehrmals in unterschiedliche Knöpfe, Tags und andere Elemente, um den Funktionsumfang von awork zu visualisieren. Auch einige der Überschriften verwandeln sich beim Scrollen und weisen auf die Projektmanagement-, Teamplanungs- und Zeiterfassungs-Fähigkeiten von awork hin – das alles wird begleitet von individuellen Illustrationen. Solche Illustrationen sind nicht nur sehr modern, sondern auch eine der besten Möglichkeiten, um einer Marke und einer Website Leben und Persönlichkeit einzuhauchen.
IU Internationale Hochschule – knallige Farben und ein effektiver Einstieg
Einige Jahre lang waren dezente, unverfängliche Farben im modernen Webdesign das Mittel der Wahl. 2023 und 2024 ändert sich das aber zugunsten von knalligen, aufmerksamkeitserregenden Farben. Ein Beispiel dafür: Die Website der Internationalen Hochschule IU.
Beim Betreten der Website begrüßt euch ein fast ganzseitiges Header-Bild lächelnder Menschen, eingerahmt von leuchtend türkisen Gestaltungselement, welches teils ‘hinter’ den gezeigten Personen herführt, im Vordergrund aber nahtlos in den CTA übergeht, ein Dropdown-Menü zur Auswahl des passenden Studiengangs. Die IU-Website macht hier also einiges richtig: Die farbigen Gestaltungselemente und die drei lächelnden Menschen auf dem großen Header-Bild sind sehr effektive Eyecatcher, die Headline-Claim-Kombination “Bildung auf meine Art” lässt keine Fragen offen, die Zertifizierungen (“Staatlich anerkannte Hochschule”, “Studycheck Top Hochschule”, etc.) als Trust-Elemente oben links sorgen für Vertrauen und das Dropdown-Menü zum Finden des passenden Studiengangs ist simpel zu bedienen und absolut selbsterklärend. So geht funktionales Design!
Seed – Full-Page Header und Immersive Scrolling
Seed ist ein probiotisches Nahrungsergänzungsmittel. Das Für und Wider solcher Nahrungsergänzungsmittel klammern wir an dieser Stelle aber aus, um uns auf die Website des Unternehmens zu konzentrieren. Diese ist nämlich ein Paradebeispiel für ein Element des Modern Website Designs, das auch 2024 weiterhin an Popularität zulegen dürfte: “Immersive Scrolling” oder auch “Scrollytelling”, in Anlehnung an Storytelling.
Immersives Scrolling nutzt das Scrollen durch eine Website als Storytelling-Element – und ihr habt sicherlich schon häufiger gehört, wie wichtig Storytelling im Content Marketing für moderne Marken ist. Auf der Website von Seed wird dieses Element besonders gekonnt eingesetzt: Ohne die Usability einzuschränken, wird hier beim Scrollen Schicht für Schicht eine Geschichte freigelegt: Wir sehen zunächst nur eine einzige, dunkelgrüne Kapsel mit einer minimalistischen Überschrift und einem eher dezenten CTA. Scrollt der Website-Besucher nach unten, wird eine Art Petrischale freigelegt, in der sich ein dunkelgrüner Mikroorganismus ausbreitet (= Probiotikum). Der Video-Hintergrund wechselt beim Scrollen ebenfalls und zeigt unterschiedliche Szenen einer natürlichen Umgebung. Dieses Schema setzt sich auf der Seed-Homepage immer weiter fort: Je weiter man scrollt, umso mehr erfährt man über das Produkt – immer begleitet von ästhetischen Videoausschnitten und wechselnden Claims in einer dezenten, minimalistischen Schriftart. Alles in allem also ein wirklich gutes Beispiel dafür, wie man Immersive Scrolling und Storytelling miteinander verbindet.
GetResponse – lebendige Visuals, klare Zahlen und eine intuitive Funktionsübersicht
Auch wir bei GetResponse haben kürzlich unser Website-Design überarbeitet. Freilich haben die GetResponse-Designer und -Entwickler es sich dabei nicht nehmen lassen, ein paar moderne Gestaltungselemente einzubauen.
Zu den wichtigsten Webdesign-Trends, die ihr auf der neuen GetResponse Homepage finden könnt, zählen Motion Design, individuelle Illustrationen und Farbverläufe. Motion Design ist bei der Gestaltung von Websites bereits seit 2022 im Kommen, wird aber wohl auch 2023 und 2024 weiter an Beliebtheit gewinnen. Wieso auch nicht? Eure Website zu animieren, ist eine tolle Möglichkeit, um eure Produkte oder Dienstleistungen noch lebhafter, greifbarer und besser verständlich zu machen. Noch besser funktioniert das, wenn ihr entsprechende Illustrationen entwickelt, die euer Design unverkennbar und unverwechselbar machen. Auch Farbverläufe sind bereits seit geraumer Zeit ein wichtiger Trend im modernen Webdesign. Auf der GetResponse-Website haben wir auf ein helles Design mit Farbverläufen hin zu freundlichen, angenehm pastelligen Farbtönen von gelb über orange bis türkisblau gesetzt – Farben, die sich in intensiveren Abstufungen auch in den Buttons, Boxen und Überschriften auf der Website wiederfinden.
Lunchbox – Y2K-Maximalismus ohne Zurückhaltung
Minimalismus war eine ganze Weile lang nicht aus modernem Webdesign wegzudenken. Die Beschränkung auf das Wesentlichste hat auch heute noch ihren Platz (und Reiz), inzwischen ist aber auch eine Stilrichtung auf dem Vormarsch, die gewissermaßen das Gegenteil darstellt: Der Maximalismus. Maximalismus ist die pixelgewordene Extravaganz und kann somit ein wahres Fest für die Augen sein – wenn man es denn richtig macht.
Ein Beispiel für ein Unternehmen, das es richtig macht, ist die Website von Lunchbox. Lunchbox ist Anbieter einer Gastronomie- und Catering-Softwareplattform – und verbindet auf seiner Homepage gleich mehrere Website Design Trends unter dem Schirm des Maximalismus: Wirklich GROßE Schriftarten, zahlreiche, knallbunte Animationen und Gestaltungselemente und Anleihen an die Ästhetik der späten 1990er- und frühen 2000er-Jahre. Kurzum: Die Website ist laut, auffällig und stolz darauf.
Das Glashaus – Sparsam mit Worten, spendabel mit den Vibes
Leistungsfähigere Endgeräte und schnelle Internetverbindungen haben dazu geführt, dass Websites lang nicht mehr so sparsam mit Bildern und Effekten sein müssen wie noch vor rund zehn Jahren. Das zeigen unter anderem die Designer und Entwickler hinter der Website von Glashaus. Glashaus ist ein bildhübsches Ferienhaus in der Uckermark – und weil Bilder oft mehr sagen als Worte, ist die Website spendabel mit Fotos und Videos und sparsam mit Worten.
Die Glashaus-Website öffnet mit einem Video der umwerfenden Landschaft und des lichtdurchfluteten Hauses als Full-Page-Header. Lange Texte und auffällige CTAs? Fehlanzeige. Dafür gibt es Eindrücke von sonnenbeschienenem Holz, Bienen, Blumen und Leinenvorhängen, die müde in der Brise wehen. Die Seite arbeitet mit einem hohen Anteil an White Space, Fotos und Videos sind in einem asymmetrischen aber ansprechenden Grid-Design angeordnet – ein weiterer, beliebter Trend im Modern Website Design.
Elemente, die deine Website modern machen
Die Online-Welt ist schnelllebig und entsprechend schnelllebig sind auch ihre Trends. Umso wichtiger ist es, dass Websites mit der Zeit gehen, wenn eure Marke einen zeitgemäßen, modernen Eindruck machen soll. Das bedeutet natürlich nicht, dass eure Website alle sechs Monate ein Redesign benötigt – es bedeutet aber, dass ihr wissen und verstehen solltet, ‘woher der Wind weht’ und in welche Richtung sich der Zeitgeist und die Geschmäcker bewegen.
Hier sind einige wichtige Designelemente, die zu (fast) jeder modernen Website gehören.
- Responsive Design
Gutes Design bedeutet immer auch Funktionalität. Vor diesem Hintergrund solltet ihr nicht ignorieren, dass inzwischen mehr als die Hälfte des globalen Internet Traffics auf Mobilgeräte entfällt. Eine zeitgemäße Website muss auf dem Smartphone, dem Tablet und auf Desktop-Geräten gut aussehen und sich an möglichst jedes Endgerät anpassen können. Denkt dran: Mobile first!
- Effektive Above-the-Fold-Bereiche und Full-Page Header
Die Zeiten, in denen Designer und Webentwickler so sparsam wie möglich mit Bildern umgehen mussten, sind längst vorbei. Heute ist der “Above the Fold”-Bereich, also der Bereich, den eure Websitebesucher ohne Scrollen sehen können, von entscheidender Bedeutung. Hier könnt ihr wichtige Informationen, umwerfende Bilder und Videos und/oder einen auffälligen Call-to-Action platzieren, um die Aufmerksamkeit eurer Besucher zu wecken, zu lenken und sie zum Weiterlesen zu ermutigen. Full-Page Header sind dabei eine beliebte Option.
- Eigene Videos, Fotos, GIFs und Illustrationen
Individuelle visuelle Inhalte sind ein wichtiges Merkmal moderner Websites. Sie helfen dabei, eure Marke zu differenzieren und eine persönliche Verbindung zu eurer Zielgruppe herzustellen. Ganz nach dem Credo: Marken, die eine eigene visuelle Identität haben und diese gekonnt und stringent umsetzen, sind selbstbewusst, reflektiert und stolz auf ihre Corporate Identity. Eigene Videos, hochwertige Fotos, GIFs oder Illustrationen, die zu eurem Markenimage passen, ziehen nicht nur die Aufmerksamkeit auf sich, sondern zahlen auch entscheiden auf das Markenimage ein.
- Moderne Farben und Schriftarten
Die Wahl der passenden Farben und Fonts ist ein entscheidendes Merkmal jeder Website. Welche Farben und Schriftarten am besten passen, entscheidet auch euer Corporate Design und eure Corporate Identity – von diesen gestalterischen Rahmen solltet ihr euch also leiten lassen. Nur so viel: Moderne Websites setzen meist auf lebendige, konsistente Farbpaletten und gut lesbare Schriftarten im Gegensatz zu verschnörkelter Schreibschrift und Grau-in-Grau-Gestaltung.
- Keine Angst vor White Space
Weniger ist oft mehr – und das gilt trotz des Maximalismus-Trends auch weiterhin im Webdesign, sofern Minimalismus zu eurem Markenimage passt. Der gekonnte Einsatz von White Space – also leerem Raum – auf eurer Website, kann das Design sauber, klar und modern wirken lassen. Wenn euch eure Website zu unruhig oder unübersichtlich vorkommt, dann versucht doch mal, alle überflüssigen Elemente zu entfernen und euch nur auf das Wesentlichste zu konzentrieren. So seht ihr, welche Elemente wirklich benötigt werden und welche nur ablenkend oder verwirrend wirken.
- Kreatives Grid-Design für Portfolios, Galerien und Co.
Wenn ihr auf eurer Website ein Portfolio eurer Produkte, Arbeiten oder Fotos präsentiert, dann werdet gerne kreativ: Überlappende Bilder oder irreguläre Grid-Designs sind ein beliebtes Merkmal im Modern Website Design. Diese Ansätze machen Websites optisch interessanter und verleihen eine einzigartige Note. Zusätzliche interaktive Elemente, vor allem Hover-Effekte, lockern das Gesamtbild dann weiter auf.
- Unsicher? Setzt auf A/B-Tests!
Es ist nur verständlich, wenn ihr euch unsicher seid, ob und wie gut bestimmte Designänderungen bei euren Kunden und Besuchern eigentlich ankommen. Schließlich soll eure Website ja erfolgreich sein und einen bestimmten Zweck erfüllen – und dieser Zweck ist in den meisten Fällen, eure Produkte oder Services zu verkaufen. Mit sogenannten A/B-Tests könnt ihr unterschiedliche Versionen eurer Website erstellen und diese gezielt bestimmten Zielgruppen präsentieren. So seht ihr anhand der Website Analytics, welche Version tatsächlich die beste oder erfolgreichste Nutzererfahrung bietet.
Mit der A/B-Testfunktion für Landing Pages von GetResponse könnt ihr diese Tests durchführen: Ihr könnt bis zu zehn(!) verschiedene Designvarianten einer Landing Page testen, um zu sehen, mit welchem Design sich das beste Ergebnis erzielen lässt. Mehr darüber erfahrt ihr in unserem Hilfecenter: Wie richte ich A/B Tests für Landing Pages ein?
Modern Website Design: Die wichtigsten Trends 2023 und 2024
Obwohl sich der Zeitgeist stetig ändert und mit ihm auch Geschmäcker, Moden und Trends, lassen sich bereits einige Prognosen darüber treffen, welche Trends 2023 und 2024 zu den wichtigsten im Modern Website Design gehören.
Ich halte diese Designelemente für die vielversprechendsten:
3D Design und Animationen
Je tiefer eure Besucher über die Website in eure Unternehmenswelt eintauchen können, desto besser. Eine der wirksamsten Möglichkeiten, um diese Immersion zu ermöglichen, sind 3D Designs und Animationen – das gilt besonders für die Industrie und für erklärungsbedürftige Produkte oder Dienstleistungen.
Mit eigens entwickelten 3D-Elementen können eure Besucher sich so beispielsweise eure Produkte auch von zuhause aus von allen Seiten genau ansehen, ihre Funktionsweise analysieren und ihre Vorteile kennenlernen. Die Erstellung und Einbindung solcher 3D Designs kann zwar etwas aufwändiger sein, kann sich aber auch durchaus lohnen. Noch dazu sehen solche Animationen toll aus!
Micro Interactions und Motion Design
Ich habe ja bereits angemerkt, dass im Webdesign inzwischen einiges in Bewegung ist – und zwar wortwörtlich: Videos auf Websites sind beispielsweise kein No-Go mehr, sondern dürfen gerne auch schon im Header verwendet werden.
Das lässt sich auch auf andere Bereiche der Website ausweiten mit kleinen aber feinen Micro Interactions und Motion-Design-Elementen erweckt ihr euer Design zum Leben, lenkt die Aufmerksamkeit eurer Website-Besucher und versprüht jede Menge Charme. Gut möglich, dass Motion Design vor diesem Hintergrund einmal eine ähnliche Bedeutung haben wie die verwendeten Bilder und Schriftarten.
Dark Mode
Dunkles, ernsthaft anmutendes Design ist glücklicherweise nicht mehr für wenig überzeugende Hacking-Sequenzen in B- und C-Movies oder für eure Entwicklerkollegen vorbehalten. Dark Modes bzw. Dark Design sieht einerseits edel und etwas futuristisch aus, ist andererseits deutlich angenehmer für die Augen und schont noch dazu die Batterien mobiler Endgeräte.
Ehrliche Bilder und ungeschliffene Ästhetik
KI-generierte Kunst und Fotos sind aktuell in aller Munde und werden entsprechend gern auch im modernen Webdesign eingesetzt. Trotzdem oder vielleicht gerade deshalb – ist auch eine verstärkte Rückkehr zu roher, wenig gefilterter, realitätsnaher Bildsprache und ungeschliffener Ästhetik zu erkennen.
Das irreguläre Grid-Design einiger Portfolio-Websites ist nur eine Erscheinungsform dieser Entwicklung, ungefilterte bzw. (scheinbar) unbearbeitete Bilder gehören ebenso dazu wie die Y2K-Ästhetik der frühen 2000er-Jahre oder das nur scheinbar chaotisch wirkende Scrapbook-Design einiger Websites.
KI und Modern Website Design
Künstliche Intelligenz (KI) spielt eine zunehmend wichtige Rolle bei der Entwicklung und Umsetzung modernen Webdesigns. Generative KI kann nämlich mit nur wenigen Angaben beeindruckende Designs erstellen, die nicht nur visuell ansprechend sind, sondern – dank Daten- und Trendanalysen – auch die Nutzerfreundlichkeit und so letztlich die Conversion verbessern. Generative KI kann im Modern Website Design etwa Vorschläge für passende Farbpaletten, Schriftarten und Layouts machen, um ein zeitgemäßes, ansprechendes Design umzusetzen.
Der KI-gestützte Website Editor von GetResponse: So bringt ihr KI und modernes Webdesign zusammen
Wenn euch die Möglichkeiten beim Einsatz von KI im Webdesign neugierig machen und ihr das Thema gern einmal selbst ausprobieren möchtet, habe ich hier etwas für euch: GetResponse bietet euch einen KI-gestützten Website Editor, der auf Grundlage einiger simpler Angaben ein passendes, zeitgemäßes und individuelles Website-Design für euch erstellt.
So funktioniert’s:
- Loggt euch in euer GetResponse-Konto ein. Dort öffnet ihr das Tool-Menü und wählt den “Website-Builder”.
- Wählt den KI-gestützten Assistenten aus, der euch durch die Erstellung der Website führen wird.
Ihr müsst nur einige Fragen zu eurem Unternehmen und zum gewünschten Stil der Website beantworten. - Nach einigen Sekunden hat der KI-gestützte Website Editor eine Website gemäß eurer Angaben und Wünsche gestaltet. Wenn ihr möchtet, könnt ihr die Website nun noch individualisieren oder kleinere Anpassungen vornehmen, um das Design zu perfektionieren.
- Die so erstellte Website könnt ihr auf eurer eigenen Domain hosten, ihr könnt aber auch das benutzerfreundliche Easy Hosting von GetResponse nutzen.
- Auf Wunsch könnt ihr eure Website nun mit all den zusätzlichen Marketing-Funktionen verbinden, die GetResponse bietet – dazu gehören zum Beispiel Tools für Newsletter und fürs E-Mail Marketing, Landing Pages, Autoresponder und Social Ads.
Übrigens: Ihr könnt alle Funktionen von GetResponse 30 Tage lang kostenlos testen, um zu sehen, ob unsere Tools zu eurem Vorhaben passen. Probiert es doch gleich jetzt aus:
FAQ: Modern Website Design
Was muss eine moderne Website können?
Eine moderne Website sollte stets erreichbar, schnell, sicher und ohne weitere Erklärungen verständlich sein. Sie sollte auf verschiedenen Geräten vom Smartphone über Tablets bis hin zu Desktop-Computern gut funktionieren und ansprechend aussehen. Der Rest ist ganz davon abhängig, was euer Unternehmen tut, in welcher Branche ihr tätig seid und was ihr mit der Website erreichen möchtet.
Welche Branchen brauchen eine moderne Website?
“Brauchen” ist ein dehnbarer Begriff – aber profitieren können von einer modernen Website praktisch alle Branchen. Das gilt gleich doppelt für die Bereiche E-Commerce und Sales-as-a-Service, Technologie-Unternehmen (FinTech etc.), die Gastronomie und kreative Berufe wie Designer und Blogger.
Mit welchen Tools kann ich ein modernes Website Design erstellen?
Beliebte Tools für die Erstellung moderner Websites sind CMS-Tools wie WordPress, WIX, Jimdo oder Strato. Unser liebstes Tool ist und bleibt aber GetResponse 😉