Die Facetten des Webdesigns: Grundlagen einfach erklärt – Tipps für professionelle und moderne Websites 2025

Dein Plan für deine ideale Website: So kannst du das Design deiner Website anpassen, damit sie professioneller wirkt

Im Folgenden findest du eine übersichtliche Tabelle mit den wesentlichen Maßnahmen aus diesem Artikel. Sie fasst die Grundprinzipien und fortgeschrittenen Tipps zusammen, die du umsetzen kannst, um deine Website moderner, nutzerfreundlicher und einzigartiger zu machen. In der ersten Spalte findest du die Maßnahme, in der zweiten ein konkretes Beispiel und in der dritten eine grobe Zeiteinschätzung für die Umsetzung (basierend auf Tools wie Framer; bei DIY-Ansätzen ohne Profi-Hilfe).

Wenn du mehr Details zu diesem Plan haben möchtest, dann findest du im Folgenden die ausführlichen Erklärungen zu jedem Punkt.

Du möchtest eine Website, die professionell wirkt und deine Besucher sofort anspricht? Als Experten mit M.Sc. in Marketing und jahrelanger Praxis wissen wir genau, worauf es ankommt. Wir verwenden Framer, eines der besten und fortgeschrittensten Design-Tools für Webdesign, die es momentan gibt.

Warum wir Framer nutzen

Dadurch, dass das Tool so fortgeschritten ist und man nicht limitiert ist, kann man fast alles designen, was man sich vorstellen kann. Man ist nicht auf Plan A angewiesen, sodass unsere Websites alle unterschiedlich aussehen. Dadurch, dass wir schon so viele verschiedene Designs ausprobiert und verfeinert haben, wissen worauf es wirklich ankommt.

Hier ein Beispiel für eine von uns erstellte Website, zu der wir regelmäßig Rückmeldungen von den Website-Besuchern erhalten - scheinbar trifft das Design genau den Geschmack der spezifischen Zielgruppe.

Lass uns nun zu den Design-Grundprinzipien kommen, die du immer beachten solltest.

Die Grundprinzipien

Verwenden eines Grids

Ein Grid ist ein unsichtbares Raster aus horizontalen und vertikalen Linien, das dabei hilft, eine geordnete Struktur für die Platzierung von Elementen auf der Website zu schaffen. Ein gut durchdachtes Grid-System gewährleistet, dass alle Inhalte, wie Texte, Bilder und Buttons, harmonisch und symmetrisch angeordnet werden. Das Ziel ist es, ein aufgeräumtes und konsistentes Layout zu gestalten, bei dem die Abstände zwischen den Elementen einheitlich sind und die gesamte Seite visuell strukturiert wirkt. Ein sauberes Grid erleichtert den Nutzern das Erfassen der Inhalte und verbessert die Benutzererfahrung erheblich. Das Grid selbst ist nicht sichtbar, man sieht nur dass es ein Grid-System gegeben hat. Das sieht man daran, dass z. B. alle Elemente in einer Sektion die gleichen Abstände haben, wie die Elemente in der nächsten und übernächsten Sektion. Außerdem haben Sektionen, die auf einem Grid-Layout basieren, alle die gleiche Breite. Wenn du kein Grid benutzen möchtest, kannst du auch einfach alle Abstände in jeder Sektion gleich groß und jede Sektion gleich breit gestalten (z. B. 1200 px).

Bei dieser Sektion kommt das Grid-System zur Geltung, man sieht eindeutig, dass alle Inhalte von horizontalen und vertikalen Orientierungslinien begrenzt werden. Die Sektion findest du auf dieser Website.

Farbgewichtung: 60-30-10-Regel

Eine ausgewogene Farbwahl ist entscheidend für den visuellen Eindruck und die Benutzerführung einer Website. Die 60-30-10-Regel ist eine bewährte Methode, um Harmonie und Struktur in der Farbgestaltung zu erreichen. Üblicherweise bedeutet dies, dass:

• 60 % der Fläche einer Website aus einer neutralen Grundfarbe bestehen, oft Weiß (z. B. als Hintergrund).

• 30 % durch eine Akzentfarbe genutzt wird, wie z. B. Schwarz für Text.

• 10 % von einer intensiveren Farbe wie Rot für Call-to-Action-Elemente (CTA) und wichtige Hervorhebungen gefüllt wird. Diese Farbaufteilung sorgt dafür, dass das Design simpel, übersichtlich und optisch ansprechend bleibt. Gleichzeitig entsteht eine klare visuelle Hierarchie, die dem Nutzer hilft, die Inhalte besser zu verstehen und schneller zu navigieren.

Der rote Button sticht bei dieser Sektion mehr hervor, weil die Farbe nur einmal verwendet wird. Damit der rote Button heraussticht ist es also wichtig, dass nur 10% der Fläche, oder weniger von dem Farbton abgedeckt wird.

Hochwertige und optimierte Bilder

Bilder sind ein zentraler Bestandteil des Webdesigns, da sie die Ästhetik einer Website maßgeblich beeinflussen. Allerdings sollten Bilder nicht nur hochauflösend und von guter Qualität sein, sondern auch komprimiert werden, um die Ladezeiten der Website zu verbessern. Schnelle Ladezeiten sind ein wichtiger Faktor für eine positive Benutzererfahrung und auch für das Ranking in Suchmaschinen wie Google. Ein ausgewogenes Verhältnis zwischen Bildqualität und Dateigröße ist daher entscheidend. Optimierte Bilder tragen dazu bei, das visuelle Erlebnis zu verbessern, ohne die Performance der Website zu beeinträchtigen. Dabei gilt es aber Folgendes zu beachten: Jedes von dir verwendete Bild sollte einen Sinn haben. Es sollte z. B. eine Facette der zugehörigen Sektion unterstreichen oder mit den Inhalten in Verbindung stehen, die in dieser Sektion angeführt werden. Das Ziel ist, dass der Website-Besucher einmal durch die Website scrollen kann und anhand der Bilder und Überschriften schnell herausfinden kann, um was es geht und warum du der richtige Ansprechpartner bist.

In dieser Sektion unserer Website wird unser Unternehmen vorgestellt. Rechts ist das Bild eines Blaq Nexus-Mitarbeiters von hinten zu sehen. Das Bild passt also zum Kontext der Text-Inhalte dieser Sektion.

Die Wahl der richtigen Schriftart

Die Wahl der Schriftart (Font) ist ein weiterer wichtiger Aspekt des Webdesigns. Sie trägt maßgeblich zur visuellen Identität einer Website bei und beeinflusst die Wahrnehmung der Inhalte. Bei der Auswahl eines Fonts sollte darauf geachtet werden, dass dieser zur Markenidentität und zur Zielgruppe passt. Beispielsweise könnte eine elegante Serifenschriftart für ein traditionsbewusstes Unternehmen, das hochwertige Produkte anbietet, ideal sein, während eine moderne Sans-Serif-Schriftart für ein Tech-Start-up angemessener wäre. Auch die Lesbarkeit auf verschiedenen Geräten sollte stets berücksichtigt werden.

Beispiel: Switzer - ein Fonttyp, den wir, Blaq Nexus, gelegentlich nutzen.

Klare visuelle Hierarchie auf jedem Screen

Auf jeder Seite – insbesondere auf Bildschirmgrößen mit 100 % Viewport-Höhe – sollte eine klare visuelle Hierarchie bestehen. Bei der Etablierung einer visuellen Hierarchie, sollte sich nicht allein auf die richtige Farbwahl verlassen werden. Die visuelle Hierarchie sollte auch durch die Anordnung und Größe der einzelnen Elemente, wie Bilder, Texte, Icons und Buttons, verstärkt werden. Für eine einfache und übersichtliche Strukturierung ist es hilfreich, auf jedem Screen drei verschiedene Größenkategorien von Elementen zu verwenden:

• Große Elemente: Zum Beispiel ein dominierendes Bild oder ein großer Header.

• Mittlere Elemente: Etwa eine H2-Überschrift mit einer Schriftgröße von 42px.

• Kleine Elemente: Ein Body-Text mit einer Schriftgröße von 18px oder ein kleiner Call-to-Action-Button. Diese Hierarchie stellt sicher, dass der Nutzer die wichtigsten Informationen sofort erkennt und die Seite nicht überladen wirkt. Es schafft ein klares, geordnetes Layout, das dem Nutzer Orientierung bietet.

Bei diesem Beispiel ist das Bild das größte Element, der Text "Vertrauen schaffen" das zweitgrößte Element und der Body-Text "Kinder öffnen sich, wenn sie sich sicher fühlen. Genau diesen Raum schaffe ich." das drittgrößte Element. Hier ist die zugehörige Website: "KraftDeinerGedanken".

Fortgeschrittene Design-Ratschläge

Damit deine Website modern, einzigartig und professionell wirkt, bietet es sich außerdem an komplexere Visualisierungen oder Abläufe und minimale Effekte auf der Website einzubauen.

Hier sind ein paar Beispiele für Visualisierungen:

• Zeige den Prozess, den deine Kunden durchlaufen um von A nach B zu kommen mithilfe eines Zeitstrahls. Durch die besondere visuelle Darstellung weckst du das Interesse des Website-Besuchers und zeigst gleichzeitig, dass du das Geld oder Können hast, um eine Website mit komplexen Funktionen zu erstellen.

Subtile Animationen: Subtile Animationen & Effekte gibt es viele: Von eingespieltem Text, dynamischen Texthervorhebungen (z. B. ein umkreistes Wort) bis hin zu Scroll-Animationen, Hover-Effekten, Tickern und vorgefertigten Abläufen. Das Wichtige ist: Halte deine Effekte subtil um professionell zu bleiben. Deine Effekte dürfen nicht von deinen Website-Inhalten ablenken und als „zu viel“ wahrgenommen werden. Verwende außerdem nicht zu viele Effekte.

Welches Design sollte meine Website haben?

Diese Frage kann ich ganz grob beantworten. Die Antwort hängt davon ab, welche Art Unternehmen du führst und welche Zielgruppe du adressierst. Wenn du ein Unternehmen wie eine Arztpraxis, eine Psychotherapie-Praxis oder eine ähnliche professionelle Dienstleistung anbietest, dann lässt sich diese Frage relativ einfach beantworten: Egal welche Demografie du ansprechen möchtest – du solltest vermutlich einen White-Mode verwenden und wenige Effekte einbauen.

Für alle anderen Unternehmen mit einer eher jüngeren Zielgruppe, die den B2C-Markt als auch den B2B-Markt targetieren würde ich manchmal sogar den Dark-Mode und relativ viele Effekte empfehlen.

Für alle Unternehmen mit einer älteren Zielgruppe, die den B2C-Markt als auch B2B-Markt adressieren möchten, würde ich empfehlen eine White-Mode-Website mit einigen wenigen subtilen Effekten zu verwenden.

So wirst du selbst ein besserer Designer

Schau dir gute Designs von anderen guten Webdesignern an (z.B. hier). So lernst du unterbewusst, was funktioniert und was nicht.

Gehe Schritt für Schritt vor: Schau dir eine einzelne Sektion deiner Website an und überlege dir bei jedem Element, ob das Element ein Gewinn für die Sektion ist und ob das Element deine Sektion schöner macht oder nicht. Wenn beide Fragen mit "Nein" zu beantworten sind, dann ändere das Element oder lösch es komplett.

Bei diesem Vorgehen achtest du im Prinzip auf ein einzelnes Element und betrachtest es im großen Ganzen. Sieht das Element im Gesamtkontext gut aus oder nicht? Diese Frage musst du dir stellen. Wenn du ein gutes Design erschaffen möchtest, ist es mit am wichtigsten, dass das große Ganze gut aussieht – in dem Fall die ganze Sektion.