Cyberspace

Virtuell

Virtualität ist die Eigenschaft einer Sache, nicht in der Form zu existieren, in der sie zu existieren scheint, aber in ihrem Wesen oder ihrer Wirkung einer in dieser Form existierenden Sache zu gleichen. Virtualität meint also eine gedachte Entität, die in ihrer Funktionalität oder Wirkung vorhanden ist.

Digital

Digit im englischen heisst Ziffer. Allgemein wird damit jegliches Computergenerierte Signal gemeint. Computer interpretieren üblicherweise Signale (elektrische Impulse) Binär. Digital ist ein weitreichender Begriff, der weit über den visuellen Horizont einer Gestaltung hinausgeht.

Cyberspace

Bezeichnet im engeren Sinne eine virtuelle Welt, im erweiterten Sinne die Gesamtheit mittels Computern erzeugter räumlich anmutender oder ausgestalteter Bedienungs-, Arbeits-, Kommunikations- und Erlebnis-Umgebungen. In der verallgemeinernden Bedeutung als Datenraum umfasst der Cyberspace das ganze Internet. Die Sozialwissenschaften verstehen den Cyberspace weitergehend als «computermedial erzeugten Sinnhorizont».

‍

Gestalter:innen kennen das Design-Mantra «form follows function». Genau darum geht es, wenn Cyberspace gestaltet wird.

Kybernetik (Cyber) ist kurz gesagt die Kunst des Steuerns. Es geht darum Algorithmen und Prozesse vereinfacht «Systeme» so zu entwickeln, das sie richtig funktionieren.

In einer virtuellen Welt, wie im Webdesign oder eben im «Cyberspace», müssen alle Dinge, alle Interaktionen, alle Funktionen, Prozesse und Regeln gestaltet werden.

Für mich ist Cyberspace der Raum und der Code die darin enthaltene Materie.

Jede Art von Überlagerung, die interaktiv oder zeitlich wahrnehmbar ist, simuliert eine neue Ebene innerhalb der Webseite und verleiht ihr eine räumliche Dimension. Diese virtuelle Räumlichkeit ist unerlässlich, um die Grundlagen des Webdesigns besser zu verstehen. Wenn wir als Designer:innen die virtuelle Räumlichkeit des Cyberspace in unseren Konzeptionsprozess einbeziehen, erleichtert dies den Umgang mit Interface-Design, UX-Design, Interaktion und Animation sowie der Umsetzung im Frontend.

Heben wir verschiedene Aspekte dazu hervor.

Die visuelle Darstellung einer Webseite oder App wird als Human-Computer Interface oder kurz User-Interface (UI) bezeichnet:.

Device

Zu den verschiedenen Device-Grössen und Marken (Apple, Samsung, Dell etc.) kommen die verschiedenen Betriebssysteme (iOS, macOS, Windows, Android, Linux etc.), Browser (Firefox, Safari, Chrome etc.) sowie ihre Versionierung hinzu. Zusammengezählt ist es eine unüberschaubare Anzahl an Darstellungsoptionen::.

Viewport

Wer eine Webseite besucht, schaut mit einem Viewport einen bestimmten Ausschnitt einer Webseite an. Der Begriff Viewport passt gut ins Cyberspace-Konzept: Es ist das Ansichtsfenster einer Webseite und kein Format. Man schaut also mittels eines Device durch ein Fenster hindurch in den Cyberspace.

Input-Types

Unterschiedliche Eingabemöglichkeiten erfordern unterschiedliche Gestaltungsoptionen. Dabei muss man sowohl die technischen als auch die menschlichen Möglichkeiten miteinander kombinieren. Ohne Eingabemöglichkeiten, keine Interaktion.

Interaction-Design (Interaktionsgestaltung)

Alle Bedienungselemente gilt es virtuell nachzubauen. Es gibt keine Wirklichkeit der Dinge. Kein Blättern eines Buches, kein Schlendern durch ein Kaufhaus. Die Gestaltung definiert, wie diese Interaktionen erlebt wird.

Daher ist Webdesign näher an Signaletik, Produktdesign, Szenografie oder Architektur als an klassischer Druckgrafik.

Content-Design (Inhaltsgestaltung)

Die Inhaltsgestaltung thematisiert und präsentiert – den Inhalt selbst. Dabei spielt das Storytelling (inkl. Branding, Marketing) eine zentrale Rolle. Während der Konzeption wird aber schnell klar, die Trennung zum Interaction-Design ist sehr unscharf.

In der Symbiose und dem Bewusstwerden dessen, schärft sich die Benutzerführung und verbessert sich die Benutzererfahrung.

Human Centered Design

Eine gute User-Experience ermöglicht ein intuitives Bedienen der Webseite und stellt den Menschen ins Zentrum. Der Begriff Human Centered Design ist der Oberbegriff zum Thema UX.

Code ist Text

Jede Zeile Code ist Text, welcher von der Maschine gelesen und für uns Menschen aufbereitet wird. Darin enthalten ist auch der sichtbare Inhalt.

HTML, CSS, JS und CMS

Der Inhalt einer Webseite ist Text. Er wird mit HTML strukturiert, mit CSS gestaltet und mit JS (Javascript) sein Verhalten definiert. Via CMS werden Inhalte, dynamisch vor Auslieferung, in den Code eingefügt.

Das Boxmodell

Jeder HTML-Tag ist eine Box. Der Text im HTML wird gemäss dem Boxmodell zu einem Layout geformt. Alle Boxen werden standardmässig von oben links nach unten rechts aneinander gereiht.

Jede Box hat unterschiedliche Darstellungsmöglichkeiten (Display Settings) sowie Abstandseigenschaften (Spacing-Properties) und kann unterschiedlich Positioniert werden (Position).

Diese Strukturierung ist für uns Gestalter:innen von grosser Bedeutung.

Verschachtelung (HTML)

HTML ist normaler Text, welcher mit Tags strukturiert wird. Ein HTML-Element besteht immer aus zwei Tags. Eines am Anfang, eines am Ende. Dazwischen ist der sichtbare Inhalt.

Wenn ein Text mit HTML strukturiert wird, werden die Elemente, welche zueinander gehören oder Teil eines anderen Elementes sind, verschachtelt. Zu Vergleichen ist die Verschachtelung mit Layer und Ordner in Photoshop.

Selektoren

Jedes HTML-Element ist ein Selektor für CSS. Der Tag selbst kann weitere Attribute (Class, ID, States etc.) besitzen, die im CSS angesteuert und gestylt werden können. So gibt es mehrere Arten wie ein HTML-Element gestylt werden kann.

Vererbung (CSS)

Die Verschachtelung hat eine visuelle Vererbungslogik, die im CSS zum Tragen kommt. Alle Design-Definitionen werden von der äusseren Hülle hin zur innersten vererbt. Diese Vererbung wird mit Parent und Child Elementen beschrieben. Dies gilt auch für ein HTML-Element mit seinen Attributen selbst.

Relative Werte

Damit ein Layout auf allen Viewports gut aussieht, müssen die Dimensionen relative Werte sein. Dabei gibt es relative Werte basierend auf dem Layout (%), dem Viewport (vh/vw), der Schriftgrösse (EM/REM) und noch viele mehr.

Das Zusammenspiel der passenden relativen Werten mit dem Boxmodell hat eine unglaubliche Kraft und will trainiert sein.

Media Queries

Viele Layouts sehen nicht auf allen Viewports gut aus. Mittels eines Breakpoints für eine spezifische Media Query (Medienabfrage) werden unterschiedliche Layouts definiert, ohne den Inhalt zu ändern.

Dabei definiert die Layout-Ästhetik, wann ein Breakpoint notwendig ist und nicht der Viewport.

Variabler Inhalt

Bei all den technischen Relativitäten wird oft vergessen, dass auch der Inhalt selbst sehr variabel ist. Content-Management-Systeme ermöglichen das stetige editieren der Inhalte einer Webseite. Für Designer:innen eine weitere Herausforderung.

Atomic Design

HTML-Elemente werden als Atome bezeichnet. In ihrer Verschachtelung wachsen sie so zu Molekülen und Organe zusammen. Die Atomic-Design-Theory baut auf der Code-Struktur auf und hilft so, Webdesign richtig anzugehen. Daher meine Analogie zur Materie im Cyberspace.

Terminologie

Die Bedienung von Webseiten wird in einem intersubjektiven Prozess über alle User:innen hinweg stetig auf- und ausgebaut. Über die Jahre sind viele Begriffe und Bedienungsstandards entstanden. Sie zu kennen, vereinfacht das Verständnis im Team und hilft User:innen sich einfacher zurechtzufinden.

Konvention

Es liegt am Storytelling und in der Ästhetik wann Web-Konventionen gebrochen werden.

Eine gute Anatomie ist eine ideale Synergie aus Human Centered Design (HCD) und der Programmierlogik. Webdesigner müssen sich mit beiden Fachbereichen möglichst gut auskennen, damit diese Brücke geschlagen werden kann.

Prototypen & Referenzdesign

Die Gestaltung einer Webseite fängt nicht mit der visuellen Grafik an. UX-Architekten und BackEnd-Architekten bauen das Fundament der Webseitenstruktur (Wireframe/Sitemap/Flow-Chart). Aufbauend darauf, erstellen Webdesigner:innen ein Referenzdesign für spezifische Viewports. Diese werden zu interaktiven Klick-Prototypen (UX-Tests und Kundenpräsentationen) zusammengefügt und allfällige Interaktionen dazu animiert. Diese Prototypen geben immer nur Bruchstücke des finalen Produktes wieder.

Umsetzung

Die FrontEnd Entwicklung setzt die Referenzdesigns in ein responsives Webdesign um. Das BackEnd baut die Funktionalität und das CMS dazu. Dies ist die echte Webseite und das echte Design.

Wenn Designer:innen nicht nur Modelle, sondern echte Gestaltung im Web machen wollen, müssen sie Werkzeuge und Techniken lernen die HTML, CSS und Javascript anwenden.

Ich bin überzeugt, dass Gestalter:innen die visuelle Verantwortung für den Layout-Teil des FrontEnd übernehmen sollten. Damit der tiefe Graben zwischen Design und Entwicklung sich verschiebt und ebnet.