Loading...
Cyberspace
Work in Progress

Cyberspace

Webdesign ist die Gestaltung des virtuellen Raumes sowie die Gestaltung der Interaktion darin. Webdesign hat viel mit Produktdesign, Signaletik, Szenografie oder Architektur zu tun und ist nicht digitale Print-Grafik. Eine Einführung.

Verortung

Die Definition

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

Darstellung mittels eines Kreisdiagrammes wie die verschiedenen Begriffe zueinander stehen.
© Webdesign Essentials
Darstellung mittels eines Kreisdiagrammes wie die verschiedenen Begriffe zueinander stehen.
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 Sinnesmodalitäten 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

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.

© Future Histories Podcast
2

Weiterführende Links

Design Tagebuch über «Form folgt Funktion»

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

Der neue Raum

Cyberspace

Webseiten, auch wenn sie zweidimensional wirken, sind aus vielerlei Hinsicht als dreidimensionale Räume zu betrachten.

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

Jegliche Überlagerung, welche interaktiv oder zeitlich wahrnehmbar ist, simuliert eine neue Ebene innerhalb der Webseite und macht das zweidimensionale räumlich. Diese virtuelle Räumlichkeit ist essenziell um die Grundsätze von Webdesign besser zu verstehen.

Wenn wir als Gestalter*innen die virtuelle Räumlichkeit des Cyberspace in unseren Konzeptions-Prozess einbeziehen, vereinfacht sich der Umgang mit dem Interface Design, dem UX-Design, der Interaktion/Animation sowie der FrontEnd-Umsetzung.

Heben wir verschiedene Aspekte dazu hervor.

© Webdesign Essentials
3

Das Interface

Die Schnittstelle

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.

© Gottlieb Dittweiler Institut
3
Verbreitere dein Wissen

Devices und Display

Interaktionen

* Es gibt auch nicht visuelle Interfaces.

** Nicht nur die Gerätegrössen (Formate) sind unterschiedlich, sondern auch das Herstellerbedingte Rendering (visuelle Aufbereitung) des Codes.

User Experience (UX)

Benutzererfahrung

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

Als Webdesigner*in definiert man das Aussehen des virtuellen Raumes und versucht Menschen bestmöglichen Zugang zu ermöglichen (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.

© Webflow
6
Mehr zum Thema

Programmiersprachen

Abhängigkeiten

Nichts ist absolut

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

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

Eine Webseiten-Architektur 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

Mit welchen Werkzeugen können wir Webseiten optimal für den Einsatz im «Cyberspace» gestalten. Es gilt unzählige Aspekte während einer Webseiten-Entwicklung zu beachten und unsere Spezialisierung 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/FlowChart). 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.

Technik und Struktur

Nebst den physischen Elementen wie Pixel und Bildschirme sind Webseiten aus Code in Programmier- und Auszeichnungssprachen geschrieben. Diese Codezeilen sind die Bausteine der Webseiten-Anatomie. Die Anatomien von Webseiten sind oft sehr ähnlich. Die Begrifflichkeiten rund um Webdesign und der Welt, die es zu gestalten gilt, werden im Kapitel Cyberspace eingeführt.

Scroll Snap
On
Off