myweb

Wie auch Mode, Kunst oder Architektur geht auch die Gestaltung des Web mit der Zeit und unterliegt somit gewissen Trends. Ich habe im folgenden Beitrag versucht, Trends, die mir aufgefallen sind, aufzulisten und Beispiele dafür zu geben.

Übersichtliche Struktur: Eyecatcher + Inhaltsbereiche

Mir ist aufgefallen, dass sich die Struktur von vielen Webseiten sehr ähnelt. Oben befinden sich meist ein Banner und die Navigation und darunter ein größerer Bereich mit einem Foto oder Video, das oft auch animiert ist. Neben und unter diesem größeren Bild/Video stehen die wichtigsten Inhalte in übersichtlich angeordneten, abgetrennten Bereichen.

Social Media Einbindung

Da das Thema Social Media allgegenwärtig ist, können sich auch Unternehmen dem nicht mehr entziehen. Sie nutzen Facebook, Twitter, etc. für Marketingzwecke und verweisen auch von der Firmenwebsite auf die eigenen Social-Media-Accouts.
Auch ich habe Social-Media-Buttons in meinen Blog eingebunden.

Hier die Website von Coca Cola, die alle oben genannten Trends in sich vereint:

Weniger ist mehr

Besonders Seiten von Anbietern, die auf eine seriöse Wirkung abzielen, werden cleaner. Meist wird weißer Hintergrund verwendet, seitlich Platz gelassen und Wert darauf gelegt, dass die Website nicht überladen aussieht.

Beispiele:

• Struktur, Übersichtlichkeit und eine seriöse Wirkung lassen sich besonders gut bei Webseiten von technischen Unternehmen beobachten: voestalpine, Hainzl Industriesysteme, Ebner Industrieofenbau.

• Bei Webseiten von Banken, wie Raiffeisen oder Sparkasse findet sich etwas mehr Farbeinsatz, aber eine ebensolches Struktur-Grid.

• Webseiten von großen Handelsketten (Billa, Lagerhaus, Merkur) setzen auf noch mehr Farbe, auffallende Schriften und Animationen. Die Struktur der Website ist aber auch in das Grid aufgeteilt.

• Bei Webseiten von Modefirmen lässt sich unschwer erkennen, dass hier besonders gern mit Fotos gearbeitet wird. Ein großer Eyecatcher und darunter auch wieder mehrere kleinere Fotos in Bereiche aufgeteilt.

 
                  H&M                                   Zalando                                    Esprit

• Manchmal wird auch auf verspielte Startseiten gesetzt: efko

• Negativbeispiel: Ryanair (wirkt überfüllt, unruhig, viele Farben, verschiedene Formatierungen, Werbung, ...)

Flat Design

Mit der Veröffentlichung von Microsofts Windows8 und dessen Metro-Design, erlangte das Flat-Design immer mehr an Beliebtheit. Grafikern ist es schon seit geraumer Zeit bekannt, doch nun kommt es auch im Mainstream an. Der klare und einfache Aufbau überzeugt die Nutzer. Mit einfachen Formen und Kontrasten wird der Inhalt sauber und deutlich dargestellt. Skeuomorphismus mit seinen 3D-Effekten, Schattierungen und Hintergrundstrukturen gehört der Vergangenheit an. Man wird weniger vom Design abgelenkt und die Funktionalität der Elemente tritt wieder in den Vordergrund. (Q17)

Logos

Das Thema Logos hat zwar nicht mehr unbedingt etwas mit Webseiten-Gestaltung zu tun, hängt aber trotzdem damit zusammen. Viele Firmen haben ihre Logos einem Relaunch unterzogen, damit auch diese zum neuen "Flat Design"-Erscheinungsbild passen. Von Schattierungen, Reliefs, 3D-Effekten, Schriftauszeichnungen wie -umrandungen, etc. wird immer mehr abgesehen. Die Logos wirken "glattgebügelt". Ein Trend, der sich auch in anderen Bereichen abzeichnet, z. B. sind die früher oft beliebten "WordArt"-Formatierungen in MS Word heute eher verpönt.
Hier vier Beispiele von relaunchierten Logos: (ebay, Microsoft, Twitter, Google Chrome) 

Mobile First und Responsive Design

Da immer mehr User mit dem Smartphone im Internet surfen, muss bei der Gestaltung von Webseiten darauf geachtet werden, dass diese auch über eine mobile Ansicht verfügen. Der Trend geht weg von starr aufgebauten Webseiten hin zu flexiblen Inhaltsbereichen. Mobile-First heißt, dass Webseite zuerst für kleinste Displays gestaltet werden und dann erst für größer werdende Auflösungen wie Tablets und Desktops. 

Responsive-Design ist eine elegante Lösung um Webseiten an unterschiedliche Bildschirmgrößen anzupassen, ohne eine mobile Webseite entwickeln zu müssen. Beim Laden der Seite wird ausgelesen wie groß die Anzeigefläche ist und auf welchem Gerät sie geladen wird. Dabei passt sich die Seite der verfügbaren Fläche an. Flexible Breiten und skalierbare Bilder sind die gängigsten Methoden ein Responsive-Design zu kreieren. Es gibt aber auch andere Möglichkeiten. Beispielsweise können Sidebars entweder komplett gezeigt werden, oder bei kleiner werdender Fläche anders angeordnet werden bzw. versteckt und verlinkt werden. (Q17)

Barrierefreiheit

Um das Internet auch für Menschen mit Beeinträchtigungen zugänglich zu machen, werden immer mehr Maßnahmen dahingehend gesetzt. Hierfür gibt es Richtlinien für barrierefreie Webinhalte (WCAG) des W3C. Webseiten sollen demnach Wahrnehmbar, Bedienbar, Verständlich und Robust augebaut sein, z. B.:

• Textalternativen für grafische Inhalte anbieten
• Untertitel für Audio- und Videodateien
• Inhalt und Struktur trennen
• Gute Kontraste und flexible Darstellung (Farben, Schriftgrössen)(Q22)

Quellen:

Q1: https://www.facebook.com/
Q2: https://www.twitter.com/
Q3: http://www.coke.at/
Q4: http://www.voestalpine.com/group/de/
Q5: http://www.hainzl.at
Q6: http://www.ebner.cc/
Q7: http://www.raiffeisen.at/
Q8: http://www.sparkasse.at/sgruppe/Home
Q9: https://www.billa.at/
Q10: http://www.lagerhaus.at/
Q11: https://www.merkurmarkt.at/
Q12: http://www.hm.com/at/
Q13: http://www.zalando.at/
Q14: http://www.esprit.at/
Q15: http://www.efko.at/
Q16: http://www.ryanair.com/at
Q17: http://viminds.de/design/5-wichtige-webdesign-trends-2013-2014
Q18: http://www.ebay.at/
Q19: http://www.microsoft.com/
Q20: http://www.google.at/intl/de/chrome/browser/
Q21: Bild mobile Ansicht 
Q22: http://www.einfach-barrierefrei.net/