Webseiten - Nice to know
Donnerstag, 07. März 2019

Webseiten - Nice to know

Ein ansprechender, interessanter Webauftritt ist die Visitenkarte des 21. Jahrhunderts. Aber welche Möglichkeiten stehen einem offen, welche Tendenzen kann man aufgreifen und was ist abgesehen vom Layout ganz praktisch zu wissen?

Trends kommen und gehen, auch unser Bild von dem was wir als schön empfinden, verändert sich stetig. Dies soll kein Regelwerk oder Bibel für die Gestaltung einer Webseite werden, sondern manche der aktuellen Tendenzen aufzeigen und den ein oder andern vielleicht sogar bei seinen Überlegungen inspirieren.

 

Templates vs. Experimentell

Der nicht immer einfachste, aber sicherlich schnellste Weg zu einem schönen Design ist die Verwendung eins vorgefertigten Templates. Diese stehen neben dem käuflichen Erwerb auch in vielen Ausführungen kostenlos zur Verfügung. Durch sie müssen wir keine Anstrengungen für ein schönes Design mehr aufbringen: Inhalte einfügen und fertig - praktisch oder?

Was hier mit viel Einfachheit in der Erstellung, Sicherheit für ein zeitgemäßes Design und eine für den User vertraute Orientierung auf der Seite punkten kann, büßt es in Individualität, Originalität und Wiedererkennungswert ein.

Der Gegensatz, der sich zu den recht einheitlichen Templates entwickelt hat, ist mit Absicht die gewohnte Symmetrie zu durchbrechen. Dann erfüllt das Design nicht mehr unser Bedürfnis nach visueller Ausgewogenheit und Harmonie. Was hier durchaus Spannung erzeugt und sich von der Masse abhebt, ist jedoch mit Bedacht zu genießen. Zu viel Disharmonie macht die Webseite ungemütlich für das Auge und man verlässt sie lieber schnell wieder.

Minimalismus vs. Retro/brutal

Weniger ist mehr!

Ein Leitsatz, der sich in den letzten Jahren gefestigt hat. Nach viel Farbe, Form, und TamTam hat sich der Minimalismus durchgesetzt. Reduzierung auf einzelne Elemente, viel weiße Fläche und sparsamer Einsatz von Farben gilt als modern. Neben der klaren und übersichtlichen Optik hat die Reduzierung von Designelementen nicht nur für die Performance, sondern auch für die mobile Darstellung eindeutige Vorteile, aber dazu gleich mehr.

Weil alles sein Gegengewicht braucht, gibt es auch viele, die statt dem zurückhaltendem, dezentem Weiß kräftige und leuchtende Farben einsetzen. Der Einsatz ist vielfältig möglich: Farbverläufe, ein monochromes Bild mit Duotone-Effekt oder aufmerksamkeitserregende Farbkontraste. Oder doch lieber, wie früher?

Der sogenannte “Web Brutalism” verzichtet komplett auf grafische Gestaltung, die Bestandteile wie Schrift, Formen und Fotos werden in ihrem “rohen” Zustand belassen. Auch wenn so manche sich wahrscheinlich noch daran erinnern, dass es früher auch so aussah, provoziert es uns doch in unserer Vorstellung, wie Webseiten auszusehen haben.

Authentische Fotos

Fotos sind häufig das Erste, was uns auf einer Webseite begegnet. Sie sind die Emotionsträger für den ersten Eindruck. Fotos dienen als Stütze, um Inhalte zu verbildlichen und lockern textlastige Passagen auf. Kurz gesagt: wir brauchen oft Bilder und das zu den unterschiedlichsten Themen. Doch professionelle Fotos selber machen ist schwierig und aufwendig. Aus diesem Konflikt hilft in der Regel die kostengünstige Alternative: Stockfotos.

Diese Bilder sehen professionell aus und die Auswahl ist riesig, nichtsdestotrotz haben die meisten dieser Fotos einen typischen Stockfoto-Charakter, der wenig Persönlichkeit ausstrahlt. Die Tendenz entwickelt sich zurück zu selbstgemachten Bildern, mit persönlichem Kontext mit “echten” Menschen in realen Situationen. Die Authentizität und der persönliche Bezug gewinnt immer mehr Relevanz.

Animation & Microinteractions

Was neben Fotos auch zur zusätzlichen Visualisierung dient sind Illustrationen bzw. Animationen. Erklärend und unterhaltend können sie den sonstigen Inhalt sehr gut ergänzen. Den textlichen Inhalt aufbereiten ist eine Funktion von vielen, doch sollten wir keinen Falls die viel kleineren aber äußerst essenziellen Microinteractions vergessen.

Hiermit sind beispielsweise Ladebalken, Scrollbars und das neu Laden der Seite durch „Runterziehen“ gemeint. Die kleinen Animationen, die einem bewusst gar nicht so richtig auffallen, die aber negativ ins Gewicht fallen, wenn sie fehlen. Einerseits erleichtern sie die Bedienung und verbessern dadurch die Benutzerfreundlichkeit, andererseits geben sie dem User Feedback. Die Seite “interagiert” mit der jeweiligen Person, dadurch wird die User-Experience „menschlicher“.

Pop-Ups

Apropos mit dem Nutzer interagieren.

Pop-Ups sind wohl der aggressivste und offensichtlichste Versuch, mit dem Benutzer zu kommunizieren. Niemand kann sie leiden und trotzdem tauchen sie überall auf. Das liegt daran, dass sie messbare Erfolge erzielen, dass mehr Leute den Newsletter abonnieren als ohne Pop Up, da sie sonst nie darauf aufmerksam geworden wären. Der Kompromiss von dem alle etwas haben, wäre an dieser Stelle, sie dezenter einzusetzen, um einen Hinweis zu liefern, ohne dem Nutzer mit einer Bildschirmfüllenden Nachricht beim Lesen des eigentlichen Inhalts zu hindern. Wer keinen Newsletter möchte, wird auch dann keinen bestellen, wenn es ihm aufgezwungen wird bevor er einen Absatz lesen konnte.

Mobile First

Dieser Ansatz ist nicht super neu, aber dennoch erwähnenswert. Der Fokus auf die mobile Darstellung und Bedienerfreundlichkeit einer Webseite wird zunehmend stärker. Wie vorhin erwähnt, ergänzt sich hier ein eher reduziertes Layout besser, da weniger Platz zum Befüllen vorhanden ist und auch die Ladezeiten bzw. die Datengröße eine größere Rolle spielen, da es nicht unüblich ist, dass Seiten mit mobilen Datenvolumen aufgerufen werden.

Scrolling

Besonders am Smartphone ist es gemütlicher und weniger entscheidungsfordernd, wenn man für neue Inhalte nicht erneut klicken muss, sondern einfach weiter scrollen kann.

Longpages

Nachdem es zuerst Trend war viele kleine Unterseiten anzulegen und den Content aufzugliedern, ist man inzwischen dazu übergegangen die Seiten stattdessen länger zu machen, um dem User die Arbeit des Suchens und Klickens zu erleichtern.

Infinity-scrolling

Die Steigerung von langen Seiten sind unendliche Seiten, beim Runterscrollen laden sich die Inhalte immer weiter nach. Das hat eine gewisse Sogwirkung und hält Nutzer oft für längere Zeit auf einer Webseite fest. Allerdings macht diese Technik bloß bei Seiten mit sehr viel Inhalten Sinn, wie zum Beispiel bei Facebook, Reddit oder anderen Plattformen mit viel Newsfeed.

Navigation

Um bei dem ganzen „Gescrolle“ nicht die Orientierung zu verlieren, ist eine fixe Navigationsleiste hilfreich. Wer den wertvollen Platz nicht dauerhaft an die Navigation opfern möchte, kann sich überlegen sie erst wieder einzublenden, wenn der User auf das Display tippt oder wieder nach oben scrollt. Es gibt viele Wege die Navigation zu gestalten und einzubauen, was aber immer im Vordergrund stehen sollte ist die intuitive Bedienung und Übersichtlichkeit. Der ungünstigste Fall ist, wenn Benutzer sich nicht zurechtfinden. Wer nichts findet wird keinen allzu großen Aufwand betreiben die Seitenstruktur zu verstehen und lieber woanders sein Glück versuchen. Deswegen der Tipp, die Navigationsleiste an sich nicht nur möglichst gut erreichbar machen, sondern auch ein bisschen über eine sinnvolle Struktur der Inhalte nachdenken.

Alles in allem

Kurz gesagt gibt es ein paar Regeln, die sinnvoll sind zu befolgen, die aber mit ein bisschen gesundem Menschenverstand auch naheliegend sind. Beim Layout einer Seite haben sich gewisse Standards eingebürgert, die manchmal jedoch gerne bewusst durchbrochen werden um sich von der Masse hervor zu heben. Das wohl wichtigste ist, dass die Webseite optisch zum Inhalt passt und angenehm zu bedienen ist, dann sind die größten Peinlichkeiten abgewendet und das Fundament gelegt.

 

Autor: Laila Zink (Werkstudentin)

SEO

Weitere Beiträge in dieser Kategorie:
Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Weitere Informationen Ok