Loading...
Cyberspace
Work in Progress

Cyberspace

Der Raum wo Webdesign zu Hause ist. Webdesign ist nicht einfach digitale Print-Grafik. Es hat vielmehr mit Produktdesign, Signaletik, Szenografie oder gar Architektur zu tun. Dies ist eine Einführung in diesen Raum und die Materie darin.
Die Definition

Verortung

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 sehr weitreichender Begriff, der weit über den visuellen Horizont einer Gestaltung hinausgeht.

Cyberspace

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

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 (auch englisch augmented reality (kurz AR) 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.

Darstellung mittels eines Kreisdiagrammes wie die verschiedenen Begriffe zueinander stehen.
© Webdesign Essentials
Darstellung mittels eines Kreisdiagrammes wie die verschiedenen Begriffe zueinander stehen.
1

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

Wie jetzt?

Der kybernetische Raum

Für Gestalter*innen mag abstrakt wirken, wie man Cyberspace nutzen sollte. Jedoch verstehen Gestalter*innen das Design-Mantra «form follows function». Genau darum geht es, wenn Cyberspace gestaltet wird.

Kybernetik (Cyber) ist kurzgesagt die Kunst des Steuerns. Es geht darum Algorithmen und Prozesse vereinfacht «Systeme» so zu entwickeln, das sie richtig funktionieren. Was alles Algorithmen oder Systeme sind, reicht weit über den Cyberspace hinaus. Menschen und Tiere, Gesellschaften - ja fast alles kann als System, als Algorithmus verstanden werden und somit auch programmiert werden.

In einer virtuellen Welt wie jene des «Cyberspace» müssen alle Dinge, alle Interaktionen, alle Funktionen, Prozesse und Regeln definiert werden.

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

Webseiten, auch wenn sie zweidimensional wirken, sind aus vielerlei Hinsicht als dreidimensionale Räume zu betrachten. 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.

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

Heben wirverschiedene Aspekte dazu hervor.

Interface (UI)

Die Schnittstelle zwischen Mensch und Maschine oder der Zugang zum Cyberspace. Es kann auch User-Interface (UI) genannt werden.

User Experience (UX)

Die Erfahrung und Interaktion des Menschen mit dem Interface einer Webseite.

Abhängigkeiten

Ein fundamentales Zusammenspiel aus HTML und CSS welche eine neue Designlogik mit sich bringt.

Relativität

Die Responsive Gestaltung ermöglicht eine Gestaltung für jeden Viewport. Zur Relativität aller Viewports kommen auch die variablen und interaktiven Inhalte dazu.

Anatomie

Eine Webseiten-Architektur hat eine klare, wenn auch sehr modulare Struktur. Sie leitet sich aus unterschiedlichen Methodiken und Terminologien ab.

Werkzeuge

Mit welchen Werkzeugen können wir Webseiten optimal für den Einsatz im «Cyberspace» aufbereiten.

© Future Histories Podcast
2

Weiterführende Links

Design Tagebuch über «Form folgt Funktion»

Human-Computer

Interface

Interface heisst auf Deutsch Schnittstelle. Es ist die Kurzform für Human-Computer Interface. Die Mensch-Maschinen Schnittstelle.

Aufbauend auf dem Gedanken, dass Cyberspace der Raum und die Materie von Webdesign der geschriebene Code ist, ist das Interface der Zugang dazu.

Die visuelle Darstellung einer Webseite oder App wird meist als User-Interface (UI) bezeichnet. Dabei gibt es auch viele «nicht-visuelle» Interfaces (Schnittstellen). Eine Schnittstelle ist meist keine reine Informationsdarstellung, sondern beinhaltet auch eine Interaktion.

Device

Gerät auf Deutsch. Damit sind in Web-Bereich alle Computer, Laptops, Tablets, Smartphones etc. gemeint, welche Webseiten (oder Apps) wiedergeben.

Zu den verschiedenen Device-Grössen kommen auch all die verschiedenen Betriebssysteme (iOS, macOS, Windows, Linux etc.) sowie Browser (Firefox, Safari, Chrome etc.) sowie ihrer Versionierung hinzu. Zusammengezählt sind dies unendliche viele Viewport-Grössen. Deshalb sollte ein Interface «Device-Agnostisch» sein.

Viewport

Wer eine Webseite besucht, schaut mit einem Viewport einen bestimmten Ausschnitt einer Webseite an. Jeder Viewport hat eine andere Dimension, da der gewählte Browser gepaart mit dem vorhandenen Betriebssystem auf jedem Gerät die Webseite unterschiedlich aufbaut. Den Begriff Viewport passt gut in die Terminologie Cyberspace. Es ist ein Ansichtsfenster und kein Format. Man schaut also durch ein Fenster hindurch in den Cyberspace und nicht auf den Bildschirm.

Input Types

Es gibt unterschiedliche Wege mit einer Maschine zu interagieren. Nebst der Tastatur kommt die Maus mit dem Cursor oder Touchscreens, Audio oder Kameras etc. zum Einsatz.

Der Mensch kann mit seinen Fingern, Augen, Gesicht, Töne und Bewegungen Interaktionen auslösen.

© Gottlieb Dittweiler Institut
Benutzererfahrung

User Experience (UX)

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

Die Gestaltung einer Webseite hat zwei unterschiedliche Design-Typen.

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 gar Architektur als an klassischer Druckgrafik. Es wird definiert, wie man einen Button als Schaltfläche erkennt oder wie die Navigation sich verhält. Diese Gestaltung hat weniger mit dem eigentlichen Inhalt zu tun, sondern ist ein enorm wichtiger Bestandteil der Benutzererfahrung (UX). Mittels Usability und Accessibility wird dies gemessen und optimiert.

Content Design (Inhaltsgestaltung)

Die Inhaltsgestaltung thematisiert und präsentiert – wer hätte das gedacht – den Inhalt selbst. Dabei spielt das Storytelling eine zentrale Rolle. Und in der Planung des Storytelling wird sehr schnell klar, dass die Trennung zum Interaction Design nicht scharf ist.

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

Human Centered Design

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

Nichts ist absolut

Abhängigkeiten

Schauen wir uns die Materie «Code» genauer an. Es gibt wichtige Regeln, die eine klare Änderung zur altbekannten Grafik sind.

Webdesign ist die Gestaltung des User-Interfaces einer Webseite.

HTML, CSS, JS und CMS

Der Inhalt einer Web-Page ist Text. Er wird mit HTML strukturiert mit CSS gestylt, mit JS (Javascript) wird das Verhalten definiert und via CMS können Inhalte dynamisch vor Auslieferung eingefügt.

Verschachtelung (HTML)

Wenn ein Text mit HTML strukturiert wird, werden die Elemente die zueinander gehören oder Teil eines anderen Elementes sind verschachtelt. Diese Verschachtelung hat weitreichende Folgen.

Die Verschachtlung wird mit Einzügen im Code sichtbar gemacht. Zu Vergleichen ist die Verschachtelung mit Layer und Ordner in Photoshop.

Selektoren

HTML ist normaler Text welcher mit Tags versehen wird. Diese Tags definieren die Struktur des Textes. Jeder HTML-Tag ist ein Selektor für CSS. Der Tag selbst kann eine Klasse und/oder eine ID besitzen, die im CSS unterschiedlich gestylt werden kann. So gibt es (neben anderen Selektoren) bereits drei Arten wie ein HTML 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.

Die Vererbung im CSS geht aber noch weiter. Die Selektoren sind auch hierarchisch aufgebaut. So ist der HTML-Tag selbst ein «Parent-Element» während die HTML-Class sein Child ist.

Take Away für Designer

Die Abhängigkeiten und Vererbungen ermöglichen und erfordern neue Herangehensweise in der Gestaltung gegenüber den bekannten Grafikprogrammen. Es lohnt sich diesen Brocken an Wissen besser zu verstehen.

Viewports into space

Relativität

Responsive Design ist Pflicht. Jeder Viewport sollen eine ideale Gestaltung der Webseite erhalten.

Boxmodell

Jeder Selektor, respektive jeder HTML-Tag ist eine Box. Der Text im HTML wird gemäss dem Boxmodell zu einem Layout geformt. Alle Boxen werden 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).

Relative Werte

Damit ein Layout auf allen Viewports gut aussieht, müssen diese Grössen relative Werte sein. Dabei gibt es nebst dem Prozent (%) auch noch andere relative Werte. EM, REM, VW, VH etc.

Die Abhängigkeiten aus HTML und CSS zusammen mit dem Boxmodell und den relativen Werten muss clever ausgelotet werden. Ihr Zusammenspiel hat eine unglaubliche Kraft.

Media Queries

Die meisten Layouts sehen nicht auf allen Viewport-Grössen gut aus. Mittels einem Breakpoint 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.

Media Queries Spezifikationen lassen sich nebst den Grössen auch für die Unterscheidung zwischen Portrait oder Landscape Orientierung oder Print (PDF) einsetzen.

Responsive Design

Ist die Layout-Struktur im HTML sowie die Gestaltungseigenschaften im CSS richtig definiert, ergibt sich aus den relativen Werten ein variables Boxmodell, welches sich ideal auf die jeweiligen Media Query ausrichtet. Dies nennt sich ein responsive Design. Einfach, oder?

Variabler Inhalt

Bei all den technischen relativität 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.

Taxonomie der

Anatomie

Die meisten Webseiten bauen auf wiederkehrenden Layouts auf. Viele Aspekte etablierten gängige Muster. Wiederkehrende Elemente ermöglichen ein schnelleres und einfacheres entwickeln einer Webseite und gleichzeitig gewöhnen sich User*innen an gängige Interaktionsarten im Internet und ihren Geräten.

Atomic Design

HTML-Tags 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.

Terminologie

Webdesigns sind keine Unikate. 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. Es ist wichtig sie zu kennen, wenn man eine Webseite gestaltet und umsetzt. Es vereinfacht das Verständnis im Team und hilft später User*innen sich einfacher zurecht zu finden.

Konvention

Es liegt am Storytelling und in der Ästhetik wann Web-Konventionen gebrochen werden, um die Webseite speziell zu machen.

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

Vom Modell zum Code

Werkzeuge

Weil es unzählige Aspekte gibt, die während einer Webseiten-Entwicklung beachtet werden müssen, hat sich ein schier unüberschaubares Feld an Arbeitswerkzeuge aufgetan.

Designer*innen müssen sich bewusst werden, wann sie «echte» Webseiten  (mit HTML, CSS und JS etc.) und wann sie einen Prototyp für eine bestimmte Abklärung gestalten.

Prototypen & Referenzdesign

Die Gestaltung einer Webseite fängt nicht mit der Grafik an. UX-Architekten und BackEnd-Architekten bauen das Fundament der Webseitenstruktur (Wireframe/Sitemap) Aufbauend darauf, erstellen Webdesigner*innen ein Referenzdesign für spezifische Viewports. Diese werden zu interaktiven Klick-Prototypen zusammengefügt und allfällige Interaktionen dazu animiert. Dies oft bevor die eigentliche Programmierung beginnt. 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 FrontEnd Designer*innen werden. Andernfalls basteln sie gerade mal hübsche Makulatur.

Ich bin überzeugt, dass visuelle Gestalter*innen das Zepter für den Layout-Teil des FrontEnd übernehmen sollten und sich dadurch der tiefe Graben zwischen Design und Entwicklung verschiebt und etwas 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 er 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.