uniformiertes Webdesign
Warum sehen Websites heute fast alle gleich aus?
Früher war eine Website die „Spielwiese“ vieler (Hobby-) Designer, heute folgt ihr Erscheinungsbild gewissen Standards bzw. „Best Practices“. Dies hat zur Folge, dass viele Internetseiten plötzlich irgendwie alle gleich aussehen – wie von der Stange.
Moderne Internetseiten präsentieren sich häufig im gleichen Kleid.
Ich weiß, meine Seite ist nicht gerade das Paradebeispiel für ein unverwechselbares Design. Ich mag nämlich das heutige Webdesign: Alles wird klar und deutlich präsentiert. Es ist genügend Weißraum vorhanden und die Schrift ist nicht mehr so winzig. Mir ist ein minimalistischer Ansatz lieber als Opulenz.
Dennoch: Manchmal stolpere ich über gewisse Dinosaurier oder auch aktuelle Internetseiten, bei denen heutige Designvorstellungen geflissentlich missachtet werden – und das erfreut mich sogar: Dies erinnert mich an meine eigenen früheren Versuche, Internetseiten zu gestalten.
Der typische Aufbau
Sehr viele Websites sind heute so oder so ähnlich aufgebaut:
- Fixierter Header („Sticky Navbar“): Bleibt beim Scrollen stets sichtbar.
- Logo links, Hauptnavigation rechts oder mittig, oft mit Burger-Menü für Mobilgeräte. Manchmal wird dieses auch gleich für die breite Desktop-Ansicht verwendet – Minimalismus eben.
- Großer Bereich ganz oben mit riesigem Hintergrundbild („Hero-Bild“), Video oder Farbfläche.
- Meist eine prägnante Überschrift bzw. „Subheadline“
- Dann: ein dominanter Knopf, welcher geradezu schreit, gedrückt zu werden („Call-to-Action-Button“).
- Ein „Slider“ ist mittlerweile wieder aus der Mode gekommen. Animationen oder schlichte, große Farbflächen bestimmen weiterhin den ersten Eindruck.
- Eine kurze Erklärung, was die Seite oder das Produkt ausmacht, darf nicht fehlen.
- Oft 3–4 größeren Icons mit Texten oder kurze Stichpunkte.
- Dann: Karten (Boxen mit Bild, Überschrift, Text und Button).
- Am Ende, ganz unten, gibt es einen mehrspaltigen Fußbereich („Footer“) mit Navigation, Kontaktinfos, Social-Media-Links, Rechtliche Infos (Impressum, Datenschutz, AGB), Newsletter-Formular, …
Ich empfinde solche Seiten zunächst als sehr übersichtlich. Setzt man alle Punkte auf einmal ein, wird man als Nutzer jedoch von dieser Fülle erschlagen. Solche Seiten gibt es auch.
Wie kommt es denn zu einem solchen uniformen Design?
Da fragt man sich: Was ist denn in den letzten Jahren passiert, dass viele Websites plötzlich alle gleich aussehen? Früher achtete man auf Individualität und heute nicht mehr?
Pagebuilder
Ich denke, die Hauptursache ist der häufige Einsatz s. g. Pagebuilder. Dies sind ziemlich opulente Plug-ins für das am meisten genutzte Website-System ›Wordpress‹. Solch ein Pagebuilder bietet eine Menge leckerer Blöcke an, welche man als Designer nur einzufügen braucht. Das können auch Laien und daher sieht alles gleich aus. Denn solche Pagebuilder wie ›Elementor‹, ›WPBakery‹ oder ›Divi‹ werden von sehr vielen Nutzern installiert bzw. genutzt.
Es gibt (meine Einschätzung) sicherlich eine Menge Agenturen bzw. Freelancer, die ihren Kunden dann einfach so eine Baukasten-Website verkaufen. Im Grunde klicken sie sich einfach nur einen Standard zurecht und installieren gewisse Plugins. Ich weiß, das klingt etwas böse. Vermutlich sind die Kunden damit zufrieden. Aber dann sollte man auch entsprechend niedrigere Preise für so eine Arbeit verlangen.
Gutenberg-Editor
WordPress selbst bietet mit dem Gutenberg-Editor mittlerweile standardmäßig im Grunde das Gleiche an: vorgefertigte Designblöcke, welche man unter- bzw. nebeneinander nur einzufügen braucht – wenn auch reduzierter im Funktionsumfang als ein kostenpflichtiger Pagebuilder.
Davor nutzte man den klassischen Editor, welcher ein Schreiben wie unter einer Textverarbeitung (z. B. ›MS Word‹) gestattete. Mit diesem Editor kann man zwar zügig Texte verfassen und Bilder einfügen. Man kann aber nicht gescheit designen. Entsprechende Websites sehen dann weiterhin aus wie in Word verfasst.
Ich nutze übrigens weiterhin den klassischen WordPress-Editor, füge dabei jedoch vorgefertigte Designblöcke oder gewisse Formatierungen (wie diesen anders gestalteten Absatz) mittels einem kleinen Plugin ein. Dies geht auch.
FSE-Themes
Früher nutzte man unter WordPress starre Themes (Theme = Oberfläche rund um die eigentlichen, selbst verfassten Inhalte): Der Designer eines solchen „klassischen“ Themes bestimmt, wo welche Elemente in welcher Art wie dargestellt werden. Als Nutzer hat man hier in der Regel kaum konkrete Eingriffsmöglichkeiten.
Mittlerweile sind aber s. g. FSE-Themes (Fulls Site Editing) gebräuchlich: Der Nutzer kann Header, Sidebar, Footer in recht großem Umfang selber designen bzw. positionieren. Auch den Basisaufbau der Beitrags- und Übersichtsseiten kann er nun (endlich) selbst bestimmen. Dummerweise gelingt dies einem Laien im Webdesign nur in Form von Blöcken: Es wird dadurch also ein eher klotzartiges, aber eben aufgeräumtes Webdesign erzeugt. Diese „Patterns“ sind praktisch, aber sie fördern eben eine Standardisierung, da viele Nutzer natürlich je dieselben Blöcke nutzen, ohne gestalterisch tiefer einzusteigen.
Flexibles Webdesign für schmale Bildschirme
Ein wichtiger Punkt ist die Flexibilität eines Webdesigns, wenn es darum geht, auch auf schmalen Bildschirmen (Smartphones) gut auszusehen bzw. benutzbar zu bleiben. Man spricht hierbei auch von „Responsive Webdesign“ bzw. von „Adaptives Webdesign“.
Und für das responsive Webdesign ist die besagte Block-Anordnung ideal: Ist der Bildschirm zu schmal, um Blöcke noch sauber nebeneinander positionieren zu können, rutschen sie einfach untereinander.
Beispiel: Wenn Sie diesen Beitrag an einem Desktop-Computer betrachten, ziehen Sie das Browserfenster zusammen. Der linke Block (die Grafik) wird dann über diesen (dieser Text) rutschen.
Abgebildet ist meine selbst geschriebene Browser-Startseite auf verschiedenen Geräten – ebenfalls im Block-Layout.
Als Website-Betreiber hat man mittels dieser Art von Design mit nur wenigen Zeilen CSS-Code (bzw. mittels einem vorgefertigten Block eines Pagebuilders) sein Design auch für die Smartphone-Ansicht fest im Griff. Die Techniken dahinter lauten dann ›Flexbox‹ bzw. ›Grid‹ und sie eignen sich sehr gut zum exakten Positionieren von Elementen zueinander.
Die breite Unterstützung in modernen Browsern begann für „Flexbox“ etwa um 2012–2015, für „Grid“ noch später. Davor musste man sich mit „Float-Elementen“ herum schlagen oder gar unsichtbaren Tabellen. Dies war schlecht kontrollierbar bzw. sah nicht überall gleich aus und daher wurde damals auf „Karten-Elemente“ und dergleichen häufig verzichtet. So etwas kam dann eben später auf.
Barrierefreiheit
Moderne Editoren bzw. Pagebuilder orientieren sich an Best Practices und eine gewisse Barrierefreiheit gehört mittlerweile dazu: große Buttons, genügend Abstand zwischen Links und Schaltflächen, kontrastreiche Darstellungen. Somit sind Websites auch von Personen nutzbar, welche schlecht sehen können oder motorisch eingeschränkt sind. Dafür ähneln sie sich dann auch entsprechend.
Gewöhnung
Ein weiterer Faktor: Besucher sind somit bereits an bestimmte Strukturen gewöhnt: Navigation oben, Footer unten, gut sichtbare Buttons und klare Typografie. Diese Konventionen erhöhen die Benutzerfreundlichkeit, schränken aber die gestalterische Freiheit ein.
Design-Experimente sind selten erfolgreich, wenn Nutzer dadurch die Orientierung verlieren – insbesondere, wenn es um kommerzielle Angebote (Shops) geht, welche ja unter einem gewissen ökonomischen Druck stehen. Neben Gendersprache und Duzen wurde dann halt auch dieses Design zum Standard: Der Markt gestaltet hier mit.
Demzufolge folgen selbst „hart codierte“ Websites (kein Pagebuilder oder ähnliches) solchen Designtrends, welche vermutlich durch die Programmierer von Pagebuildern salonfähig wurden. Auch bei „maßgeschneidertem“ Code (wie bei meinem selbst geschriebenen WordPress-Theme hier auf dieser Seite) wird man oft ähnliche Layouts sehen, weil Nutzer an bestimmte Interfaces gewöhnt sind und weil diese ja auch gut funktionieren.
Beispiel: Website früher und heute
Ein schönes Beispiel, wie sich das Webdesign im Laufe der Zeit verändert hat, lässt sich anhand der Internetseite von lomography.com darstellen. Sicherlich wird sich das Design dieser Seite in den nächsten Jahren erneut ändern. Aber zum Zeitpunkt der Erstellung dieses Beitrages deckt deren Webdesign viele der oben gelisteten Punkte eines typischen, modernen Blockdesigns ab (Hero, CTA-Buttons, Cards, Opulenz …).
Die Marke, das Verspielte von Lomography kommt bei dem sehr alten Design m. E. deutlich besser zur Geltung. Es passt viel mehr zum Konzept und zu den Produkten. Keine andere Internetseite sah damals so aus (und heute sowieso nicht). Allerdings ist dieses Webdesign wenig nutzerfreundlich, auf Smartphones kaum zu gebrauchen und es widerspricht den heutigen Erwartungen des Publikums, welches ja auch immer weniger Zeit und Geduld mitbringt: Es muss alles klar und griffig auf dem Tisch bereit liegen.
Ein Bekannter von mir pflegt seine Website seit vielen Jahren nicht mehr. Bereits damals legte er viel Wert auf ein individuelles, schönes Webdesign. Auf einem Desktop-Computer funktioniert es visuell auch heute noch und es erscheint gewiss nicht wie von der Stange.
Wie setze ich mich visuell von der Masse ab?
Ich denke, man müsste sich Zeit für eine Liebe zum Detail nehmen, wenn die eigene Website nicht so aussehen soll, wie viele andere auch. Zunächst geht es hierbei jedoch um ein ›Corporate Design‹, bzw. um ein konsequentes Branding:
Individuelle Header-Grafik
In erster Linie sollte man sich eine individuelle Headergrafik anfertigen (lassen). So etwas bewirkt bereits sehr viel. Meine besteht auf diesem Blog ja lediglich aus einem „Klickfinger“ und dem Schriftzug. Das reicht schon, denn es beschreibt bereits meine Marke. Das Icon hatte ich mir einfach von ChatGPT generieren lassen und das Logo dann händisch noch etwas bearbeitet.
Ein Set aus spezifischen Farben nutzen
Dazu gesellt sich ein darauf farblich abgestimmtes Set an drei, vier Farben, welche immer wieder im Design auftauchen (z. B. auch als Link-Farbe). Bei vielen (allen?) FSE-Themes kann man ja unter WordPress ein kleines, globales Set an Farben definieren. Diese eigene Farbpalette ruft man dann jedes Mal auf, wenn man eine Box / einen Container einfügt, bzw. man designt diese Elemente entsprechend so, dass ein Wiedererkennungswert gegeben ist.
Möglichst wenig Stockfotos nutzen
Dann sollte man – falls möglich – auf Grafikmaterial verzichten, welches bereits bei geschlossenen Augen nach Stockfotos aussieht – zumindest auf der Startseite und im Header. Sicherlich findet sich ein Freelancer-Fotograf, welcher sich idealerweise etwas mit Lichtsetzung auskennt, den man für kleines Geld engagieren kann. Oder man lässt typische Stockfotos etwas bearbeiten, falls dies die Lizenz hergibt.
Diese Grafiken wirken ansprechend und erfrischend. Auf z. B. undraw.co kann man sich viele davon kostenlos herunter laden. Es kann jedoch auch wie von der Stange wirken, wenn man so etwas nicht sparsam einsetzt. Ansonsten besteht das halbe Internet bald aus lauter drolligen Kobolden und niemand möchte sie mehr sehen.
Kleine Icons einbinden
Ich nutze gerne kleine Icons, die ich an passenden Stellen einfüge. Dies lockert Textelemente auf und lässt jene auf den ersten Blick schon zu lesen begreifen. Ich bediene mich hierzu bei der kostenlosen Bootstrap-Bibliothek. Jedoch: Diese Icons werden natürlich von vielen anderen Designern genutzt. Immerhin kann man sie farblich dem eigenen Design anpassen.
Mittels einer raffinierten Typografie (siehe nächster Punkt), farbigen Flächen und Icons kann man sogar ganz ohne Grafiken auskommen.
Wert auf eine passende Typografie legen
Gottseidank kann man mittlerweile individuelle Schriftarten komprimiert direkt auf dem eigenen Server hosten bzw. diese ressourcenschonend und dsgvo-konform im eigenen Design verwenden. Eine sorgfältig ausgewählte Typografie trägt viel zum Erscheinungsbild einer Website bei.
Auf den Font der Schrift, die Sie gerade lesen (derzeit Asap), hatte ich mich auch erst nach vielem Probieren und Beurteilen festgelegt. An dieser Schriftart gefällt mir insbesondere der kursive Schnitt. Denn dieser schaut nicht so sehr nach „Windkanal“ aus. Auch schätze ich einen dezenten Semibold-Schnitt und weniger den „schreienden“ fetten. Für die Überschriften wiederum nutze ich eine etwas andere Schriftart.
Ein schönes Video hierzu für Einsteiger wäre z. B. dieses von Nikolaus Kolba:
Man sieht: Mit einer sorgfältig abgestimmten Typografie kann man bereits viel erreichen bzw. bewirken, dass die eigene Website nicht so aussieht wie viele andere da draußen – auch wenn man den selben Pagebuilder bzw. Editor nutzt.
Kurzum
Ich finde das Thema Webdesign sehr spannend und hier auch das Verfolgen von Trends, die ja kommen und gehen. Eine typische Website folgt heute einem relativ klaren und erprobten Muster, welches stark von Benutzerfreundlichkeit, Konversionsoptimierung und „Mobile-First-Design“ geprägt ist.
Selbst kleine Blogs übernehmen dies (unbewusst): Dieses Layout wird halt vom Pagebuilder angeboten oder durch das Block-Prinzip vom Gutenberg-Editor (unter WordPress) forciert. Mir gefällt es. Ich komme damit als Besucher gut zurecht. Dennoch: Etwas Besonderes, etwas Erfrischendes bieten solche Internetseiten nicht mehr. Man ist erwachsener geworden, die Spielwiese häufig verwaist.