Wer ein tolles Webdesign möchte, muss die Grundlagen lernen, damit kommuniziert wird, was beabsichtigt ist. Selbst wer einen Experten engagiert, der die Seite designen soll, braucht immer noch Hintergrundinformationen, um einen talentierten Webdesigner von einem mittelmäßigen zu unterscheiden und erklären kann, was er tun soll.

Es ist schwer für Nicht-Designer, dieses ganze Webdesign-Ding zu verstehen. Deshalb habe ich diesen praktischen Guide erstellt, der durch die Grundlagen führt. Hier sind die wichtigsten Webdesign-Tipps, die man kennen muss (und zusätzlich einige nützliche Dos and Don’ts), unterteilt in drei Kategorien: Komposition, Ästhetik und Funktionalität. Egal ob ein Designer engagiert wird oder man es selbst macht, sollten beim finalen Webdesign diese Grundlagen beachtet werden.

Aufräumen

Einer der häufigsten Anfängerfehler ist ein unordentlicher Bildschirm. Die meisten Leute haben eine Liste mit all den Dingen, die sie auf ihrer Website wollen, und weil sie es nicht besser wissen, werfen sie einfach alles auf den Bildschirm – und auf dieselbe Seite.

Im Grunde verwässert jedes Element, das hinzugefügt wird, alle anderen. Wer zu viele ablenkende Elemente hat, weiß ein Nutzer nicht, wohin er schauen soll, und es bietet sich kein zusammenhängendes Erlebnis mehr. Wenn im Gegenzug nur die notwendigen Elemente hinzugefügt werden, sind sie wirksamer, da sie sich die Aufmerksamkeit nicht teilen müssen. Mehr Weißraum bedeutet weniger Unordnung und das ist das, was wirklich zählt bei einem minimalistischen, sauberen Webdesign.

Betrachtet man den Homescreen bei Intenz von einem Top Level Designer, ist nur das Nötige zu sehen: Navigationsmenü, Logo, Slogan, Call-to-Action und ein paar spärliche Bilder für die Atmosphäre und um das Produkt zu zeigen. Sie haben natürlich noch andere Infos, aber präsentieren sie später, damit ihre Seiten nie zu überladen sind. Es ist das visuelle Äquivalent zu Pacing.

Damit ein Webdesign wirkungsvoll ist, muss es gestrafft werden – es muss einen klaren Weg oder Wege für den Nutzer geben, denen er folgt. Es gibt viele verschiedene Arten, dies zu erreichen (einige werden unten erläutert), aber der erste Schritt besteht immer darin, Raum für Elemente mit hoher Priorität zu schaffen, indem man diejenigen mit weniger Priorität entfernt.

Do:
Das Fett abschneiden, also Designs auf die essentiellen Dinge prüfen. Wenn ein Element nichts zum Gesamtergebnis beiträgt oder es verbessert, sollte es entfernt werden. Wenn es überlebensfähig ist, kann es auch zu einer anderen Seite verschoben werden. Pullout-Menüs (Drop-downs, Fold-outs etc.) sind ein guter Weg, Unordnung zu reduzieren. Wenn möglich, sollte versucht werden, diese versteckten Menüs auf sieben Punkte zu beschränken.

Don’t:
Sidebars. Neue Besucher werden sie wahrscheinlich nicht benutzen. Außerdem, wenn alle Optionen nicht ins Haupt-Navigationsmenü passen, muss die Navigationsstruktur sowieso vereinfacht werden. Slider. Die Bewegungen und neuen Bilder in einem Slider lenken ab und sie schwächen die Kontrolle darüber, was ein Nutzer sieht. Es ist besser, nur die besten Bilder zu zeigen, und zwar die ganze Zeit.

Hinreichend Weißraum nutzen

Wie den ganzen Raum füllen, nachdem aufgeräumt wurde? Vorschlag: mit nichts zu füllen?

Negativraum (aka Weißraum) ist in der bildenden Kunst der Fachbegriff für Bereiche in einem Bild, die keine Aufmerksamkeit erregen. In der Regel sind diese leer oder weiß, wie ein wolkenloser Himmel oder eine farblose Wand. Obwohl langweilig, wenn er für sich steht, kann Negativraum das Hauptthema komplementieren und verbessern, wenn er künstlerisch genutzt wird, die Lesbarkeit verbessern und dafür sorgen, dass man das Bild besser „aufnehmen“ kann.

Mein Mantra lautet: Einfach ist immer besser. Es lenkt beinahe sofort Aufmerksamkeit auf das, was für den Nutzer wichtig ist. Außerdem ist das Einfache attraktiv.

Bei Streamflow von Top Level Designer Hitron nehmen der Untertitel und CTA den Hauptfokus ein. Nicht weil sie auffällig oder aufdringlich sind, sondern aufgrund des Negativraums um sie herum. Dieser Landingscreen lässt den Nutzer leichter verstehen, was das Unternehmen macht und wohin er auf der Seite als nächstes soll. Sie haben zudem umwerfende Bilder von Wolken, aber auf eine wunderschöne, minimalistische Art – eine clevere Komposition mit jeder Menge geschickt genutzten Negativraum.

Do:
Wichtigste Elemente mit Negativraum umschließen. Je mehr Negativraum sich um etwas befindet, desto mehr Aufmerksamkeit erhält es. Vermeidung langweiliger Layouts mit sekundären Bildern. Andere ästhetische Elemente wie Farbe oder Typografie können die Lücke optisch ausfüllen, wenn es viel Negativraum gibt.

Don’t:
Das falsche Element hervorheben. Nur die wichtigsten Elemente mit Negativraum umschließen. Wenn ein Ziel beispielsweise Conversions ist, kann die E-Mail-Adresse oder ein CTA mit Negativraum umschlossen werden, aber nicht das Logo oder ein Angebot. Überladene Hintergründe. Der Definition nach sollten Hintergründe größtenteils unbemerkt bleiben. Wenn ein Hintergrund nicht genügend Negativraum hat, wird er von den Hauptelementen ablenken.

Visuelle Hierarchie

Wenn der Fachbegriff „Negativraum“ nicht aus der Bahn wirft, wie sieht es dann mit „visueller Hierarchie“ aus? Er bezieht sich darauf, verschiedene visuelle Elemente wie Größe oder Platzierung zu verwenden, um zu beeinflussen, welche Elemente ein Nutzer zuerst, als zweites oder zuletzt sieht. Ein großer, dicker Titel oben auf einer Website und winzige rechtliche Informationen am Ende sind ein gutes Beispiel dafür, die visuelle Hierarchie zu nutzen, um bestimmte Elemente anderen vorzuziehen.

Beim Webdesign geht es nicht nur darum, was auf einer Seite hinzugefügt wird, sondern wie es hinzugefügt wird. Beispiel CTA-Buttons (Call to Action): Es reicht nicht, dass sie einfach nur da sind. Erfahrene Designer platzieren sie bewusst und geben ihnen kräftige Farben, um hervorzustechen und suggestiven Text, um Klicks zu fördern. Elemente wie Größe, Farbe, Platzierung und Negativraum können das Engagement erhöhen – oder verringern.

Die Homepage von Shearline oben bevorzugt drei Elemente: Den Titel, das Produktbild und den Call-to-Action. Alles andere – das Navigationsmenü, das Logo, der erläuternde Text – scheinen sekundär. Dies war eine bewusste Entscheidung des Designers, umgesetzt durch eine clevere Verwendung von Größe, Farbe und Platzierung.

Do:
Übersichtlichkeit. Die meisten Nutzer lesen nicht jedes Wort einer Seite. Sie sehen nicht einmal alles auf einer Seite. Für dieses Verhalten sollten die obersten Prioritäten schwer zu ignorieren sein. Da die visuelle Hierarchie kompliziert werden kann, funktioniert ausprobieren manchmal am besten. Erstellen Sie ein paar unterschiedliche Versionen („Mockups“) und zeigen Sie sie anderen Leuten für andere Meinungen.

Don’t:
Konkurrierende Elemente. Bei visueller Hierarchie geht es um Ordnung: erst dies, dann das. Übertreiben. Elemente zu groß zu gestalten oder zu viel Farbkontrast kann den gegenteiligen Effekt haben. Nur so viel Aufmerksamkeit erregende Taktiken nutzen wie nötig – und nicht mehr.

Ästhetik

Farben gezielt wählen

Zunächst einmal hat jede Farbe eine unterschiedliche emotionale Konnotation. Wenn eine Markenidentität leidenschaftlich oder energiegeladen ist, würde ein anregendes Rot besser passen als ein ruhiges Blau. Neben der Wahl der richtigen Farben muss sie auch richtig angewendet werden, beispielsweise durch solche Farben, die sich voneinander absetzen, um eine visuelle Hierarchie zu erzeugen.

Um Farbe im Webdesign wirkungsvoll zu nutzen, sollte man verstehen, wie Farben gebildet werden und in welchem Verhältnis sie zueinander stehen. Harmonie und Balance sind die Schlüssel zum Erfolg.

Einfach mal anschauen, wie Top Level Designer Desinly im Webdesign für Oil Sands Masterclass Orange nutzt. Zunächst einmal ist Orange eine kluge Wahl, weil es oftmals mit den Schwermaschinen assoziiert wird, mit denen das Unternehmen zu tun hat. Zusätzlich kombinieren sie das Orange wunderbar mit einem schwarzen Hintergrund, damit es noch mehr hervorsticht. Sie verwenden auch durchgehend dieselbe Farbe als Highlight für Stichwörter und Buttons und binden es sogar in das Hintergrundfoto ein.

Do:
Farbhierarchie erzeugen. Jeweils eine einzelne Farbe für das Hauptelement (primär) nutzen, die Highlights (sekundär) und andere, weniger wichtige Elemente (Hintergrund). Einheitliche Motive. Sobald eine Farbpalette festgelegt ist, nicht davon abweichen. Die primären, sekundären und Hintergrundfarben über die gesamte Seite hinweg einheitlich halten.

Don’t:
Persönliche Lieblingsfarben. Die Auswirkungen von Farben haben eine nachgewiesene Wirkung auf das Marketing. Über Farbenlehre informieren und keine entscheidende Branding-Gelegenheit vergeuden. Unharmonische Farben. Die Farben logisch auszuwählen ist nicht genug; sie müssen auch gut zusammen funktionieren. Violett und Rot mögen beide eine Marke gut repräsentieren, aber der Effekt geht verloren, wenn sie nicht harmonisch sind und zu einem hässlichen Design führen.

Nicht an der Fotografie geizen

Auch wenn es optional ist: Wer sich dazu entscheidet, echte Fotografie im Webdesign zu verwenden, sollte es richtig machen. Effektive, bedeutungsvolle Fotografie kann zielführend sein. Fotos in schlechter Qualität hingegen können ausbremsend wirken. Bei Fotografie muss es zudem eine Verbindung zwischen Branding und Konzept geben. Fotografie kann Kontrast erzeugen, Aufmerksamkeit erregen oder sogar den Blick auf den nächsten Abschnitt lenken.

In einem Webdesign Fotografie zu verwenden, folgt vielen derselben Richtlinien wie für gute Fotografie im Allgemeinen. Ein fantastisches Foto in einer Kunstgalerie kann genauso fantastisch auf einer Website sein, aber die Stimmung, der Stil und die Themen müssen übereinstimmen. Ein Beispiel ist das verlockende obere Foto im Webdesign von Top Level Designer JPSDesign. Diese Blaubeeren würden überall lecker aussehen, aber auf der Seite eines Lebensmittelhändlers sind sie besonders wirkungsvoll.

Do:
Echte Menschen. Bilder von Menschen neigen dazu, Nutzer mehr einzubeziehen – besonders Bilder eines echten Teams oder Kunden. Die richtige Stimmung erzeugen. Fotografie kommt in beinahe unendlich vielen Stilen daher, somit sind diejenigen zu nutzen, die am besten widerspiegeln, worauf eine Seite aus ist. Wenn eine fröhliche Website gewollt ist, eignen sich Bilder von lächelnden Menschen.

Don’t:
Offensichtliche Stockfotografie. Das entscheidende Wort hier lautet „offensichtliche“. Stockfotos können von Vorteil sein, aber nur, wenn der Nutzer nicht merkt, dass es Stockfotos sind. Niedrige Auflösung. Dies ist das Zeitalter von High Definition, daher lassen Fotos in niedriger Auflösung Marken alt und erfolglos aussehen. Bonus-Tipp: Bilder komprimieren, um die Dateigröße zu reduzieren.

Typografie optimieren

Auch wenn die gewählten Worte bereits extrem einflussreich sein mögen, kann deren Wirksamkeit abermals erhöht werden, indem ihnen der richtige Look verpasst wird.

Typografie umfasst alle visuellen Teile von Text, besonders die Schriftarten, aber auch andere Elemente wie Größe, Textfarbe, Stil (kursiv, fett etc.) und die Laufweite zwischen Buchstaben, Wörtern und Linien. All diese Elemente haben Einfluss auf die visuelle Hierarchie.

Typografie kann visuell ansprechend sein, aber wenn ablenkende Schriftarten verwendet werden, wird ein Leser nicht in der Lage sein, sich darauf zu konzentrieren, was gesagt werden will, und verwirrend sein. Kräftige Typografie in Kombination mit einem minimalistischen Dreh wäre optimal.

Ebenso wie Farben und Fotografie kommt Typografie in einer großen Bandbreite an Stilen daher, also denjenigen wählen, der eine Marke am besten ergänzt. Um dem Webdesign für Her Habesha etwas Raffinesse zu verpassen, nutzt das Top Level Designer-Studio Ubique eine eindrucksvolle und doch elegante Typografie für die Überschriften. Bemerkenswert ist, wie die Typografie für die Produkttitel unter den Bildern sich in dezente, moderne Sans-Serif-Schrift ändert, um eine Balance zu erzielen.

Do:
Web-Fonts. Bei aller Vielfalt der Schriftarten daran denken, bei den geprüften „websicheren Schriftarten“ zu bleiben, die auf den meisten Geräten und Computerbildschirmen angezeigt werden können.

Don’t:
Zu viele auffällige Schriftarten. Extravagante, aufmerksamkeitserregende Schriftarten können gut für Titel oder alleinstehende Wörter funktionieren, aber lenken zu sehr ab, wenn man sie exzessiv benutzt. Dieselbe Typografie für alles verwenden. Wie im Beispiel von Her Habesha funktioniert Typografie am besten, wenn sie ausgeglichen ist. Unterschiedliche Sets für Header, Subheader und Fließtext verwenden – und auf der gesamten Seite hinweg konstant bei diesen Sets bleiben.

Dieselbe Typografie für alles verwenden. Wie im Beispiel von Her Habesha funktioniert Typografie am besten, wenn sie ausgeglichen ist. Unterschiedliche Sets für Header, Subheader und Fließtext verwenden – und auf der gesamten Seite hinweg konstant bei diesen Sets bleiben.

Funktionalität

Navigation optimieren

Zur Funktionalität, also was die Seite kann. Die Unterhaltung über Funktionalität sollte immer mit der Navigation beginnen, dem Rückgrat jeder Website.

Jeder hat seine eigenen Methoden, um sich auf einer Website zurechtzufinden. Ein gutes Webdesign richtet seine Navigation nach seinen Nutzern aus, damit sie sich intuitiv anfühlt. Je weniger Nutzer darüber nachdenken müssen, umso besser.

Das ist keine leichte Aufgabe. Es fängt damit an, wie die gesamte Seite gestaltet ist: Was bekommt seine eigene Seite, was wird auf eine Unterseite geschoben und was wird im Hauptmenü angezeigt und was nicht. Jede dieser Fragen muss beantwortet werden, bevor das eigentliche Webdesign wirklich loslegen kann.

Dann muss die Navigation so gestaltet sein, dass Besucher sie leicht verwenden können.

Do:
Balance für die Menge der Optionen. Nutzer können jede Menge Optionen haben, aber sie dürfen sich nicht überfordert fühlen. Seiten-Kategorien so ordnen, dass sie gegensätzliche Ziele erfüllen. Navigation so aufbauen, dass sie zur Denkweise der Zielgruppe passt.

Don’t:
Mit ungewöhnlichen Formaten experimentieren. Während das Experimentieren in gesunden Dosen einige neue und großartige Ideen hervorbringen kann, ist es nicht zu empfehlen für etwas so Wichtiges wie die Navigation. Damit ein Nutzer nicht zu sehr nachdenken muss, möglichst bei den Gepflogenheiten bleiben, welche die Nutzer bereits verstehen: Navigationsmenü im Top Header, Logo mit Link zur Homepage, Suchleiste mit Lupensymbol etc.

Mobilgeräte bevorzugen

Ältere (aber nicht alte!) Menschen denken bei Webdesign eher an Desktop-Bildschirme, aber die Wahrheit ist, dass die Leute heutzutage meistens auf ihren Mobilgeräten surfen. Deshalb muss sichergestellt sein, dass die mobile Seite in einwandfreiem Zustand ist. Nicht nur für die Nutzer, sondern auch für Google. Der Google-Algorithmus bezieht die Mobilfähigkeit einer Seite in die Suchergebnissen mit ein.

„Mobilfähigkeit“ bezieht sich darauf, wie gut die Seite auf Geräten mit kleinen Bildschirmen erscheint. Wenn eine Website auf Mobilgeräten abgeschnitten ist oder die Bilder an falschen Stellen erscheinen, werden Besucher kein angenehmes Erlebnis haben. Zusätzlich zu kleineren Bildschirmen haben Mobilgeräte auch völlig neue Design-Richtlinien, einschließlich Steuerungen wie „wischen“. Somit ist nicht zu erwarten, dass eine Desktop-Version sich nahtlos übertragen lässt.

Heutzutage ist es wirklich wichtig, sich zuerst um die Mobilgeräte zu kümmern. Die Menschen neigen dazu, mobile Layouts anders als Desktop-Versionen zu benutzen. Daher ist es für ein effektives Design wichtig, wie die Website auf einem Mobilgerät funktioniert. Also auf ein minimalistisches, sauberes Design konzentrieren und jegliche Unordnung vermeiden, damit Nutzer sich leichter auf den Inhalt konzentrieren können.

Eine Mobilversion sollte schon direkt zu Beginn oberste Priorität haben. Das bedeutet nicht, dass eine Desktop-Version vernachlässigt werden kann. Die Website muss gut aussehen, egal welches Gerät die Leute verwenden, um sie anzusehen.

Do:
Die mobile Version zuerst designen. Aufgrund des begrenzten Platzes auf dem Bildschirm kann nur mit den wesentlichen Dingen gearbeitet werden. Es ist leichter, erst die mobile Version anzugehen und dann der Desktop-Version Elemente hinzuzufügen, statt erst die Desktop-Version zu designen und dann Elemente zu entfernen.

Leichte Lesbarkeit

Eine Seite gezielt um Bilder herum zu bauen, kann ihrer Lesbarkeit schaden. Wenn eine Schriftart verwendet wird, die gut aussieht, aber niemand lesen kann, schüttet man das Kind mit dem Bade aus. Wenn wir sagen, eine Website muss gut lesbar sein, reden wir von drei verschiedenen Dingen:

Gut geschrieben:
Texte sind so zu formulieren, dass sie eine Zielgruppe ansprechen.

Ästhetisches Layout:
Der Text wird gut dargestellt, vorzugsweise mit viel Platz und in verdaulichen Blöcken.

Lesbarkeit:
Schriftart und -größe sind beide dem Lesen förderlich, ohne dass man sich anstrengen oder mehrmals lesen muss. Obwohl die Lesbarkeit hauptsächlich von der Typografie abhängt, muss auch Komposition und Struktur bedacht werden und wie der Text mit anderen Elementen interagiert – ganz zu schweigen von der Qualität des Geschriebenen.

Ein tolles Webdesign zu haben wird keine Rolle spielen, wenn niemand den Text lesen kann. Top Level Designer akorn.creative nimmt sich dies zu Herzen. Das Hintergrundfoto verblasst zu Schwarz, um einen größeren Kontrast zum Text zu erzeugen und ihn lesbarer zu machen.

Do:
Farbpaarungen. Wie gut die Textfarbe mit dem Hintergrund zusammenspielt, hat großen Einfluss auf die Lesbarkeit, besonders bei Menschen, die eine Lese- oder Sehschwäche haben. Versuchen, bei gegensätzlichen Paaren zu bleiben (helle und dunkle Töne) und wenn alles schief läuft, kann immer noch auf das klassische Schwarz-Weiß zurückgegriffen werden.

Don’t:
Kursive oder auffallende Schriftarten für Fließtext verwenden. Extravagante Schriftarten funktionieren gut, um Header und Überschriften sichtbarer zu machen, aber wenn der Nutzer Zeile für Zeile lesen muss, ist es am besten, bei einer simplen Schriftart zu bleiben, die gut für die Augen ist. Große Textblöcke schüchtern Leser ein, selbst außerhalb von Webdesign. Es ist am besten, sie mithilfe proaktiver Seitenformatierung oder erzwungenen Absatzumbrüchen aufzuteilen.