Webdesign Standards 2018: Best Practices & Tipps

Webdesign ist ein sehr komplexes Thema. Webdesign Standards helfen dabei, den Überblick nicht zu verlieren. Denn eine Webseite sollte nicht nur „gut aussehen“, sondern auch potenzielle Kunden informieren. Design, Benutzerfreundlichkeit und SEO (Suchmaschinenoptimierung) spielen dabei eine große Rolle. Über die Jahre haben sich erfolgreiche Design Standards und Konventionen bei der Gestaltung von Webseiten durchgesetzt: sogenannte Webdesign Standards oder „Web Conventions“. In diesem Beitrag geben wir einen Einblick in die wichtigsten Webdesign Standards der letzten Jahre.

Inhalts­verzeichnis

• Was sind Webdesign Standards?
• Wieso Webdesign Standards so schwer zu definieren sind
• Die 13 wichtigsten Webdesign Standards im Überblick
  • Platzierung und Funktionalität des Logos
  • Design des Hauptmenüs
  • Wohin mit den Kontaktdaten
  • Wichtige Inhalte „above the fold“ anzeigen
  • Platzierung und Design von CTA (Call to action) Elementen
  • Suchfunktion im Header integrieren
  • Newsletter Anmeldung im Footer
  • das richtige Seitenlayout wählen
  • Scrolling und Seitenlänge
  • Mobile First Design
  • Farben und Kontraste
  • Typografie und Schriftgrößen
  • Minimalistisches Design
• Webdesign Trends & Aussicht für 2018/2019

Was sind Webdesign Standards?

Standards sind Richtlinien. Man kennt Standards von diversen Qualitätsrichtlinien oder Hotelkategorien. Im Webdesign sind solche Standards Regeln, die zur bestmöglichen Benutzererfahrung und optimalem Design führen.

Webdesign Standards sind jedoch nicht leicht zu definieren.

Bei über 95% der modernen Webseiten wird das Logo in der linken oberen Ecke platziert. Klickt man darauf, landet man meistens auf der Startseite. Das kann man also schon einen „Standard“ nennen. Die Positionierung des Hauptmenüs ist da allerdings nicht so einfach zu standardisieren. Bei über 85% der Webseiten ist das Hauptmenü horizontal im Header positioniert. Das ist zwar immer noch eindeutig die Mehrheit, aber hier verschwimmt langsam die Grenze zwischen Standard und Konvention.

Wieso Webdesign Standards so schwer zu definieren sind

Das hat einen recht einfachen Grund: Gelungenes Webdesign liegt im Auge des Betrachters. Und Benutzer sind verschieden. Ihre Vorlieben und ihre technische Affinität sind unterschiedlich. Somit gibt es kein Schwarz oder Weiß, um Webdesign Standards zu definieren. Man muss sich dabei größtenteils auf die menschliche Wahrnehmung verlassen. Und dabei gibt es sehr wohl Gemeinsamkeiten.

Ein Beispiel: In Europa ist die Leserichtung immer von links nach rechts – daher wandert auch das Auge auf einer Webseite von links nach rechts.

Wie in diesem Beispiel gibt es Funktionen und Designelemente auf Webseiten, die Nutzer einfach gewohnt sind. Ändert man sie, hat der Besucher im ersten Moment keine Ahnung was er tun soll.

Zum Beispiel ist man es gewohnt, ein sogenanntes „Burger-Menu“ Icon (drei horizontale Striche untereinander) auf mobilen Webseiten zu finden. Das Menü befindet sich rechts oder links im Header. Klickt man das Icon an öffnet sich das Menü. Wäre das Icon nun woanders platziert, wüsste der User im ersten Moment nicht, wie er ins Menü kommen kann.

Auch die Farbwahrnehmung ist gut zu vereinheitlichen. So wirkt Blau auf fast alle Personen kühl, erfrischend und beruhigend. Rot hingegen ruft eine Signalwirkung hervor. Natürlich kann es aber auch sein, dass bestimmte Menschen etwas ganz anderes mit diesen Farben assoziieren. Da wird es mit Standards schon wieder schwierig.

Grundsätzlich kann man es nicht jedem recht machen.

Daher sollte man sich an den wichtigsten Webdesign Standards orientieren wenn man Webseiten und Webshops gestaltet. Der Grund: um möglichst vielen Besuchern ein vertrautes und qualitativ hochwertiges Erlebnis auf der eigenen Seite bieten zu können.

Findet ein Kunde in einem Webshop beispielsweise den Kaufen-Button nicht, wäre das für den Betreiber des Shops fatal. Solche „bösen Überraschungen“ lassen sich mit gutem Webdesign verhindern.

Die 13 wichtigsten Webdesign Standards im Überblick

1. Platzierung und Funktionalität des Logos

Hier hat sich ein eindeutiger Trend festgesetzt: Das Logo kommt in 95% der Fälle auf die linke, obere Seite neben dem Menü. In sehr seltenen Fällen wir das Logo in der Mitte des Headers oder der Navigation eingeblendet. Dadurch wird das Menü optisch unterteilt.

Vor allem an die linke Position haben sich die Benutzer gewöhnt. Dieser Platz wird von Besuchern als erstes wahrgenommen. Der Blick verläuft von der linken oberen Seite im Zick-Zack Muster zur unteren rechten Seite. Aufgrund dieser prominenten Platzierung muss das Logo selbst nicht allzu groß dargestellt werden.

Empfehlenswert ist die Verlinkung des Logos auf die Startseite. So kann man von jeder Ebene aus schnell auf die Hauptseite gelangen.

Links: Wo ist das Logo? Die Platzierung des Logos (und des Menüs) am rechten Rand der Webseite ist unübersichtlich.
Rechts: Die Platzierung des Logos auf der linken Seite ist ideal – der User findet es auf einen Blick.

Das Logo sollte man in der linken, oberen Ecke platzieren und zur Startseite verlinken.

2. Design des Hauptmenüs

Das Hauptmenü ist neben dem Logo eines der wichtigsten Elemente auf einer Website. Bei gutem Webdesign sollte man es ohne Probleme finden. Durchgesetzt hat sich die Navigation ganz oben auf der Webseite, meist zentriert oder rechts neben dem Logo. Fast 85% aller Webseiten verwenden diesen Ansatz. Als Gegensatz zu dieser Positionierung hat sich ein vertikales Menü auf der linken Seite etabliert.

Die erste Hierarchieebene sollte nicht mehr als 5-7 Elemente beinhalten. Insgesamt sollte man auch nicht mehr als 3 Hierarchieebenen darstellen. Zu viele Ebenen sind unübersichtlich und erschweren die Nutzung. Eine goldene Regel ist hierbei der Keep-it-simple Ansatz. Das Menü sollte so einfach wie möglich zu benutzen und verstehen sein.

Im Hauptmenü sollten die wichtigsten Inhaltsseiten sowie ein Call to action Element (auch CTA genannt) vorhanden sein. Bei Shops werden das meist die Links zu einzelnen Kategorien und ein User Login sein. Bei persönlichen Seiten wichtige Informationen zur Person, Unternehmen oder Ähnlichem.

CTA Elemente, wie der Link zum Hauptprodukt oder ein Kontakt Button sollten sich am rechten Rand befinden und sich farblich abheben.

Der Großteil der Besucher liest von links nach rechts und erwartet Aktionen auf der rechten Seite, denn dies bedeutet ein Vorankommen.

Das Menü befindet sich an erwarteter Stelle – am rechten, oberen Seitenrand. „Jetzt anfragen“ könnte man noch farblich hervorheben.

Wird eine einfache Kontaktmöglichkeit gewünscht, ist eine sogenannte Action Bar von Vorteil. Sie befindet sich rechts oberhalb des Hauptmenüs, ist aber meist unauffälliger. Hier befinden sich Telefonnummern, E-Mail-Adressen oder Social Media Links. Wenn die Seite mehrsprachig ist, wird hier oft eine Möglichkeit zum Wechseln der Sprache eingefügt. Bei Webshops haben sich hier Links zum Login, Kundenkonto und Warenkorb durchgesetzt.

3. Wohin mit den Kontaktdaten

Ist ein direkter und schneller Kontakt zwischen Kunde und Anbieter gewünscht, muss man diesen prominent platzieren. Nichts ist aus Sicht der Benutzerfreundlichkeit schlimmer als die lange Suche nach der Kontaktmöglichkeit. Oft befinden sich Kontaktdaten nur im Impressum. Die meisten Besucher werden die Seite verlassen, wenn sie nicht schnell eine Telefonnummer oder E-Mail-Adresse finden können.

Kontaktdaten sollte man daher als CTA an rechter, letzter Position im Hauptmenü platzieren. Alternativ bietet sich die Positionierung in der Action Bar an.

4. wichtige Inhalte „above the fold“ anzeigen

Dieser wichtige Leitsatz kommt aus dem Journalismus. Viele Zeitungen werden in der Mitte gefaltet, das Wichtigste muss daher auf der ersten Hälfte zu sehen sein. Dadurch wird die Zeitung öfter verkauft. Auch im Web hat sich dieses Prinzip durchgesetzt. Durch den steigenden mobilen Zugriff von über 50% verliert der above the fold – Ansatz jedoch an Bedeutung.

Auf der Desktopansicht packt man gerne so viel Interessantes wie möglich in den above the fold Bereich. Auf Smartphone Bildschirmen funktioniert das aufgrund der Bildschirmgröße nicht. Außerdem sind mobile User es gewohnt, per Finger zu scrollen und mehr als nur den obersten Bereich zu sehen. Ist der Inhalt auf den ersten Blick interessant, dann scrollt der User auch weiter.

Um die volle Aufmerksamkeit eines Users zu bekommen, sollte man sich auf einen wichtigen Inhalt und ein CTA Element above the fold beschränken.

Mobile Ansichten von Webseiten – in allen drei Beispielen findet man noch ohne scrollen zu müssen das wichtigste Element der Seite.

5. Platzierung und Design von CTA (Call to action) Elementen

Der CTA sollte das Herzstück der Startseite sein. Schließlich will man durch ihn Verkäufe oder andere Ziele erreichen. Daher wird er auch laut Webdesign Standards prominent platziert. Entweder direkt im Hauptmenü oder wie bereits im Punkt 4 besprochen above the fold. Studien haben auch gezeigt, dass eine Positionierung auf der rechten Seite die Conversion Rate (Verhältnis von Besuchern zu gewünschten Aktionen) erhöht.

Um die Konversionsrate zu erhöhen sollte der Button herausstechen. Das heißt: Eine Kontrastfarbe zur eigentlichen Hauptfarbe des Designs nutzen. Besonders gut passen knallige Farben wie Orange-, Rot- oder Pinktöne. Hier spielt auch die Größe eine entscheidende Rolle. Um sich von den anderen Buttons abzuheben, kann Schrift und Höhe/Breite ruhig etwas größer sein.

Der Button soll klar übermitteln, was man sich vom User wünscht. Gute Beispiele sind „jetzt kaufen“, „zum Warenkorb hinzufügen“, „Ja, ich will abnehmen“ oder „jetzt kontaktieren“.

Ein gutes Beispiel für einen CTA findest du auf unserem Blog: >> Webdesign Standard: CTA prominent platzieren (die rote Box auf der rechten Seite – besonders gut auf Notebooks / Desktop PCs sichtbar)

6. Suchfunktion im Header integrieren

Eine Suchfunktion macht vor allem auf Blogs und Shops Sinn. So kann der User schneller finden wonach er sucht. User sind Suchfunktionen im Header oder in der Sidebar gewohnt.

Um Interaktionen zu verbessern, sollte das Suchfeld schnell ersichtlich und mit einem Lupen-Icon gekennzeichnet sein. Es ist außerdem empfehlenswert, das Eingabefeld in voller Breite darzustellen. Öffnet sich das Eingabefeld erst nach Klick auf das Lupen-Icon, kann man einen Rückgang der Interaktionen beobachten.

Die Suche sollte auf jeder Seite zugänglich sein. Auch deshalb empfiehlt sich die Integration im Header. Die von Usern erwartete Position ist oben rechts oder oben links. Eine weitere Studie fand heraus, dass das Suchfeld 27 Zeichen breit sein soll. Das deckt 90% aller Suchabfragen ab, ohne diese abzuschneiden.

Der Platzhalter-Text soll klar verständlich machen wonach man suchen kann.

Fabletics hat mit seinem Suchfeld alles richtig gemacht – es ist durchgehend sichtbar und sehr komfortabel zu bedienen

7. Newsletter Anmeldung im Footer

Viele Webseiten zielen darauf ab, E-Mail Adressen zu sammeln und somit Kunden zu gewinnen. Daher ist eine durchdachte Strategie äußerst wichtig.

Der erste wichtige Punkt ist: „je weniger, desto besser“.

Es sollte für den User so einfach wie möglich sein, sich für den Newsletter einzutragen. In den meisten Fällen reicht sogar nur ein E-Mail Feld und ein Button zur Anmeldung. Alle weiteren Informationen können vom User nachträglich eingeholt werden.

Es sollte klar ersichtlich sein, für WAS sich ein User anmelden kann. Zum Beispiel News, eine Petition oder Workshops. Ein Einzeiler wie „Jetzt für aktuelle Angebote anmelden“ oder „Keine neuen Produkte mehr verpassen“ reicht meistens aus.

Für die Positionierung haben sich zwei Webdesign Standards bewährt. Meist platziert man die Newsletter Anmeldung im Footer. Der Nachteil: Nur wenige User scrollen bis zum Footer einer Webseite. Ist das Sammeln von Adressen sehr wichtig, dann ist die Einbindung eines Popups sinnvoll. Pro Webseite sollte man sich allerdings auf ein Popup beschränken. Dieses sollte auch nicht sofort eingeblendet werden. Der User braucht Zeit, um sich einen Eindruck von der Webseite und des Angebotes zu machen. Erst nach ungefähr 20 Sekunden erscheint das Popup mit der Möglichkeit, sich einzutragen.

8. Das richtige Seitenlayout wählen

Während viele Webdesign Standards klar definiert sind, wird es beim Seitenlayout schwierig. Es gibt verschiedene Template-Designs wie Karten, Raster, Magazin, Masonry, Split Screens und viele mehr.

Links: Desktop Ansicht von Pinterest – Inhalte werden als Kärtchen dargestellt
Rechts: Magazin Stil auf Skinfellaz

Links: Beispiel für Splitscreen-Design – hier wird mit Bildern und Farben eine Trennung geschaffen
Rechts: Diese Webseite spielt mit dem Masonry-Stil

Das Magazin-Layout hat sich im Blog Bereich als Webdesign Standard durchgesetzt. Shops basieren meistens auf einen 3- oder 4-Spalten Raster. Doch egal, welches Layout man schlussendlich verwendet – das Wichtigste ist, dass sich dieses durch die gesamte Seite durchzieht. Der CTA sollte sich immer an derselben Stelle befinden. Man sollte einen Blog-Artikel immer ähnlich aufbauen und ein Produkt immer nach demselben Raster präsentieren.

So weiß der Besucher, was ihn auf anderen Produkt- oder Artikelseiten erwartet und wo er wichtige Elemente findet. Sollte sich zum Beispiel der Kaufen-Button immer an einer anderen Position befinden, wird die Conversion Rate ziemlich schnell sinken. Schlimmstenfalls verlässt der Besucher sogar die Webseite.

Wenn man die Desktop-Variante auf mehrere Spalten bzw. Raster aufbaut, vergrößern sich diese Spalten auf der mobilen Ansicht zur vollen Breite. 3-4 Spalten wären auf Smartphones kaum darstellbar. Bei Shops hingegen hat sich das Design auf mobilen Geräten auf 1-2 Produkte pro Zeile eingependelt, da hier sehr viele Objekte dargestellt werden.

Zwei-Spalten-Layout bei Shops und nur eine Spalte bei Blogs oder Magazinen

9. Scrolling und Seitenlänge

Vor allem für mobile User ist Scrollen schon zur Gewohnheit geworden. Durch die Umstellung eines 3-4 Spalten Rasters zu einem einzelnen Raster wird die Seite länger als die Desktop-Variante. So ist es schwierig alle wichtigen Inhalte above the fold zu präsentieren.

Bei mobilen Webseiten hat sich eine Grenze von ca. 5000px als „Sweet Spot“ herausgestellt. Das ist der Punkt, an dem die meisten User abbrechen und die Seite verlassen. Daher sollten sich auf Seiten, die länger sind, wichtige Inhalte nicht in der Nähe des Footers befinden.

Vor allem bei umfangreichen Shop-Seiten verwendet man oft „infinity scrolling“. Das bedeutet, dass der User scheinbar unendlich weit runterscrollen kann. Dabei werden nach dem Scrollen wieder neue Elemente in die Seite geladen. Die meisten Webdesigner empfehlen allerdings, infinity scrolling zu vermeiden. Erstens leiden darunter die Ladezeit und der Datenverbrauch und zweitens hat der User meist keine Rückmeldung, wie viele Produkte noch geladen werden.

10. Mobile first Design

Mehr als die Hälfte aller Besucher rufen Webseiten mit einem Smartphone auf. Somit ist es sehr wichtig, Webseiten responsive zu designen. Das bedeutet, dass die Webseite sowohl auf großen Bildschirmen als auch auf Smartphones gut aussieht und vor allem eine gute User Experience und Bedienbarkeit gewährleistet wird.

Vor einigen Jahren galt: Webseite für die Desktop-Ansicht gestalten und dann für Tablets und Smartphones anpassen. Mit aktuellen Webdesign Standards sieht das allerdings anders aus. Je nach Zielgruppe macht es Sinn, umgekehrt zu denken. Die Webseite wird für mobile Geräte gestaltet und dann für Tablets und Desktop PCs angepasst.

Auf unserem Online-Magazin we-go-wild.com verzeichnen wir sogar fast 75% mobile User. Hier ist der Ansatz „mobile first“ also genau richtig.

Beim Design muss man auf einige wichtige Punkte achten. Am besten eignet sich ein 1-Spalten-Layout. Buttons und Formularfelder kann man auf bis zu 100% Breite vergrößern. Klickbare Elemente sollen mindestens 32 x 32 Pixel groß sein. Sonst wird es schwer, den richtigen Button mit dem Finger zu erwischen.

Hover-Effekte – also Elemente die sich durch das Berühren mit dem Mauszeiger verändern – fallen auf mobilen Geräten komplett weg. Beispiel: Ein Bild, über dem Text eingeblendet wird, wenn man mit dem Mauszeiger darüber fährt, ist am Smartphone nicht möglich. Hier muss man sich überlegen, wie das bei mobilen Geräten aussehen soll. Die Information darf schließlich nicht verloren gehen.

Unbedingt Ladezeiten für mobile Seiten optimieren!

Ein weiterer, sehr wichtiger Punkt ist die Ladezeit der mobilen Version. User surfen oft mit limitiertem Datenvolumen oder schlechter Verbindung. Daher ist es besser, die zu ladende Information so klein wie möglich zu halten. Erstens lädt die Seite schneller, was das User-Erlebnis verbessert. Zweitens verlässt der User die Seite nicht, weil sie ihn sein Datenvolumen kosten könnte.

Für Optimierungen der Geschwindigkeit gibt es sehr viele Tipps und Tricks. Einer der größten Datenquellen sind aber nach wie vor Bilder. Diese muss man an die Größe von mobilen Bildschirmen anpassen. Auf der Desktop-Variante befinden sich oft Bilder mit einer Breite von 1920px für Hintergründe. Diese Größe braucht man auf einem mobilen Gerät natürlich nicht. Hier kann man auf eine Bildbreite von maximal 480px skalieren, was zu einer großen Datenersparnis führt. Je nach Bilddetails kann man über  80% der Datenmenge sparen!

Wichtig: Retina Displays benötigen Bilder in doppelter Auflösung um nicht verschwommen dargestellt zu werden.

Hier wird im Header dasselbe Bild verwendet – am Desktop ist es mit einer Breite von 1920px ganze 289KB groß, auf der mobilen Variante dagegen nur 20,7KB bei einer Breite von 480px.

11. Farben und Kontraste

Farben spielen beim Design eine grundlegende Rolle. Nicht umsonst gibt es eigene Studien für Farbpsychologie. Die meisten Menschen denken bei bekannten Logos gleich an die jeweiligen Farben. McDonalds ist zum Beispiel gelb-rot, Audi hat ein schwarzes Logo. Diese Farben sind nicht zufällig gewählt – daher spielt die richtige Farbwahl eine entscheidende Rolle.

Die wichtigsten Farben im Überblick:

• Rot – Stark, mutig, leidenschaftlich, dynamisch, aktiv, verführerisch, warm, vital, gefährlich, aggressiv, dominant, arrogant, brutal, zornig, laut, aufregend | Rot erzeugt Aufmerksamkeit und signalisiert
• Orange – Freundlich, warm, einladend, vital, jung, fröhlich, billig, unseriös, aufdringlich, laut, unruhig | wird oft für Angebote und billigere Preise verwendet
• Gelb – Freundlich, glücklich, optimistisch, aufdringlich, giftig, feige, neidisch
• Grün – natürlich, entspannend, ruhig, positiv, harmonisch, erholsam, unreif, sauer, bitter, unerfahren | Natur-, Umwelt- und Gesundheitsthemen werden meist in grün gehalten
• Blau – Still, entspannend, vertrauensvoll, verlässlich, autoritär, stark, kalt, unpersönlich, depressiv, langweilig | typische Farbe für Corporate Websites
• Violett – Außergewöhnlich, magisch, phantasievoll, modisch, originell, kreativ, unnatürlich, unsicher, unsachlich, künstlich, zweideutig | schwierig, da kühl und warm zugleich – wird eher selten eingesetzt
• Schwarz – Seriös, elegant, klassisch, neutral, sachlich, modern, funktional, düster, traurig, einsam | wird für Luxus Produkte verwendet
• Weiß – Schlicht, neutral, sauber, rein, kalt, steril, leer | wird meist als Hintergrundfarbe verwendet
• Grau – sachlich, elegant, professionell, förmlich, langweilig, charakterlos, trist, deprimierend | ebenfalls typische Farbe für Corporate Webseiten oder als Kontrast zu einer kräftigen Farbe
• Braun – Warm, erdverbunden, natürlich, zuverlässig, traditionell, Geborgenheit, Gemütlichkeit, schwer, zurückgezogen, bequemlich, altmodisch, dreckig, traurig | meistens in Verwendung für Natur- oder Umweltthemen

Wie man sehen kann, ist schon die richtige Wahl der Hauptfarbe kein leichtes Thema – sie kann positiv als auch negativ wirken. Basierend auf der Hauptfarbe muss man die passenden Begleitfarben wählen.

Diese können entweder Komplementärfarben sein oder Farben aus derselben Farbtiefe oder Familie. Online Tools wie Farbschema Generatoren helfen dabei, eine harmonische Farbwelt zu erzeugen.

Die Farbwelt von Zirbelle (www.zirbelle.at) ist an die Natur angelehnt. Im Kontrast dazu wird die Signalfarbe Rot für CTAs verwendet.

Ein sehr wichtiger Webdesign Standard: auf ausreichend Kontrast achten!

Neben der richtigen Farbwahl ist auch ausreichend Kontrast notwendig, damit man den Text leicht lesen kann. Manche Kombinationen schmerzen schon auf den ersten Blick, wie beispielsweise ein knalliges Rot auf blauem Hintergrund. So eine Kombination widerspricht allen gängigen Webdesign Standards. Um zu prüfen, ob der Kontrast zweier Farben ausreichend hoch ist, kann man ebenfalls auf Online-Tools wie webaim.org/contrastchecker/ zurückgreifen.

Beispiel für schlechten und ausreichenden Kontrast

Bei der Auswahl der Farben sollte man sich allerdings laut Webdesign Standards auf eine Hauptfarbe für die wichtigsten Elemente wie CTA beschränken. Den Rest sollte man in schlichten Farben halten, damit diese in den Hintergrund treten.

12. Typografie und Schriftgröße

Schriftfamilien und -schnitte sind vor allem für die Darstellung auf Smartphones wichtig. Der Text muss leicht zu lesen sein. Man darf daher weder die Schriftfamilie noch die Schriftgröße falsch wählen. Im Web haben sich mit 66% serifenlose Schriftarten (Sans Serif Fonts) durchgesetzt. Der Rest sind Schriftarten mit Serifen. Dabei werden beiden folgende Charakteristika zugewiesen:

• Schrift mit Serifen: Klassisch, edel, hochwertig, konservativ
• serifenlose Schriften: Modern, geradlinig, einfach

Serifenlose Schriftarten sind auf Bildschirmen mit kleinen Schriftgrößen besser zu lesen, während Schriftarten mit Serifen das Auge besser lenken können. Dazwischen gibt es noch sogenannte Slab Serif Fonts. Im Gegensatz zu serifen Schriftarten haben sie gleichmäßige Strichstärken der Auf- und Abstriche und der Serifen. Serife Schriftarten haben dagegen meist ungleiche Stärken.

Beispiel für verschiedene Schriftarten – egal welche man verwendet, man sollte besser die Finger von Comic Sans lassen!

Schriftgrößen kann man nur schwer festlegen – manche wirken mit derselben Schriftgröße von 16px größer als andere. Grundlegend kann man jedoch davon ausgehen, dass man für Absatztext am Desktop eine Schriftgröße zwischen 14px und 16px wählen sollte. Auf Smartphones sollte man zwischen 15px und 18px wählen.

Für Überschriften nimmt man gerne ein Vielfaches von der Absatz-Schriftgröße. Zum Beispiel wird eine H1 Überschrift 3x so groß wie der Absatztext, während H2 2,5x so groß wird und so weiter. So wird ein ausreichender Unterschied zwischen den Schriftgrößen gewährleistet.

13. Minimalistisches Design

Minimalistisches Design ist vor allem in Bezug auf das Design von wichtigen Elementen und CTA Elementen wichtig. Während diese sowohl in Farbe als auch Design herausstechen, sollte der Rest der Webseite in den Hintergrund rücken. Ansonsten wird das Auge des Besuchers überfordert und er kann sich nicht entscheiden, welcher Inhalt wichtig ist. Dies führt wiederum zu einem Rückgang der Verkäufe, Interaktionen oder den jeweiligen Zielen der Webseite.

Sowohl in der Farblehre als auch in aktuellen Webdesign Standards hat sich der Einsatz von Signalfarben und Größe bewährt. Informationstext oder unwichtige Inhalte sind schwarz oder weiß, während CTA Elemente knallig sind. Hier ist besonders auf genügend Whitespace zu achten: Das wichtigste Element der Webseite braucht Platz für sich und sollte nicht zu nah an anderen Elementen grenzen, vor allem nicht zu anderen Interaktionsmöglichkeiten.

Je einfacher der Rest der Webseite gehalten wird, desto eher wird der User auf die wichtigen Elemente der Webseite aufmerksam.

Ayr ist ein hervorragendes Beispiel für minimalistisches Webdesign

Webdesign Standards, Trends & Aussicht für 2018/2019

Obwohl wir in diesem Artikel auf die gängigen Web Standards eingegangen sind, sollte man diese auch manchmal brechen, um aus der Masse hervorzustechen.

Das sollte jedoch nie zufällig passieren. Ein gut durchdachtes Konzept ist Pflicht! Auch im Jahr 2019 werden wir viele erfolgreiche Webseiten sehen, die diese Webdesign Standards brechen und gerade deswegen in Erinnerung bleiben. Einige Grundsätze ändern sich jedoch nie, wie zum Beispiel die Platzierung von wichtigen Elementen im Lesefluss von links nach rechts oder Farbassoziationen.

2019 werden wir vermehrt Fullscreen-Videos auf Webseiten sehen. Die Ladegeschwindigkeit von Smartphones wird immer besser, und so werden informative und passende Videos für mehr User Engagement sorgen.

2016 wurden geometrische Formen auf Webseiten populär – ein Trend, der auch im Jahr 2019 bestehen bleibt. User verbinden damit viele positive Eigenschaften.

Blink Text is back

Ja, alles kommt früher oder später wieder. Viele werden sich noch an die Ära von Blinktext erinnern – mit Schaudern. Dieser kommt anscheinend wieder zurück – aber subtiler und weniger laut. Farben werden eher in ähnlichen Tiefen vibrieren oder glühen statt grell zu blinken. Ein hervorragender Weg, um Aufmerksamkeit auf ein Element zu ziehen.

Die Kombination von einfachem Design und einer auffälligen Zierschrift wird ebenfalls populärer werden.

Weitere Trends und Aussichten, die uns wahrscheinlich 2019 begleiten werden:

• Extra große Überschriften
• Minimalismus
• Genügend Whitespace um Elemente
• Leuchtende Farben
• 3D Elemente
• Verläufe
• Mikro-Animationen

Quellen und weiterführende Links

https://www.snapagency.com/web-design-usability
https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c
https://www.forbes.com/sites/denispinsky/2018/02/12/website-design-standards/#31641c4bf54f
https://www.orbitmedia.com/blog/web-design-standards/
https://www.webdesign-journal.de/psychologische-wirkung-von-farben-farbkombinationen/
http://merehead.com/blog/top-web-design-trends-2019/