Loading...
Cyberspace
Work in Progress

Cyberspace

Webdesign befasst sich mit der Gestaltung des virtuellen Raumes und der Interaktion darin. Es hat viel mit Produktdesign, Signaletik, Szenografie und Architektur zu tun und ist nicht mit digitaler Print-Grafik zu verwechseln. Eine Einführung.

Verortung

Die Definition
1

Es gibt viele ähnliche Begriffe rund um Webdesign, sie kennenzulernen hilft den Raum und die Materie besser zu verstehen.

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».

© Webdesign Essentials
1

Weitere Gebiete:

Virtual Reality (VR)

Als virtuelle Realität, kurz VR, wird die Darstellung und gleichzeitige Wahrnehmung der Wirklichkeit und ihrer physikalischen Eigenschaften in einer in Echtzeit computergenerierten, interaktiven virtuellen Umgebung bezeichnet.

Augemented Reality (AR)

Unter erweiterter Realität versteht man die computergestützte Erweiterung der Realitätswahrnehmung. Diese Information kann alle menschlichen Sinne ansprechen. Häufig wird jedoch unter erweiterter Realität nur die visuelle Darstellung von Informationen verstanden, also die Ergänzung von Bildern oder Videos mit computergenerierten Zusatzinformationen oder virtuellen Objekten mittels Einblendung/Überlagerung.

Der kybernetische Raum

Alles ist steuerbar
2

Die Bezeichnung «Cyberspace» klingt wie aus dem letzten Jahrhundert. Lässt man die neonfarbenen Assoziationen weg und widmet sich der Beschaffenheit, ist der Begriff treffend.

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.

Die virtuelle Räumlichkeit als Designkonzept, vereinfacht den Umgang mit den verschiedenen Disziplinen von UX-Design, FrontEnd und Interaction-Design.

Der neue Raum

Cyberspace
2.5

Webseiten wirken zweidimensional, sind aber als dreidimensionale Räume zu betrachten.

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.

Das Interface

Die Schnittstelle
3

Die Schnittstelle zwischen Mensch und Maschine oder der Zugang zum Cyberspace.

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.

User Experience (UX)

Benutzererfahrung
4

Die Benutzererfahrung während der Bedienung von Webseiten ist ein zentraler Mechanismus im Verständnis des Raumes «Cyberspace».

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.

Der Code als Materie

Die Materie des Cyberspace
5.5

Als Webdesigner:in definiert man das Aussehen des virtuellen Raumes und ermöglicht Menschen bestmöglichen Zugang (UX). Die Materie, um diese Welt zu erschaffen, ist Code.

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.

Abhängigkeiten

Nichts ist absolut
6

Bereits das elementare Zusammenspiel zwischen HTML und CSS bringt eine neue Designlogik mit sich.

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.

Relativität

Viewports into space
7

Die Responsive Gestaltung ermöglicht eine Gestaltung für jeden Viewport. Zur Diversität aller Viewports kommen auch variable und interaktive Inhalte hinzu. Responsive Design ist Pflicht. Jeder Viewport soll eine für ihn zugeschnittene Gestaltung der Webseite erhalten, jeder CMS Eintrag soll gut aussehen.

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.

Anatomie

Taxonomie der
8

Eine Webseitenarchitektur hat eine klare, wenn auch sehr modulare Struktur. Die meisten Webseiten bauen auf wiederkehrenden Layouts auf. Viele Aspekte etablierten gängige Muster. Wiederkehrende Elemente ermöglichen ein schlankeres Entwickeln, einfacheres Inhaltsmanagement und gleichzeitig gewöhnen sich User:innen an gängige Interaktionsarten.

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.

Werkzeuge

Vom Modell zum Code
9

Welche Werkzeuge können verwendet werden, um Webseiten optimal für den Einsatz im Cyberspace zu gestalten? Es gilt unzählige Aspekte zu beachten und unsere Spezialisierungen hat ein unüberschaubares Feld an Arbeitswerkzeuge erzeugt.

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.

Cyberspace ist virtuell. Es ist ein gedanklicher Raum, der nur in deinem Kopf stattfindet.

Er ist ideal als Einstieg ins Thema Webdesign, aber ich lehne jegliche Verantwortung ab, sollte der Begriff Cyberspace Gelächter im Team oder Verwirrung beim Kunden auslösen.

Weiterhin viel Spass. Wer Mut hat, nennt sich «Cyberspace Designer:in» und referenziert es mit diesem Artikel.

Der Einfluss dieses virtuellen Raumes für unsere Gesellschaft ist gigantisch. Alles wird verändert. Unsere Werte, Privatsphäre, Wahrheitsempfindung und unsere Realität.

Design Approaches

Viele Design-Begriffe sind von temporärer Natur und werden unterschiedlich ausgelegt.