Webdesign

Etablierte Webdesign-Standards

Etablierte Webdesign-Standards

Wenn man sich heute die Vielzahl von Webseiten im Internet anschaut, stellt man mit Sicherheit fest, dass gewisse Gemeinsamkeiten zwischen den zahlreichen Webseiten bestehen. Dabei legen Webdesigner immer großen Wert auf eine individuelle Gestaltung. Warum sehen dann die Webseiten zum Teil gleich aus?

 

Ein schmaler Grad zwischen Individualität und Usability

Eine schicke, neue und individuelle Webseite muss her, so wie die von der Konkurrenz, nur besser. Kundenwünsche, Benutzerfreundlichkeit (Usability) und eben die über die Jahre entwickelten Webdesign-Standards sorgen dann manchmal dafür, dass die Webseite eben nicht mehr so individuell ist, wie anfänglich gedacht.

 

Welche Webdesign-Standards haben sich etabliert?

Webdesign-Standards sind keineswegs offiziell oder festgesetzt, aber sie wurden über die Zeit für sinnvoll und optisch ansprechend empfunden. Aus diesem Grund hat man bei einigen Seiten immer das Gefühl sie sehen gleich aus, dabei ähnelt sich der Aufbau tatsächlich, aber aus einem ganz einfachen Grund – der Usability.

 

Rasterung

webdesign-standards-bootstrap-raster
Eine Vielzahl von Webseiten basieren auf der Bootstrap Rasterung. Diesem Raster liegen 12 Spalten zu Grunde, diese können flexibel eingeteilt werden. Ebenso passt sich das Raster den unterschiedlichen Displaygrößen an, dabei beträgt die Breite des Containers auf großen Bildschirmen maximal 1140px.

Menü- und Logopositionen

Das Menü befindet sich meist ganz oben im Header. Etabliert hat sich auch noch die linke Browserseite für die Menüposition. Da es im europäische und amerikanischen Raum Standard ist, von Links nach Rechts zu lesen, nehmen wir auch eine Webseite von oben link nach unten rechts wahr. Aus diesem Grund macht es Sinn, alle wichtigen Elemente oben oder oben links zu positionieren. So befinden sich auch die Logos meist links neben dem Menü oder in unmittelbarer Nähe zu diesem.

Burgermenü

webdesign-standards-burgermenuJeder der auf seinem Smartphone oder Tablet eine Webseite aufruft, weiß, dass sich hinter den 3 horizontalen Strichen das Menü verbirgt. Zwischenzeitlich wurde es sogar für die Desktop-Variante verwendet, konnte sich aber aufgrund der Benutzerfreundlichkeit nicht durchsetzen.

Slider oder große Headerbilder

Unter dem Menü schließen sich sehr oft, manchmal auch aufwendig gestaltete Slider an. Große Bilder sollen Emotionen wecken, den Benutzer in die Webseite einbinden, aber auch sofort mit dem wichtigen Informationen versorgen. Was erwartet mich auf der Webseite? Im Header oder Slider versucht man häufig die vermeintlich wichtigen Seiten einer komplexen Webseite ansprechend und schnell zugänglich dem Nutzer zu präsentieren. Ein Call-to-Action Button verleitet einen auch dann schnell zum Klicken.

 

webdesign-standards-Logo-Menü-Header

Warum haben sich Webdesign-Standards etabliert?

Die Frage ist ganz einfach zu beantworten: Der Mensch ist ein Gewohnheitstier. Er will sich nicht ständig auf Webseiten neu orientieren müssen, das raubt nicht nur Zeit, es frustriert auch. Die Benutzerfreundlichkeit zu berücksichtigen, macht Webdesignern hier manchmal einen Strich durch die kreative Ader.

Es lohnt sich allerdings auch mal über den Tellerrand zu schauen, einige Webseiten versuchen aus dem Raster auszubrechen und machen sich auch dadurch einen Namen. Gerade kleinere Webseiten oder Landingpages könnten hier kreativer und etwas mehr experimentierfreudig gestaltet werden.

Eine kleine Sammlung außergewöhnlicher Webseiten findet man auf “brutalist websites”.

Ob man diese alle als optisch ansprechend empfindet, sei dahingestellt. Über Geschmack lässt sich ja streiten. 😉

 

The following two tabs change content below.

Julia

Hallo, ich bin Julia und unterstütze das Team der Klickkomplizen seit August 2015 im Bereich Web- und Printdesign. Mein Herz schlägt für Photoshop und InDesign und somit auch für Neuheiten und Trends in diesem Bereich.
🤳So nutzen Marken & Unternehmen #InstagramStories ! 50% aktiver Unternehmen veröffentlichen Stories. 🤳 - Produktp… https://t.co/RzrXbqWpqy
#Facebook optimiert Werbelösungen: Branded Content Tags, Quality Ads u.v.m. Ziel: Mehr Klarheit und höhere Qualitä… https://t.co/4djHhWMfUZ
NEU im #Klickkomplizen Blog: #Facebook Watch - Beliebte Videos, Watchlist, Videosuche & Mehr! Eigene Kategorie für… https://t.co/OM9Deos13B
Smartspeaker Daten könnten von #Facebook und #Google für Werbung genutzt werden! 🕵‍♂ - Persönliche User-Daten für… https://t.co/26oLpVjvQb
💫Social Media-Universum 2018 – Konkurrenz für #Facebook und #Youtube ?🌘 Alle Social Media Big Player als Planeten… https://t.co/TfjKF2CqYY
"Bis zu 60%" – Werbetreibende verschieben riesige Budgets von #Google zu #Amazon Vorteile: - Nutzerdaten aus Kaufv… https://t.co/V9omx6e7JT
NEU im #Klickkomplizen Blog: Google Ads - Benutzerdefinierte Zielgruppen erstellen! Alle Tipps und Tricks für noc… https://t.co/ZaYrFKxnSf
DSGVO vs. Personalisierte Werbung – Zwischen Personalisierung & Datenmissbrauch! Neustart für Marketing? - Maßna… https://t.co/ypnjXFs4jb
Online-Studie von ARD und ZDF: Über 90 Prozent in Deutschland online – und zwar deutlich länger! ⏰ - 1 Mio. Nutzer… https://t.co/znegBmbRsW
NEU im #Klickkomplizen Blog: Nützliche Browsererweiterungen für Designer! 🛠 Diese AddOns helfen weiter: - Fontfac… https://t.co/noVkyArqNX
3D Fotos im #Facebook Newsfeed: Details, Vorgaben, Tutorial und Tipps! 📸 3D Foto erstellen und auf Facebook posten… https://t.co/2q4hdVymXq
3,4 Mio. Impressions mit nur einem Post: Der neueste Reichweiten-Trick bei #Facebook! Algorithmus unterstützt "Mea… https://t.co/IW88cfzOg0
AllFacebook Marketing Conference 2018 - 5 Bühnen, 40 Talks und 50 Speaker! 👍 Alles über: - DSGVO - Facebook Zielgr… https://t.co/TJGNqt21b1
#YouTube Werbung nach Suchanfragen ausspielen? 🔎🎞 Google nutzt YT Suchfunktion für Ads mit Performance-Potential.… https://t.co/1kiu6J3On4
Leitfaden: Hintergründe bei #PowerPoint und #Photoshop entfernen! ✂ Schritt für Schritt Anleitung mit Beispielen -… https://t.co/CkbkN4gfvq
Einen ansprechenden Marketing-Lebenslauf erstellen! 📝 Auf diese 9 Dinge kommt es an: - Länge - Formatierung - Sch… https://t.co/TYPcm2Ia5o
NEU im #Klickkomplizen Blog: Website-Relaunch Linkstruktur & Weiterleitungen! 🌐 Das ist zu beachten: - URLs in S… https://t.co/NxhmB1a2yK
🙋‍♀️#Facebook - "Freunde in der Nähe" im Test!🙋‍♂️ Interaktive Karte mit Events, Chek-Ins & Empfehlungen von Freun… https://t.co/KtOfwQ1UoH
Jetzt NEU! #Facebook Badges für "Top-Fans" 🥇 Besondere Kennzeichnung in der Commnity. Top Fan: - besonders engag… https://t.co/pUGr5eJHn4
NEU im #Klickkomplizen Blog: Was hat uns bewegt - September 2018! 👋 Was war los in der Online- und Offline-Welt?… https://t.co/fiLzO1ZLmq
Share This