Schlagwort: ästhetik

Untersuchung der visuellen Evolution

Am Mittwoch habe ich meinen bisherigen Ansatz im Masterstudio präsentiert. Dabei war zum einen wichtig, worum es im Kern meiner Untersuchung geht, zum anderen welche Aspekte ich dabei berücksichtigen möchte.

Am Mittwoch habe ich meinen bisherigen Ansatz im Masterstudio präsentiert. Dabei war zum einen wichtig, worum es im Kern meiner Untersuchung geht, zum anderen welche Aspekte ich dabei berücksichtigen möchte.

Der Fokus soll, wie schon beschrieben, klar auf der visuellen Untersuchung liegen, jedoch bin ich überzeugt davon, dass man die visuelle Ebene nicht isoliert betrachten kann. Zudem finde ich es spannend und wichtig, welche kulturellen und technologischen Aspekte daran angeknüpft werden können.

Weiter stelle ich mögliche theoretische Inhalte vor, wie die Historie des World Wide Webs, die Auseinandersetzung mit Informationssystemen sowie die Entwicklung grafischer Benutzeroberflächen. Zudem schwebt mir vor, mein Thema medientheoretisch zu untermauern; hier muss ich jedoch überdenken, welche Theoretiker tatsächlich passend für mein Thema sind. Bisher hatte ich an Marshall McLuhan, Vilém Flusser, Byung-Chul Han, Luciano Floridi und Felix Stalder gedacht. An dieser Stelle muss ich die Unterscheidung treffen, wer seine Theorien schon mit der Kenntnis der digitalen Welt geschrieben hat und ob beispielsweise Han, welcher sich im Allgemeinen kulturkritisch äußert, überhaupt relevant ist.
Es könnten weitere Vertreter wie Ada Lovelace, Charles Babbage oder Alan Turing berücksichtigt werden, welche aber aufgrund ihrer Irrelevanz für mein Thema nur am Rande auftauchen können.

Die wichtigste und gleichzeitig offenste Frage ist, welches Ziel ich mit meiner Arbeit verfolge. Hier konnten wir aufgrund der kleinen Runde fast drei Stunden diskutieren und Möglichkeiten abwägen. Auf mögliche Ansätze und weitere Research-Möglichkeiten werde ich im Anschluss meiner Präsentation eingehen.

Die dargestellte Präsentation ist nicht vollständig, da ich zu viel redundante Informationen, wie beispielsweise die Namen der Medientheoretiker, für überflüssig halte.

Präsentation | Kern der Untersuchung

Präsentation | Kulturelle und technische Aspekte

Präsentation | Entwicklung zum eigenen Medium mit eigener Formsprache

Präsentation | Beispielhaft für theoretische Inhalte: Ted Nelson

Präsentation | Beispielhaft für theoretische Inhalte: Vannevar Bush

Präsentation | Beispielhaft für theoretische Inhalte: Doug Engelbart

Präsentation | Grafische Analyse

Präsentation | Grafische Analyse

Präsentation | No-Layout-Ära – Statisch – Fluid

Präsentation | Mögliche Stilrichtungen

Präsentation | Veränderung des Designs

Präsentation | Neue Ansprüche

Präsentation | Auflösung von Interfaces

Grenzen der Evolution

Einen Ansatz, den ich zunächst ausgeschlossen habe, ist die Überlegung, wie grafische Benutzeroberflächen der Zukunft aussehen könnten. Dabei geht es nicht zwingend darum, ein mögliches Interface bis zum Ende zu gestalten. Viel wichtiger ist es, die Ergebnisse meiner visuellen Recherche zu analysieren, beschreiben, hinterfragen und zu verbinden. Auf Basis analysierter Muster, und mit dem Verständnis wie vergangenes und gegenwärtiges funktioniert, können Schlüsse für das Kommende gezogen werden.

Zudem ist wichtig zu wissen, dass eine Evolution nicht unendlich weiter geht, sondern sich als abflachende Kurve oder sogar in Wellen verhält. Das bedeutet, dass sich Entwicklungen nicht nur verlangsamen, sondern sogar umkehren können.

Kulturelle Bedeutung des Interfaces

Auf Grundlage des Status Quo kann nicht nur interessant sein, wie zukünftige Interfaces aussehen, sondern auch wie User Interfaces die Zukunft verändern können. Weiter ist die Perspektive, wie die gesellschaftliche Wirkung von Interfaces ist, interessant. Für diese Impulse, die ich besonders spannend finde, benötige ich aber noch Zeit, um sie weiter reifen zu lassen. Generell scheint es vielversprechend, eine Brücke zu gesellschaftlichen Themen zu schlagen.

Eine wichtige Essenz des Gesprächs ist zudem die, dass sich die visuelle Analyse letztendlich auf ein völlig anderes Thema beziehen könnte. Auf technischer Seite haben wir weitere Punkte verdeutlicht.

Die Erhaltung des menschlichen Körpers

Vannevar Bush und Doug Engelbart zielen mit ihren Visionen und Entwicklungen nicht darauf ab, die Technik selbst zu verbessern. Vielmehr geht es im Kern darum, das menschliche Leben zu verbessern. Diese Feststellung ist insofern aufschlussreich, dass auch heutzutage die unausweichliche Frage im Raum steht, was wir mit der Gestaltung von Interfaces bewirken. Geht es darum, die Technik selbst zu verbessern oder spielt es tatsächlich eine Rolle, welche Erleichterung der Mensch durch das Ergebnis erfährt? In welchen Bereichen benötigt der Mensch zweifelsfrei Unterstützung? Ein Fazit aus dem Gespräch ist, dass es ein Anliegen sein sollte, den menschlichen Körper nicht verkümmern zu lassen, sondern dessen Können zu akzeptieren, miteinzubeziehen und mit technischen Möglichkeiten lediglich zu verbessern.

Weiter ist eine erkennbare Entwicklung, dass sich Mensch und Maschine immer näher kommen und zunehmend verschmelzen. Schnittstellen verschwinden zunehmend und es ist eine generelle Entwicklung zurück zum Körper zu sehen. An dieser Stelle frage ich mich jedoch, wie weit wir gehen wollen. Möchte ich beispielsweise bei meiner täglichen Arbeit wirklich wild gestikulierend vor einem Riesen-Interface stehen, um Inhalte durch die virtuelle Welt zu swipen?

Eine zusätzliche Erkenntnis ist, dass sich Technik dessen Evolution vollstreckt ist, nicht mehr rückgängig machen lässt. Hier ist nur die völlige Verbannung oder die sinnvolle Integration hilfreich. Halbverbannte Technologien, wie beispielsweise die Google Glass, leben sonst in versteckten Grauzonen weiter.

Darstellerische Möglichkeiten

Eine der Ideen, welche ich hatte, konnten weiter ausgeführt werden. Ursprünglich dachte ich an den Bau eines Raums oder Tunnels, in dem die Evolution dargestellt wird. Im Gespräch hatten wir innerhalb der Studenten unter anderem die Idee, dass man eine Zeitreise durchgehen kann. Jeder hat seine eigenen Erfahrungen mit dem Web und durch eine gute Inszenierung könnte sich der Besucher selbst gedanklich zurückerinnern und somit emotional angesprochen werden. Das kann durch die Verwendung von passenden Requisiten und Soundelementen unterstützt werden. In Bezug auf die Soundkomponente, kann man festhalten, dass das Web sowohl auditiv als auch visuell ruhiger und klarer geworden ist. Das beginnt bei der vorhandenen Technologie wie beispielsweise Modems, die sich geräuschvoll einwählen, oder laut kleckernden Tastaturen und zieht sich durch die visuelle Ebene weiter durch. Auch hier ist zu erkennen, dass sich das sehr überladene und blinkende Design in eine minimalistische, geordnete und ruhige Umgebung verwandelt.
Der enzyklopädische Ansatz könnte durch mehrere Handlungssträngen unterstützt werden, welche sich durch die Evolution ziehen und das Storytelling unterstützen.
Wünschenswert, aber sehr schwierig umzusetzen, wäre eine poetische Ebene miteinzubringen. Prof. Dr. Phi. Stefan Asmus spricht auch von einer Metaebene, über die man von oben oder unten auf alles blicken kann. Auch denkbar wäre, dass ich eigene Thesen oder die eigene Sicht einarbeite – das würde meine Arbeit von der rein faktischen Ansicht unterscheiden. Das ist vor allen Dingen deshalb wichtig, da die Arbeit als Designer sehr von Intuition geprägt ist. Im Gespräch fällt der Vergleich mit einem Gitarrenspieler, der sich intuitiv voll und ganz auf die Musik einlässt und möglicherweise nicht wissenschaftlich exakt erklären kann, was nun genau passiert ist.
Die poetische Ebene könnte auch dazu dienen, dass das was kodifiziert gezeigt wird, gleichzeitig das zeigt, was nicht dargestellt wird. Hier verwenden wir die berühmte Eisberg-Metapher, bei der nur die Spitze des Eisbergs sichtbar über dem Wasser liegt.

Die Erweiterung des Menschen

Im weiteren Verlauf sprechen wir über künstliche Intelligenz und wie schon erwähnt über Technologien, die den Menschen unterstützen sollen. Letztendlich geht es immer darum, das Leben des Menschen zu verbessern und die künstliche Intelligenz trägt unterstützend dazu bei. In Kooperation können Probleme gelöst werden und die häufige Darstellung, dass wir mit Chips leben und von KIs getrieben und bedroht werden, ist vorerst weit hergeholt. Ein Kernpunkt ist der, dass Algorithmen im Unterschied zum Menschen nichts Unbekanntes benennen können. Das heißt nicht, dass sie keine Fähigkeit haben selbst zu lernen und sich selbst zu verbessern, jedoch kann etwas, das in keiner Form im System war, nicht selbst erstellt werden. Die Gedanken im Bezug auf künstliche Intelligenzen finde ich auch in Bezug auf Interface Design sehr spannend. Letztendlich geht es immer darum, dem Menschen bestmöglichen Zugang zu einem System zu geben und hier ist die Überlegung spannend, was der Mensch überhaupt braucht, um sinnvoll auf ein System zugreifen kann. Das meine ich sowohl im allgemeinen Bezug auf Interfaces als auch speziell mit Blick auf das Design grafischer Benutzeroberflächen.

Weitere Empfehlungen

Je nachdem in welche Richtung ich mich entscheide, können mir eine weitere theoretische Auseinandersetzung helfen. Dabei geht es zum einen um den Technikbegriff von Heidegger. Zum anderen könnte Bruno Latours Akteur-Netzwerk-Theorie interessant sein, falls ich mich tiefer mit der Koexistenz von Mensch und Maschine beschäftigen möchte. Barads buch über den agentiellen Realismus, Dirk Bäckers Text über Designvertrauen sowie Luhmanns Theorien über Weltkunst könnten weitere Quellen sein.

Momentan bin ich mir unschlüssig, welche Richtung ich einschlagen möchte. Die theoretischen Hintergründe, welche wir im Studio diskutiert haben, habe ich prinzipiell verstanden. Letztendlich fällt es mir aber schwer so schnell eine Verknüpfung zu meinem Thema zu finden. Hier möchte ich mir noch einige Tage Zeit geben und in den nächsten Tagen intensiv über mein Abschlussprojekt nachdenken. Dabei kommen Pro-Contra-Listen zum Einsatz und die wichtige Frage, die ich mir selbst beantworten muss, ist was ich selbst möchte. Was möchte ich mit meinem Abschlussprojekt später machen und welches Thema holt mich so leidenschaftlich ab, dass ich darin nicht nur wochenlang eintauchen möchte, sondern bestenfalls einen Forschungsschwerpunkt oder Interesse für danach finde.

Design im Prozess

Bezüglich meiner Recherche über die visuelle Evolution im Web, möchte ich einige Punkte festhalten, welche sich für mich als wichtige Eckpfeiler herauskristallisieren.

Bezüglich meiner Recherche über die visuelle Evolution im Web, möchte ich einige Punkte festhalten, welche sich für mich als wichtige Eckpfeiler herauskristallisieren.

Das Heranwachsen zum eigenen Medium

Im Gesamtüberblick ist eine Erkenntnis für mich besonders essenziell. Nämlich die, dass sich das Layout im Web aus einer zunächst technisch bedingten Fluidität ins Statische wandelt, um anschließend wieder dynamischer zu werden. Zunächst spricht man von der No-Layout-Ära, welche sich etwas bis 1996 hält. Zuvor gab es einfach keine Möglichkeiten und Ansätze, Layouts zu erstellen. Mit der anfänglichen Aufteilung durch Tabellen und Frames, konnten endlich mehrere Spalten angelegt werden, was letztendlich jedoch zur völligen Starrheit des Designs geführt hat. Diese Gestaltung, welche sich stark am Printdesign anlehnt und ein gescheiterter Versuch ist, die komplette Kontrolle über das Medium zu erhalten, wird durch die Einführung des iPhones im Jahr 2007 überflüssig. Nach und nach kommen mehr Endgeräte mit noch mehr Bildschirmgrößen auf den Markt, was bedeutet, dass ein neuer Weg gefunden werden muss, für ein flexibles Medium wie es das Web ist, zu gestalten. Ethan Marcotte führt 2010 den Begriff Responsive Design ein, welches in eine neue Fluidität des Webs mündet. Letztendlich ist es wichtig, das World Wide Web nicht als festen Rahmen zu verstehen, sondern als ein wandelbares Medium, welches sich an die Endgeräte unterschiedlichster Art anpassen sollte und dessen Kontrolle nicht ausschließlich in der Hand des Designers liegt.

Entwicklung einer eigenen Formsprache

Ein entscheidender Punkt ist für mich zudem die Entwicklung der Materialität im Web. In Bezug auf das GUI bei Computern, habe ich bereits von Metaphern gesprochen, die dafür verwendet werden, Technik verständlicher zu machen. Auch in Bezug auf UI-Elemente sehe ich diese Vorgehensweise zu Beginn des World Wide Webs. Zwar war die Gestaltung häufig in den technischen Möglichkeiten begründet, aber an vielen Stellen sieht man die Übertragung analoger Gegebenheiten ins Digitale. Ein Button war in einem Beispiel tatsächlich so entworfen, dass es einem roten Button aus dem Realen ähnelt. Weiter wurde beispielsweise bei der Einführung des iPhones der Stil des Skeuomorphismus verwendet. Auch hier finden sich Metahpern wieder, welche z. B. e-Books in einem Regal angeordnet zeigen. Funktional wäre diese Darstellung zwar nicht wichtig, dem Nutzer hilft das aber ungemein, um einen Bezug zum Realen herstellen zu können und das Neue zu begreifen. Skeuomorphismus unterscheidet sich dabei vom Realisums, bei dem aus ausschließlich visuellen Gründen, reale Materialitäten verwendet werden.

Später verwandelt sich dieser Stil ins Flat-Design, welcher wiederum durch das Material Design von Google abgelöst wird. Flat-Design stellt prinzipiell den Gegenentwurf vom Skeuomorphismus dar. Während zuvor versucht wurde, alles so realistisch wie möglich darzustellen, fällt beim Flat-Design jeder Bezug zum Realen weg. Jegliche Höhen und Tiefen gehen verloren, Schatten oder optische Schimmereffekte fallen gänzlich weg. Material Design hebt dagegen die Wichtigkeit hervor, auch reale Gegebenheiten mit in die Gestaltung einzubeziehen. Hier ist ein Button tatsächlich erhaben, Input-Felder dreidimensional eingelassen und Schatten sollen bei der Darstellung des Objekts helfen. Gleichermaßen geben Schattierungen einen Hinweis auf die Dimensionen.

Diese Entwicklung zeigt mir, dass das Medium allmählich eine eigene Formsprache für sich beansprucht. Nach vorheriger Imitation des Realen, welche durch das Flat-Design ins extreme Gegenteil umspringt, könnte durch das Material Design eine harmonische Mischung beider Welten entstehen.

Veränderte/Verschwundene GUI/Elemente

Eine dritte und letzte Feststellung, welche mir innerhalb des visuellen Parts wichtig ist, ist die Veränderung von grafischen Benutzeroberflächen sowie das gänzliche Verschwinden von Elemenenten durch neue Formen von Interfaces und kulturelle Lernprozesse.
Endgeräte wie das Smartphone oder Tablet brachten bereits neue gestalterische Herausforderungen mit sich. In Zukunft wird sich das Erscheinungsbild durch weitere Interfaces, welche es bereits gibt, wandeln. Hier denke ich an Voice Interfaces, Conversational Interfaces oder neue Technologien wie Augmented oder Virtual Reality. Des Weiteren steht der Mensch längst nicht mehr vor einem gänzlich neuen Medium, was bedeutet, dass UI-Elemente gänzlich verschwinden können. An vielen Stellen ist es dem Nutzer zwischenzeitlich bewusst, dass man eine Galerie anklicken oder die einzelnen Fotos am Handy durch Wischen durchblättern kann. Dazu braucht es keinen separaten Hinweis in z. B. Text- oder Icon-Form.

Beide Fälle werfen bei mir die Frage auf, inwiefern sich grafische Benutzeroberflächen verändern und auflösen können. Welche Information ist tatsächlich wichtig und was kennt der Mensch bereits? Welche Technologien können zum Einsatz kommen, um die Bedienung zu erleichtern und wie sähe eine Nutzeroberfläche im Extremfall bei fortgeschrittener Technologie aus? Wie weit muss die Kontrolle des Designers über die Gestaltung tatsächlich reichen?

Randlose Gestaltung

Frank Chimero teilt mit seinem Beitrag »The Web’s Grain« Überlegungen, wie man aus einer anderen Perspektive für das Web gestalten kann. Für besonders interessant und zugleich naheliegend halte ich seine Idee, randlos zu gestalten.

Frank Chimero teilt mit seinem Beitrag »The Web’s Grain« Überlegungen, wie man aus einer anderen Perspektive für das Web gestalten kann. Für besonders interessant und zugleich naheliegend halte ich seine Idee, randlos zu gestalten. Er vertritt dabei die Idee, zunächst Elemente ohne bekannte Größe der »Leinwand« zu arrangieren und sie erst dann in eine Box zu packen.1 Das steht dem häufigen Ansatz gegenüber, in festen Bildschirmgrößen zu denken – sei es nur klein, mittel, groß –, um diesen Raum auszufüllen.
Er ist zudem der Meinung, dass wir unsere Designs mit dem Hintergedanken entwickeln, wie sie am besten in der responsiven Ansicht zusammenbrechen. Vielmehr sollten wir uns darauf konzentrieren, wie sich die Elemente aufbauen.2

Seine Ansichten machen meiner Meinung nach durchaus Sinn, da das Web kein begrenzter Raum ist, wie wir es beispielsweise auf dem Printbereich kennen. Meinem Verständnis nach, geht es ihm jedoch nicht darum, den angezeigten Bereich ins unendliche auszuweiten, so dass man in alle Richtungen scrollen kann, sondern eher darum, dass man vorgefertigte Größen nicht als Grundlage der Gestaltung nehmen soll. Hier denke ich auch an Raster, welche viel zu häufig viel zu schnell zum Einsatz kommen. So hat sich eine Aufteilung in 12 oder 16 Spalten zwar bewährt, was jedoch nicht bedeuten muss, ein solches Raster sofort zu wählen. Vielmehr sollte sich die Aufspaltung aus dem Design heraus ergeben. Weiter finde ich seine Kritik berechtigt, dass zu viel darüber nachgedacht wird, wie Elemente im responsiven aussehen. Auch hier weiß man zwar aus der Erfahrung, welche Muster sich bewährt haben, was aber auch hier nicht automatisch zu einer Aufteilung ohne vorherige Gestaltung führen sollte. Die Verbreitung hat meiner Ansicht nach auch damit zu tun, dass weit verbreitete Frameworks wie beispielsweise Bootstrap die Anzahl der Spalten fest definieren. So können Webseiten schnell und funktional umgesetzt werden, was aus wirtschaftlicher Sicht natürlich sinnvoll ist.

Vor allen Dingen in Hinblick darauf, dass sich das Web aus seiner statischen Begrenztheit befreit und den Weg zurück zur fluiden Gestaltung findet, halte ich den Ansatz für spannend und für einen gelungenen Anreiz, um weiter über das Thema nachzudenken.

Quellen
  1. Vgl. Chimero, Frank: »The Web‘s Grain«, Stand: 2015, URL: https://frankchimero.com/writing/the-webs-grain/, Absatz 75, abgerufen am 6.4.2018.
  2. Vgl. Ebd., Absatz 78.

Mögliche Wege meiner Master-Arbeit

In meiner Zwischenbesprechung mit Alain Yimbou am 28.3.2018 geht es um den aktuellen Stand meines Master-Projekts sowie um die mögliche praktische Umsetzung. Mein Thema, das den Arbeitstitel »evolution of a medium« trägt, zielt auf die kulturellen, technologischen und visuellen Veränderungen des World Wide Webs von Beginn an.

In meiner Zwischenbesprechung mit Alain Yimbou am 28.3.2018 geht es um den aktuellen Stand meines Master-Projekts sowie um die mögliche praktische Umsetzung. Mein Thema, das den Arbeitstitel »evolution of a medium« trägt, zielt auf die kulturellen, technologischen und visuellen Veränderungen des World Wide Webs von Beginn an.

Mögliche Inhalte

Kulturell sind für mich die Verformung der Gesellschaft, die Auflösung geographischer Grenzen, die Infosphäre, die Neuordnung von Raum und Zeit sowie das Web als Abbild der Kultur interessant. Technologisch könnte man das Web als jeweiligen Prototype der nächsten Entwicklung sehen. Zudem ist die Technologie als Motor und Lösung spannend für mich. Entwicklungen im Frontend, wie beispielsweise die Erstellung von Web-Layouts mit Tabellen, Floats, Flexbox oder CSS Grid gehören dabei fast schon in den visuellen Bereich.

Während kulturelle und technologische Aspekte vielmehr eine Nebenrolle spielen werden, steht vor allen Dingen der visuelle Part im Vordergrund. Nachdem das Web anfänglich mit seinen sehr gegenständlichen UI-Elementen eher eine Übersetzung der materiellen Welt war, evolviert es zunehmend zu einem eigenen Medium. Weiter halte ich den Verlauf von einer »No-Layout-Ära« hin zu sehr statischen Layouts und zurück zu fluiden Umsetzungen für sehr wichtig. Auch hier ist zu sehen, dass sich das Web zunächst sehr am Printbereich orientiert hat, um sich dann als eigenes Medium zu etablieren. Die Veränderung der grafischen Benutzeroberflächen, basierend auf kulturellen Lernprozessen und technologischem Fortschritt, ist ein weiterer essenzieller Bestandteil.

Theoretischer Teil

In meinem theoretischen Part möchte ich mich neben der historischen Entwicklung des World Wide Webs und grafischer Benutzeroberflächen mit Informationssystemen, medientheoretischen Inhalten sowie allgemeinen Konzepten des World Wide Webs auseinandersetzen. Dieser Bereich bietet zwar nur oberflächliche Einblicke, hilft mir jedoch zur Orientierung und zur Erfassung des Gesamtkontexts.
Im Bereich der Informationssysteme werde ich mich unter anderem mit Paul Outlet, Vannevar Bushs Memex, J.C.R. Licklider, Ted Nelson, Doug Engelbart und Bill Atkinsons HyperCard beschäftigten. Im medientheoretischen Teil möchte ich Einblicke in die Theorien von Marshall McLuhan, Vilem Flusser, Luciano Floridi, Byung-Chul Han oder Felix Stalder geben. Hier muss eine weitere Auswahl oder Erweiterung zeigen, welche Inhalte tatsächlich relevant für meine Arbeit sein werden. Im allgemeinen könnten Konzepte wie z. B. das von Linked Open Data bereichernd sein.

Praktische Ansätze

In welche exakte Richtung mein praktisches Projekt gehen könnte, ist momentan noch unklar. Für ein spannendes Detail halte ich die zeitliche Einordnung. In diesem Jahr wird das freie World Wide Web 25 Jahre alt und das erste Proposal jährt sich im kommenden Jahr zum 30. Mal. Ich kann mir sowohl eine Ausstellung im World Wide Web als auch im realen Raum vorstellen, wobei wir die ausschließliche Präsentation im Web während des Gesprächs ausgeschlossen haben. Um die digitalen Ergebnisse physisch greifbarer zu machen, macht es durchaus Sinn eine Exposition im realen Raum zu entwickeln. Wie die finale Umsetzung aussehen könnte, muss sich allerdings während meiner weiteren Arbeit herauskristallisieren.

Wie in meinem Beitrag »evolution of a medium« schon ausgeführt, kann ich mir vorstellen, eigene Räume zu bauen und Elemente des Webs, wie beispielsweise den berühmten Sternenhimmel oder MIDI-Sound, ins Analoge zu transportieren. Weiter wäre die Übersetzung von UI-Elementen mithilfe von 3D-Druck denkbar. Im vergangenen Beitrag beschreibe ich mögliche weitere Komponenten, welche ich an dieser Stelle nicht weiter ausführen möchte.

Ausblick

Meine Arbeit könnte Fragen nach zukünftigen Veränderungen beinhalten. Sowie der Einsatz von Natural User Interfaces vieles in der Gestaltung verändert hat, gehe ich davon aus, dass Conversational User Interfaces, Voice Interfaces oder dergleichen massive Auswirkungen auf grafische Benutzeroberflächen haben werden. Auch das Konzept von Linked Open Data beziehungsweise die generelle – auch automatisierte – Darstellung von Informationen wird sicher noch viele, neue Herausforderungen für Gestalter mit sich bringen.
Vor allem die neueren Formen von Interfaces als auch die Verwendung von Technologien wie Eye-Tracking und Augmented oder Virtual Reality, könnten aus meiner Sicht die Auflösung aktueller Formen von grafischen Benutzeroberflächen mit sich bringen.

Inspirierende Projekte

Abschließend habe ich inspirierende Projekte zusammengefasst, welche ich innerhalb meiner Master-Dokumentation behandelt habe. Dazu gehört »Once Upon« von Olia Lialina und Dragan Espenschied, welche im Jahr 2011 soziale Netzwerke mit den technologischen Möglichkeiten von 1997 nachbauten. Weiter inspiriert mich von den beiden Netzkünstlern »One Terabyte of Kilobyte Age«, welches ein Archiv von geocities-Seiten darstellt, die kurz vor Schließung des Dienstes gesichert wurden. Bei beiden gefällt mir vor allen Dingen die visuelle Komponente, welche die visuelle Ästhetik der 90er Jahre widerspiegelt. »Grosse Fatigue« stellt für mich eine großartige, poetische Form dar, ein Thema zu behandeln. Eine beeindruckende Verbindung zwischen theoretischen Inhalten und visueller Darbietung sehe ich zudem in den Projekten »In Pieces« von Bryan James, »Pulse« von Markus Kison und »Laws of UX« von Jon Yablonski.

Für meine Abschlussarbeit möchte ich eine visuelle Form finden, welche die Inhalte direkt und ohne Umschweife kommuniziert und die Ästhetik des Webs gleichermaßen mit aufnimmt.

»Laws of UX« von Jon Yablonski

Gestern ging die Webseite Laws of UX (lawsofux.com) von Jon Yablonski online. Er präsentiert damit ein Regelwerk mit den wichtigsten Punkten, die ein Designer beim Erstellen von Benutzeroberflächen berücksichtigen sollte. Eine großartige Arbeit, die theoretische Inhalte hervorragend mit guter Gestaltung verbindet.

Gestern ging die Webseite Laws of UX (lawsofux.com) von Jon Yablonski online. Er präsentiert damit ein Regelwerk mit den wichtigsten Punkten, die ein Designer beim Erstellen von Benutzeroberflächen berücksichtigen sollte.

Meiner Ansicht nach punktet er dabei nicht nur mit den Inhalten bzw. den Regeln selbst, sondern setzt sie zusätzlich großartig in Szene.

Gelangt man auf die Seite sieht man bildschirmfüllend lediglich eine grafische Karte mit dem Titel der jeweiligen Regel, einen kurzen erklärenden Text sowie einen Button mit »Learn more«. Dezent im Hintergrund – Ton in Ton – erscheint die Ordnungsnummer der Regel sowie ein grafisches Element. In dieser Ansicht kann man sich durch die einzelnen Regel-Teaser scrollen. Eine seitliche Navigation verweist auf soziale Netzwerke, über das Burger-Menu erreicht man die Navigation, die alle Inhalte im Überblick zeigt.

Laws of UX Jon Yablonski Fitt‘s Law
Laws of UX – Fitt‘s LawII
Laws of UX Jon Yablonski Law of Proximity
Laws of UX – Law of ProximityIII
Laws of UX Jon Yablonski Miller‘s Law
Laws of UX – Miller‘s LawIV
Laws of UX Jon Yablonski Serial Position Effect
Laws of UX – Serial Position EffectV
Laws of UX Jon Yablonski Navigation
Laws of UX – NavigationVI

Klickt man sich in eine Regel, sind – wieder bildschirmfüllend – eine Farbfläche im Hintergrund, der Titel, die Ordnungsnummer sowie dezente grafische Elemente zu sehen. Der Aufbau vollzieht sich dabei in zurückhaltenden, wirkungsvollen und meiner Ansicht nach visuell sehr ansprechenden Animationen.
Scrollt man nun weiter, erhält man einen bei allen Regeln den strukturell gleichen Überblick über sie. Die »Übersicht«, den »Ursprung« sowie weitere Leseempfehlungen.

Laws of UX Jon Yablonski Fitt‘s Law Detail
Laws of UX – Fitt‘s LawVII
Laws of UX Jon Yablonski Miller‘s Law Detail
Laws of UX – Miller‘s LawVIII
Laws of UX Jon Yablonski Miller‘s Law Detail
Laws of UX – Miller‘s LawIX

Insgesamt halte ich das Projekt für eine großartige Arbeit, die zeigt wie man theoretische Inhalte visuell ansprechend inszenieren kann. Generell fällt mir auf, dass mir vor allem die Arbeiten im Gedächtnis bleiben, die sowohl mit theoretischen Inhalten als auch mit hervorragender Gestaltung bzw. Umsetzung hervorstechen. Dazu gehören beispielsweise auch »In Pieces« von Bryan James oder »Pulse« von Markus Kison. Mit »theoretischen Inhalten« meine ich dabei nicht allein Daten, die so auch auf Unternehmenswebseiten oder ähnlichen auftauchen können. Ich verstehe darunter ein gut recherchiertes Thema dessen Hauptinhalte durch gute Gestaltung fokussiert und in Szene gesetzt werden. So basiert »In Pieces« beispielsweise auf dem Wissen über bedrohte Tierarten, »Pulse« dagegen auf einer Emotionstheorie von Robert Plutchik aus dem Jahr 1980.
Diese Arbeiten sowie das aktuelle Projekt von Jon Yablonski verdeutlichen mir im Bezug auf meine Masterarbeit zunehmend, welche Schwerpunkte für mich immer bedeutender werden.

Abbildungen
  1. Titelbild: Eigener Screenshot; Yablonski, Jon: »Laws of UX«, URL: http://lawsofux.com, abgerufen am 16.1.2018.
  2. Eigener Screenshot; Yablonski Jon: »Laws of UX«, URL: http://lawsofux.com, abgerufen am 16.1.2018.
  3. Ebd.
  4. Ebd.
  5. Ebd.
  6. Ebd.
  7. Eigener Screenshot; Yablonski, Jon: »Laws of UX«, URL: http://lawsofux.com/fitts-law.html, abgerufen am 16.1.2018.
  8. Eigener Screenshot; Yablonski, Jon: »Laws of UX«, URL: http://lawsofux.com/millers-law.html, abgerufen am 16.1.2018.
  9. Ebd.

Die Anfänge der grafischen Benutzeroberfläche

Während meinen Nachforschungen bezüglich der grafischen Veränderungen im Web, gelange ich unweigerlich an den Ursprung der meisten heutigen GUIs. Obwohl das GUI grundsätzlich vom Webdesign zu unterscheiden ist, ist es für mich zum einen wichtig, die Ursprünge dessen zu erkunden, was uns heutzutage die Gestaltung im Web überhaupt ermöglicht. Zum anderen ist für mich der damalige Umgang mit gestalterischen Elementen spannend, welcher noch mehr von der Technologie bestimmt wurde als heute.

Während meinen Nachforschungen bezüglich der grafischen Veränderungen im Web, gelange ich unweigerlich an den Ursprung der meisten heutigen GUIs. Obwohl das GUI grundsätzlich vom Webdesign zu unterscheiden ist, ist es für mich zum einen wichtig, die Ursprünge dessen zu erkunden, was uns heutzutage die Gestaltung im Web überhaupt ermöglicht. Zum anderen ist für mich der damalige Umgang mit gestalterischen Elementen spannend, welcher noch mehr von der Technologie bestimmt wurde als heute.

Die Entwicklung des Konzepts der GUIs wird üblicherweise dem Forschungszentrum Xerox Palo Alto Research Center (Xerox PARC) zugeschrieben. Das ist zwar grundsätzlich richtig, jedoch kann diese Entwicklung nicht gänzlich isoliert betrachtet werden – ihr gingen jahrzehntelange Forschung voraus.

Sketchpad und Spacewar! als Inspiration für Doug Engelbart

Frühe interaktive, grafische Anwendungen wie Ivan Sutherlands »Sketchpad« (1962) oder das von Steve Russell am MIT entwickelte Spiel »Spacewar!« (1962) waren Teil dieser Evolution. Vor allem Sketchpad soll Doug Engelbart in seiner Arbeit inspiriert haben,1 welcher erst 1968 das oN-Line System (NLS) demonstrierte. Das NLS unterstütze dabei schon viele Eigenschaften moderner Computer wie beispielsweise Bitmap-Grafiken, Videokonferenzen, Textverarbeitung oder die kollaborative Bearbeitung von Dokumenten in Echtzeit. Des weiteren erinnert die Benutzung der von ihm erfundenen Maus sowie die Verwendung von Fenstern an heutige Verhältnisse.2

Sketchpad Ivan Sutherland
Der Erfinder Ivan Edward Sutherland bedient sein Programm Sketchpad, welches 1962 innerhalb seiner Dissertation entstanden ist. Sketchpad gilt als erstes Programm mit grafischer Benutzeroberfläche. Mithilfe eines Lichtgriffels, einem Vorläufer der Maus als Eingabegerät, konnte direkt auf dem Bildschirm gezeichnet werden.II
In der Zusammenfassung in einer seiner Schriften heißt es: »Es wurde verwendet, um elektrische, mechanische, wissenschaftliche, mathematische und animierte Zeichnungen zu zeichnen«3.
Spacewar! von Steve Russell
Steve Russells Erfindung »Spacewar!« auf dem PDP-1, welches als eines der ersten grafischen Computerspiele gilt und 1962 fertiggestellt wurde. Auch hier wird der Lichtgriffel als Eingabegerät genutzt.III

Xerox Alto mit dem WIMP Interface

Ein interessanter Verlauf ist der, dass – durch die Reduzierung staatlicher Finanzierungen – viele von Engelbarts Team zum neu gegründeten Xerox PARC wechselten. Dort wurde 1973 mit dem Xerox Alto der erste wirkliche Computer mit einer grafischen Benutzeroberfläche fertiggestellt. Das grafische Konzept orientierte sich dabei an bekannten Mustern, weshalb der 2D-Bildschirm als Oberfläche eines Schreibtisches dargestellt wurde. Innerhalb von einzelnen Rahmen wurden die Programme angezeigt, welche wir heute als Fenster bzw. auch im deutschen als windows kennen. Aus der realen Welt wurden weitere Hilfsmittel wie ein Kalkulator oder die Uhr übernommen, welche frei platzierbar waren. Diese Metapher wird auch »Schreibtisch-Metapher« genannt.4 Bis heute werden Metaphern dieser Art genutzt – noch immer verwenden wir einen sehr abstrahierten Schreibtisch mit Ordnern oder einem Papierkorb. Beides war in dieser Version jedoch noch nicht vorhanden.

Das Alto Team verwendete für seine Gestaltung Windows, Icons, Menüs sowie Zeiger (Pointer). Diese Art wird als WIMP Interface bezeichnet und ist bis heute weitestgehend in Verwendung. Zudem bot Alto wiederverwendbare, grafische Bausteine wie Buttons, Chechboxen oder Tabs an, aus denen GUI-Anwendungen entwickelt werden konnten. Auch sie waren an Objekte der realen Welt angelehnt.5

Grafische Benutzeroberfläche des Xerox Alto
Das Dynabook, entwickelt von Alan Kay, gilt als konzeptioneller Vorläufer des Xerox Alto. Die Grafik zeigt die grafische Benutzeroberfläche des Xerox Alto, welche – dem Bildschirm entsprechend – vertikal statt horizontal ist. Die Grafik zeigt, dass das GUI bereits aus einzelnen, sich überlappenden Fenstern sowie Symbolen bestand. Alan Kay und sein Team entwickelten als Softwareumgebung die objekt-orientierte Programmiersprache SmallTalk. Um mit Dokumenten, Anwendungen und Co. interagieren zu können, konnten Symbole, Dialogfelder und Dropdown-Menüs angeklickt werden.IV

Xerox Star – Cut, Copy, Paste

Vom Xerox Alto gab es nur 2000 Exemplare, mit denen intern oder an Universitäts-Laboren gearbeitet wurde. Sie wurden nie kommerziell verkauft und 1981 kam die Folgeversion Xerox Star mit verbesserter Hard- und Software auf den Markt. Bei dieser Version wurde die Schreibtisch-Metapher weiter ausgereizt, so dass Dateien wie Papier aussahen und in Ordnern oder virtuellen Aktenschränken verstaut werden konnten.6 Auch weitere Funktionen, die wir heute verwenden, wurden mit dem Xerox Star eingeführt. Es sollte die Möglichkeit bestehen, Veränderungen unsichtbar zu machen, was mit Cut, Copy und Paste gelang. Die Idee dahinter war zudem, dass ausgedruckte Dokumente ein perfektes Abbild realer Versionen sein sollten. Das wurde »What-You-See-Is-What-You-Get« (WYSIWYG) genannt7 und ist bis heute ein weit verbreiteter Terminus.

Grafische Benutzeroberfläche des Xerox Star
Grafische Benutzeroberfläche des Xerox StarV

Im folgenden Verlauf möchte ich mich zwar weiterhin mit der Entwicklung grafischer Benutzeroberflächen beschäftigen und etwas detaillierter auf die Interfaces selbst eingehen. Insgesamt wird die Beobachtung aber eher oberflächlich bleiben, da mein Fokus sehr klar auf der Evolution im Web selbst liegt.

Quellen
  1. Vgl. Philbin, Carrie Ann, CrashCourse: »Graphical User Interfaces: Crash Course Computer Science #26«, Stand: 30.8.2017, URL: https://www.youtube.com/watch?v=XIGSJshYb90, TC: 00:01:58–00:02:36, abgerufen am 12.1.2018.
  2. Vgl. Ebd., TC: 00:02:36–00:02:53.
  3. Sutherland, Ivan Edward: »Sketchpad: A man-machine graphical communication system«, Stand: September 2003, URL: http://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.html, abgerufen am 12.1.2018.
  4. Vgl. Philbin, Carrie Ann, CrashCourse: »Graphical User Interfaces: Crash Course Computer Science #26«, Stand: 30.8.2017, URL: https://www.youtube.com/watch?v=XIGSJshYb90, TC: 00:03:03–00:04:36, abgerufen am 12.1.2018.
  5. Vgl. Ebd.
  6. Vgl. Ebd., TC: 00:06:30–00:07:00.
  7. Vgl. Ebd., TC: 00:07:05–00:07:48.
Abbildungen
  1. Titelbild: Hicks, Michael: »Xerox PARC Alto with mouse and chorded keyset.«, Stand: 3.11.2013, via Wikimedia Commons, abgerufen am 13.1.2018, Lizenz: CC BY 2.0.
  2. Von Kerry Rodden gescanntes Originalfoto von Ivan Sutherland: »Sketchpad Dissertation: Ivan Sutherland operating the Sketchpad system.«, Stand: 1.1.1963, via Wikimedia Commons, abgerufen am 13.1.2018, Lizenz: CC BY-SA 3.0.
  3. Ito, Joi: »Spacewar! auf einer PDP-1 des Computer History Museums.«, Stand: 12.5.2007, via Wikimedia Commons, abgerufen am 13.1.2018, Lizenz: CC BY 2.0.
  4. parc – A Xerox Company: »Smalltalk GUI«, URL: https://www.parc.com/newsroom/media-library.html, abgerufen am 13.1.2018.
  5. Baecker, Ronald M.; Buxton, William; Greenberg, Saul; Grudin, Jonathan: »Reading in Human-computer Interaction: Toward the Year 2000«, Burlington (MA) 1995, S. 57.

evolution of a medium

Mein Master-Projekt wird nun immer konkreter. Nach meiner bisherigen Recherche zur Entwicklung des World Wide Web, präzisiert sich meine Vorstellung, welche theoretische Auseinandersetzung und welche praktische Umsetzung Teil meiner Arbeit werden können.

Mein Master-Projekt wird nun immer konkreter. Nach meiner bisherigen Recherche zur Entwicklung des World Wide Web, präzisiert sich meine Vorstellung, welche theoretische Auseinandersetzung und welche praktische Umsetzung Teil meiner Arbeit werden können.

Die erste Fragestellung innerhalb meines Master-Studiums beinhaltet bereits erste Gedanken meines jetzigen Ansatzes. Nichtsdestotrotz habe ich sehr breit recherchiert, da mir auf meinem Weg unzählige spannende Themen begegnet sind, die mich stets in eine neue Richtung gelenkt haben. Ich hatte viele Ideen von zu plump bis zu komplex und habe enorm viel Kraft in die theoretische Arbeit gesteckt. Ich habe viel gelesen und recherchiert, viel geschrieben und verworfen.

Während meiner Master-Zeit hatte ich ab und an das Gefühl den Wagen fälschlicherweise von hinten aufzurollen. Habe mich aber aus Leidenschaft nicht davon abbringen lassen.
Ich habe mir kein Thema XY ausgesucht für das ich nun ein passendes Medium für die praktische Umsetzung suche, sondern ich beschäftige mich von Anfang an mit dem Medium selbst. So liebe ich beispielsweise Netzkunst, weil sie oft eine besondere Art hat mit dem Medium Web umzugehen und eine außergewöhnliche, visuelle Sprache spricht. Ich interessiere mich für die Auflösung virtueller und nicht-virtueller Grenzen, die Veränderung der Gesellschaft durch die virtuelle Welt und für die Theorien von beispielsweise Flusser und McLuhan. Ich bin überzeugt davon, dass sich Schnittstellen zunehmend auflösen und eine neue Art der Kommunikation entsteht. Ich bin begeistert von neuen Technologien und mich bewegen Projekte, die Theorie und Praxis lückenlos verschmelzen.

Letztendlich merke ich jedoch, dass meine Gedanken häufig um ähnliche Themen kreisen. Dazu gehören wiederkehrend die Anfänge und die Entwicklung des World Wide Web, die mich sowohl visuell, technologisch als auch kulturell interessieren. Das Medium selbst wurde lange wie eines behandelt, das ausschließlich die nicht-virtuelle Welt in die virtuelle überträgt. Webseiten waren »Schaufenster« des realen Lebens, Buttons waren zum Teil rote Knöpfe mit Schrift und Baustellenschilder zeigten, dass die Webseite noch in Bearbeitung ist. Das Verständnis für das Medium wächst zunehmend und wir wissen zwischenzeitlich, dass Webseiten so gut wie immer »under construction« sind. Zum einen kann aus meiner Sicht erst eine spezifische, visuelle Sprache für ein Medium entwickelt werden, sobald das Medium verstanden wird – sprich, dass das Web kein Buch ist. Auf der anderen Seite frage ich mich, ob nicht gerade dieser spielerische Umgang mit einem unbekannten Medium – wie er in den 90er Jahren stattfand – die unantastbarste und »originalste« Sprache von allen spricht.
In meiner bisherige Recherche zeigt sich, dass sich die visuelle Sprache immer weiter von der materiellen Welt entfernt und sich das Web zunehmend zu einem eigenen Medium entwickelt. Neben visueller und kultureller Veränderungen, halte ich hierfür auch die technologischen Entwicklungen für sehr wichtig. So nutzte man teils solange wie nötig die default styles für z.B. Buttons und ersetzt sie nach und nach mit Grafiken und letztendlich Code.

Der bisher stärkste Ansatz ist meiner Ansicht nach eine Ausstellung anlässlich des 25-jährigen Jubiläums des freien Webs. Dabei kann ich mir zum einen eine interaktive Webausstellung vorstellen, aber auch eine nicht-virtuelle Exhibition mit gebauten Räumen voller Sternenhimmeltapeten und MIDI-Sound. Die Ausstellung könnte die Entwicklung des Web zeigen. Dabei wären aus meiner Sicht die visuellen Veränderungen im Vordergrund.
Ich möchte zum einen schon zum Teil gesammelte und katalogisierte UI-Elemente zusammenführen, um grafische Veränderungen deutlich zu zeigen. Die Elemente stammen dabei von verschiedenen Unternehmen, die auch in der Wayback Machine des Internet Archive zu finden sind: https://archive.org/web/. Ein erster Ansatz der Auswahlkriterien ist in meinem Beitrag »Evolution der Webästhetik« zu finden. Dabei steht noch offen, ob diese – dem Plan nach mehrere tausend – Elemente im Zentrum stehen oder einfach nur ein Pattern für die Ausstellung darstellen könnten. Zudem soll eine inhaltlich-kulturelle Komponente hinzukommen, die ich noch erarbeiten muss und eine poetische Ebene enthalten kann. Eine weitere Komponente könnte die Frage nach dem Danach sein, da ich mir unter anderem die Frage stelle, ob grafische Benutzeroberflächen durch neue Technologien wie z.B. Voice Interfaces ersetzt werden können.

An dieser Stelle wird mein Titel »Digitale Primaten« wieder mit der anfänglichen Bedeutung belegt. Nämlich, dass Menschen der Technologie noch immer hinterherhinken und wohl auch nicht mehr aufholen werden. Mein gewählter Arbeitstitel ist »digital primates – evolution of a medium« in englischer oder deutscher Form.

Reflet Communication – Ein Must-See

Die französische Kommunikationsagentur Reflet Communication zaubert eine Seite, die mich in ihrem Gesamterscheinungsbild und in ihrer Navigation sehr positiv überrascht.

Heute gibt es einfach nur ein kleines Must-See für zwischendurch:
http://www.refletcommunication.com/.

Die französische Kommunikationsagentur Reflet Communication zaubert eine Seite, die mich in ihrem Gesamterscheinungsbild und in ihrer Navigation positiv überrascht.

Vollflächige Fotos, die beim Bewegen der Maus sachte mitschwingen, untermalt von leichtem Sound. Sehr wenige Wörter und dünne Grafiken, die der Navigation dienen und minimal animiert sind. Sie unterstreichen die leichte Anmutung. Auf jeder Seite steht ein Wort in großen serifenlosen Lettern. Mit gedrückter Maustaste kann man dieses Wort zur Phrase »ziehen«.
Erst durch Scrollen schiebt sich eine Ebene mit Textelementen über etwa 75 % des Bildschirms, so dass man nun mehr über die Agentur erfährt.

Reflet Communication Interface Design
Reflet Communication | passionII
Reflet Communication Interface Design
Reflet Communication | youthIII

Insgesamt konzentriere mich dabei nur auf das Look and Feel der Seite und es macht Spaß mit ihr zu interagieren, hier und da ein paar Bewegungen auszulösen. Die Tiefeneffekte sind zum Teil großartig.

Inhaltlich bin ich mir noch etwas unschlüssig, ob man als Nutzer mehr Spaß am Spiel hat oder tatsächlich auf den ersten Blick erfährt, was die Agentur zu bieten hat. Jemandem mit ernsthaften, inhaltlichen Interessen steht aber ausreichend Text zur Verfügung.

Die Website ist unter anderem mit dem JavaScript-Webframework AngularJS gebaut.

Abbildungen
  1. Titelbild: Eigener Screenshot; Reflet Communications, URL: http://www.refletcommunication.com/en/experience, abgerufen am 17.10.2017.
  2. Eigener Screenshot; Reflet Communications, URL: http://www.refletcommunication.com/en/passion, abgerufen am 17.10.2017.
  3. Eigener Screenshot; Reflet Communications, URL: http://www.refletcommunication.com/en/youth, abgerufen am 17.10.2017.

Die Erarbeitung eines Designsystems für digitale Produkte

Zur weiteren Recherche im Bezug auf Designsysteme arbeite ich mit dem Buch »Design Systems – A practical guide to creating design languages for digital products.« von Alla Kholmatova. Im Gesamten dient es als gute Grundlage, die die Umsetzung eines Designsystems in der Praxis zeigt.

Zur weiteren Recherche im Bezug auf Designsysteme arbeite ich mit dem Buch »Design Systems – A practical guide to creating design languages for digital products.« von Alla Kholmatova. Das Buch erscheint digital in zwei Hälften – eine Mitte des Jahres, die andere im September 2017. Anschließend liegt das Buch auch als Printausgabe vor.

Im Gesamten dient es als gute Grundlage, die die Umsetzung eines Designsystems in der Praxis zeigt. Mit vielen Beispielen von Unternehmen wie sipgate, TED, Airbnb oder FutureLearn wird verständlich, inwiefern sich die Erstellung der sowie die Arbeit mit Designsystemen von Team zu Team unterscheiden. Parameter wie z. B. die Team- und Projektgröße oder die generelle Arbeitsweise sind dafür entscheidend und müssen individuell gehandhabt werden.

In kleineren Teams hat der einzelne mehr Einblick und Verantwortung, in größeren müssen Verantwortlichkeiten eventuell anders verteilt werden.1 Zudem müssen die Designprinzipien für jeden verständlich sein. Das bedeutet entweder, dass im Team wirklich jeder weiß, welche Grundsätze gelten oder dass die fundamentale Gestaltungslinie eindeutig dokumentiert ist. Auch in der Anwendung der Systeme muss klar sein, ob die Regeln strikt oder eher locker eingehalten werden. Während beispielsweise bei Airbnb alles exakt festgelegt ist und die Pattern strikt angewendet werden müssen,2 sind bei dem kleineren Team von TED ein offener Umgang und mehr Flexibilität zu finde.3 Bei einer rigorosen Einhaltung der Regeln muss das Designsystem dementsprechend so gut konzipiert sein, dass die Gestaltung trotz Modularität nicht generisch wirkt.4

Bei der Dokumentation bzw. im allgemeinen Verständnis des jeweiligen Systems ist zudem das gemeinsame Sprachverständnis wichtig. So nennt sie das Beispiel eines Sequenz-Moduls.5 Dieses Modul sollte für jeden Sequenz heißen, nicht »Wizards Control« oder »Fancy Bubbles«.6 Des Weiteren sollten die Ausdrücke eindeutig so gewählt werden, dass man auch als Designer, der nicht bis in die Tiefen des Projekts involviert ist, weiß um welches Element es sich handelt. Neben dem klaren Einsatz des Elements werden Dopplungen durch Neugestaltung verhindert. Bestimmte Buttons wurden bei FutureLearn »Minions« genannt, ein großer Button heißt »Boss«7. Durch diese Benennung wird klar, dass es nur einen großen Button auf der Seite geben kann, da es nur einen Boss gibt. Diese metaphorische Benennung halte ich – insofern man für alle Elemente ähnliche Bezeichnungen finden kann – für sehr vorteilhaft. Ein weiteres Beispiel ist die »Whisperbox« sowie eine zugefügte Komponente namens »Boombox«. Schon im Wortlaut wird klar, welches der beiden zurückhaltend leise und welches prominent laut ist. Die Autorin schlägt generell vor sich vorzustellen, dass das Interface nicht visuell ist, sondern laut vorgelesen wird. Dadurch erkennt man schnell, ob man in Bezug auf die »Visual loudness scall« bereits ein Element der gleichen Lautstärke vorhanden ist.8

Kholmatova unterteilt die Pattern in zwei große Gruppen. Die funktionalen sowie die, die der Wahrnehmung zuzuordnen sind. Zur Unterscheidung kann man sich vorstellen, dass funktionale im HTML-, zweitere typischerweise im CSS-Code zu finden sind.9 Noch klarer macht sie es mit dem Beispiel eines Hauses, indem alle Möbel funktional dieselben sein können. Jeder hat etwa einen Tisch, ein Sofa oder ein Bett. Und doch macht der Stil den großen Unterschied, ob man sich in der Umgebung wohl oder sogar völlig fehl am Platz fühlt.

Insgesamt könnte ich noch unzählige weitere Absätze verfassen. Wenn man in diesem Bereich arbeitet, sind zwar einige Dinge nicht überraschend neu, dennoch fühlt es sich gut an sie zum einen gesammelt niedergeschrieben zu sehen und zum anderen einen Einblick in die Arbeit anderer zu bekommen. Vor allem die Methodik anderer Unternehmen zu verstehen, finde ich sehr spannend. Zudem gibt es natürlich trotzdem viele neue Erkenntnisse und das Buch hilft hervorragend die eigene Arbeitsweise zu analysieren und zu hinterfragen. Aus diesem Grund empfehle ich das Buch absolut jedem, der sich für Designsysteme interessiert.

Quellen
  1. Vgl. Kholmatova, Alla: »Design Systems«, Freiburg 2017, S. 144.
  2. Vgl. Ebd., S. 136.
  3. Vgl. Ebd., S. 140.
  4. Vgl. Ebd., S. 99.
  5. Vgl. Ebd., S. 29.
  6. Vgl. Ebd., Freiburg 2017, S. 30.
  7. Ebd., S. 114.
  8. Vgl. Ebd., S. 78.
  9. Vgl. Ebd., S. 27.

Die Schaffung veränderbarer Räume im Web

Im Anschluss an meinen Text »Von der No-Layout-Ära zur wiedergewonnenen Fluidität des Webs« möchte ich mich kurz und knapp mit einem Artikel von Ethan Marcotte aus dem Jahr 2010 beschäftigen. Marcotte, Begründer des Terminus »Responsive Web Design«, beschreibt darin seinen Ansatz, Webseiten unabhängiger von ausgewählten Endgeräten zu entwickeln.

Im Anschluss an meinen Text »Von der No-Layout-Ära zur wiedergewonnenen Fluidität des Webs« möchte ich mich kurz und knapp mit einem Artikel von Ethan Marcotte aus dem Jahr 2010 beschäftigen. Marcotte, Begründer des Terminus »Responsive Web Design«, beschreibt darin seinen Ansatz, Webseiten unabhängiger von ausgewählten Endgeräten zu entwickeln. Er verfolgt dabei den Vorschlag mit Media Queries zu arbeiten, auf welche ich an dieser Stelle nicht weiter eingehen möchte. Sie sind zwischenzeitlich zum Standard-Werkzeug responsiver Gestaltung geworden.

Viel reizvoller finde ich seine Verknüpfung zwischen »responsive architecture« und der Gestaltung im Web. Dabei geht es grundsätzlich um die Frage, »wie physische Räume auf die Anwesenheit von Passanten reagieren können«1. Mit Bezug auf das Buch Interactive Architecture von Michael Fox und Miles Kemp, kristallisiert er den feinen Unterschied heraus: Es geht nicht darum unveränderliche Räume zu schaffen, sondern darum, dass sich die Nutzer und die Struktur gegenseitig beeinflussen können.2 Das ist vor allen Dingen wichtig, da das Web ein vergängliches Medium ist. Innerhalb weniger Jahre ändern sich Fensterbreiten, Bildschirmauflösungen, Benutzereinstellungen oder installierte Schriftarten.3 Viel mehr spricht er sich dagegen aus, das Design auf immer mehr unterschiedliche Endgeräte zuschneiden zu wollen. Er ist überzeugt davon, dass wir als Webdesigner »ein optimales Seherlebnis entwerfen und standardbasierte Technologien in unser Design einbetten können, um sie nicht nur flexibler zu machen, sondern auch an die Medien anzupassen, die sie rendern«4. Nur so kann man effektiv mit der Tatsache arbeiten, dass sich die Landschaft an angebotener Betrachtungsmöglichkeiten enorm schnell ändert.5

Wichtig ist Marcotte dabei nicht nur das visuelle Ergebnis, sondern auch die Möglichkeit die Benutzerfreundlichkeit verbessern zu können. So kann beispielsweise Fitts’ Gesetz über Touch-Geräte besser umgesetzt werden.6

Die drei technischen Zutaten für RWD

Als primäre Zutaten zur Umsetzung von responsiven Webdesigns sieht Marcotte flüssige Raster, flexible Bilder und Medienabfragen. Zudem ist eine andere Denkweise in Bezug auf das Medium erforderlich,7 das sich letztendlich sehr stark vom Printdesign unterscheidet und somit sehr viele neue Herausforderungen an den Gestalter herangetragen hat.

Abschließend ist der Ansatz der Media Queries aus heutiger Sicht eine Selbstverständlichkeit. Im Jahr 2010 war die Einführung des »Responsive Web Design« jedoch eine massive Neuerung. Schon zuvor gab es z. B. verschiedene Bildschirmgrößen oder -auflösungen und schon durch das iPhone, das 2007 auf den Markt kam, ist das Bedürfnis gewachsen, flexibler reagieren zu können. Langfristig macht es bei der Masse an Geräten aber natürlich keinen Sinn für jedes separate Versionen zu gestalten. In der Übergangszeit und auch bis heute, sieht man zudem Webseiten, welche komplett abgekoppelt für mobile Endgeräte entwickelt sind und sogar mit einer eigenen Subdomain angesprochen werden. In manchen Fällen macht das sicher nach wie vor Sinn, doch insgesamt sollte im Vordergrund stehen, sich anpassende Seiten zu gestalten, die auch die nächsten Endgeräte überstehen.
In Bezug auf mein Thema finde ich es außerdem sehr spannend, wie sich erneut Technologie, Design und das Bedürfnis der Menschen gegenseitig beeinflussen und Schritt für Schritt in ihrer Evolution voranbringen.

Quellen
  1. Marcotte, Ethan: »Responsive Web Design«, Stand: 25.5.2010, URL: https://alistapart.com/article/responsive-web-design, Absatz 8, abgerufen am 26.6.2017.
  2. Vgl. Ebd., Absatz 9.
  3. Vgl. Ebd., Absatz 2.
  4. Ebd., Absatz 10.
  5. Vgl. Ebd., Absatz 3.
  6. Vgl. Ebd., Absatz 27.
  7. Vgl. Ebd., Absatz 31.

CSS Grid: Der Weg zu einer neuen, visuellen Ästhetik

Eines meiner persönlichen Ziele während des Masters ist, mich in den Bereichen HTML und CSS, bestenfalls auch in JS, weiterzuentwickeln. Zurzeit widme ich der noch etwas neueren Spezifikation CSS Grid. Im März habe ich bereits am Meetup »Grids and Glory« von Sven Wolfermann in den Räumen von sipgate in Düsseldorf teilgenommen. Als weitere Grundlage dient mir das Tutorial »CSS Grid First Look« von Morten Rand-Hendriksen aud lynda.com. Generell bin ich gespannt, wie sich die visuelle Ästhetik des Webs in den nächsten Jahren durch diese neue Spezifikation evolviert.

Eines meiner persönlichen Ziele während des Masters ist, mich in den Bereichen HTML und CSS, bestenfalls auch in JS, weiterzuentwickeln. Zurzeit widme ich mich der noch etwas neueren Spezifikation CSS Grid. Im März habe ich bereits am Meetup »Grids and Glory« von Sven Wolfermann in den Räumen von sipgate in Düsseldorf teilgenommen. Als weitere Grundlage dient mir das Tutorial »CSS Grid First Look« von Morten Rand-Hendriksen auf lynda.com.

Nach der ersten Einarbeitung bin ich begeistert von den Möglichkeiten, die CSS Grid mit sich bringt. Zunächst muss man sich an die neue Terminologie gewöhnen, die das CSS Grid mit ins Spiel bringt. So gibt es neben »grid cells«, eine einzelne Zelle eingeschlossen von vier »grid lines«, sogenannte »grid tracks«, die den Bereich zwischen zwei horizontalen oder vertikalen Linien darstellt. Zusätzlich gibt es »grid areas«, die im Grunde aus mehreren zusammenhängenden Zellen bestehen. Es gibt noch weitere Begriffe, die zum Teil aber schon aus bisherigen Rastern bekannt sind.

Benennung von template areas oder grid lines

Neben einer neuen Terminologie gibt es natürlich neue Selektoren. Doch die Beschreibung der Eigenschaften ist das Wesentliche, was für mich wirklich neu ist. So können beispielsweise template areas oder grid lines, in denen die grid cells eingeschlossen sind, benannt werden. Das führt zum einen dazu, dass mithilfe »unserer Sprache« der Code und die einzelnen Bereiche übersichtlicher dargestellt werden. Zum anderen halte ich es jedoch für sehr wichtig, die Freiheit nicht zu sehr auszukosten. Die Benennung sollte eindeutig sein, so dass auch nachfolgende Entwickler die einzelnen Bereiche eindeutig erkennen können und keine Unklarheiten auftauchen. Da aber zum einen schon immer Klassen bzw. IDs selbst benannt werden konnten und zum anderen bereits standardisierte Begriffe für Webseitenbereiche vorhanden sind, sehe ich das nicht als wirkliches Problem.

Zusätzlich zu der Benennung ist die Einführung der repeat()-Funktion eine fundamentale Änderung. Muster können so durch Wiederholungen erstellt werden.

Die neue Einheit fraction

Die Einführung der Einheit »fraction« (fr) ist eine weitere wichtige Neuerung durch CSS Grid. Neben dem Vorteil, dass die ein oder andere Rechenarbeit entfällt, halte ich es vor allem für spätere Anpassungen für enorm wichtig. Soweit mein erster Eindruck stimmt, kann das Grid dadurch sehr schnell nachträglich geändert und z. B. mit zusätzlichen Spalten erweitert werden. Wenn zunächst nur mit der Einheit fr gearbeitet wird, genügt es weitere frs hinzufügen oder die Spaltenzahl durch weniger frs zu reduzieren. Insofern nicht einzelne Spalten pixelgenau oder in Prozenten angegeben sind, entfällt hier jegliche Rechnerei.
Wenn es für das Layout infrage kommt, kann fr selbst mit Angabe von genauen Maßen genutzt werden, da die Einheit grundsätzlich den übrigen Platz in Anspruch nimmt.

Veränderung der semantischen Ordnung durch CSS

Die wohl mächtigste Veränderung ist die Möglichkeit, die semantische Ordnung einfacher durch CSS verändern zu können. Elemente können zielgenau im Grid positioniert und mobile Seiten intuitiver gestaltet werden. Zudem zeigt Morten Rand-Hendriksen ein Beispiel, indem die semantische Ordnung von wichtig nach unwichtig sortiert ist. Ein Promo-Inhalt wird am Ende des HTML-Dokuments platziert, da er für den Inhalt irrelevant ist. Visuell wird er jedoch an den Anfang der Website gesetzt, um die Anzeige prominent zu bewerben.

Ästhetische Evolution durch neue Spezifikationen

Insgesamt ist es erstaunlich wie flexibel CSS Grid funktioniert und ich halte die Spezifikation für eine der größten Neuerungen der letzten Jahre. Mit der Unterstützung von Codecademy, w3schools und CodePen versuche ich noch spezifische Fragen für mich zu beantworten, jedoch bin ich mir sicher, dass man mit einiger Einarbeitung, sehr viel schneller äußerst flexible Grids erstellen kann. Aus visueller Sicht erhoffe ich mir zunehmend flexiblere Layouts, weg von dem Einheitsbrei der letzten Jahre. Selbst mit Frameworks wie Bootstrap kann man natürlich abweichende Layouts entwickeln, doch landet man viel zu oft an der einheitlichen Aufteilung von 2 bis 4 Spalten in der Desktopansicht, sowie der 12-Spaltigkeit bei mobilen Ansichten. Zwar macht diese Einteilung in vielen Fällen Sinn, jedoch bin ich davon überzeugt, dass sich das visuelle Bild des Webs in den nächsten Jahren deutlich ändern wird. Abschließend bin ich zum einen gespannt, in welche Richtung sich sowohl die Spezifikation des CSS Grids als auch das generelle visuelle Erscheinungsbild in den nächsten Jahren evolviert. Zudem bin ich sehr motiviert durch Tutorials, Lernportalen und ähnlichem weiter in die Materie einzutauchen.

Beispielhaftes Layout mit CSS Grid
Beispielhaftes Layout mit CSS Grid

Die Master-Arbeit: Fokussierung

Zu Beginn meines Master-Studiums habe ich mich unter anderem mit der Frage auseinandergesetzt, inwiefern sich das Web auf gestalterischer und kultureller Ebene verändert hat. Nachdem ich nun lange Zeit breit recherchiert und mich auch mit völlig anderen Bereichen auseinandergesetzt habe, möchte ich mich nun wieder fokussieren und mein Thema eingrenzen.

Zu Beginn meines Master-Studiums habe ich mich unter anderem mit der Frage auseinandergesetzt, inwiefern sich das Web auf gestalterischer und kultureller Ebene verändert hat. Nachdem ich nun lange Zeit breit recherchiert und mich auch mit völlig anderen Bereichen auseinandergesetzt habe, möchte ich mich nun wieder fokussieren und mein Thema eingrenzen.

Vor kurzem habe ich begonnen mich inhaltlich und grafisch näher mit der Entwicklung des Webs von Beginn an auseinanderzusetzen (Evolution der Webästhetik »). Diesen Weg möchte ich weitergehen und einen visuellen Weg finden, meine Ergebnisse zu präsentieren. Dabei kann ich mir zum einen eine Ausstellung, zum anderen eine interaktive Ausstellung oder Weberzählung vorstellen.

Ein erster praktischer Ansatz ist die Sammlung diverser UI-Elemente, welche ich katalogisiert darstellen möchte. Ich stelle mir vor, dass so die Entwicklung visuell greifbarer wird. Zudem habe ich bereits erste Gestaltungsmuster erkannt, welche den kulturellen Weg sowie das veränderte, allgemeine Verständnis des Webs deutlich zeigen. Weitere Gedanken und Ideen – sowohl in Bezug auf Theorie als auch Praxis – möchte ich noch reifen lassen und für mich selbst prüfen.

In Pieces: Hinter den Kulissen

Bereits Mitte letzten Jahres habe ich das Projekt »In Pieces« vorgestellt. Seitdem möchte ich mich etwas näher mit dem technischen Hintergrund auseinandersetzen, da mich das Projekt nachhaltend begeistert hat und ich es sehr interessant finde, dass es basierend auf CSS umgesetzt wurde.

Bereits Mitte letztens Jahres habe ich die interaktive Ausstellung »In Pieces« von Bryan James vorgestellt. Damals hatte ich fälschlicherweise noch den Titel »Species in pieces« verwendet.
Seitdem möchte ich mich etwas näher mit dem technischen Hintergrund auseinandersetzen, da mich das Projekt nachhaltig begeistert hat und ich es sehr interessant finde, dass es basierend auf CSS umgesetzt wurde.

Neben der Dokumentation, die auf der Projektseite selbst zu finden ist, bin ich auf »The Making Of ›In Pieces‹: Designing an Interactive Exhibition With CSS Clip Paths« auf Smashing Magazine gestoßen. Hier erklärt Bryan James ausführlich seine Vorgehensweise und auf welche Probleme er während des Prozesses gestoßen ist. Da die Dokumentation sowie das Making Of sehr detailliert sind, möchte ich den technischen Hintergrund nicht einfach wiedergeben, sondern lediglich die für mich spannenden Punkte herausgreifen.

Die Outlines des Pfeilgiftfrosches in Illustrator
Die Outlines des Pfeilgiftfrosches in IllustratorI

Zunächst finde ich es erstaunlich, dass die Polygone aus denen die Tiere zusammengesetzt sind mit der CSS-Eigenschaft clip-path generiert wurden. Ich bin mehr Designerin als Entwicklerin, so dass mir das breit gefächerte Verständnis fehlt. Jedoch war meine Vermutung die, dass mit SVG-Grafiken gearbeitet wurde, die dann via Code verändert und bewegt werden. Zur Erstellung der Formen stellt Bryan James das Tool Clippy » vor. Mit dieser Browseranwendung können eigene sowie vorgefertigte Masken ausgewählt werden. Der dazugehörige Code erscheint dabei direkt am unteren Rand des Browsers. Schade finde ich, dass man den Code nicht direkt im Browser ändern kann, um die erstellte Form selbst noch einmal im Detail zu ändern. Zwar ist ein klickbares Logo von Codepen zu sehen, dessen Sinn erschließt sich mir aber leider nicht ganz, da sich nichts ändert oder öffnet. Davon abgesehen, ist es aber ein einfaches, schönes Tool, um visuell die Formen zu erstellen. Den Code kann man nachträglich immerhin selbst ändern, so dass ich das nicht als sehr großen Nachteil empfinde.

Als weitere spannende Lösung stellt James eine Funktion vor, die ermöglicht die prozentualen Werte eines Punktes auszulesen. Er nutzt eine PNG-Datei als Unterstützung und durch einen Klick wird ein Fenster mit den Daten des jeweiligen Punkts zum Kopieren ausgegeben. Die Funktion ist im Making Of zu finden.

Aus grafischer bzw. konzeptioneller Sicht finde ich es zudem überraschend, dass die 30 Tiere jeweils aus etwa 30 Polygonen bestehen. Das war mir im Vorfeld nicht bewusst bzw. habe ich nicht darauf geachtet.

Eine weitere bemerkenswerte Herangehensweise sehe ich in der Maskierung von Bildern mit Zahlen durch die Polygone als Hilfestellung. Eine simple Methode, um die Ränder der Formen hervorzuheben, um sie anschließend zueinander passend zu verändern. So können feine Linien vermieden werden, die zwischen den Gebilden entstehen, wenn sie exakt aufeinander liegen.

Visuell ansprechend finde ich außerdem den von ihm verwendeten und erwähnten Schimmer-Effekt. Generell bin ich kein Fan von Schimmern, Schatten oder beispielsweise Verläufen. Doch der Einsatz im Web kann bei dosierter Anwendung sehr reizvoll sein. Im Vergleichsbild seiner Grafiken sieht man deutlich, dass sie durch den Schimmer-Effekt sehr viel hochwertiger wirken.

Schlussendlich finde ich es großartig, dass Bryan James das Projekt und den Prozess so ausführlich dokumentiert. Einen Einblick in die Arbeitsweise und die Problemlösungen machen deutlich, wie das große Ganze Schritt für Schritt und Hürde für Hürde gewachsen ist. Dass die Arbeit beinahe wegen zu großer Probleme beendet wurde, motiviert zudem sich an mancher Stelle weiter durchzubeißen. Denn das Ergebnis finde ich nach wie vor so imposant, dass es Mut macht dem ein oder anderen Hindernis zu trotzen. Zudem inspiriert mich die interaktive Ausstellung so sehr, dass ich mich nun mit mehr technischem Verständnis, selbst an einer erstmaligen Gestaltung durch Polygone versuchen möchte.

Abbildungen
  1. James, Bryan: »The Making Of ›In Pieces‹: Designing an Interactive Exhibition With CSS Clip Paths«, Stand: 2.6.2015, URL: https://www.smashingmagazine.com/2015/06/the-making-of-in-pieces/, abgerufen am 2.3.2017.

Evolution der Webästhetik

Nach wie vor interessiere ich mich sehr für die Webästhetik der 90er Jahre – den Anfängen des World Wide Webs. Daher möchte ich mich mit der Ästhetik der einzelnen Jahre auseinandersetzen. In Frage kommen dabei zum einen Webseiten, die heutzutage populär sind, sowie Plattformen, die früh gegründet wurden und dadurch immerhin teilweise verwertbares Material liefern. Bei meiner Arbeit ist mir dabei nicht nur die Ästhetik der 90er Jahre wichtig, sondern wie sie sich – z.B. technisch und kulturell bedingt – verändert hat.

Nach wie vor interessiere ich mich sehr für die Webästhetik der 90er Jahre – den Anfängen des World Wide Webs. Daher möchte ich mich mit der Ästhetik der einzelnen Jahre auseinandersetzen. In Frage kommen dabei zum einen Webseiten, die heutzutage populär sind, sowie Plattformen, die früh gegründet wurden und dadurch immerhin teilweise verwertbares Material liefern. So wurde Facebook beispielsweise erst im Jahr 2004 gegründet, ist jedoch aus der heutigen Welt nicht mehr wegzudenken.

Wie bei meiner begonnen »Web-Analyse« bildet die Grundlage die Wayback Machine von archive.org ». Durch erste Recherchen vermute ich, dass sich nicht allzuviel Material von vor 1995 finden lässt. Im gleichen Zuge möchte ich mich meine eigenen Webseiten von geocities ausfindig machen. Hier hoffe ich auf das Projekt »One Terabyte of Kilobyte Age«.

Bei meiner Arbeit ist mir dabei nicht nur die Ästhetik der 90er Jahre wichtig, sondern wie sie sich – z. B. technisch und kulturell bedingt – verändert hat. Als ersten Schritt möchte ich eine Sammlung sämtlicher UI-Elemente erstellen, um auf dieser Grundlage weiter zu forschen.

Präsentation IV

In meiner Präsentation stelle ich nicht nur das 2. Semester vor, sondern gebe auch einen oberflächlichen Überblick des 1. Semesters. In diesem Beitrag verweise ich auf die einzelnen Themen und Projekte.

In meiner Präsentation stelle ich nicht nur das 2. Semester vor, sondern gebe auch einen oberflächlichen Überblick des 1. Semesters. In diesem Beitrag verweise ich auf die einzelnen Themen und Projekte. Bei Bezugnahme auf Autoren mache ich hier keine Quellenangaben. Die Quellen sind im jeweiligen Beitrag angegeben.

Analyse grafischer Veränderungen

Im 1. Semester hatte ich im Großen und Ganzen zwei Schwerpunkte. Zum einen die Analyse der grafischen Veränderungen von Webseiten seit den 90er Jahren. Basierend auf Screenshots habe ich dabei die verändernden Text-Bild-Verhältnisse, sowie Interaktionen untersucht.
Das ist dahingehend sehr spannend, dass sich das Web und die Gestaltung durch neue technologische Möglichkeiten verändert haben, aber auch durch die Gesellschaft bzw. durch deren Nutzung und Ansprüchen stark beeinflusst wurden.
Web-Analyse: google.de seit 2001 »

Veränderte Internetnutzung

Mit der Nutzung des Internets beschäftigen sich auch die ARD-ZDF-Onlinestudien, mit denen ich mich auseinandergesetzt habe. Die Umfragen gibt es seit ca. 15 Jahren.
Nutzung von Bewegtbild (ARD/ZDF-Onlinestudie) »
Die Nutzung des Internets unterwegs (ARD/ZDF-Onlinestudie) »

Die Studien sind wiederum wichtig für meinen 2. Schwerpunkt, in dem es um Erzählformen geht bzw. um die Fragestellungen, welche neuen Erzählformen durch neue Medien entstehen können.

Netzkunst

Eine Erzählform, die oft nicht als solche wahrgenommen wird, ich aber sehr spannend finde, ist die Netzkunst. Aus meiner Sicht besitzt sie eine spezielle Ästhetik und arbeitet sehr mit dem Medium selbst. Es wird nicht einfach als zu füllender Platz missbraucht, sondern das Medium und die Technik selbst werden zum Teil der Erzählung gemacht. So z. B. die Frames bei Olia Lialinas »My boyfriend came back from war!«
Olia Lialinas »My boyfriend came back from the war!« »

Zusätzlich finde ich Künstler spannend, die im Netz mit dem Netz arbeiten wie z. B. Addie Wagenknecht. Sie hat generell kritische Arbeiten und eine Arbeit ist beispielsweise ein Diskurs zwischen webbasierten Erfahrungen (lolcatz, memes, gifs) und historisch geschlossenen Systemen, welche die physische Welt regieren. Das Internet ist nach ihr demokratischer Natur, aber kein demokratisches Medium. Sie stellt zudem fest, dass wir mehr auf die Bildschirme als aus unseren Fenstern schauen.
Von Dildodrohnen und lolzcat »

Trans- und crossmediale Erzählungen

Des Weiteren habe ich mich mit trans- und crossmedialen Erzählungen beschäftigt. Darunter auch »about:kate«, welche mit user-generated content und 2nd-Screen-Anwendungen gearbeitet hat.
About:Kate – »Wann haben Sie bemerkt, dass Sie nicht mehr wissen, wer Sie sind?« »

Film und Game

Mit »Fort McMoney« habe ich mich im Bereich Dokumentarspiel auseinandergesetzt. Es enthält viele Cut scenes, spielerisch erlangt man hier neues Wissen. Generell ist Gamification ein wichtiges Thema, denn das Spiel wird als neues Leitmedium angesehen.
Als Erzählform finde ich es an sich spannend, jedoch hat nicht jeder Interesse sich mühevoll durch einen Film oder das Spiel zu spielen.
Das Doku-Game »Fort MyMoney« von David Dufrense »

In Bezug auf die Kombination Film-Game habe ich eine Ausstellung im Filmmuseum Frankfurt besucht: »Film und Games. Ein Wechselspiel«, die genau diesen Aspekt beleuchtet. Schon Ende der 80er beeinflussen sich Game und Film gegenseitig, heutzutage verschmelzen die Medien noch mehr.
»Film und Games. Ein Wechselspiel.« im Filmmuseum Frankfurt

Neben dieser temporären Ausstellung im Filmmuseum, halte ich die allgemeine für sehr interessant. Vor allem mit Blick auf Geräte zur Wiedergabe von Bildern oder für die Erzeugung von Bewegtbildern. Teilweise erinnern sie an heutige Geräte. Generell hatte ich mich bereits mit Augmented und Virtual Reality beschäftigt. Hier hatte ich die Überlegung, ob nicht sogar eine Transformation aus dem Digitalen ins Analoge zu schaffen ist.
Mechanische GIF: Das Giphoscope »

Natürliche Art der Erzählung

Am Ende des 1. Semesters war meine Erkenntnis, dass sich alles Richtung »natürliche Art der Erzählung« entwickelt. Ähnlich wie vor der Schrift als alles noch dynamischer war. Dazu habe ich Parameter aufgestellt, welche solche Erzählungen erfüllen müssten:
Rückbesinnung auf eine natürliche Art der Erzählung »

Projekte: Eye-Tracking-Demo und Giphy-Experiment

In Bezug auf transparente Schnittstellen, entwickelte ich mit zwei Medientechnikern in einer sehr kurzen Zeit eine Eye-Tracking-Demo. Der einzige Anspruch war zu zeigen, was möglich ist. Das Thema »Mystery« war dabei nicht unbedingt meins, jedoch fand ich es spannend, an so einem Projekt mitzuarbeiten. Die großen Fragen waren, was geht und was nicht, was ist grafisch umsetzbar und wo sind die Grenzen.
Das verlassene Haus »

Des Weiteren habe ich mein Giphy-Experiment vorgestellt:
Erstes Experiment mit der giphy-Bibliothek »

Eine weitere Projektidee ist eine Erzählung zu entwickeln, die automatisch bebildert wird. Das widerspricht Byung Chul Hans These, dass Wissen narrativ und Informationen additiv sind. Von daher ist es aus meiner Sicht grundsätzlich nicht möglich, Narrationen automatisiert aus Daten zu generieren. Jedoch ist meine Überlegung die, eine Narration mit genauem Rahmen und exakten Parametern für Daten zu schaffen, um sich einer automatisch bebilderten Erzählung anzunähern.

Eine weitere Idee, die aus dem Giphy-Experiment entstanden ist, ist eine personalisierte Bildsprache zu entwickeln. Dabei müsste der große Datenpool auf dem eigenen Rechner genau getaggt und beschrieben oder zukünftig per Bilderkennung analysiert werden. Die eigene Sprache wird bei dieser Idee in Bilder übersetzt.

Loop-Erzählungen

Eine Loop-Erzählung mithilfe von giphy z. B. als Rauminstallation zu erarbeiten wäre ein weiterer Ansatz.
Dieser Ansatz ist meiner These aus dem 1. Semester, nämlich dass wir durch die Schrift sequentiell denken, sehr nahe. Wir sind als Europäer im Gegensatz zu orientalischen Ländern sehr linkshemisphärisch geprägt. Insgesamt denken wir sehr in Kausalitäten und alles hat einen zeitlichen Aufbau. McLuhan spricht davon, dass wir zunehmend in einer Welt der Gleichzeitigkeit leben und die Zeit aufgehört hat und der Raum verschwunden ist. Durch Loop-Erzählung wäre die Positionierung aufgelöst – es gäbe keinen klaren Zeitpunkt. Die Geschichte würde sich nach und nach – non-linear – erschließen.
Das globale Dorf – Raum, Zeit und Dynamik
Von Loops und der Hyper-Realität »

Interface und Interaction Design

Momentan sind all diese Ansätze auf Eis gelegt, um mich neu zu orientieren. Insgesamt finde ich nämlich sowohl das Web an sich als auch Medieninstallationen sehr spannend. Es wäre auch eine Kombination beider Medien denkbar.

Daher habe ich mich zunächst wieder darauf konzentriert, Beispiele für Weberzählungen zu finden.
Für das schönste Beispiel halte ich Species in Pieces: Eine interaktive Ausstellung »: Species in Pieces (Projekt) »

Des Weiteren habe ich mich mit Interaction Design beschäftigt. So z. B. mit Conversational User Interfaces, welche teilweise die graphischen Benutzeroberflächen ersetzen sollen. Zudem find ich den Ansatz der emphatischen Interaktion interessant, welcher sich darauf konzentriert, inwiefern Rückmeldungen für den Menschen wichtig und sinnvoll sind. Ein schönes Beispiel fand ich hier das eines Baggerfahrers, der jahrelang Bagger fährt und plötzlich eine Fernbedienung bekommt. Hier muss durch Rückmeldung wieder eine Verbindung zum Material aufgebaut werden.
CUI – Conversational User Interface »
Natural User Interface – Die unsichtbaren Schnittstellen »
Empathische Interaktion »

Medieninstallation

Abschließend stelle ich zwei Installationen von Markus Kison vor. Eine davon ist »Pulse« dessen Zentrum ein Gummiobjekt ist, das auf dessen acht Seiten die Grundemotionen des Menschen darstellt. Die Daten kommen dabei via APIs n Echtzeit aus WordPress-Blogs.
»Pulse« von Markus Kison »
»Touched Echo« von Markus Kison »

Der momentane Stand ist der, dass ich große Motivation habe eine Medieninstallation zu bauen, die in irgendeiner Form auf Echtzeitdaten zurückgreift. Dafür werde ich weiter recherchieren, um genaueres über Technologie und Medienechnik zu erfahren.

Abbildungen
  1. Titelbild: Studio SML: Projekte – Deutsches Filmmuseum Frankfurt, Änderung zum Zweck der Präsentation meiner Recherche: Headline sowie Quellenangabe, abgerufen am 30.1.2016.

Ästhetische Veränderung des World Wide Web als Werkzeug der Erzählung durch Technologie

Zu Beginn meiner Masterarbeit war einer meiner Ansätze, die Veränderung des Webs seit Beginn an zu untersuchen. Wichtig war mir dabei die Untersuchung der Symbiose zwischen dem WWW und der Gesellschaft. Ein neuer Ansatz beschreibt die Überlegung, inwiefern sich das World Wide Web als Werkzeug der Erzählung durch technologische Entwicklungen ästhetisch verändert.

Zu Beginn meiner Master-Arbeit war einer meiner Ansätze, die Veränderung des Webs seit Beginn an zu untersuchen. Wichtig war mir dabei die Untersuchung der Symbiose zwischen dem WWW und der Gesellschaft. Während ich mich in den letzten Monaten auf andere Fragestellungen und Ansätze fokussiert habe, rückt diese Überlegung zurück ins Zentrum, da ich regelmäßig feststelle, dass ich dieses Thema unheimlich spannend finde.
In meiner anfänglichen Fragestellung (Erste Fragestellung meiner Master-Arbeit ») ging es darum, inwiefern sich die Gestaltung im World Wide Web und die Veränderung der Gesellschaft durch das World Wide Web gegenseitig beeinflussen. So führt beispielsweise eine veränderte Nutzung, ausgelöst sowohl durch das WWW als auch durch neue Technologien, wiederum zu neuen Gestaltungsansätzen im Web. Neue, intuitivere Gestaltungsansätze beispielsweise treiben wiederum die engere Verschmelzung zwischen Mensch und Technik an, indem grafische und technologische Hürden abgebaut werden.

Die ästhetische Veränderung des Webs

Die beschriebene Überlegung ist sehr weit gefasst, so dass es aus meiner Sicht unmöglich ist, sämtliche gesellschaftliche und technologische Veränderungen der letzten 25 Jahre in ein konkretes Projekt zu überführen. Aus diesem Grund begrenze ich mich zunächst auf den technologischen Aspekt. Diese Eingrenzung schließt zwar zum einen gesellschaftliche Themen nicht komplett aus und ist zum anderen noch immer sehr allgemein gefasst. Jedoch bin ich überzeugt, dass eine schrittweise Eingrenzung und erneute, überlegte Ausweitung meines Themenkomplexes, zum Ziel führen wird.

Ich konzentriere mich dabei auf die ästhetische Veränderung des World Wide Webs als Werkzeug der Erzählung durch technologische Entwicklungen. Nach wie vor, interessiert mich dabei ein Teil der Netzkunst im Web. Aus meiner Sicht werden durch die vermeintlich nichtkommerziellen Projekte häufig die Möglichkeiten und Grenzen von Ästhetik und Technologie radikaler ausgelotet. Zum einen besitzen sie eine sehr eigene, spannende Ästhetik zum anderen eine sehr besondere Anmutung. Das kann natürlich auch bei kommerziellen der Fall sein, jedoch halte ich es für unwahrscheinlich, dass beispielsweise ein Kreditinstitut eine Webseite zur Eigenwerbung präsentiert, die sämtliche Grenzen der konventionellen Gestaltung überschreitet.
Im Weiteren möchte ich mich mit den angesprochenen Punkten auseinandersetzen, um dann weitere Eingrenzungen oder Ausweitungen vorzunehmen, sowie eine Richtung innerhalb meiner Master-Arbeit festzulegen.

Von Sternenhimmeln und Midi-Dateien

Olia Lialina nimmt sich der einzelnen Elemente an, die in den 90er Jahren populär und massenhaft im World Wide Web zu finden waren. Das Web ist noch nicht alt, die Menschen in Aufbruchstimmung und die Utopie, dass es dort einen wirklich freien und geschützten Raum für alle gäbe.

»Digital Folklore – To computer users, with love and respect« von Olia Lialina und Dragan Espenschied (Ed.) beschäftigt sich so wie die gesamte Arbeit der Medien- bzw. Netzkünstler mit der Webkultur der 90er Jahre.

Olia Lialina nimmt sich der einzelnen Elemente an, die in den 90er Jahren populär und massenhaft im World Wide Web zu finden waren. Dazu gehören die Under Construction-Schilder, Sternenhimmel als Hintergründe, Freie Kollektionen von Webelementen, Links sowie Linksammlungen, Midi-Lieder, die noch heute im Ohr nachklingen, Frames, das Tilde-Zeichen, die »Welcome to my Homepage«-Seite sowie große »Mail Me«-Buttons.1 Das alles steht für die 90er: Das Web ist noch nicht alt, die Menschen in Aufbruchstimmung und es gibt noch die Utopie, dass es dort einen wirklich freien und geschützten Raum für alle gäbe.

Mein 90er-Web

Ich persönlich war begeistert vom Web der 90er. Ich war häufiger online, als ich es tatsächlich sein sollte. Verglichen zu heute war die monatliche AOL-Flatrate von 30 Stunden aber natürlich lachhaft. Mit 14 (2000) habe ich meine erste Webseite bei geocities online gestellt und es war toll mit ersten Gästebüchern oder Foren eine Online-Plattform für meine Klasse schaffen zu können. Nichtsdestotrotz waren mir die Anfänge damals natürlich nicht vollends klar. Wie für die meisten Menschen war das WWW ein großer Spielplatz für mich. Ich war enthusiastisch und habe das Internet geliebt. Dennoch war mir mit 13/14 Jahren natürlich nicht der kulturelle Wert bewusst. Ich musste keine alternativen Nischen für meine Kunst finden oder viele Denkweisen meines bisherigen Lebens überdenken. Ich wuchs im Internet auf und konnte es so sehr schnell als Normalität annehmen.
Obwohl ich diesen Hype nicht als erwachsener Mensch wahrgenommen habe, war ich ein kleiner Teil davon und spüre noch heute, dass das Web der 90er eine gewisse Anziehungskraft ausstrahlt. Vielleicht mag es nostalgisch sein, doch ich erinnere mich gern an erste Experimente mit Frames, an erste geklaute Bildchen, die man hochladen konnte oder den Klang der Midi-Sounds.

Always under construction

Das Web wuchs weiter und die Under Construction-Schilder wandelten sich in Sätze wie »Always under construction«. Das Zeichen für ständige Aktualität bis im Web 2.0 die Beta-Versionen zum Standard nicht vollendeter Versionen war.2
Dieser Wandel ist für mich ein Zeichen dafür, wie sehr wir noch in der Gutenberg-Welt leben. Das Internet stellt keinen Anspruch auf Vollständigkeit, da dessen Eigenschaft daraus besteht, dass es ständig anwächst. Ein fortlaufendes Wachstum, ein täglich wandelbarer Raum, der von dieser Veränderung lebt und der ohne dessen Aktualität beinahe unbedeutend für uns wäre. Wir nutzen das Medium nicht überwiegend aus dem Grund, festgeschriebene und vollständige Informationen abzurufen. Das mag wichtig sein beim Recherchieren und natürlich suchen wir häufig nach Informationen, die uns weiterhelfen. Natürlich nutzen wir das Web auch als Tool für Flugbuchungen und Restaurantbewertungen. Doch der tägliche Umgang besteht wohl darin, die Veränderungen – die Neuigkeiten – abzugreifen. Neue Nachrichten der Welt, neue Trends bei Twitter, neue Posts bei Facebook oder neue Trends in der Designwelt. Das dürfte zumindest aus meiner Sicht den Großteil ausmachen.

Ein Hinweis dafür, wie sehr wir noch in der Welt ohne Internet und Computer leben, gibt auch Olia Lialina. Sie wundert sich darüber, wie viele Präfixe es gibt, nur um klar zu machen, dass etwas mit dem Computer hergestellt wurde oder über ein Computer Interface angesteuert werden kann: Net, web, media, computer oder digital.3 Wir scheinen noch großen Wert darauf zu liegen, diese Auswüchse klar zu kennzeichnen. Welcher Sinn steckt hinter Pendants wie Buch-Erzählung oder Literatur-Story?
Zugegeben verwende ich selbst häufig Präfixe dieser Art. Es ist das Bedürfnis genau zu definieren, um was es sich handelt und eine Unterscheidung zu treffen. Dennoch bräuchte man diese Präfixe spätestens dann nicht mehr, wenn man sich schon im Web bewegt.

Digital Folklore

Das Buch »Digital Folklore« ist ein wertvolles Buch, welches sich lohnt zu lesen. Projekte von Studenten der Merz Akademie Stuttgart zeigen einen experimentellen Umgang mit dem World Wide Web, Texte über Internet-Trends wie z. B. Lolcats, geben einen Einblick in die Internet-Kultur und Olia Lialina kann mich mit ihren Recherchen und Analysen zu der Kultur der 90er Jahre ohnehin stets neu begeistern.

Quellen
  1. Vgl. Lialina, Olia; Espenschied, Dragan: »Digital Folklore«, Stuttgart 2009, S. 20–33.
  2. Vgl. Ebd., S. 20f.
  3. Vgl. Ebd., S. 9.

Der Verlust der 90er Jahre

»Digital Folklore – To computer users, with love and respect« von Olia Lialina und Dragan Espenschied beschäftigt sich so wie die gesamte Arbeit der Medien- bzw. Netzkünstler mit der Webkultur der 90er Jahre.
Mit ihrer Arbeit »One Terabyte of Kilobyte Age« archivieren und analysieren sie Geocities-Webseiten, die kurz vor der Schließung des Webseiten-Dienstes, gesichert werden konnten. Auch in ihrem Buch weisen sie erneut darauf hin, dass unsere Inhalte auf MySpace, Facebook und Co. eines Tages gelöscht und vergessen werden könnten.

»Digital Folklore – To computer users, with love and respect« von Olia Lialina und Dragan Espenschied beschäftigt sich so wie die gesamte Arbeit der Medien- bzw. Netzkünstler mit der Webkultur der 90er Jahre.
Mit ihrer Arbeit »One Terabyte of Kilobyte Age« archivieren und analysieren sie Geocities-Webseiten, die kurz vor der Schließung des Webseiten-Dienstes, gesichert werden konnten. Auch in ihrem Buch weisen sie erneut darauf hin, dass unsere Inhalte auf MySpace, Facebook und Co. eines Tages gelöscht und vergessen werden könnten.1

Auch Luciano Floridi (Von der Kultur, die statisch wurde ») sieht das als problematisch an. Er spricht dabei vom digitalen Gedächtnisverlust, der z. B. durch veraltete Technologien zu Stande kommt, da diese nicht mehr nutzbar sind (z. B. Diskette) oder die Inhalte nicht von einer alten Technologie in eine neue übertragen werden (z. B. von der Diskette auf CD).2 Durch die Überspeicherung von Webseiten werden Dokumente in einen Zustand der Geschichtslosigkeit geführt und damit flüchtig wie die mündliche Kultur.3

Die Arbeit der zwei Künstler findet primär im Bereich Web statt und sie greifen vergangene Trends sowie die Aufbruchstimmung zu Beginn des Webs auf. Hier wird mir erneut bewusst, wie viel kulturelle Eigenheiten und Phasen durch die Löschung von Daten verloren geht. Schon jetzt ist es schwierig, die 90er Jahre im Web zu »finden«. Zwar ist es insgesamt noch ein leichtes, da viele der jetzigen Nutzer schon damals online waren und die Ästhetik und Stimmung des damaligen Web 1.0 kennen. Zudem gibt es schon erste Retrotrends, die die 90er imitieren. Dennoch werden die Webseiten dieses Jahrzehnts – bis auf die, die bewusst gespeichert werden – in naher Zukunft sicherlich verschwunden sein.

Unabhängig davon, ob es erste Firmenwebseiten oder Seiten für das eigene Haustier sind: Wie ist es möglich, die Daten und damit ein Teil der Kultur und Geschichte zu konservieren? Gibt es Parallelen zu Büchern, welche sicher auch nicht vollständig die Zeit überdauert haben? Und wie wichtig ist es überhaupt, dass möglichst alles noch in 20 Jahren auffindbar ist? Wie vermessen wäre es denn, das alles nicht zu speichern, wenn wir doch generell die Möglichkeit haben vieles zu speichern?

Ich denke, dass es in den nächsten Jahren enorm wichtig sein wird, auf diese Fragen eine Antwort und eine gute Lösung zu finden. Vielleicht ist es schon ein Anfang, wenn wir zumindest mit unseren eigenen Daten sorgfältiger umgehen.

Abschließend noch ein Hoffnungsschimmer: Zumindest mit der waybackmachine kann man sich 498 Milliarden Webseiten ansehen, viele von ihnen reichen bis in die 90er Jahre.

Quellen
  1. Vgl. Lialina, Olia; Espenschied Dragan: »Digital Folklore«, Stuttgart 2009, S.8.
  2. Vgl. Floridi, Luciano: »Die 4. Revolution – Wie die Infosphäre unser Leben verändert«, Berlin 2015, S. 36.
  3. Vgl. Ebd., S. 37.