Experience & Design

Wie die Antike und modernes Webdesign zusammenhängen

Alena Riha

Junior UI/UX Designerin

Veröffentlicht

6. August 2021

Verändert

28. April 2022

5 min

Antike Architektur ist die Großmutter des Webdesigns. Was können wir aus den alten Prinzipien für die Erbauung eines Gebäudes für heutiges Design lernen - insbesondere für Webdesign? Inwieweit können uns die Prinzipien von Vitruv dabei helfen Webdesign besser zu verstehen und allgemein besseres Design für User:innen zu schaffen?

Wer war Vitruv?

Vitruv war ein Architekt und Architekturtheoretiker im 1. Jh.v.Chr., diente unter anderem Caesar und Augustus. Er verfasste “De architectura”, das man als erstes Sach- bzw. Fachbuch über Architektur verstehen kann. Nach ihm soll ein Gebäude drei Hauptanforderungen erfüllen: Firmitas (Festigkeit), Utilitas (Nützlichkeit) und Venustas (Schönheit).

Frederick O'Brien ist in seinem Artikel über die Trias von Vitruv und besseres Webdesign bereits ausführlich eingegangen. Hier möchte ich ebenfalls einen kurzen Überblick zu der Trias und sechs weiteren Grundprinzipien von Vitruv geben und wo wir sie im Webdesign finden und anwenden können.
‍

Die Trias von Vitruv

**Festigkeit (*Firmitas***)

Festigkeit ist die Fähigkeit eines Gebäudes über einen langen Zeitraum, lange Benutzung und Abnutzung sowie Witterungen standzuhalten. Nach Vitruv macht Festigkeit auch das Fundament und dessen Materialien aus.

Zeit vergeht in Zeiten der Digitalisierung weitaus schneller als in der Antike. Das trifft besonders auf Webdesign zu. Trends ändern sich stetig. Trotzdem können wir Firmitas im Webdesign finden und anwenden. Das Fundament bzw. die Festigkeit fängt mit dem Host an - läuft das System schnell genug? Auch, dass eine Website responsive ist, macht sie gefestigt für die Zukunft - sie hält den Witterungen stand und passt sich an. Von Materialien können wir sprechen, wenn wir im Webdesign auf "beständige Materialien" zurückgreifen: HTML, CSS & Javascript gibt es seit Jahrzehnten und prägen im Hintergrund unsere digitalen Landschaften und… Webseiten. Natürlich brauchen Webseiten nach einiger Zeit Anpassungen. Die Festigkeit eines Farbschemas, bestimmter Elemente einer Seite - siehe Corporate Design - helfen Usern, die lange damit vertraut waren, das Ziel der Webseite zu bewahren und verständlich zu machen.

Foto: Florian Olivo

**Nützlichkeit (*Utilitas***)

Gebäude werden aus bestimmten Gründen erbaut. Das Gebäude und seine Elemente sollen Funktionen erfüllen. Wenn dem nicht so ist, ist die Wahrscheinlichkeit ziemlich hoch, dass das Gebäude nicht nützlich ist.

Nützlichkeit trifft ebenfalls auf Webdesign zu. Jede Webseite hat einen Grund, weshalb sie existiert. Und sie sollte am besten nützlich für User:innen sein. Egal ob es um ein Storytelling geht bis hin zur Wettervorhersage. Eine Online-Enzyklopädie wie Wikipedia soll es einfach machen für User:innen durch Informationen zu navigieren und diese zu finden. Blogs und News-Seiten sollten interessanten Content veröffentlichen. "Ein klares Ziel führt zu einem klaren Design", erklärt Frederick O'Brien. Weiter erläutert er, dass Nützlichkeit einer Webseite die meisten, aber nicht alle Bedürfnisse von User:innen erfüllen kann.

Schönheit (Venustas)

Gebäude sollten nicht nur gut gemacht und nützlich sein, sie dürfen auch schön aussehen. Die Qualität eines Gebäudes, so Vitruv, wird durch das schöne Äußere gesteigert.

Bei Webseiten ist es nicht anders, obwohl der Aspekt der Schönheit in den letzten Jahren noch wichtiger geworden ist als in den Jahren zuvor. Ein schönes Design lädt ein auf der Webseite zu verweilen. Sie zu erkunden. Farbkombination, Typographie, Bilder, Illustrationen usw. steuern zur Schönheit der Webseite bei. Und natürlich die Komposition dieser. Die Interaktion mit einem schönen Design wertet noch zusätzlich auf für User:innen und sie kommen wahrscheinlich auch gerne wieder.

Design Thinking Einführung

Gratis

Was ist Design Thinking und wie Ihre Organisation davon profitieren kann.

Microconsulting

Gratis

Sie haben eine Frage und benötigen Hilfe. Einer unserer Experten wird sich mit Ihnen in Verbindung setzen und Sie fachgerecht beraten.

Fundamentale Prinzipien

Neben der sogenannten Trias von Vitruv, gibt es auch sechs weitere fundamentale Prinzipien der Architektur, auf die wir eingehen werden:

Ordnung (Ordinatio)
Schöner Rhythmus (Eurythmia)
Symmetrie (Symmetria)
Anordnung (Dispositio)
Decor (Dekor)
Verteilung (Distributio)

1. Ordnung

Ordinatio bezieht sich beim Gebäude auf dessen Gliederung und die maßliche Einteilung. Ordinatio ist daher eng verknüpft mit den Begriffen von Eurythmia und Symmetria. Diese sollten sich im Einklang miteinander befinden.

Eine sogenannte “Maßordnung” finden wir auch im Webdesign. Wir sollten sie sogar stets anwenden. Eine große Hilfe dabei bzw. das Grundgerüst bildet natürlich das Gridsystem. Ein Grid hilft uns die allgemeinen Hauptmaße einer Webseite zu definieren. Von dort aus haben wir ein gutes Fundament mit dem wir arbeiten können.

2. Schöner Rhythmus

Eurythmia ist für das maßgerechte Erscheinungsbild beim Zusammenfügen der Bauglieder und das anmutige Aussehen zuständig. Wie bereits erläutert ist es im Einklang mit Ordinatio und Symmetria.

Das anmutige Erscheinungsbild unserer Elemente, von Text, Farbe etc. ist im Webdesign ebenso wichtig. Sobald das Grundgerüst steht und die Maße, Abstände zueinander, dann geht es darum alles schön zu verpacken. Es - wie Venustas - appetitlich für das Auge zu machen. Dass Farben anmutig zueinander stehen. Texte und Textgrößen anmutig zueinander stehen sowie diverse andere Elemente. Und somit auch das Gesamtpaket.

3. Symmetrie

Symmetria ist nach Vitruv die einzelnen Elemente von einem Modul und die Harmonie untereinander.

Harmonie von Elementen, Sektionen, Typographie, Bildern, Buttons etc. “peppt” das Design auf und gehört auch du den grundlegenden Designprinzipien. Eine Symmetria auf der Webseite steuert zur Schönheit der Webseite bei bzw. was wir als schön verstehen. Der Mensch empfindet alles symmetrisches, egal ob in der Natur oder Menschengemacht, als schön.

4. Anordnung

Dispositio ist nach Vitruv die Planung wie auch die Konzeption, inklusive Grundriss, Schnitt und perspektivische Ansicht, eines Gebäudes.

Kaum mehr könnte dieses Prinzip auf das Webdesign zutreffen. Planung und Ausarbeitung eines Konzept gehören ins Fundament von einer guten Webseite. Darauf bauen wir unsere kreativen Ideen und Lösungen auf für die Umsetzung. Wieviele Seiten sollen erstellt werden? Welche Funktionen will die Kundschaft unbedingt auf der Webseite (Mitarbeitersuche, Ausbildungsmöglichkeit, Anmelde-Aufforderung etc.)? Gibt es bereits Texte? Gibt es ein Produkt, das vorgestellt wird? Soll es minimalistisch oder abstrakt werden? Umso mehr Fragen ich als Designerin hier beantwortet bekomme und im Konzept ausgearbeitet und festgehalten wird, desto besser ist es für die Effektivität des Arbeitens und die Webseite selbst. Gibt es ein klares Ziel im Vorhinein, kann man dieses besser darstellen und im Design übermitteln.

5. Dekor

Decor ist das makellose Erscheinungsbild von Außen, bezogen auf den Gesamtstil und Abstimmung von Innen und Außen. Vitruv spricht hier auch davon sich an die Regeln anerkannter Konventionen zu halten. Als Beispiel nennt er hierbei die korrekte Zuordnung von Säulenarten zu bestimmten Gottheiten beim Tempelbau oder stilistische Teilelemente wie etwa die Ausrichtung von Räumen an die Himmelsrichtung.

Hier fällt erneut ein Prinzip unter Venustas. Nicht viel anders ist es beim Webdesign. Bereits vorher angesprochen, gibt es auch hier Grundprinzipien des Designs, wo Designer:innen angehalten sind sich daran zu halten und zu orientieren. Es muss zum Beispiel klar erkennbar sein zu welcher Sektion ein Button gehört. Verwendet man bestimmte Hintergrundelemente, um etwa das Ziel einer Webseite zu unterstreichen - z.B.: angedeutete Bienenwaben für einen Imker oder eine abgeänderte Form des Logos.

Es muss ein klares Zusammenspiel des Designs erkennbar sein. Elemente und ihre Zuordnung sollte zum Gesamtstil beitragen.

6. Verteilung

Distributio steht nach Vitruv für die Ausgaben und die angemessene Verteilung der Materialien beim Bauen.

Dieses Prinzip dürfte relativ klar sein. Ausgaben hat die Kundschaft. Wieviel kostet die Webseite? Wieviel kostet diese oder jene Funktion? Will ich einen Blog oder einen Online-Shop - denn hier gibt es klare preisliche Unterschiede aufgrund der Anforderungen an die Webseite?

Doch wo sind seine meine Ausgaben und Verteilungen als Designer:in? Ich investiere Zeit in Form von Recherche, Materialsammlung und natürlich das Erstellen der Webseite selbst. Befindet sich das dann auch im vereinbarten Rahmen? Oder muss man aufstocken, etwas dazu rechnen? Als Designer:in arbeite ich auch nicht immer alleine. Wir sind ein Team, wo die Aufgaben klar verteilt sind - die Materialien und dessen Verarbeitung klar verteilt werden. Kundenkontakt über den/die Projektmanager:in sowie Teil der Konzeption, Designer:in für Design und Teilkonzeption und dann haben wir den/die Entwickler:in. Oder arbeitest du alleine? Auch dann sollte man eine angemessene Verteilung ebenso für sich finden.

Fazit

Wir sehen also, dass die Prinzipien von Vitruv damals wie heute relevant sind. Heute noch in der Architektur und in erweiterten Branchen wie Design - von Grafikdesign bis Webdesign.

Als Webdesigner:innen dürfen wir uns Vitruv ebenfalls verinnerlichen und seine Prinzipien können uns helfen besseres Webdesign zu erkennen sowie zu erschaffen.

‍