-

Latest Update 23. April 2021

Von Kunst Leben

Danke, Andy! Inzwischen sind wir daran gewöhnt: Die Oberfläche ist alles, was etwas an sich ist, darunter ist nichts. Wie ein Mantra wirkt diese Auffassung auf alles - auch auf die Kunst, ihren Markt und die Techniken ihrer Herstellung und des Handels. Nicht zuletzt auch auf unsere Kommunikation.   

Da gibt es, wie du weißt, notwendigerweise jedoch zunächst die 'Fabrik', als etwas das - ja, absolut - unabdingbar ist.   
Sie ist auch für uns Sphäre der Produktion und des Handelns, in welcher wir zunächst eine gesellschaftliche, soziale Verbindung mit den bestimmenden Faktoren herstellen - bevor überhaupt ein Ding in der Oberfläche aufscheinen kann, damit wir es konsumieren können.  

Und das ist ja schon schwierig genug...

Entwicklung

Die App, im Folgenden schlicht Anwendung genannt, für Von Kunst Leben baut auf einem Design-System auf, welches wiederum so genannte Design-Token einsetzt, um die Grundlage zu schaffen, durch die die Dinge in der Oberfläche aufscheinen können - und auf der auch den Anforderungen moderner Kommunikation dauerhaft Rechnung getragen werden kann.

Am Ende dieses Dokuments findet sich ein Exkurs darüber, warum die Notwendigkeit für diese Arbeitsweise besteht, die grundlegenden Schwierigkeiten die sie erforderlich gemacht haben, den Stand der Dinge - und schließlich: Warum gerade in dieser so sehr technisch bestimmten Wirklichkeit Design die Rettung ist - und wir so gemeinsam Dinge herstellen können, die die Welt tatsächlich etwas besser machen.

Dieses Dokument ist eine sehr umfassende und entsprechend auch sehr umfangreiche Dokumentation des Prozesses der Entwicklung der Anwendung. Sie enthält im Detail alles, was für Entscheidungen, Änderungen, Fragestellungen in Bezug darauf notwendig ist zu wissen.
Als in dieser Gestalt elementares Kommunikationswerkzeug für die Entwicklung wird sie auch im weiteren Verlauf mit jeder Hinzufügung bzw. Änderung - idealerweise im selben Schritt - ergänzt und entsprechend jeder einfließenden Änderung aktualisiert.

Während es also tatsächlich für das Verständnis essentiell ist die Erläuterungen zu den einzelnen Schritten sorgfältig im Blick zu haben, ist es doch auch hilfreich das Ganze ohne Text betrachten zu können - vielleicht Seite an Seite. Die Abschnitte enthalten daher jeweils verlinkte Überschriften, die es ermöglichen abschnittsweise zwischen dieser Version und der Version ohne Text zu wechseln. Auch diese ist für sich genommen schon umfangreich - sie enthält gegenwärtig 25 Bilder unterschiedlichen Umfangs und Gehalts.

Diese Dokumentation lässt sich, mit Bezug auf das umfangreiche Bildmaterial, besonders angenehm auf jedem beliebigen Tablet konsumieren. Desktop, Laptop oder Smartphone sind aber natürlich ebenfalls geeignet.
Sämtliche Bilder sind als Vektorgrafik angelegt - sie skalieren entsprechend ohne Artefakte auf beliebige Größen.

Design Token

Design-Token sind unsere Bausteine mit deren Hilfe sich das Fundament und die gesamte Anwendung in einer für alle daran Beteiligten inklusiven Weise entwickeln lassen. Die Entwicklung für die Anwendung Von Kunst Leben beginnt mit dem Studium der gestaltenden Elemente in den Arbeiten von Carmen Herrera: Ihre Auffassung einer Rückspiegelung unserer Welt in geometrischen, strukturalistischen Formen, ihre arbiträre und zugleich bestimmte Farbgebung sowie das Sprechenlassen der Rahmung eines Elements respektive einer Arbeit.

Farben

Im Falle der Farbgebung bedeutet das Auswählen aus dem scheinbar Willkürlichen der Farben in Herreras Katalog eine einfache und unangestrengte Bestimmung der eigenen Farbwelt. Anders gesagt: Es könnten auch andere sein - aber die eigenen Vorlieben und Wünsche unberücksichtigt lassen zu können, erleichtert den Prozess und führt doch zu einem geschlossenem Ergebnis, das jede eigene angestrengte Ambitioniertheit elegant umschifft.

Hier in eine einfache Leiste eingebettet, ergibt sich eine Auswahl, die jedem Namensraum - also jeder thematischen und somit auch zu navigierenden Sektion der Anwendung - eine visuelle Identität gibt:

Von Kunst Leben, Design Token: Namespace Colors

Von Kunst Leben, Design Token: Namespace Colors

Verschiedene für die Entwicklung der Anwendung benötigte Eigenschaften finden bei dieser Auswahl zunächst zueinander:

Es sind andere Kombinationen und Zuordnungen denkbar und jederzeit realisierbar. Die frühzeitige Orientierung auf den eher arbiträr zusammengestellten Farbkatalog erfolgt auch mit der Absicht die Entwicklung frühzeitig zu kanalisieren, um sie unmittelbar fortsetzen zu können.

Es ist wichtig im weiteren Verlauf im Hinterkopf zu behalten, dass innerhalb eines eingeschränkten Rahmens die Zuordnung der Farben in ganz unterschiedlichen Zusammensetzungen vorgenommen werden kann - wie, das ist letztlich stets nur eine Frage der Funktionalität. Auch der Einsatz von den Farbraum beschränkenden oder auch verändernden Filtern (Hue, Tint und weitere), Abschwächung der Deckkraft etc. können zur Erzielung von -auch radikal - anderen Gesamteindrücken verwendet werden.
Es bleibt letztlich einzig die Frage, welche Kombination von Farben die Funktionalität am umfassendsten stützt.

Formen

Im Falle der Formgebung wäre die einfache wie konkrete Adaption von in Herreras Werk vorgegebenen Formen oder ihrer Formsprache - von anderen naheliegenden Erwägungen ganz abgesehen - hingegen eine unangemessene Einschränkung. Technisch wie auch gestalterisch.

Hier dient uns ihre Sprache als Anregung zu einer Abstraktion, um ein analoges eigenes Sprechen zu entwickeln. In dieser gestischen Adaption liegt die Möglichkeit der Entwicklung eines eigenen kleinen Lexikons des Sprechens bereits in einer Fragestellung wie sie sich auch für Von Kunst Leben formulieren ließe:

Unser kleines Lexikon der Formen beginnt zunächst mit der Übersetzung des Namens Von Kunst Leben in einen geometrischen Code. Dieser Code weist zugleich mit seinem Charakter auf die gesellschaftlichen und ökonomischen Bedingungen, von denen im thematischen Zusammenhang sicher auch zu sprechen sein wird. Wir verwenden ihn als verbindendes Material zur Überleitung zwischen den Namensräumen sowie als Verzierung/Chrome (Unterstreichungen, Abgrenzungen).

Von Kunst Leben, Design Token - Background Bars 1st Level

Von Kunst leben, Design Token: Barcode VON KUNST LEBEN - Background Bars 1st Level

Dies ähnelt ganz augenscheinlich dem Barcode, wie er zur Erfassung und einmaligen Erkennung von Waren im Handel allgegenwärtig ist. Es handelt sich hier genau genommen jedoch um Pseudo-Code. Jeder Abschnitt in diesem Muster steht einfach für einen Buchstaben des lateinischen Alphabets - in diesem Fall steht das Muster für VON KUNST LEBEN.

Wir verwenden diesen titelgebenden Code implizit als Logo-Element, und können dieses im Folgenden aufgrund seiner geometrischen Natur auch als Muster für Hintergrund und als verbindendes Element einsetzen. Er wird in ganzer Breite in der Farbe der Anwendung und - eingebunden in die Formelemente der einzelnen Namensräume - schmaler und in der Farbe des jeweiligen Raumes wiederholt.

Für die Namensräume an sich wenden wir das selbe Prinzip an und ordnen den so gewonnenen Elementen gleich auch die jeweilige Farbe für den Namensraum zu:

Von Kunst Leben, Design Token: Section-Colors Titles, Barcode

Von Kunst Leben, Design Token: Namespace Colors Titles + Barcodes

Und in der folgenden Abbildung ordnen wir weitere geometrische Elemente dem Farbschema zu, die sich als Helfer in unser Form-Lexikon eingliedern werden:

Von Kunst Leben, Design Token: Section-Colors, Barcodes, Navigation

Von Kunst Leben, Design Token: Namespace Colors, Barcodes + Navigation Elements

Auch hier kommt zur Anwendung, was wir aus Herreras Sprachformen lernen konnten, und mit allen so geformten Elementen gemeinsam werden wir damit die grundlegenden Themen der Anwendung auszubilden beginnen:

Rahmen

Ein weiteres Momentum von Von Kunst Leben ist die Zeit. In der Anwendung ist sie ein Metrum für Termine zu Workshops, Podcasts, Video-Slots zu denen Materialien frei zugänglich sind, der Rhythmus in dem neue Beiträge erscheinen u.s.f.

Anders ausgedrückt ist Zeit ein organisatorischer Rahmen des Geschäftsmodells zu Von Kunst Leben.

Das Motiv des Rahmens übernehmen wir und gestalten damit die grundlegenden Elemente, die unsere Inhalte präsentieren, auflisten und direkt zugänglich machen - Cards.

Von Kunst Leben, Design Token: Card Chrome + Navigation

Von Kunst Leben, Design Token: Card Chrome + Navigation

Es zeigt sich, dass die Form eines klassischen Kalenderreiters hier das Thema Herreras und unsere Absicht, Zeit und Bedeutung hervorzuheben mit einfachen Mitteln verbindet. Dieser Rahmen kann, in den unterschiedlichen Farben der Namensräume, sowohl die Gliederungen aller Inhalte der Anwendung unterstützen, als auch die grundlegenden Navigationselemente, die gleichseitigen Dreiecke, aufnehmen.

Mit deren Verwendung als Pfeile etablieren wir zwei Prinzipien der Navigation innerhalb der Anwendung, die uns auf den unterschiedlichen Inhaltsebenen begleiten und unterstützen werden. Sie tauchen jeweils nur bei Bedarf an drei fest definierten Positionen im Rahmen der Cards auf.

Prominente Elemente

Prominente Elemente sind für uns - zum einen - die wesentlichen Elemente, die die Anwendung als solche einrahmen. Sie dienen uns als visuelle Einfassung und Orientierung, und sie beherbergen - zum anderen - zugleich benötigte Navigationselemente. In unserem Falle sind dies Kopf und Fuß (Header und Footer) der Anwendung:

Von Kunst Leben, Design Token: Card Chrome + Navigation

Von Kunst Leben, Design Token: Toplevel Application Chrome + Navigation

Hier verwenden wir die Grundfarbe, zwei bereits etablierte Grundelemente der Anwendung, ein grundlegendes Navigationselement und ein Begrenzungs- und Verbindungselement:

Während die Kopfleiste den Titel der Anwendung aufnimmt, wird die Fußleiste mit ausgeschriebenen Verweisen auf alle Namensräume, also die einzelnen Inhaltsbereiche der Anwendung befüllt.

Die Navigationselemente etablieren die einzig tatsächlich benötigte navigatorische Redundanz innerhalb der Anwendung. Das nach unten weisende schwarze Dreieck im Kopf weist auf den Fuß, womit sich dort die Übersicht über alle Namensräume finden lässt. Das nach oben weisende Dreieck im Fuß etabliert und wiederholt die Navigation zum Anfang der Anwendung, wie sie auch aus jedem Rahmenelement unterhalb der 1. Anwendungsebene möglich ist.

Heroes

Heroes erfüllen einen einfachen Zweck: Sie verweisen an prominenter Stelle - meist im Rahmen des so genannten Landing, dem Ort der ersten Begegnung mit der Anwendung, auf eines oder mehrere Kernelemente, die wir hervorheben oder Ereignisse die wir propagieren wollen.

Was passiert, wenn wir für die Heroes-Funktion nun tatsächlich ein geometrisches Element direkt aus Herreras Katalog entnehmen und es zweifach verfremdet in unser Design-System einfügen? Wir schauen zunächst einmal nur auf das entsprechende Design-Token für sich - später fügen wir es in den Fluss der Anwendung ein.

Es handelt sich um eine Verschränkung von zwei in einer Reihe Herreras vorgefundenen Motiven: Ihr Gemini-Motiv und eine Variation davon, welche sie um 90 Grad gekippt hat. Wir verwenden das vertikale Gemini-Motiv und kippen es unsererseits, analog zu der Ausrichtung in Herreras Gemini-Variationen. Anschließend spiegeln wir es und adaptieren unsere Anwendungsfarbe darauf.

Solcher Art Verfremdungen externer Quellen durchzuspielen ist ein effektiver Prozessschritt - beim Gestalten ebenso wie beim Programmieren. Insbesondere hilft es das Andere dem Eigenen anzunähern anstatt umgekehrt.
Die Entwicklung neuer Formen des Zusammenwirkens von Design und Technik im Verlauf der letzten Jahre bringt auch scheinbar konträre Auffassungen zueinender in einen produktiven Bezug.

Von Kunst Leben, Design Token: Billboard, Landing

Von Kunst Leben, Design Token: Billboard, Landing

In Verbindung mit der Abgrenzung durch unser Barcode-Motiv erhalten wir ein Billboard für unser Landing, das sich unprätentiös - und hoffentlich ohne Copy-Cat-Syndrom - in unser Design-System einfügt. Wir werden sehen…
Gemeinsam mit der Kopfleiste und dem Chrome bestehend aus den Barcode-Elementen:

Von Kunst Leben, Design Token: Billboard, Landing

Von Kunst Leben, Design Token: Billboard + Header + Chrome, Landing

Mit dem Billboard, platziert direkt unter dem Kopf der Anwendung, haben wir nun das zunächst letzte benötigte Element erzeugt, das wir verwenden werden, um alles gemeinsam in unser Design-System umzusetzen - und tatsächlich mit Inhalten zu befüllen. Daher zuvor noch etwas dafür Elementares…

Schriften und Satz

Wie erwähnt ist der Barcode im Grunde bereits eine Schrift. Die hier verwendete Libre Barcode 39 ist eine freie und so genannte Offene Schrift, die von verschiedenen Entwicklern gepflegt und weiterentwickelt wird. Es existiert eine weitere Version - Libre Barcode 128 - die ein tatsächliches Scannen des zu Grunde liegenden Textes ermöglicht, ganz ähnlich den inzwischen allgegenwärtigen QR-Codes.

Titelschrift (für Namensräume, Überschriften und den den Anwendungsnamen an sich) ist Fira Sans, eine ebenfalls freie serifenlose Schrift, die wir durchgängig in Versalien und - für die Titel der Namensräume und für Navigathionselemente - stark gesperrt verwenden können. Fira Sans wurde von Carrois Apostrophe in Berlin für Mozilla entwickelt und ist speziell auf gute Lesbarkeit auf kleineren Displays ausgerichtet.

Brotschrift ist Merriweather Sans, eine ebenfalls serifenlose freie Schrift entwickelt von Sorkin Type, die sich an traditionelle Schrifttypen anlehnt und insbesondere auch in sehr kleinen Schriftgrößen noch sehr gut lesbar bleibt.

Von Kunst Leben, Design Token: Basic Typesetting

Von Kunst Leben, Design Token: Basic Typesetting

Genau genommen kommt das gesamte Layout mit exakt zwei Schrifttypen und ohne zusätzlichen Schriftschnitt aus. Merriweather Sans ist ein variabler Font, was bedeutet, dass Italic und Gewichte von 300 bis 900 skalierbar bereits enthalten sind. Wir benötigen zunächst aber nur 300 und Italic. Fira Sans verbindet sich sehr ruhig und harmonisch sowohl mit Merriweather Sans als auch mit Merriweather Serif. Der Einsatz auch der letzteren böte zusätzlich die Möglichkeit, an ausgesuchten Stellen Blocksatz einzusetzen und dadurch bestimmte Elemente abzuheben, ohne ungewollte Unruhe zu erzeugen.

Die verwendeten Schriften sind hochverfügbar, was bedeutet, dass sie zuverlässig von weltweit verteilten Servern geladen werden können. Im Gegensatz zu generisch verfügbaren Schriften, die von der jeweiligen Verfügbarkeit auf dem System des anzeigenden Gerätes abhängig sind, lässt sich so ein übergreifend einheitliches Schriftbild umsetzen - ohne merkbare Performance-Einbußen. Als Backup ließen sich die Schriften bis in alle Zeiten zusätzlich als lokales Backup vorhalten.

Um, über die große Vielzahl von Anzeigegrößen und -formaten hinweg, einerseits ein einheitliches Layout und andererseits Rhythmus und optimale Lesbarkeit zu erhalten, verwenden wir eine fein abstimmbare modulare Skalierung von Schriften und Abständen, sowie eine Flusskontrolle aller im Layout aufeinander folgenden Elemente. Die Parameter dieser Harmonisierung helfen die Ausgabe automatisch konsistent mit den vorgegebenen Ausgabeformaten zu halten.

Die Vorstellung eines geräteübergreifenden pixel-genauen Layouts war zu keinem Zeitpunkt tatsächlich umsetzbar. Allein schon aus physikalischen Gründen.
Die exponentiell anwachsende Zahl unterschiedlicher Anzeigeformate jedoch hat inzwischen zur Entwicklung von Techniken geführt, mittels derer wir - zur Erreichung durchgängig bestmöglicher Ergebnisse - schließlich den Plattformen die Aufgabe der Steuerung und Überwachung unserer Layouts überlasssen können - vorausgesetzt wir setzen sie mit ausreichender Kenntnis und Sorgfalt ein.

Wie beschrieben verwenden wir bei serifenlosen Schriften Flattersatz. Es ergeben sich, in die entworfenen Rahmen eingefügt zunächst zwei prinzipielle Layoute für die Schriftanzeige …

Von Kunst Leben, Design Token: Section Cards Typesetting Layout

Von Kunst Leben, Design Token: Section Cards Typesetting Layout

Die Schrift-Layoute müssen im Zusammenspiel mit den Rahmen, Navigationselementen und deren Größen über alle Geräte- und Darstellungsgrößen hinweg harmonisieren. Hierfür legen wir einige Regeln/Grundsätze fest, denen wir auch bei weiterten Layouten bzw. erweiterter Anwendung der Layoute folgen.

Wie beschrieben lassen wir die Bestimmung von Schriftgrößen und deren Verhältnis zu den rahmenden Elementen von der jeweils anzeigenden Plattform steuern, welche dabei wiederum einer von uns vorgegebenen modularen Skalierung folgt. Wir können somit unsere Vorgaben, wie z. B. Dreizeiligkeit der Teaser-Texte durchgängig anwenden und erhalten unter allen Umständen einen einheitlichen Rhythmus in der Darstellung und eine durchgängige Harmonie im Layout.

Rhythmus und Harmonie durch modale Skalierung ist hier durchaus musikalisch und geometrisch zu verstehen. Die Skalierung folgt den selben mathematischen Formen, die in Musik, Klängen, Architektur und Geometrie bildnerischer Gestaltung Anwendung finden.
Indem wir die Skalierung als Operator definieren, überlassen wir der Plattform die notwendige vielfache Rechenarbeit, sparen enorme Mengen an Code (und damit Ladezeiten der Anwendung) und schließen - nicht zuletzt - die sonst unvermeidbaren eigenen Fehler bei der Umsetzung aus.
Die verwendete Skala kann ebenso auch jederzeit durch eine andere ersetzt werden, und somit können, ohne großen Aufwand, Harmonie und Rhythmus der in der Anwendung verwendeten Layoute grundlegend beinflusst werden.

Verschieden kleine Helfer, wie oben gesehen der Disclaimer im Rahmen, werden an bestimmten Elementen nur in wiederkehrenden Positionen angebracht.

Änderungen von Farbhintergründen etc. können eingesetzt werden, um sowohl die Orientierung zu stützen, als auch Aufmerksamkeit an bestimmten Stellen zu erzeugen und/oder auch über direkte Verlinkung bestimmte Inhalte in den Schnellzugriff zu bringen.

Fluss

Es ist Zeit die Dinge beim Namen zu nennen. Wir können nun ein paar exemplarische Inhalte einsetzen, um zu erfahren, wie alles zusammenspielt. Doch ehe wir die einzelnen Komponenten befüllen und anschließend zusammengestzt betrachten, zuvor noch ein kleiner Ausblick, wie die Dinge - neutralisiert - generell in Fluss kommen, ein Fließtextbeispiel. Wir klappen hierfür das fokussierte Card-Element auf um den gewünschten Inhalt vollständig anzuzeigen:

Von Kunst Leben, Design Token: Textfluss 1. + 2. Ebene

Von Kunst Leben, Design Token: Textfluss 1. + 2. Ebene

Ein paar wichtige Eigenschaften und Verhaltensweisen des Layouts kommen hier zum Sprechen:

Das Hauptaugenmerk liegt bei den kleinen und großen Schritten der Anwendungsentwicklung auf der Zeit, die in der fertigen Anwendung aufgewendet muss, um sich angekommen zu fühlen - sowie auf der Anzahl der Schritte die notwendig sind, um die Lernkurve bei einem Erstbesuch zu bewältigen. Eine stetige Wiederkehr grundlegender Elemente und Verfahren ist hierfür elementar.

Design-System

Bringen wir die Dinge im Design-System zusammen. Design-System ist hier als alles die Anwendung betreffende umfassender Begriff zu verstehen. Es dient dazu Fragen aufzuwerfen und damit zu beginnen sie zu beantworten.

Es stehen also einige Anforderungen noch aus. Zudem verfügen wir noch über keine der Funktionalitäten, welche die Anwendung später enthalten wird.

Achtung! Wir betrachten und scrollen hier immer noch Bilder.
Wir haben jedoch soviel wir tun und entscheiden konnten, bereits in die ersten Schritte gelegt. Ebenso ist im Hintergrund durch Testanwendungen bereits gewährleistet worden, dass alle geplanten Funktionalitäten - auch die hier nicht explizit erwähnten - und das Ganze wiederum auch in jedem technischen Minimal-Kontext, umsetzbar sind.
Und durch die Modularität des Prozesses schließlich bleiben wir insgesamt stets beweglich.

Cards

Wenden wir uns zunächst den Namensräumen zu, die die einzelnen Bereiche der Anwendung repräsentieren, und sehen wir uns an, wie sie in ihren jeweiligen Rahmen angezeigt werden können. Wir benutzen von hier an durchgängig die geläufige Nomenklatur und betiteln diese Elemente als Cards:

Zum Befüllen verwenden wir übrigens Texte einer weiteren großen Pionierin der bildenden Kunst - Lu Märten. Ihre Theorien - noch im Vorlauf des Weimarer BAUHAUS - sind richtungsweisend und immer noch sehr lehrreich auch und insbesondere in Bezug auf aktuelle Fragestellungen.

Von Kunst Leben, Design Token - Card Das Buch 1st Level

Von Kunst leben, Design Token: Card DAS BUCH 1st Level

Von Kunst Leben, Design Token - Card Workshops 1st Level

Von Kunst leben, Design Token: Card WORKSHOPS 1st Level

Von Kunst Leben, Design Token - Card Blog 1st Level

Von Kunst leben, Design Token: Card BLOG 1st Level

Erörtern wir kurz durch die bis hierher in den Cards gezeigten Merkmale:

Doch bevor wir auch im erweiternden Sinne das Zusammenspiel des bisherigen Designs mit den Inhalten betrachten…

Naturgemäß wird erst die tatsächliche Anwendung Von Kunst Leben die in diesem System angelegte Struktur ausspielen können.
Dazu werden minimale Animationen für Navigationsereignisse, das Scroll-Verhalten von Cards und anderen Elementen eingesetzt, die sowohl das Verstehen und Lernen als auch die Orientierung unterstützen
Sämtlich Dinge die wir uns zunächst noch vorstellen müssen - wenn überhaupt…

Sehen wir uns nun zunächst den befüllten Kopf der Anwendung an:

Von Kunst Leben, Design Token - Header

Von Kunst leben, Design Token: Application Header

… hier braucht es nicht viel. Aber befüllen wir auch das Billboard:

Von Kunst Leben, Design Token - Landing Billboard Loaded 1st Level

Von Kunst Leben, Design Token: Landing Billboard Loaded 1st Level

Wie verhält sich das, von Herrera abgenommene, für das Billboard adaptierte Modell in unserem Kontext? Setzen wir beides zusammen:

Von Kunst Leben, Design Token: Landing Segment

Von Kunst Leben, Design Token: Landing Segment

Nun befüllen wir noch den Footer mit dem benötigten Legal und - ganz klassisch - einer tabellarischen Übersicht über alle Namensräume der Anwendung.

Von Kunst Leben, Design Token: Footer

Von Kunst Leben, Design Token: Footer

Wir erfüllen hier en passant ein paar wesentliche Anforderungen zugleich:

Die ersten zwei Punkte haben hohe SEO-Relevanz. Suchmaschinen-Bots bevorzugen diesen Platz für ihre Orientierung, da er stets eindeutig auffindbar ist, er sollte entsprechend möglichst vollständige Relevanz aufweisen - und keinen Müll enthalten. Zugleich gibt eine Übersicht an dieser Stelle assistierenden Systemen (wie z.B. Screen-Readern) die Möglichkeit einer geordneten Erfassung der Anwendungsinhalte.

Landing

Setzen wir nun einmal, was wir bis hierher haben, an Hand eines möglichen Landings zusammen (gekürzt):

Von Kunst Leben, Design Token: Landing, Billboard,Sections 1st Level

Von Kunst Leben, Design Token: Landing, Billboard,Sections 1st Level

Hier wird unter anderem sichtbar, welche Möglichkeiten uns unser insgesamt modularer Aufbau eröffnet:

Dies ist nur die Oberfläche der Möglichkeiten, die ein solcher Aufbau ermöglicht.
Darunter ergeben sich weitere Möglichkeiten wie personalisierte Konfiguration (ohne Anmeldung!), veränderte Sortierungen bei wiederholtem Besuch u.s.f.

Content

Sobald einer der geteaserten Inhalte geöffnet wird, lassen sich auch erweiterte Bezüge herstellen - hier einmal bei ausgeklappter Card BLOG (gekürzt):

Von Kunst Leben, Design Token: Landing, Billboard, Sections 1st Level Blog

Von Kunst Leben, Design Token: Landing, Billboard, Sections 1st Level Blog

Aus der Liste der Blogposts wurde ein Beitrag ausgewählt. Verschiedene Aktionen sind nun unterhalb des Beitrags möglich:

Es ist wichtig hierbei zu beachten, dass bei allen Erwägungen, die Navigation zu Inhalten betreffend, verschiedene Parameter in Betracht zu nehmen sind - solche die eine möglichst direkte und einfache Nutzbarkeit betreffen, und andererseits solche die technische Vorteile bedeuten.

Insbesondere sobald Medien-Inhalte, wie Video, Bilder und Audio in den Fokus kommen, müssen wir unsere Verantwortung für die Datenlast im Blick haben, die wir über die Verbindung der Nutzerinnen und Nutzer schicken.
Dies beinflusst die Entscheidung, welche Inhalte - und vor allem wie viel davon - wir unverzüglich zugängig machen wollen. Dabei sind verschiedene Strategien möglich.

Listings

Wir sind nun für diese verschiedenen Strategien bereits an der Oberfläche der Anwendung ausreichend ausgerüstet und können diese im Hintergrund jederzeit effektiv einsetzen - und vor allem je nach Bedarf optimieren.

Um diesen Effekt zu visualisieren folgendes Beispiel:

Von Kunst Leben, Design Token: List 1st Level Blog

Von Kunst Leben, Design Token: Landing, Billboard,Sections 1st Level Blog

Im Unterschied zu dem ausgeklappten Beitrag, der ein konkreten Bezug zum gelesenen Artikel anbietet, zeigen wir in der Liste der Beiträge zwei Elemente an, die ausschließlich die Auswahl von Beiträgen betrefen:

Der im Kontext mit dem vorher gelesenen Beitrag angezeigte Bezug auf einen bestimmten Podcast ist nicht mehr gegeben, er wird daher auch nicht angezeigt.

Textsuchen - vor allem sinnvolle Textsuchen - und das Anzeigen relevanter Inhalte sind ein gutes Beispiel, wie weit Modularität reichen kann. Technisch betrachtet, kann Relevanz leicht von Hand festgelegt und auf Grundlage der im Design-System bereits gegebenen Modularität bereitgestellt werden. Textsuchen jedoch benötigen wesentlich komplexere Parameter, um nicht zu stolpern.
Während das eine also relativ unaufwändig zu Hause hergestellt werden kann, bindet das andere besser die Schnittstelle eines externen Algorithmus ein, der für uns die Arbeit erledigt. Das ist erweiterte Modularität.

Ganz allgemein kann die obige Form für ganz unterschiedliche Zwecke innerhalb der Anwendung eingesetzt werden, seien es Terminlisten für Workshops, Artikellisten, aber eigentlich sind Listen jeglicher Art und Ausstattung in diesem Schema ausreichend zu erfassen. Wir halten uns hierbei schlicht an die etablierten Positionen, Rhythmen, Farbgebungen und variieren deren Einsatz dem Bedarf ihres Auftauchens folgend.

Einen Ausblick, was diese Anwendung nun schließlich zu einer für ihren alltäglichen Wert geschätzten Anwendung machen wird - und wie unsere bis hier her entwickelte Struktur und dafür etablierten Elemente dabei zusammenspielen - gibt das folgende Kapitel Weitere Elemente.

Unser System ist nun für viele Eventualitäten seiner weiteren Entwicklung ausgerüstet. Weder gestalterische oder technische, noch inhaltliche oder strukturelle Änderungen erfordern auf einer derartigen Basis ein neues Erarbeiten der für eine Änderung oder Hinzufügung benötigten Voraussetzungen.

Diese Art Anwendung ist immer und doch nie fertig. Ihre Oberfläche zeigt - im Idealfalle - stets alles, was sie ist. Und das kann in der Tat etwas sehr Schönes sein.   

Doch ist, etwas unter der Oberfläche zu wissen, das weitere Dinge und Zusammenhänge aufscheinen lassen kann, von denen wir jetzt noch nicht wissen, dann doch wesentlich mehr)))

Weitere Elemente

Abgesehen davon, dass wir nur durch das Visualisieren und Ausprobieren uns den Wert unserer Anwendung deutlich vor Augen führen können, tun wir gut daran uns auf verschiedenste Ideen und Anforderungen - welche unausweichlich hinzukommen werden - in diesem Stadium so gründlich wie möglich vorzubereiten. Dies ist - neben der Notwendigkeit, am bis hierher aufgebauten System vielerlei Justierungen vorzunehmen, mit Farben und Struktur zu experimentieren - elementar.

Die Präsentation von visuellen Medien stellt in Bezug auf das gesamte Erscheinungsbild der Anwendung eine besondere Herausforderung dar. Einerseits in Bezug auf die Kohärenz des Gesamteindrucks, andererseits die Auswahlpräsentation und -navigation. Daher bedarf es einer klar Struktur und visuellen Halt vorgebenden Linie, was die Darstellung von Bildern bei verschiedenen Gerätegrößen und -formaten betrifft.

Mal sehen…

Bilder im Fluss

Zunächst einmal die Einbettung von visuellen Medien im Fließtext. Von Kunst Leben wird möglicherweise nicht viel Gebrauch davon machen. Das folgende Modell dient uns aber als Vorlage für die Einbindung von Bildern auch in anderen Kontexten, und wir werden die Darstellungen von anderen Medientypen ebenso darauf aufbauen:

Von Kunst Leben, Design Token: Text Flow + Media

Von Kunst Leben, Design Token: Text Flow + Media Content

Das war einfach. Wir setzen die Medientitel über- und die Caption-Zeilen unterhalb des Bildes rechtsbündig im Kontrast zum Flattersatz, um mit dem zusätzlichen Element das Schriftbild ruhig zu halten.

Podcast

Anders, und etwas komplexer wird die Entwicklung bei der Präsentation von Podcasts bzw. Podcast-Listen - mit Kontexten wie Überschrift, Kurzbeschreibung, Medieninformation und Bereitstellung von Feeds (für externe Player-Anwendungen) - hier machen wir eine generelle Ausnahme.

Es ergibt manchmal tatsächlich Sinn aus einem strengen Rahmen auszubrechen, besonders wenn es darum geht eine singuläre Anwendungsfunktion zu ermöglichen. Ganz besonders gilt dies, wenn ihre Einbindung ansonsten auf Grund ihres besonderen Verhaltens einen irritierenden Fremdkörper erzeugen würde.

Aber zunächst einmal, wie für andere Namensräume auch, sehen wir uns die benötigten Variationen (basierend auf den bis hier her etablierten Formen) in der Podcast-Card an:

Von Kunst Leben, Design Token:   Card Podcast 1st Level

Von Kunst Leben, Design Token: Card Podcast 1st Level

Wie wir gleich sehen werden helfen uns diese Variationen bei der Gestaltung des für kontinuierliches Abspiel benötigen Players.

Podcast-Player

Alle Podcasts - und idealerweise auch Videos (aber da hängt es gegenwärtig noch von der jeweiligen Plattformunterstützung ab) - sollen in einem Modus starten, der es erlaubt einem Podcast (oder Video) auch über Klickgrenzen hinweg zu folgen.

Es sind hierfür verschiedene Formen vorstellbar:

Allen gemeines Ziel ist es zum einen ungestört weiter lesen, anderen Verweisen etc. folgen und zum anderen jederzeit auch Neuauswahl und Wechsel des laufenden Mediums vornehmen zu können. Von den oben genannten erfüllen modale Elemente diese erste Vorausssetzung meist nicht ohne größeren programmatischen Aufwand. Einen Podcast auch im Hintergrund laufen lassen zu können ist jedoch ganz elementar - nicht zuletzt bei der Erzeugung des Werts unserer Anwendung.

Ich persönlich favorisiere für unsere Zwecke die fixierte Leiste, wie sie bei vielen Services und ihren Apps ebenfalls üblich ist - nicht so sehr, weil ich sie mag… Aber ihre Funktionalität ist überzeugend. Die Aufgabe besteht hier darin, für Nutzerinnen und Nutzer auf dem Weg dorthin (Sprung zur Leiste) unter allen Umständen ausreichend Orientierung zu bieten - niemand sollte verloren gehen.

Die allgemein am wenigsten penetrant oder irritierend wirkende Möglichkeit besteht darin, bei Aufruf eines Podcasts die Leiste mit dem laufenden Podcast, Start-, Pause- und Stopp-Elementen sowie Verweisen auf relevante Inhalte und der Möglichkeit die Übersicht aller Podcasts aufzurufen am unteren Bildrand einzublenden.

Achtung! Es sei auch hier in Erinnerung gerufen: Wir scrollen hier immer noch Bilder. Die in statischen Bildern nicht sinnvoll darstellbaren Funktionen und Animationen sind bei solcher Art Übergängen jedoch die wesentlichen Gestalter - welche wir uns hier dazu denken müssen.

Von Kunst Leben, Design Token: Text Flow + Podcast Footer

Von Kunst Leben, Design Token: Text Flow + Podcast Footer

Die Player-Leiste dockt oberhalb des Footers an respektive ist am unteren Rand des sichtbaren Bereiches fixiert, wenn der Footer nicht im sichtbaren Bereich ist. Das bedeutet: Scrollt der Footer in den sichtbaren Bereich bleibt die Leiste oberhalb des Footers, rutscht also entsprechend dessen Höhe mit nach oben, scrollt der Footer aus dem sichtbaren Bereich, bleibt die Player-Leiste wiederum am unteren Rand des sichtbaren Bereichs hängen und wird fixiert. Hier dargestellt an Hand einer zufälligen Scroll-Position während eines laufenden Streams.

Die Player-Leiste - und vor allem die Prävalenz ihrer Funktion (Abspielen des Podcast) gegenüber anderen Aktionen - ist durch ihr fixiertes Verhalten einfach zu erfassen.

Podcast-Player-Listings

Direkt aus dem Kontext der Player-Leiste heraus können wir nun auch bestimmte weitere Aktionen ermöglichen, zunächst das Aufklappen des Players, um die Liste weiterer verfügbarer Podcasts anzuzeigen. Wir klappen diese Liste - visuell weiterhin konsistent bleibend - nach unten heraus. Sie bleibt dabei mit der Player-Leiste an den Footer respektive an den unteren Rand des sichtbaren Bereiches angedockt.

Anders ausgedrückt - die Player-Leiste rutscht nach oben und gibt den Blick auf die Listen-Elemente frei. Ebenso rutscht sie auch wieder nach unten - um dort wieder anzudocken - sobald die Liste zugeklappt oder ein anderer Beitrag aus der Liste zum Abspiel ausgewählt wurde.

Von Kunst Leben, Design Token: Text Flow + Podcast Footer Extended

Von Kunst Leben, Design Token: Text Flow + Podcast Footer Extended

Da - abhängig von der Ebene (Landing oder spezifischer Namespace) - eine gewisse Redundanz der Elemente (Podcast-Listen-Card + Podcast-Liste) auftreten kann, hilft uns nun die visuelle Konsistenz der Elemente, die wir gerade bedienen, zum einen den Fokus auf unser Element nicht zu verlieren, zum anderen bereits Gelerntes einfach einzusetzen. Ein Klick auf das nach unten weisende weiße Dreieck und…

Das obere nach unten weisende Dreieck in der Player-Leiste - im Farbschema des Namensraums Podcast invertiert - sitzt nun Im Farbschema wieder normalisiert unten und weist nach oben - zum Schließen der Liste. Der laufende Stream läuft, sofern er nicht angehalten wird, unbeinflusst aller Aktionen weiter.

Was noch folgt

Schluss

Frage: Was ist eigentlich eine Anwendung?

Exkurs

Sich im Genuss der Oberfläche verstehen zu können ist eine Sache, die in Aufwand und Zeit möglichst unmittelbar sein soll. Die Mittel zu erfinden, zu erzeugen und stetig zu verändern, derer diese Erfahrung sich bedienen will, ist eine ganz andere, jedoch nicht weniger schöne als die Oberfläche an sich zu genießen.

Jede Anwendung, auch wenn sie nur die einfachste denkbare ist, ist ihrem Wesen nach hypertextuell - eines führt zum anderen. Begrenzungen, ob absichtlich oder unabsichtich halten einen Prozess auf und erzeugen dadurch Einbußen.
Der Kommunikation über das Internet ist das hypertextuelle Element inhärent. Das so genannte Hyper-Text-Transfer-Protokoll (http) ermöglichte zum ersten Mal direkte Verweise auf Elemente und den direkten Zugriff darauf, ganz gleich wo sich diese befanden. Sich hypertextuell durch Texte und andere Inhalte zu bewegen, die kreuz und quer verteilt sind, und dabei jegliche Hierarchie einfach zu passieren ist uns inzwischen zu einer Art zweiter Natur geworden.

Mit der schieren Zahl der verfügbaren Inhalte und dem Wunsch nach ihrer Monetarisierung wuchs auch immer wieder der Wunsch nach Struktur, aber auch Hierarchie und Abgrenzung. Wenig überraschend erschwert dies vor allem aber die Auffindbarkeit. Navigationsmenüs und -listen und -leisten haben ebenso wenig überraschend ihre Ursprünge in den frühen Walled Gardens des Internet (CompuServe, AOL, Yahoo), die gleichsam wie gute alte Bibliotheken ihr Inventar indexierten und schützten.

Bevor Suchmaschinen wie Google und andere Daten-Kraken (wie Facebook) der Hypertextualität auch technisch wieder zu ihrem Recht verhalfen, um ihre eigenen Vorstellungen von Monetarisierung zu verwirklichen, und dabei und dafür die Nutzung des Internet zu einem Kinderspiel machten, behalfen sich noch viele mit Indizierungen (Listen von Verweisen) - und manche tun es heute noch.

Halt!
Warte! Was hat dies alles mit Design zu tun?
Fast zu einhundert Prozent alles - ja, alles!

Den Schwierigkeiten des Navigierens durch die stetig anwachsenden und - vor allem - sich verändernden Ozeane der Information konnten Navigationslisten, Navigationsleisten und Menüs niemals Rechnung tragen. Sie hatten immer einen wesentlichen Nachteil, sie waren - qua ihres inhärent hierarchischen Wesens - entweder uneindeutig oder sehr schnell unübersichtlich und zudem bereits obselet, sobald sie einmal erstellt worden waren.

Um es noch schlimmer zu machen: Irgendwann wuchs die Vielfalt der Geräte auf denen diese Ozeane an Information von Nutzerinnen und Nutzern erfasst werden wollten exponential ins Unzählbare - und damit auch die Anzahl der benötigten Formate und Größen für ihre Präsentation. Andere Hilfsmittel, wie Hamburger-Menüs, die die Navigationslisten verklappen sollten wurden entwickelt. Das Problem nur: Sie öffnen - eben - Navigationslisten und können das Grundproblem nicht lösen.

Und langsam fanden Marktmacht und der offene Charakter des Internet zusammen, eine riesige Menge an Entwicklerinnen und Entwicklern - über den Globus verteilt arbeiten mit und in Tech-Konzernen daran unsere Anwendungen und ihre technischen Grundlagen zu verbessern und von unproduktiven Hindernissen (Einbußen) - ja - zu befreien. Diese digitale Ökonomie, die schon so lange unser Leben bestimmt, hat eine wesentliche Grundlage, technisch wie auch inhaltlich - Hypertextualität. Und um diese erfahrbar zu machen, über das im wörtlichen Sinne Textliche hinaus, braucht es Gestaltung ebenso sehr wie Entwicklung.

Design to the Rescue

Ja, ausgerechnet Designerinnen und Designer, die oftmals bis hierher noch nicht verstanden hatten, dass eine Site auch im günstigsten Falle nicht einfach eine Seite ist, die nur angesehen werden will, und die jenseits ihres eigenen Monitors und der darauf angezeigten mühevoll erstellten Layoute meist auch nicht über auch nur eine der Ansichten verfügten, auf denen ihre Arbeit aber schlussendlich konsumierbar sein sollte, tragen wesentlich zum Fundament der Entwicklung eines großen Teils neuer Anwendungen bei. Das Design einer Anwendung ist nicht länger notwendigerweise ein Nachtrag zu deren Funktionen - und umgekehrt muss deren Entwicklung sich nicht mit den Folgen träger Anwendbarkeit abgeben, nur um einem Design zu folgen.

Seit dem Aufkommen von Smartphones und Tablets hat sich diese Tech-Industrie bestehend aus Konzernen und Millionen von Freien mit der Entwicklung tatsächlich für den Zweck der Informationsverteilung geeigneter Werkzeuge befasst - und wird dies auch weiterhin tun - Zugänglichkeit ist die Grundlage für jedwede Monetarisierung.

Bisher ist noch jeder Ansatz den Laden dicht zu machen langfristig gescheitert. Dies liegt zuvorderst an einem dem Kapitalismus innewohnenden Momentum: Dass sich (wie es Schumpeter beschreibt) in ihm stets die anderen, kreativeren Formen der Monetarisierung durchsetzen und etablieren - und entsprechend immer neue gefunden werden.
Es gibt in der Masse keine nennenswerten Anbieter von Inhalten, deren Inhalte nicht zu einem mehr oder weniger großen Teil auch frei zugänglich sind - oder die zumindest unausgesprochen zulassen, dass dies geschieht.
Bezahlt wird in anderen Währungen (siehe Facebook, Google, TicToc etc.). Und die Auseinandersetzung mit den Konsequenzen müssen an ganz anderer Stelle geführt werden.
Eine Ausnahme stellen - zumindest ansatzweise - die großen Film-Anbieter dar. Doch auch dieses Modell zehrt sich - wie üblich - langfristig durch Überangebote selbst auf.
Wer etwas hervorbringt, das Interesse hervorruft, kann die Plattformen nutzen, und letztlich wird dann verhandelt, wie die Herstellung finanzierbar werden kann. Die verschiedenen Angebote ergänzen sich dabei in ihren jeweiligen Interessen.

Selbst die aktuell wie riesige Walled Garden agierenden Angebote wie Facebook stehen einer allgemeinen Zugänglichkeit nicht entgegen - ganz im Gegenteil. Ein erheblicher Teil unserer Werkzeuge kommt aus der Entwicklungsarbeit großer Konzerne, und umgekehrt geht ein erheblicher Anteil frei entwickelter Werkzeuge dort mit ein. Denn es liegt in ihrem ureigensten Interesse dieses Öko-System zu füttern.

Ein Schritt hierbei, der nicht hoch genug eingeschätzt werden kann, ist die Betonung der Einbindung des Entwurfsprozesses in den technischen Prozess - und umgekehrt. Diese Verschmelzung von Technik und Gestaltung ist auch eine Ermächtigung der daran Beteiligten.

Inzwischen sind daher auch die Browser mit denen wir, sei es auf Smartphone, Tablet oder Laptop/Desktop, die Datenströme konsumieren, hochklompexe Anwendungen, die Designerinnen und Designern ebenso wie Entwicklerinnen und Entwicklern eine enorme Bandbreite an Möglichkeiten bieten diese Ströme auch tatsächlich konsumierbar zu machen. Wir müssen diese Plattform nur nutzen, und soweit wir dazu beitragen können, weiterentwickeln…

Hypertext

Es hat sich durch diesen Prozess eine neue Sprache der Anwendungen und der Navigation über das Internet entwickelt - und diese neue Sprache ist zugleich die alte, ursprüngliche, die hypertextuelle Navigation aus dem Kontext heraus, die - der logische, nicht-hierarchische technische - Kern der Verteilung von Informationen über das Internet ist. Das was dies alles überhaupt möglich macht.

Wir - wirklich alle, ohne Ausnahme! - verwenden Info-Karten, Bilder, einfache Symbole und Farben als Namensräume zur Identifikation von Inhalten und bestimmten Bereichen - nur ein geringer Bruchteil unserer Klicks erfolgt über Menüelemente - wenn überhaupt. Mehrere Generationen von Menschen gleichzeitig haben sich in sehr kurzer Zeit mit diesen Sprachelementen erneut und neu vertraut gemacht - und nutzen sie ganz selbstverständlich, wie eine natürliche Resource.
Und richtig eingesetzt und angewandt machen diese Elemente einen grenzübergreifenden und barrierefreien Zugang zu den gesuchten Informationen ebenso möglich, wie sie Raum bieten für Vorschläge von Anderem, Verwandtem oder Neuem. Etwas wovon Navigationsleisten, und andere hierarchisch aufbereitete Listen, selbst wenn sie nur den Namensraum einer einfachen Site abdecken müssen, noch nicht einmal träumen dürfen.

Wir alle bevorzugen intuitive Fortbewegung, ganz so wie wir auch nicht für jeden Schritt, den wir tun, zuvor den richtigen Ort für das Aufsetzen unseres Fußes aus einer Liste heraussuchen. Das so genannte Menu-Diving in Applikationen gleich welcher Art zählt sicher zu den am meisten verachteten Sportarten.

Wir sind somit, vernünftigerweise und gleichsam gezwungenermaßen, zu der ursprünglichen Form der Fortbewegung im Internet zurückgekehrt, welche die Grundlage für dessen universelle Nutzbarkeit darstellt - Hypertextualität.

Verbunden in der Expertise einer weltweit verzweigten Gemeinschaft können wir mittlerweile die meisten der technischen Hindernisse (lange Ladezeiten, unvollständige und nicht auffindbare Inhalte) und visuellen Ambiguitäten, denen wir auch heute noch häufig begegnen - und die uns dazu bringen, nach wenigen Augenblicken lieber einen anderen Ort aufzusuchen, sehr gut umschiffen.

Wir müssen es nur tun.

Kontext

Die Anwendung für Von Kunst Leben nutzt die aktuellen und besten Fähigkeiten der Browser als Plattform - dabei geht sie explizit vom einfachst möglichen Anwendungsfall und der geringsten technischen Unterstützung aus und setzt alle erweiternden Erfahrungen darauf auf. Somit wird keine Nutzerin und kein Nutzer von vorne herein ausgeschlossen. Die Anwendung ist höchst performant und jederzeit, auch in weiterer Zukunft, immer noch skalier- sowie um neu hinzu kommende Elemente erweiterbar. Anstelle einer monolithischen Serverseitigen Anwendung oder eines Programms oder Frameworks kommt daher ein Design-System zur Anwendung, das einerseits auf die Möglichkeiten der Plattform (Browser) setzt und andererseits auf für den Bedarf zugeschnittenen Code.

Nur unter solchen Voraussetzungen ist es überhaupt möglich, jede technische Entscheidung aus der Perspektive des Designs und jede Design-Entscheidung aus der Perspektive der Technik heraus umzusetzen - ohne hierbei an die Grenzen des Machbaren zu stoßen oder letztendlich doch Abstriche bei der Nutzbarkeit zu machen. Die Prinzipien sind im Wesentlichen:

  1. Expertise weltweit verzweigter Expertinnen und Experten in Design und Entwicklung, die das gleiche Ziel verfolgen: Das Web zu einem besseren Ort machen)))
  2. Gleichzeitige Entwicklung von Design und Technik, zusammengefasst in einem Design-System
  3. Verwendung von Fonts entweder proprietärer Herkunft (soweit genereisch auf allen unterschiedlichen Systemen vorhanden), oder vorzugsweise ausgewählte so genannte Offene Fonts, die extern abrufbar dauerhaft systemübergreifend einheitlich zur Verfügung stehen
  4. Erstellung von Design-Token (übergreifend änderbare technische und visuelle Elemente) für einen vielseitigen Einsatz innerhalb der Anwendung
  5. Tests auf Inhalte und Ausnahmen
  6. Entwicklung erweiterter Funktionalität der Anwendung
  7. Tests zur Prüfung von Performance, Zugänglichkeit und SEO-Validität
  8. Werkzeuge für die offline-Anwendung und Optimierung der Performance (ähnlich einer installierten Software - nur ohne Installation)

Das Ganze kann wie der Aufbau einer Pyramide betrachtet werden - vom Sockel zur Spitze. Wobei der Sockel erst entsteht, wenn die Beschaffenheit und Beschaffung der Materialien ausreichend geklärt sind.

Im Falle von Von Kunst Leben bedeutet dies zunächst die Entwicklung von Design-Token, die durch die Form- und Farbsprache Carmen Herreras inspiriert entwickelt wurden - zugleich mit der Eruierung der für unseren Zweck am besten geeigneten und sicher skalierbaren technischen Mittel. Diese Design-Token durchlaufen einen Iterationsprozess, in dem ihre technische Umsetzung und ihre Anwendbarkeit auf sie zurück reflektiert. Konkret? Im Folgenden einige der Schritte für eine Iteration

  1. Auswahl und Test von Schrifttypen und Schriftgrößen übergreifend auf unterschiedlichen Orientierungen, Bildschirmgrößen und -auflösungen
  2. Auswahl und Anwendung von entwickelten Farbtafeln auf Navigation, Namensräume (Kategorien), Chrome (Verzierungen)
  3. Gestaltung einzelner Navigationselemente, Entwicklung übergreifender Elemente, Test auf Anwendbarkeit
  4. Definition und Gestaltung einzelener Inhaltsformen, Definition benötigter Ebenen (Sektionen, Artikel)
  5. Abgleich der unterschiedlichen Inhaltstypen (Übersicht, Artikel, Sektionen) mit Hinblick auf die Anzahl der jeweils benötigten Ebenen (Anpassung)
  6. Entwicklung und Einführung besonderer Elemente (Disclaimer, Billboard)
  7. Reduktion
  8. Test

In diesem Prozess bildet sich zugleich der eigentliche Sockel - das Design-System, worauf wiederum die nächsten Iterationsschritte aufsetzen u.s.f.

Diese Vorgehensweise hat den immensen Vorteil, dass zu keinem Zeitpunkt ein vollständiger Umbau notwendig wird, da alle Elemente auf die an sie gestellten Anforderungen hin getestet sind. Selbst wenn das grundlegende Design (Aussehen, Struktur, Layout oder Funktion) geändert werden soll, kann dies nach den selben Prinzipen auf dem Vorhandenen aufbauend erfolgen, ohne dass alles nochmals von vorne beginnt.

Ist der Sockel solide und tragfähig, kann mit der Konkretisierung begonnen werden. Es lassen sich nun verschiedene Inhalte und Ideen auf das System werfen. Was nicht überzeugt, wird auf der Ebene der Design-Token überarbeitet oder neu entworfen. Der Abgleich mit den jeweiligen technischen Erfordernissen bleibt im Fluss.

Sind dieser Art die Rahmenbedingungen erst einmal definiert, bekannt und erfüllt, kann die Entwicklung der in diesem Prozess definierten Funktionalität für die Anwendung umgesetzt werden. Dies wiederum ist ebenfalls ein iterativer Prozess, der (im Idealfalle) auf Ebene der Design-Token umgesetzt wird u.s.f.

Es gibt schon mehr als nur einen Grund, warum sich so viele Katzen im Internet tummeln.

smplrtrn