Design best practices - mit diesen kleinen Tricks wirst auch du zum Designer

Du möchtest gerne deine Unternehmens-Website designen und deine Design Skills auf das nächste Level bringen? Mit den richtigen Design best practices kannst du deine Fähigkeiten verbessern und professionellere Designs erstellen.

TL;DR

Eine wichtige Regel in Sachen Design ist die “Less is more”-Philosophie. Versuche, unnötige Elemente aus deinen Designs zu entfernen und dich auf das Wesentliche zu konzentrieren. Ein überladenes Design wirkt unübersichtlich und ablenkend.

Achte auch auf die Hierarchie deiner Designs. Stelle sicher, dass die wichtigsten Elemente hervorgehoben werden und leicht zu finden sind. Du kannst hierzu verschiedene Typografie-Tricks anwenden, wie zum Beispiel Größenunterschiede oder Fettschrift.

Ein weiterer wichtiger Aspekt ist die Farbauswahl. Wähle Farben, die zueinanderpassen und zu deiner Marke passen. Verwende nicht zu viele Farben, da dies ebenfalls zu Unübersichtlichkeit führen kann. Es lohnt sich auch, sich mit den Grundlagen der Farblehre auseinanderzusetzen, um zu verstehen, wie Farben miteinander interagieren und welche Stimmung sie evozieren.

Ein weiterer wichtiger Faktor ist die Benutzerfreundlichkeit (Usability). Stelle sicher, dass deine Designs einfach zu verstehen und zu nutzen sind.

Hier sind ein paar Tipps und Tricks, die du direkt anwenden kannst, um auch schon kurzfristig Erfolge zu erleben:

1. Typographie Tipps: So sehen deine Texte top aus

Stelle sicher, dass du maximal 10 Wörter pro Zeile in einem Text verwendest. Dadurch erreichst du, dass die Nutzer deiner Website ihre Köpfe nicht hin- und her bewegen müssen, wenn sie deine Texte lesen.

Achte außerdem darauf, dass der Zeilenabstand zwischen den Zeilen eines Paragraphen so gestaltet ist, dass er so groß wie möglich ist, ohne, dass der Text aussieht wie eine Sammlung einzelner Zeilen. Der Text soll also weiterhin als einheitlicher Block wahrgenommen werden, aber eben so wenig eng wie möglich.

Mit diesen klassischen Schriftarten, die du zumeist kostenlos verwenden darfst, kannst du Designs erschaffen, die niemals hässlich oder langweilig aussehen: Garamond, Bodoni, Century Expanded, Futura, Times Roman, Helvetica.

Mit Hilfe von type-scale.com kannst du dir anschauen, welche Schriftgrößen auf deiner Website gut zueinander passen würden. So kannst du sicherstellen, dass deine verschiedenen Überschriften-Hierarchien und Text-Paragraphen sinnvolle Größenunterschiede aufweisen und dadurch ein einheitliches angenehmes Bild ergeben.

2. Tipps zu Hierarchie und Layout: So erstellst du eine sinnvolle Seitenstruktur

Sieh zu, dass die Struktur deiner Seite folgende Ziele erfüllt:

1. Sie soll Klarheit schaffen, anstatt zu verwirren.
2. Sie soll interessant aussehen, anstatt zu langweilen.
3. Sie soll Nutzern helfen, die Inhalte zu konsumieren.

Um dies zu erreichen ist es sehr häufig hilfreich darauf zu achten, dass es eine große Sache gibt, die in etwa 60% der Fläche beansprucht, eine mittelgroße Sache, die ca. 30% beansprucht, sowie eine kleine Sache, die die restlichen 10% beansprucht.

Diese 60-30-10 Regel lässt sich auch mehrfach anwenden. Zum Beispiel kann der Inhalt der 60% auch wieder unterteilt werden in kleinere Bestandteile, die wiederum der 60-30-10 Regel folgen.

Verbinde die Aufteilung und Struktur deiner Seite damit, dir Gedanken zu machen, welche Business-Ziele du mit deiner Website verfolgst. Die 60%-Fläche erregt durch ihre Größe das größte Augenmerk und sollte dementsprechend die für deine Nutzer wichtigsten Inhalte enthalten, sowie möglicherweise einen Call-to-action, der deutlich zu erkennen ist.

So stellst du sicher, dass deine Nutzer nicht darüber verwirrt sind, womit sie sich zuerst gedanklich befassen sollen. Nichts ist anstrengender und unprofessioneller als ein Design, dessen einzelne Bestandteile um Aufmerksamkeit konkurrieren, weil sie beispielsweise hinsichtlich farblicher Intensität und ihrer Größe ähnlich gestaltet sind.

Ein gutes Gegenbeispiel, welches in seiner Abwesenheit dieser Design-Regeln schon wieder so legendär ist, dass es schon vor vielen Jahren viral ging, ist die Website von Lings Cars.

3. Tipps zur Farbauswahl: So erstellst du eine sinnvolle Farbpalette

Hat dein Unternehmen bereits eine Corporate Identity, die sich in den Farben der Website widerspiegeln soll? Es reicht in der Praxis oft nicht, mit einer Handvoll Farben zurecht zu kommen. In der Regel ist es erforderlich noch mehrere Abstufungen der gewählten Farben zur Verfügung zu haben.

Wenn du dies nicht strategisch von Anfang an berücksichtigst, wird deine Farbpalette nachträglich erweitert auf eine Weise, die vielleicht dem ursprünglichen Design-Gedanken widerspricht. Daher lohnt sich hier ein strategischer Ansatz, der sinnvoll erweiterbar ist.

Hierfür ist es wichtig, zunächst die Haupt-Farbe auszuwählen. Das kann eine bereits vorhandene Farbe von deinem Unternehmen und dessen Marke sein. Oder bei neuen Projekten, kannst du mit Hilfe der Erkenntnisse aus der Farb-Psychologie eine neue Farbe erstellen: empower-yourself-with-color-psychology.com.

Anschlißend kannst du eine Farbpalette generieren mit Hilfe von Tools wie z.B. dem Color Wheel von Adobe: color.adobe.com/create/color-wheel. Achte bei der Nutzung dieser Farben auch darauf, dass eine Farbe zu 60% zu sehen, eine zweite zu 30% und eine zu 10%. Dies sollte natürlich nur grob beachtet werden, und hilft eine sinnvolle Farb-Hierarchie zu wahren.

Übung macht den Design-Meister

Es gibt noch viele weitere Design best practices, die du beachten solltest. Indem du dich mit den Grundlagen des Designs auseinandersetzt und regelmäßig übst, wirst du deine Fähigkeiten verbessern und professionellere Designs erstellen können.

Teste deine Designs regelmäßig mit verschiedenen Nutzergruppen, um sicherzustellen, dass sie auch tatsächlich benutzerfreundlich und ansprechend sind. Diese Feedback-Loop wird dir helfen, dich schnell zu verbessern.

Eine gute Möglichkeit, um Inspiration zu sammeln und neue Ideen zu entwickeln, ist das Durchstöbern von Design-Blogs und -Portfolios. Nutze deine dadurch gewonnenen Ideen, um immer wieder zu üben eigene Web-Designs zu erstellen. So wirst du die Kunst meistern und wirst zum fähigen Designer.