Alles, was Sie wissen müssen, um professionelle Websites zu erstellen. Von grundlegenden Prinzipien bis zu fortgeschrittenen Techniken, die von erfahrenen Designern verwendet werden.
Bevor Sie Figma oder ein anderes Design-Tool öffnen, müssen Sie die vier grundlegenden Prinzipien verstehen, die jedem guten Design zugrunde liegen. Diese Prinzipien wurden von Robin Williams in dem Buch "The Non-Designer's Design Book" formuliert und sind heute genauso relevant wie vor 30 Jahren.
Kontrast schafft visuelle Hierarchie und macht Design interessant. Wenn zwei Elemente nicht identisch sind, machen Sie sie sehr unterschiedlich. Seien Sie nicht zaghaft - schwacher Kontrast sieht aus wie ein Fehler, nicht wie eine Designentscheidung.
Kontrast kann erreicht werden durch:
Praktisches Beispiel: Verwenden Sie auf einem Call-to-Action-Button kein Grau auf Grau. Verwenden Sie einen lebhaften Hintergrund (Orange, Blau) mit weißem Text. Der Button muss von der Seite "hervorstechen".
Jedes Element auf der Seite muss eine visuelle Verbindung zu einem anderen Element haben. Nichts sollte willkürlich platziert werden. Ausrichtung schafft Ordnung und Professionalität.
Die goldene Regel: Wählen Sie eine Art der Ausrichtung und bleiben Sie dabei. Wenn Text linksbündig ist, sollte aller Text linksbündig sein. Zentrieren ist für kurze Titel in Ordnung, aber vermeiden Sie lange zentrierte Absätze - sie sind schwer zu lesen.
Häufiger Fehler: Viele Websites haben das Logo links ausgerichtet, das Menü zentriert und den Kontakt-Button rechts, ohne visuelle Logik. Das Ergebnis? Unordnung.
Wiederholen Sie visuelle Elemente im gesamten Design: Farben, Schriftarten, Button-Stile, Abstände. Wiederholung schafft Kohärenz und lässt die Website "fertig" und professionell aussehen.
Das bedeutet, wenn Sie entschieden haben, dass primäre Buttons blau mit abgerundeten Ecken sind, sollten alle primären Buttons gleich aussehen. Wenn Titel in Montserrat Bold sind, sollten alle Titel in Montserrat Bold sein.
Hier kommen Design-Systeme her: Große Unternehmen haben Design-Systeme genau, um Wiederholung und Konsistenz auf allen Seiten und Produkten zu gewährleisten.
Elemente, die konzeptionell zusammengehören, sollten auch visuell nah beieinander sein. Gruppierung schafft Organisation und reduziert visuelle Unordnung.
Wenn Sie ein Formular mit Feldern haben, sollte das Label näher an seinem Feld sein als am vorherigen Feld. Wenn Sie einen Abschnitt mit Titel, Beschreibung und Button haben, sollten diese visuell gruppiert sein, mit mehr Abstand zum nächsten Abschnitt.
Praktische Regel: Der Abstand zwischen gruppierten Elementen sollte 2-3 mal kleiner sein als der Abstand zwischen verschiedenen Gruppen.
Farben sind nicht nur ästhetisch - sie kommunizieren, schaffen Emotionen und beeinflussen das Nutzerverhalten. Eine gut gewählte Farbpalette kann den Unterschied zwischen einer Website, die konvertiert, und einer, die Besucher verlassen, ausmachen.
Jede Farbe ruft bestimmte Emotionen und Assoziationen hervor. Hier ist, was die Hauptfarben vermitteln:
Eine effektive Web-Palette hat normalerweise 5-6 Farben:
Es gibt mehrere mathematische Ansätze für harmonische Schemata:
Monochromatisch: Eine einzige Farbe in verschiedenen Schattierungen. Sicher, elegant, aber kann langweilig sein.
Komplementär: Zwei gegenüberliegende Farben auf dem Farbkreis (Blau-Orange). Dynamisch, kontrastreich.
Analog: Nachbarfarben auf dem Rad (Blau, Blaugrün, Grün). Harmonisch, ruhig.
Triadisch: Drei Farben in gleichem Abstand auf dem Rad. Lebhaft, aber schwer auszubalancieren.
Es reicht nicht aus, gut auszusehen - Farben müssen auch zugänglich sein. WCAG (Web Content Accessibility Guidelines) erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text.
Verwenden Sie Tools wie WebAIM Contrast Checker zur Überprüfung. Hellgrauer Text auf weißem Hintergrund mag elegant aussehen, aber wenn Leute ihn nicht lesen können, nützt es niemandem.
Typografie macht 90% des Webdesigns aus. Ernsthaft. Denken Sie darüber nach: Was macht eine Website? Sie präsentiert Informationen. Und Informationen sind hauptsächlich Text. Wenn die Typografie falsch ist, leidet die gesamte Website.
Für die meisten Websites brauchen Sie maximal zwei Schriftarten:
Sichere Kombinationen, die funktionieren:
Hierarchie hilft Nutzern, die relative Wichtigkeit von Informationen zu verstehen. Sie wird erstellt durch:
Eine gute typografische Skala für Web:
Die Zeilenhöhe (Abstand zwischen Zeilen) macht den Unterschied zwischen lesbarem und erstickenden Text:
Buchstabenabstand: Große Titel können von leicht negativem Letter-Spacing (-0.02em) profitieren. Text in Großbuchstaben braucht positiven Letter-Spacing (0.05-0.1em).
Zu lange Zeilen sind ermüdend. Zu kurze Zeilen unterbrechen den Rhythmus. Ideal: 45-75 Zeichen pro Zeile, wobei 66 als optimal gilt.
Für eine Textspalte bedeutet das normalerweise max-width: 650-750px.
Das Layout bestimmt, wie Elemente auf der Seite angeordnet sind. Ein gutes Layout führt das Auge des Nutzers natürlich, ohne bewusste Anstrengung.
Das Grid ist das unsichtbare Skelett der Seite. Am beliebtesten ist das 12-Spalten-Grid, weil 12 sich schön teilen lässt: 2, 3, 4, 6.
Ein typisches Desktop-Layout:
Weißraum ist nicht "leerer Raum" - es ist ein Designelement. Er gibt Elementen Platz zum Atmen, reduziert kognitive Belastung und macht Inhalte leichter verarbeitbar.
Regeln für Raum:
F-Muster: Nutzer scannen die Seite in F-Form - lesen die erste Zeile, gehen runter und lesen die zweite Zeile teilweise, dann scannen sie am linken Rand nach unten. Perfekt für textlastige Seiten.
Z-Muster: Auf einfacheren Seiten (Landing Pages) folgt das Auge einem Z - oben links, oben rechts, diagonal runter, unten links, unten rechts. Platzieren Sie wichtige Elemente auf dieser Trajektorie.
Der sichtbare Bereich ohne Scrollen ("above the fold") ist die wertvollste Immobilie der Website. Er sollte enthalten:
Das bedeutet nicht, dass alles oben gestapelt werden muss - nur dass die Hauptbotschaft in den ersten Sekunden klar sein muss.
Über 60% des Web-Traffics kommt von mobilen Geräten. Wenn Ihre Website auf dem Telefon nicht gut aussieht, verlieren Sie die meisten potenziellen Kunden.
Mobile-First bedeutet, zuerst für den kleinsten Bildschirm zu entwerfen und dann Komplexität für größere Bildschirme hinzuzufügen. Warum?
Breakpoints definieren, wo sich das Layout ändert:
Fluide Grids: Verwenden Sie Prozente oder fr-Einheiten statt fester Pixel.
Responsive Bilder: Verwenden Sie srcset, um unterschiedlich große Bilder zu liefern. Ein 2000px-Bild auf Mobil ist Bandbreitenverschwendung.
Fluide Typografie: clamp() ermöglicht Schriften, die zwischen Größen smooth skalieren: font-size: clamp(1rem, 2.5vw, 2rem)
User Experience (UX) dreht sich darum, wie sich der Nutzer bei der Interaktion mit der Website fühlt. Ein schönes Design, das schwer zu bedienen ist, ist ein gescheitertes Design.
Hicksches Gesetz: Je mehr Optionen, desto länger dauert die Entscheidung. Reduzieren Sie Optionen. Ein Menü mit 5 Items ist besser als eines mit 15.
Fitts' Gesetz: Die Zeit, ein Ziel zu erreichen, hängt von Entfernung und Größe ab. Wichtige Buttons sollten groß und leicht erreichbar sein.
Von-Restorff-Effekt: Elemente, die hervorstechen, sind leichter zu merken. Ein einzelner farbiger Button auf einer Textseite ist sichtbarer als 5 farbige Buttons.
Jakobs Gesetz: Nutzer verbringen die meiste Zeit auf ANDEREN Websites. Respektieren Sie Konventionen - Logo oben links, Menü rechts, Footer unten.
Jeder Klick, jedes auszufüllende Feld, jede Sekunde Wartezeit ist Reibung, die den Nutzer zum Gehen bringen kann.
Menschen kaufen nicht auf Websites, denen sie nicht vertrauen. Wie Sie Glaubwürdigkeit aufbauen:
Bilder können ein Design machen oder brechen. Ein hochwertiges Foto kann sofort kommunizieren, was Worte nicht können. Aber schlecht gewählte oder optimierte Bilder können die Website verlangsamen und das Erlebnis ruinieren.
Bilder sind oft die größten "Kosten" einer Webseite. Optimierung ist entscheidend:
Authentisch > Generischer Stock: Ein echtes Foto Ihres Teams ist wirkungsvoller als ein Stock-Bild mit lächelnden Leuten im Anzug.
Relevant > Schön: Das Bild muss die Botschaft unterstützen, nicht nur gut aussehen. Wenn es keinen Wert hinzufügt, fügen Sie es nicht ein.
Stilistisch konsistent: Alle Bilder auf der Website sollten einen ähnlichen Stil haben - entweder alle Fotos oder alle Illustrationen, mit einer konsistenten Farbpalette.
Video erhöht das Engagement, bringt aber Herausforderungen:
Mikro-Interaktionen sind die kleinen Animationen und Feedbacks, die eine Website "lebendig" wirken lassen. Ein Button, der bei Hover die Farbe ändert, ein Icon, das beim Laden rotiert, eine Nachricht, die smooth erscheint - all das verbessert das Erlebnis.
Hover-Zustände: Buttons, Links, Cards, die auf Hover reagieren
Fokus-Zustände: Visuelles Feedback, wenn ein Element fokussiert ist (entscheidend für Barrierefreiheit)
Ladeindikatoren: Spinner, Skeleton Screens, Fortschrittsbalken
Seitenübergänge: Fade in/out, Slide zwischen Seiten
Scroll-Animationen: Elemente, die beim Scrollen erscheinen
Formular-Feedback: Echtzeit-Validierung, Erfolgs-/Fehlerzustände
Easing steuert die Beschleunigung der Animation:
Ein Design-System ist eine Sammlung wiederverwendbarer Komponenten, Richtlinien und Standards, die Konsistenz im gesamten Produkt gewährleisten. Für größere Websites oder Teams ist es unerlässlich.
Tokens sind Designvariablen, die im gesamten System geändert werden können:
Wenn Sie die Primärfarbe ändern möchten, ändern Sie sie an einer Stelle und sie aktualisiert sich überall.
Die "Atomic Design"-Methodologie unterteilt Komponenten in Ebenen:
Eine Website, die schön aussieht aber nicht konvertiert, ist nur Kunst - kein Business. Design muss den Geschäftszielen dienen. Conversion-zentriertes Design stellt Nutzer und Geschäftsziele in den Mittelpunkt.
1. Ein Ziel pro Seite: Jede Seite sollte einen primären CTA haben. Wenn Sie wollen, dass sie kaufen UND sich für den Newsletter anmelden UND Ihnen in Social Media folgen, wird der Nutzer nichts tun.
2. Klare visuelle Hierarchie: Das Auge muss natürlich geführt werden: Headline → Vorteile → CTA. Nichts sollte von diesem Flow ablenken.
3. Optionen reduzieren: Das Paradox der Wahl - zu viele Optionen lähmen. Bieten Sie 2-3 Optionen, nicht 10.
4. Ablenkungen eliminieren: Auf Landing Pages Navigation, Sidebars, externe Links entfernen. Alles, was nicht dem Hauptziel dient, muss verschwinden.
Der CTA (Call-to-Action) ist der wichtigste Button auf der Seite. Wie man ihn optimiert:
Raten Sie nicht, was funktioniert - testen Sie. Elemente zum Testen:
Webdesign entwickelt sich ständig weiter. Hier sind die Trends, die 2025 prägen, und wie man sie anwendet, ohne Opfer kurzlebiger Moden zu werden.
Inspiriert von Apple-Dashboards verwendet das Bento-Layout asymmetrische Grids mit Cards unterschiedlicher Größe. Schafft visuelles Interesse und klare Informationsorganisation.
Halbtransparente Elemente mit Blur im Hintergrund, die einen "Milchglas"-Effekt erzeugen. Elegant bei subtiler Verwendung, aber nicht übertreiben - kann Leistung und Lesbarkeit beeinträchtigen.
Immer mehr Websites bieten nativen Dark Mode oder haben ihn sogar als Standard. Reduziert Augenbelastung und wirkt modern. Wichtig: Von Anfang an für beide Modi entwerfen.
Riesige Titel (100px+), die ein Statement setzen. Funktioniert für starkes Branding, aber Vorsicht bei Responsive - großer Text wird auf Mobil problematisch.
Stilisierte Illustrationen statt Stock-Fotos. Blobs, Gradient Meshes, organische Formen. Schafft Persönlichkeit und Differenzierung von Wettbewerbern.
Cursor-Effekte, scroll-getriggerte Animationen, subtile Parallaxe. Gut gemacht, fügen sie Feinheit hinzu. Schlecht gemacht, lenken sie ab und verlangsamen.
Designs, die sich in Echtzeit basierend auf dem Nutzer anpassen - Bilder, Copy, Layout. Die Technologie existiert, aber die Implementierung ist noch im Anfangsstadium.
"Grünes" Design - Optimierung für reduzierten Energieverbrauch (Dark Mode, optimierte Bilder, effizienter Code). Einige Hoster bieten bereits CO2-neutrales Hosting.
Das #1-Tool für Design und Prototyping. Kostenlos für den persönlichen Gebrauch, kollaborativ, cloudbasiert.
Farbpaletten-Generator. Sperren Sie Farben, die Ihnen gefallen, und generieren Sie Kombinationen.
Kostenlose Web-Schriftbibliothek. Über 1500 Schriftfamilien, einfach zu integrieren.
Inspiration von professionellen Designern. Sehen Sie, was im Trend liegt und was funktioniert.
Überprüfen Sie den Farbkontrast für Barrierefreiheit. WCAG-konform.
Visualisieren Sie die Website auf mehreren Geräten gleichzeitig. Perfekt für responsives Testen.
Wenn Sie das Design lieber in die Hände von Experten legen möchten, sind wir da. Wir erstellen Websites, die gut aussehen und konvertieren.