Modernes Webdesign: 8 elementare Grundlagen für Dein Webprojekt

Für manche ist gutes Webdesign ein Band mit sieben Siegeln.

Du gehörst auch dazu?

Keine Sorge, herausragendes Webdesign ist keine Zauberei. Vielmehr ist ein das Wissen um die modernen, elementaren Webdesign Grundlagen und der gezielter Einsatz.

Was Du mit Ihnen erreichen kannst und warum Du auf hochwertiges Webdesign bestehen solltest?

Hier ein erster kleiner Überblick:

• Deine Besucher sind immer wieder gerne auf Deiner Seite
• Sie lesen mit Freude Deine schön dargestellten und auf allen Geräten lesbaren Inhalte
• Dein Webdesign transportiert Deine Marke und Deine Werte. So wirkst Du z.B. professionell und kundenorientiert, freundlich, stylisch oder innovativ.
• Es schafft Vertrauen.
• Und erhöht Deine Kontakte und Umsätze

Häufig sind es einfache und vermeidbare Fehler, die in der Kommunikation den schlimmsten Schaden anrichten. Und im Kern ist Webdesign nichts anderes als Kommunikation. Nutze diesen Artikel daher gerne, um Deine Website einem Design Review zu unterziehen und die einzelnen Elemente mit Deinem Webdesigner oder uns zu besprechen.

Denn schlechtes Webdesign nervt einfach alle und kostet Ansehen, Reputation und manchmal richtig viel Geld. Dass muss nicht sein. Wir zeigen Dir hier worauf es im Webdesign ankommt, um Deine Besucher zu überzeugen und Deine Ziele im Web zu erreichen.

Du willst Dir vorab einen Überblick verschaffen, was man unter modernem Webdesign heute grundsätzlich versteht? Dann empfehle ich Dir unseren Artikel Was ist Webdesign?.

Los geht‘s

1. Farben

Bei einem professionellen Webdesign sind die Farben kein zufälliges Sammelsurium von Deinen 20 Lieblingsfarben. Es wird eine bewusste Auswahl für eine Farbpalette getroffen. Idealerweise ist diese auf wenige Farben beschränkt und umfasst nicht den gesamten Regenbogen.

Gerade für moderne Webdesigns gilt bei der Anzahl der Farben: Weniger ist mehr. Die meisten Webdesigner entscheiden sich daher bewusst eher für 2 als für 3 Farben.

Diese Minimierung von Farben scheint vielen jedoch schwer zu fallen. Zumindest gibt es sehr viele Websites, auf denen es nicht gelingt.

Wenn Dein Website Design z.B. so aussieht, solltest Du dringend etwas ändern.

Ich bitte um Verständnis, dass ich auf eine Verlinkung verzichte, weil ich mir keine Feinde machen will.

Beispiele für moderne Farbpaletten findest Du gerade bei den großen Internetplayern. Schau Dir die Seiten von Apple oder Uber an. Kaum jemand auf diesem Planeten investiert mehr in das eigene Webdesign.

Häufig gibt es lediglich eine Hintergrundfarbe. Diese ist Schwarz oder Weiß. Und eine Hauptfarbe für die Akzentuierung. So könnte beispielsweise eine aufgeräumte und moderne Farbpalette aussehen.

Ein weiterer wichtiger Aspekt ist, dass Du bei der Wahl der Farben für ausreichend Kontrast sorgst. Insbesondere bei bei der Wahl der Schriftfarbe zum Hintergrund. Deine Besucher werden Dir für die Lesbarkeit Deiner Inhalte danken. Google hat zudem Tools, die die Lesbarkeit messen. Die Ergebnisse fließen in Deine Rankings ein und beeinflussen somit direkt, wie viele Besucher Deine Website hat.

Fazit Webdesign Grundlage Nr. 1

Eine unbedachte und nicht fundierte Farbauswahl, ist gewissermaßen das Todesurteil für jedes Design. Beschränke Deine Farben und sorge für ausreichend Kontrast. Wenn Du mit nur einer Farbe arbeitest kannst Du den Kontrast z.B. auf Basis des Qualitätskontrast erreichen.

Gerade für Anfänger kann es schwierig sein, die richtigen Farben zu finden. Deshalb haben wir einen Artikel erstellt, der kostenlose Tools für die Farbauswahl listet und die psychologische Bedeutung der Farben erklärt. Ebenso geben wir Dir dort einen Leitfaden an die Hand, wie Du in einfachen Schritten das perfektes Farbschema für Deine Website erstellst.

2. Webdesign Grundlage: Typographie

Typografie ist weit mehr als nur Buchstaben. Sie ist viel mehr die Kunst der schriftlichen Kommunikation. Ihr kommt daher auch gesellschaftlich erhebliche Bedeutung zu. Für ein erfolgreiches Webdesign ist es wichtig, die Typografie gut zu verstehen und anzuwenden. Nur so können Deine Texte, Deine dahinterliegende Botschaft und schließlich Du selbst bestmöglich präsentiert werden.

Nicht wenige Webdesigner argumentieren auch deshalb, dass die Typographie zu den allerwichtigsten Designelementen für Webseiten gehört. Es geht um nicht weniger als Klarheit, Lesbarkeit und Zweckmäßigkeit.

Über die Schriftwahl und deren Komposition vermittelst Du auch das „Gefühl“. Die Emotionen Deiner Marke sowie Ihren Charakter.

Die Typografie muss mit den anderen Elementen Deiner Webseite harmonieren. Schließlich gilt es dass alle Design Elemente und Inhalte zusammen ein stimmigen Eindruck von Dir und Deiner Marke rüberbringen.

Schenke daher der Auswahl Deiner Schriftarten, Schriftgrößen und Zeilenhöhen ausreichend Aufmerksamkeit. Über die Konstruktion und Verwendung werden wertvolle informatorische Hierarchien unterstrichen, die Deinen Website Besuchern Orientierung gibt. Es müssen ja nicht immer riesige Schriften wie in unserem Webdesign Showcase für Landingpages sein, auch wenn diese zur Zeit eine wichtige Rolle bei den Webdesign Trends einnehmen. Finde die Typographie, die zu Dir und Deinem Unternehmen passt.

3. Animationen

Animationen bleiben weiterhin ein Megatrend. Ermöglicht wird dies einerseits durch immer schneller werdende Ladegeschwindigkeiten. Zum anderen durch bessere Tools für die Erstellung von Animationen.

Mittels Animationen kannst Du die Wahrnehmung Deiner Benutzer für Deine Marke oder Dein Produkt verbessern. Sollte dieser Transfer nicht gelingen, ist das schlimmste was passieren kann, dass Deine Besucher Spaß dabei haben, die Animationen anzusehen, während sie auf eine Rückmeldung oder das Laden warten. Das Nutzererlebnis wird verbessert.

Betrachten wir Animationen von einer etwas philosophischeren Metaebene aus, so spiegeln sie den Zeitgeist wider. Stillstand ist Rückschritt, alles ist in Bewegung. Statische Kommunikation war gestern.

Insgesamt sind Animationen aus hochwertigen Webdesigns nicht mehr wegzudenken.

Die Verwendungsmöglichkeiten von Webanimationen sind vielfältig. Hier ein paar Beispiele:

• Dynamische Hintergründe
• Ladesequenzen
• Scroll-Animationen für gesamte Websites
• hochdynamische Menüs
• Bildergalerien

Die Aufzählung könnte unendlich lang werden. Allen voran stehen aber die Interaktionen, die Dank der Animationen möglich sind.

Zusammenfassend sind Animationen eine wirkliche Bereicherung. Sie bieten sowohl Vorteile bei der praktischen Benutzung einer Website, als auch erheblichen Unterhaltungswert.

Das führt schließlich zu wiederkehrende Besuchern, die sich gerne länger auf Deiner Seite aufhalten und obendrein Suchmaschinen positiven Signale senden.

4. Responsive Webdesign als elementare Webdesign Grundlage

Responsive Webdesign hat sich längst als Standard durchgesetzt. Das Ziel ist, dass Deine Website auf jedem Gerät hervorragend aussieht. Egal, ob Deine Website mit einem Handy oder einem Smart TV besucht wird. Ein modernes Webdesign reagiert darauf und macht immer einen guten Eindruck.

Je hochwertiger responsives Webdesign dabei umgesetzt wird, umso besser sind die anderen Webdesign Elemente für die verschiedenen Displaygrößen optimiert.

Eigentlich sollte man responsives Webdesign als Mindeststandard für moderne Websites verstehen. Gerade in Deutschland gibt es jedoch immer noch viele Websites gibt, die für mobile Geräte vollständig ungeeignet sind.

Hinzu kommt eine noch größere Anzahl semioptimaler Seiten, die häufig mit Baukastensystemen erstellt werden. Diese sind oft zwar responsiv gedacht, funktionieren aber einfach super schlecht auf mobilen Geräten. Seiteninhalte werden nicht richtig geladen oder Bilder und Texte in angeschnittener Form gezeigt. So entsteht dann leider ein unvollständiger Eindruck. Und genau das sollte und muss nicht sein.

Achte bei Deiner Website daher darauf, dass sie auf jedem Gerät eine sehr gute Figur macht – schließlich repräsentiert sie Dich, Deine Leistungen und Stärken, auf die Du stolz sein kannst.

5. Medien

Medien gehören zu den Webdesign Grundlagen, die von professionellen Websites kaum wegzudenken sind. Ganz gleich ob es sich hierbei um Videos, Sounds, Fotografien oder Grafiken handelt. Sie entscheiden gravieren, ob es sich um ein gelungenes Webdesign handelt oder nicht. Letztlich liegt das an den immer weiter steigenden Erwartungen, die wir alle an das Internet stellen.

Wir wollen unterhalten werden, uns vernetzen, wir wollen Informationen schnell finden und einordnen. Und am besten soll das alles auf eine ganz persönliche Weise erfolgen.

Der Schlüssel zum Entwerfen effizienter, attraktiver und persönlicher Websites liegt in der Verwendung einer Vielzahl ansprechender Medien.

Der Grund dafür ist, dass die meisten von uns Bilder gegenüber Text schlicht vorziehen. Bilder ziehen Aufmerksamkeit und erzeugen Emotionen. Dabei können Videos und Fotografien auf ganz unterschiedliche Weise eingesetzt werden.

Im Hintergrund schaffen sie Atmosphäre, während Bilder mit Menschen Aufmerksamkeit ziehen und die Besucher häufig dem Blick der abgebildeten Person folgen.

Wichtig bei der Verwendung Deiner Medien, dass sie einen von Dir gewünschten Zweck erfüllen. Entweder zeigen Sie eine relevante Information oder vielleicht wichtiger, sie vermitteln ein Gefühl, was Deine Botschaft untermauert.

Bei der Auswahl der Bilder solltest Du zudem darauf achten, dass sie insbesondere mit Deiner Farbwahl harmonieren. Bzw. im Einklang mit der Farbharmonie Deines Webdesigns sein. Andernfalls entsteht sonst schnell viel Unruhe. In bestimmten Fällen kann aber auch gerade ein informeller collagenartiger Eindruck gewünscht sein. Zum Beispiel dann, wenn hierüber Personality vermittelt werden soll.

6.  Weißräume und Minimalismus

Moderne Webdesigns werden häufig mit dem Begriff Minimalistisches Webdesign in Verbindung gebracht. Wenn Du Dir das genauer ansiehst, stellst Du fest, dass dieses bereits seit sehr vielen Jahren der Fall ist. Weißräume und Minimalismus sind Dauerbrenner.

Die Verwendung von viel Weißraum kommt jedenfalls nicht aus der Mode. In Zeiten der andauernden und zunehmenden Reizüberflutung wundert das kaum.

Gerade im Webdesign sind sie sehr beliebt und irgendwie modern, weil man sie im Vergleich zum traditionellen Print großzügiger verwenden kann. Es werden keine gigantische Kostensummen hierdurch erzeugt oder die Ressourcen unseres Planeten in Form von Papier zu verschwendet. In edleren Magazinen mit Design Fokus, sind Weißräume als Designelement aber auch im Printbereich sehr beliebt.

Weißräume müssen dabei nicht zwingend weiß sein. Genauer genommen sind die Begriffe Leerraum oder negativer Raum treffender, werden aber weniger verwendet. Es geht schlicht um den Freiraum zwischen den Layoutelementen. Designer sagen häufig, die Elemente benötigen Luft zum Atmen. Weißräume sind genau die Webdesign Basics, die diese Luft und den Raum zum Wirken geben. Die Bedeutung von Minimalismus im Webdesign hebt auch die UX Community immer wieder gerne hervor.

Du willst, dass Dein Webdesign als minimalistische Komposition anerkannt ist? Dann achte zudem auf die Abstände im Rahmen Deiner Typografie. Sorge z.B. dafür dass Du einerseits ausreichend Zeilenabstand hast und andererseits durch räumliche Nähe gezielt inhaltliche Zusammenhänge repräsentierst.

Insgesamt ist die Strategie hier mit weniger Worten, Bildern, Inhalten mehr zu sagen und die wenigen Inhalte hochwertig und wirksam zu gestalten. Es entstehen Designs, deren Inhalte gut aufgenommen und verarbeitet werden können.

Viel Weißraum hat aber noch einen weiteren Vorteil: auch sehr farbenfrohe Bilder erhalten so genügend Raum um für sich alleine zu wirken. Zudem können intensive Farben wie Komplementärfarben eingesetzt werden, um besondere Spannungen zu erzeugen, Akzente zu setzen oder einfach zu beleben.

7. Klare Website Navigation

Ganz egal ob sich neue Besucher einen guten Eindruck von Dir und Deinem Unternehmen verschaffen oder schnell und einfach durch einen Bestellprozess kommen wollen: allen hilft eine klare Navigation.

Hierzu zählt zum Beispiel:

• ein intuitiv bedienbares Menü
• zielführende Links aus Textes
• Filter in Galerien
• die Suche auf einer Website oder
• Verschiedene Einstiegsmöglichkeiten für Besucher, die bevorzugt Scrollen oder das lieber ein Menü benutzen

Schau Dir für die Navigation und Struktur Deiner Website genau Deine Zielgruppe an. Wie nutzt sie Websites am liebsten? Wie interagiert sie damit? So kannst Du dank abgestimmter Website Navigation enorm die Usability und damit auch die Zufriedenheit Deiner Besucher erhöhen.

Schlussendlich hilft eine Navigation, die Deinen Website Besuchern sowie Suchmaschinen eine schnelle Orientierung gibt, dass Du höher rangst wirst und Deine Ziele im Web besser erreichst. Es wundert daher nicht, dass sie im Rahmen der Websiteanalyse und -optimierung stets einen festen Platz hat.

Eines der wichtigsten Punkte hierfür ist, dass Dein Menü nicht aus zu vielen Punkten besteht und Deine Besucher bei jeder Wahlmöglichkeit möglichst klar geführt werden. Ansonsten kann es Dir gut passieren das sie vor lauter Alternativen nicht mehr zu wissen, wo sie klicken sollen. Im Englischen sagt man so schön: „If you confuse them, you lose them.“ Oder umgekehrt: je klarer Deine Website Navigation, umso besser kannst Du Deine Besucher für Dich gewinnen.

Per Klick auf diesen Button gelangst Du z.B. auf unsere Webdesign Seite

Webdesign

8. Die strategische Verwendung von Call to Actions (CTAs)

Letztlich spielen Ziele im modernen Webdesign eine zentrale Rolle. Es geht häufig darum Besucher in Kunden zu verwandeln. Zumindest aber sollten Websites Personen mit Dir, Deinem Unternehmen, Deinen Produkten oder Deinen Inhalten verbinden.

Wenn die Verbindung einmal steht, sollte diese Beziehung nicht nur aufrechterhalten, sondern verfestigt und ausgebaut werden. Lesern sollten zu Abonnenten und diese zu Kunden oder Multiplikatoren werden.

Um genau das zu ermöglichen spricht man im Webdesign von sogenannten Call-To-Actions (CTA). Das ist nichts weiter als eine Handlungsaufforderung. Beispiele sind Downloads von weiterführenden Informationsmaterialien, Newsletter-Anmeldungen, Kontaktformulare, Einladungen zu Evens oder Social Media Vernetzungen.

Der Integration, leichten Erreichbarkeit und Sichtbarkeit von CTAs kommt eine wichtige Funktion im modernen Webdesign zu. Durch das Einsammeln von Daten und Kontakten werden die verschiedensten Ziele erreicht und Menschen untereinander oder mit Organisationen verbunden.

Du solltest Deine wichtigsten CTAs daher so auf Deiner Website platzieren, dass sie für Deine Benutzer optimal sind. Häufig geschieht dieses am Ende von Blog-Posts, in Seitenleisten oder im Menübereich. Die Positionierung entscheidet im Webdesign ebenso wie das Layout über die Prominenz.

Zu guter Letzt

Wie Du Dir sicher vorstellen kannst, können die Elemente in unterschiedlicher Form kombiniert werden. Dabei entsteht nicht nur das Layout für Deine Webseiten, sondern im Idealfall eine Website, die Dich und Dein Unternehmen auf authentische und überzeugende Weise repräsentiert.

Viele dieser Elemente sind dabei nicht nur für Dein Webdesign relevant. Auch für Dein grundsätzliches Grafikdesign wie z.B. Deinem Corporate Design und im Rahmen von Design Systemen spielen sie eine wichtige Rolle.

Aber Achtung: auch Elemente, die für sich alleine sehr schön sind, sind nicht immer harmonisch mit anderen kombinierbar. Vielmehr ist es die stilvolle Komposition der beschriebenen Elemente, die Dein Webdesign zu einem einzigartigen, wundervollen Design macht.

Durch „Schwarmintelligenz“ entstehen zudem auch Stile und Trends. Gerade die letzteren ändern sich im Zeitverlauf sehr häufig. Was gerade so „in“ ist, erfährst du in unserem Beitrag „Aktuelle Webdesign Trends für 2023“.