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.
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.