PAGE eDOSSIER XX.

14 001

eDOSSIER
39.2015
shop.page-online.de/
downloads

Modulare Gestaltung:
Neue Designansätze für
komplexe Webprojekte
• Atomic Design
• Micro-UX
• Visueller Trend: Aggregator-Apps
• Algorithmic Design
• Making-of: Modeplattfom About You

Das PAGE eDossier 39.2015 enthält einen Beitrag aus PAGE 06.15 (EVT Mai 2015), PAGE 01.2015 (EVT Dezember 2014), PAGE
02.2015 (EVT Januar 2015), PAGE 04.2015 (EVT März 2015) und aus PAGE 09.14 (EVT August 2015). Im Text enthaltene Links
wurden beim Erscheinen des eDossiers nicht mehr geprüft.
IMPRESSUM Redaktion PAGE, Borselstraße 28, 22765 Hamburg; info@page-online.de; Telefon: 040 85183-400, Fax: -449; www.page-online.de Chefredakteurin/Publisher:
Gabriele Günder, V.i.S.d.P. Autoren: Sebastian Betz, Stefan Bodeit, Arne Schätzle (as), Lena Simonis Anzeigenleiter: Alexander Herz; alexander.herz@page-online.de; Telefon:
+49 85183-480, Fax: -489 (verantwortlich für die Anzeigen und Promotion); PAGE erscheint in der Ebner Verlag GmbH & Co. KG, Karlstraße 3, 89073 Ulm Geschäftsführer: Ger-
rit Klein, Martin Metzger (Stellvertreter), Florian Ebner. Alle Beiträge sind ur­he­berrechtlich geschützt. Alle Rechte, auch Übersetzun­gen und Zweitverwertungen, vorbehalten.
Reproduk­tionen, gleich welcher Art, ob ­Fotokopie, Mikrofilm oder Er­fas­sung in Datenverarbeitungsanlagen, nur mit schrift­­li­cher Genehmigung des Verlages. Eine Vermietung,
Verleihung sowie Verkauf oder eine ­sonstige Form der Zugänglichmachung an Dritte ist Ihnen nicht gestattet. Aus der Veröffentlichung kann nicht geschlossen werden, dass
die beschriebe­nen Lösungen frei von gewerblichen Schutzrechten sind. Für den Fall, dass hier unzutreffende Informationen enthalten sein sollten, kommt eine Haftung nur bei
grober Fahrlässigkeit des Verlages oder seiner Mitarbeiter in Betracht. Weitere eDossiers, Einzelhefte und Aboangebote gibt’s unter shop.page-online.de
082 PAGE 06.15

ATOM MOLEKÜL

ORGANISMUS

© Brad Frost

TEMPLATES SEITEN

WERKZEUG
Im Teilchen-
beschleuniger
Atomic Design gilt als effiziente Methode für die Entwicklung umfangreicher
Websites. Auch einige deutsche Agenturen schwören schon auf das mit
kleinsten Interface-Bausteinen arbeitende Gestaltungsprinzip aus den USA
● Der amerikanische Webdesigner Brad Frost hat’s
erfunden, und gerade arbeitet er an einem Buch mit
dem Arbeitstitel »Atomic Design« (  http://is.gd/ato
micwebdesign  ). Seitdem er das Gestaltungsprinzip,
mit dem große Designteams auch in umfangrei­chen
Web­projekten visuelle Konsistenz wahren können
(sollen), 2013 auf der beyond tellerrand in Düssel­
dorf vorstellte, haben es immer mehr Agenturen
und Designabteilungen für ihre internen Workflows
adaptiert. »Für unser Projekt war Atomic Design die
optimale Methode, weil es uns erlaubt, mit hoher Ge­
schwindig­keit viele neue Fea­tures und Funktionalitä­
ten für un­sere Website zu entwickeln«, meint Stefan
Tobel, Head of Shop Management bei About You, dem
im Sommer 2014 gelaunchten Hamburger E-Com­
Die Systemkomponenten des Atomic Design
Atome HTML-Elemente (Label, Input, Button et cetera),
auch Elemente wie Farbpaletten, Fonts und Animationen
Moleküle Gruppierte Atome, etwa ein Suchformular aus
den Elementen Label, Eingabefeld und Button
Organismen Zu Interface-Elementen gruppierte
Moleküle wie Header, Footer und Navigation
Templates Zu Layouts zusammengefasste Organismen
Seiten Werden die Platzhalter eines Templates durch
spezifische Inhalte ersetzt, entsteht eine individuelle Seite
PAGE 06.15 083
merce-Start-up (siehe PAGE 09.14, Seite 86 ff.). Mit
seinem Team nutzte er Brad Frosts Designprinzip
für die Entwick­lung der Modeplattform.
Responsive Design denkt längst modular
In Zeiten responsiven Designs ist die Webseite ei­
gentlich nicht mehr die maßgebliche Gestaltungs­
einheit. Atomic Design versteht Webprojekte daher
als Summe kleinster Designbausteine, aus denen
man Interface-Elemente – Buttons, Textfelder, For­
mula­re et cetera – zu ganzen Webseiten zusammen­
setzt. Gerade umfangreiche Auftritte durchgehend
konsistent zu gestalten, kann ausgesprochen schwie­
­rig sein. Zwar sollten Styleguides das Problem lö­
sen, doch ab einem bestimmten Komplexitätsgrad
und einer bestimmten Teamgröße gelangt man
auch mit diesem Instrument nicht zwangs­läufig zu
einer einheitlichen Designumsetzung.
Frosts Antwort auf das Dilemma: Das Designsys­
tem selbst – Atomic Design – liefert die methodische
Basis, um konsistente und skalierbare digitale Sys­
teme zu entwickeln. Ihm folgend basteln Designer
aus Webseiten-Atomen Moleküle, die sie zu Organis­
men, in einem weiteren Schritt zu Templates und da­
nach – der Kreis schließt sich – zu Webseiten zusam­
menfügen. Wenn Frosts Chemie-Nomenklatur
084 PAGE 06.15 › WERKZEUG › Atomic Design
Pattern Library und Website für die Storytelling-
Plattform Urban Hub
Im Styleguide oben sieht man alle Headline-Varianten des
Smart-Citys-Projekts von Triplesense Reply. Die Code-
schnipsel eines Elements klappen auf, sobald man es anklickt.
Alle Elemente sind in HTML erstellt und lassen sich wieder­-
verwenden, ohne sie immer wieder neu zu schreiben. Ände­-
rungen auf Atomebene vererben sich aufwärts durch die
gesamte Pattern Library – ganz ohne jede Instanz des Ele-­
ments manuell zu ändern. Auch den Code vervielfältigt
man nicht per Copy-and-paste. Man schreibt lediglich eine
Referenz in das übergeordnete Element.
↗  www.urban-hub.com/de
beim Übergang von Organismen zu Templa­tes
bricht, so ist das nach seinem Bekunden – ganz prag­
matisch – dem besseren Verständnis aufseiten der
Kunden geschuldet. Denn die wären am Ende ver­
wirrt, spräche man bei Präsentationen von Molekü­
len, Organismen und Universen statt von Buttons,
Formularen und Webseiten.
Frost weiß auch: In der Praxis hängt der Erfolg
sei­nes Arbeitsvorschlags von den richtigen Ge­stal­
tungs­tools ab. Bereits in der Vergangenheit machte
er sich mit Plattformen für Webdesigner einen Na­
men, wie beispielsweise This Is Responsive (  http://
is.gd/thisisresponsive  ), Mobile Web Best Practices
(  http://is.gd/mwbestpractices  ) oder Style Guide Re­
sources (  http://styleguides.io  ).
Um nun seine Methode Atomic Design in die Pra­
xis zu verlängern, hat Frost die Pattern Library Pat­
tern Lab (  http://patternlab.io  ) entwickelt. Diese ver­
bindet mehrere bestehende Technologien zu einem
regelrechten Labor für Designsysteme – mit einem
Webeditor auf PHP-Basis, der Template-Libra­r y Mus­
tache, dem Datenformat JSON und dem View­port
Resizer, der mit HTML, CSS und JavaScript arbeitet.
In diesem gepimpten Webseitengenerator lassen
sich Webseiten-Elemente von Grund auf entwickeln
und ablegen, sodass alle Projektbeteiligten auf eine
verbindliche Übersicht zugreifen können.
Ob die Pattern Library nun unter der Bezeichnung
Code Pattern Library, (Living-)Styleguide oder Pat­
tern Lab firmiert, ist egal – wichtig ist die Praxis. »Ei­
ne Pattern Library ist kein Ablagesystem, sondern ein
lebendiger Ort, an dem sich De­signer und Entwick­
ler treffen, um gemeinsam und gleichbe­rechtigt an
einem Projekt zu arbeiten«, sagt Michael Schieben,
Designer bei precious design studio in Hamburg.
Atomforschung in der Praxis
Was mit responsivem Design als Treiber modula-
ren Designs begann (siehe PAGE 02.15, Seite 24 f.),
setzt sich nun im Atomic Design als modularer Ge­
staltungsmethode fort. Während Namen und tech­
nische Konfigurationen der konstituierenden Sys­te­
me variieren, haben sie doch eines gemeinsam: Da
sie bereits Webstandards wie HTML und CSS inte­
grieren, erzeugen sie ein wesentlich flexibleres und
lebendigeres Bild als starre Photoshop-Styleguides,
können beispielsweise auch Verhalten abbilden und
las­sen sich ohne große Umstände skalieren.
Wolf Brüning, Senior Interaction Designer in der
digitalen Entwicklung des Hamburger Versandhänd­
lers OTTO, zeigt in seinem Blog produktbezogen
eindrucksvoll, wie sich in der Praxis eine codebasier­
te Pattern Library als op­timale Lösung für alle beteili­
gten Gewerke erwiesen hat (  http://is.gd/patternlib
rary  ). Und die britische Frontend-Developerin An­
na Debenham hat in ihrem Blog Gimme Bar eine
ganze Sammlung an Pattern Libraries zusammenge­
tragen (  http://is.gd/gimmebar  ).
Idealerweise steht die Pattern Library als Mittle­
rin zwischen Designtool (Photoshop, Sketch oder

Ähn­lichem), in dem die Gestaltungselemente ent­
worfen werden, und Produktions-, Content-Manage­
ment- oder Shopsystem, in dem sie zur Anwendung
kommen. Vorteil für den Workflow: Da die Pattern
Library bereits Webstandards integriert hat, kann
man dem Entwickler statt starrer Photoshop-Designs
und epischen Beschreibungen bereits Codeschnip­
sel übergeben.
Beim Hamburger E-Commerce-Start-up About
You entschied man sich von Beginn an für einen
HTML-Styleguide mit definierten CSS-Klassen und
Markups für einzelne Komponenten. Da die Library
mit dem Paketverwaltungstool Bower aktualisiert
wird, muss man Updates nur einmal einpflegen, die
Aktualisierung an allen weiteren Stellen erfolgt da­
nach automatisch – ein Vorteil, den sich auch andere
Style­guides zunutze machen. Darüber hinaus erläu­
tert der Styleguide, wie die Komponenten verwen­
det werden sollen.
Wenn Designer und Entwickler im selben Sys­tem
arbeiten, durchleben sie schon zu einem sehr frühen
Zeitpunkt sehr präzise Abstimmungsprozesse. So
ver­ändert ein Style­guide nicht zuletzt auch den Work­
flow: Der gängige Transfer, in dem Designer Ent­
wicklern ihre Gestaltung erklären, weicht einer ver­
stärkten Kollaboration. »Dadurch«, erklärt Stefan
Tobel, »sprechen alle die gleiche Sprache und es gibt
weniger Missverständnisse.«
Tschüs, Fleißarbeit
Auch Astrid Wunsch, Kreativdirektorin bei der Frank­
furter Digitalagentur Triplesense Reply (  w ww.triple
­sensereply.de  ), hat mit ihrem Team gerade zum ers­
ten Mal Atomic Design als Gestaltungsmethode ein­
gesetzt, und zwar für das Smart-Citys-Projekt Urban
Hub (  www.urban-hub.com/de  ), eine internationale
Storytelling-Plattform, die Triplesense Reply ge­mein­
sam mit ThyssenKrupp Elevator auf Basis von Word­
Press konzipierte. »Bisher haben wir die einzelnen
Module – im Frost’schen Sinne Organismen –, die
für eine bestimmte Website konzipiert und gestaltet
wurden, in einer sogenannten Kitchen Sink, einem
sehr langen Photoshop-Dokument, aneinanderge­
reiht«, berichtet Wunsch.
Atome hin, Moleküle her, »faktisch braucht man
zu Beginn des Gestaltungsprozessses ein Bild der
Webseite«, sagt Astrid Wunsch. »Wir haben daher
zunächst in Photoshop ein, zwei Seiten als Ganzes
entworfen, um dem Kunden und auch für uns zu
zeigen, wo die Reise hingehen soll.« Danach setzten
die Designer sich zügig mit den Frontend-Entwick­
lern zusammen, um die Designs zu atomisieren und
einzelne Elemente für das selbst aufgesetzte HTML-
Pattern-Lab festzulegen. »Unsere Designer haben
zum ersten Mal mehr im Frontend als in Photoshop
gearbeitet«, erinnert sich Wunsch. »Dieser Prozess
bringt es mit sich, dass der Designer weniger gestal­
tet als sonst und stattdessen mehr im Team kommu­
niziert.« Komplementär brauche es für diesen Pro­
zess Frontend Developer mit einem guten Gespür
PAGE 06.15 085
xxxxxxxxxxxxxxxxxxxxxxx für Design. »Bereits früh zu entscheiden, welche
Bau­steine man benötigt, bedeutet allerdings einen
»Atomic größeren Aufwand beim Start des Projekts«, stellt
Design Astrid Wunsch fest.
macht erst Nicht zuletzt gilt es auch, das Konstrukt insge­
samt auf neuestem Stand zu halten – mit all seinen
ab einer Veränderungen. »Wir arbeiten in Scrum-Sprints und
gewissen haben alle zwei Wochen Releases«, sagt Stefan Tobel.
Projektgröße »Entsprechend nehmen wir alle zwei Wochen Ände­
Sinn« rungen an unserem Styleguide vor.« In der Regel
lohne sich die Anfangsinvestition, so Astrid Wunsch,
Stefan Tobel, da sich im weiteren Verlauf neue Patterns, ob nun
Head of Shop Molekül oder Template, schneller entwickeln und
Management, integrieren ließen. Zudem falle einiges an Fleißar­
About You beit weg. »Durch die enge Verzahnung kann das Team
↗ www.aboutyou.de schnell Entscheidungen treffen, es gibt keine gro­
ßen Korrekturschleifen«, sagt sie. Außerdem spart
man sich mit der Etablierung von Standards neuer­
liche Diskussionen. »Unsere Frontend-Entwickler
wa­ren total happy, weil es so schnell ging«, berichtet
Wunsch, deren Team die Urban-Hub-Seite in rund
sechs Wochen fertigstellte.
Müssen Agenturkunden
Atomic Design verstehen?
Ob sich der erhöhte Startaufwand von Atomic Design
lohnt, hängt für Stefan Tobel vom Umfang, von der
Komplexität und vom Zeithorizont des Projekts ab:
»Atomic Design macht erst ab einer gewissen Pro­
jektgröße Sinn.« Während Tobel allerdings Atomic
Design für ein internes Projekt eingesetzt hat, muss­
te Astrid Wunsch noch den Kunden miteinbezie­
hen. Hier gäben dessen Vertrauen und das Vorstel­
lungsvermögen den Ausschlag: »Arbeitet man sich
von den Atomen Schritt für Schritt bis zu den Tem­
plates und Pages vor, hat man erst relativ spät vor­
zeigbare ganze Seiten«, sagt sie. Schlecht für die Ab­
PAGE eDossier stimmung mit dem Kunden.
»Modulare Um Atomic Design als Gestaltungsmethode ein­
Gestaltung«. zusetzen, brauche eine Agentur also auch den pas­
Weitere spannende senden Kunden. »Einen der einem so weit vertraut,
Geschichten über
dass er fürs Erste mit ein paar Moodboards und Lo­
ähnliche Design­prin­-
zi­pien wie Micro UX
rem ipsum zufrieden ist«, so Wunsch. In Projekten
und Algorithmic mit vielen Beteiligten und hohem Abstimmungsbe­
Design gibt‘s unter darf könnte es daher schwierig werden. »Uns kam
www.page-online.de/ entgegen, dass wir uns direkt mit dem Head of In­
PDDP1051
ternational Communications abstimmen konnten,
der alle Entscheidungen eigenständig treffen konn­
te«, resümiert Wunsch.
Die Herausforderung liegt auch darin, den Team­
mitgliedern die Methodik nahezubringen und Style­
guide, Pattern Lab oder Pattern Library als verläss­
Interview mit
Atomic-Design-Guru liche Referenz und als eine Sprache für Entwicklung
Brad Frost. und Gestaltung zu etablieren, auf deren Elemente
Neues zum hier permanent zurückgegriffen wird. »Während der Ent­
vorgestellten wicklungsphase tauchten immer mal wieder Elemen­
Designprinzip aus
te auf, die nicht im Styleguide standen«, berich­tet
erster Hand gibt’s
unter www.page-
Stefan Tobel. »Es hat schon ein paar Monate gedau­
online.de/ ert, bis alle am Projekt Beteiligten in dem richtigen
bradfrost_0615 Mindset waren.« as
086 PAGE 06.15 › WERKZEUG › Atomic Design

Precious’ Pattern Lab

Pattern Libraries als Prozess

● »Das Entscheidende und Spannende an einer Pattern Li­
brary ist, wie sie entsteht und sich verändert«, betont Michael
Schieben, Designer bei precious design studio in Hamburg
(  http://precious-forever.com  ). »Und eine gute Pattern Libra­
ry ist so aufgebaut, dass alle Beteiligten Zugang finden – oh­
ne aufwendige begleitende Regeln und Prozesse.« Auch sei
es nicht unbedingt erforderlich, so Schieben, die Frost’sche
FOUNDATION ATOM
Atomic-­Design-Werkzeugkette des Pattern Labs als verbind­
liche Vorgabe hinzunehmen. In manchen Projekten brauche
es eine Pattern Library mit individuellen Tools. Precious hat Color Button
die E-Commerce-Plattformen OTTO.de und hagebau.de beim
Etablieren eigener Pattern Libraries unterstützt. Im Folgen­ Ergänzend zu Brad Frosts Abhängigkeiten
den gibt das Hamburger Designstudio Einblick in ihr selbst Ansatz arbeitet precious mit Alle Patterns nutzen die Foundation.
einer dem üblichen Baustein­ Atome dürfen keine Abhängigkeiten
ent­wickeltes System und nennt fünf Prinzi­pien, auf die es
system vorgelagerten Ebene untereinander haben.
bei der Konzeption von Pattern Libraries ankommt. namens Foundation. In ihr
hat das Precious-Team Regeln Beispiel

1
(zum Beispiel Farben, Schrif­- Die verschiedenen Ausprägungen
Eine Wahrheit ten, Größen et cetera) definiert, und Zustände der Patterns werden
Konsistente Systeme brauchen eine feste Bezugsgrö­ die für alle Patterns gelten. ein­deutig benannt. Alle Gestaltungs-
ße. Die »Wahrheit« einer Pattern Library manifestiert sich regeln des Patterns hat das Team
Abhängigkeiten im LESS-Code unter dem Pattern-
immer im Code. Die Dateiformate, die für den Gestaltungs­
keine Namen gekapselt. Mithilfe des
prozess wesentlich sind, leiten sich aus der Implementierung
Parent Selectors & werden die Aus­-
im Code ab. Beispiel prä­gungen dort klar strukturiert.

2
Die Regeln werden als Variablen
Viele Ansichten und Mixins für einen CSS-Prepro- .Button {
Es gibt viele Betrachter (Visual- und UX Designer, Ent­ cessor, hier LESS, definiert: text-transform: uppercase
wickler, Product Owner) mit unterschiedlichen Interessen. &--primary {
@mainBlue: #09F;
Ihnen muss eine Pattern Library gerecht werden. Essenziell background: @mainBlue;
ist eine Live-Preview auf vielen Devices während der Zusam­ }

menarbeit von Design und Entwicklung. Die Versionierung &--secondary {

background: @white;
auf GitHub macht den Fortschritt sichtbar, eine browserba­
border: 1px solid @mainBlue;
sierte Dokumentation bietet Zugang zu Beschreibung, Code
}
und Beispielen für sämtliche Beteiligte und erleichtert die
}
Einarbeitung neuer Teammitglieder.
<a class="Button Button--

3
primary">Create Project</a>
Gemeinsames Arbeiten
Designer und Entwickler systematisieren das Design
und erarbeiten ein geteiltes Designverständnis, indem sie
ge­meinsam bestehende Entwürfe dekonstruieren. Dafür
braucht es technische Formate, zu denen Entwickler und
Designer gleichermaßen schnell Zugang finden.

4 Eindeutige Abhängigkeiten
Mittels Ordnerstuktur macht das System die Abhängig­
keiten der einzelnen Elemente eindeutig nachvollziehbar.
Eine klare technische Modularisierung, die einfach zu pfle­
gen und nachzuvollziehen ist, ermöglicht die Refaktorierung,
verhindert Unübersichtlichkeit und hilft, Gestaltungsregeln
an der richtigen Stelle zu implementieren.

5 Visualisierte Änderungen
Designer schätzen die Sicherheit eines statischen Bil­
des, während Entwickler es gewohnt sind, auf abstrakter Code­
ebene zu arbeiten. Um dieses Bedürfnis des Designers zu be­
dienen, lässt sich aus dem Code eine Momentaufnahme ge­
nerieren und als sogenannter Visual Lockstate in der Pattern
Library ablegen.
Ordner muss sein
Precious’ Pattern Library organisiert Patterns in einer Ordnerstruktur.
In den Ordnern steckt neben Code auch die Beschreibung des
Verwendungszwecks des Buttons. Die Template-Engine handelbars.js,
die dynamische Stylesheet-Sprache LESS oder die Auszeichnungs-
sprachen Markdown und YAML verstehen auch Designer.
 PAGE 06.15 087

MOLECULE ORGANISM TEMPLATE /PAGE

ButtonGroup SingleInputForm ProjectCreationPage

Abhängigkeiten Abhängigkeiten Abhängigkeiten
Molecule: ButtonGroup Organism: SingleInputForm Template: EntityCreationPage
Atom: Button Atom: Input Organism: Menu
Atom: Button Molecule: ButtonGroup Molecule: BlankStateHint
Atom: Button Organism: SingleInputForm
Diese ButtonGroup implemen- Atom: Button Atom: Input
tiert das Button-Pattern in Molekül: ButtonGroup
den Ausprägungen: primary Beispiel Atom: Button
und secondary. Die ButtonGroup hat das Team mittels Atom: Button
des handlebar-Helpers include direkt
Beispiel eingebunden. Implementierung
In der Beispiel-Implementierung Pages sind konkrete Ausformulierungen
des Patterns hat das Team die <div class="SingleInputForm"> von Templates. Sie transportieren das
Abhängigkeit zum Button-Pat- {{implements "Atoms/FormElements/ umfänglichste und genaueste Bild des
tern mit dem handlebar-Helper Input"}} Designsystems als Gesamteindruck.
implements definiert und damit <input class="Input" placeholder="Enter Am Gesamteindruck einer Page mit kon­-
eindeutig gemacht. Title ..."> kreten Inhalten kann man das Design­-
{{include "Molecules/FormElements/ system am einfachsten bewerten und auf
{{implements "Atoms/Buttons/ ButtonGroup"}}
unterschiedlichen Screens überprüfen.
Button"}} </div>
Änderungen nahm das Team anschließend
<div class="ButtonGroup"> an einzelnen Patterns (Atom, Molecule,
<a class="Button Button-- Organism) vor.
secondary">Cancel</a>
<a class="Button Button--
primary">Create
Project</a>
</div>

GitHub für alle Bild, Text, Code

Code und visuelle Lockstates werden versioniert. Die Image View Die Dokumentation mit Bildbeispiel, Beschreibung und Code-­
Modes für Bilddateien in der Commit-Ansicht auf GitHub eignen beispiel gibt Designern, Entwicklern und Product-Ownern
sich hervorragend, um visuelle Fortschritte und sonstige Verände- einen umfassenden Überblick über die bestehenden Patterns
rungen sichtbar zu machen. und erleichtert neuen Teammitgliedern den Einstieg.
046 PAGE 01.15 › THEMEN › Microinteractions

Task Force
Micro UX
Im Web und in den einschlägigen App-Stores buhlen zahllose
funktionsgleiche Anwendungen um die Gunst der User.
Aber warum ist eine Applikation am Ende erfolgreicher als ihre
Mitbewerber? Oft lautet die Antwort: Microinteractions

● Bei der Entwicklung digitaler Produkte stehen

meist das Konzept und die wichtigsten Features im
Vordergrund. Möglichst schnell ein Minimum Viable
Product in den App-Store stellen, um die Feinheiten
kümmert man sich später. Hoffentlich. Und Pardon,
bei bahnbrechenden Killer-App-Ideen wie einer mo­
bi­len Kalender- oder Wetter-Anwendung muss die
Frage nach dem Alleinstellungsmerk­mal erlaubt sein.
»The details are not details. They make the pro­
duct« – Charles Eames’ berühmter Satz gilt nicht nur
für dessen kongeniale Möbel-Evergreens, sondern
auch für digitale Produkte, sagt Dan Saffer (  w ww.
odannyboy.com  ). Der amerikanische Interaction De­
signer veröffentlichte 2013 das Buch »Microinterac­
tions« (»Designing with Details«, O’Reilly & Associ­
ates, ISBN 978-1491945926;  http://microinteractions.
com  ). Dort lesen wir: Bei digitalen Produkten kommt
es auf die Gestaltung der kleinen Interaktionsein­
heiten des Interfaces an. Diese Mikrointeraktionen
betreffen immer einen klar abgegrenzten Use Case:
das Anlegen eines Passworts, das Synchro­nisieren
der Daten, das Regeln der Lautstärke et cetera.

Implizite Dialoge zwischen User und

Interface Desi-
Neue Designsprache
gner
bei Google: Der Style­- Je nachdem, wie dieser
guide zu Androids Mate-­ Prozess gestaltet ist, be­
rial Design legt Wert geis­tert er den Nutzer
auf die Gestaltung der
entweder immer wieder
Interaktio­nen und
oder frus­triert ihn nach­
Joy of Use hebt auch auf Verhalten
Anwendungen, die neben hervorragender Funktionalität auch Freude bereiten, und Bewegung der
haltig. Wenn diese Inter­
sind beliebter bei den Usern. Exemplarisch: Die Eule auf dem Log-in-Screen einzelnen Elemente ab aktionen nicht nur sach­
des Developer-Hubs ReadMe ( h   ttps://readme.io )  verdeckt bei Eingabe des ↗ http://is.gd/ lich und funktional, son­
Passworts ihre Augen, so als respektierte sie die Privatsphäre des Users materialdesign dern liebevoll gestaltet
 PAGE 01.15 047

sind und dem User Freu­de machen, wird das sowohl

dessen bewusste wie auch dessen unbewuss­te Ent­
scheidung für (oder gegen) ein Produkt beein­
flussen. Kurz: Mikrointeraktionen betreffen, so Saf­
fer, das »Feel« im Look-and-feel eines Produkts.
»In der digitalen Produktentwicklung«, so Kers­
tin Meyer, Informationsarchitektin in der Berliner
Dependance der Kölner Agentur denkwerk (  w ww.
denkwerk.com  ), »hat sich in den letzten Jahren der
Human-Centered-Design-Ansatz zunehmend etab­
liert. Er stellt die User Experience in den Fokus der
Überlegungen. Technisch komplexe Anwendungen
sollten leicht, intuitiv und mit einem gewissen Joy
of Use zu bedienen sein.« Selbstverständlich passt
dies nur ganz schlecht zu der Devise, sich mit einem
minimalen Set an Eigenschaften und Anforderun­
gen zufriedenzugeben.
Mikrointeraktionen bereiten dem Nutzer aber
nicht nur Freude. »Gute Microinteractions vermit­
teln dem User zudem ein kon­sis­ten­tes mentales Mo­
dell von dem Gesche­hen«, er­klärt Matt­hias Müller-
Prove, Dozent an der Brand Academy – Hamburger
Hochschule für De­sign und Kom­mu­ni­ka­tion so­wie
frei arbeitender Spezialist für UX (  w ww.mprove.
de  ). »Sie erklären den Aufbau und die Funktions­
weise des Interfaces, beispielsweise wenn der User
auf dem Touch-Bildschirm einzelne Elemente wie
Karteikarten übereinanderstapelt«, so Müller-Prove.

Bei immer mehr Produkten erfolgt der

Erstkontakt über Software
» Das digitale Look-and-feel ist mittlerweile für im­
mer mehr Alltagsprodukte prägend», sagt Hermann
Klöckner, Professor für Interaction Design an der
An­halt University of Applied Sciences im Bauhaus
Dessau (  http://hermannkloeckner.com  ). »Denn heu­
te werden eigentlich sehr materielle Dinge wie Autos
oder Uhren mehr und mehr zu Softwareproduk­ten,
die mit dem User in Dialog treten.« Gerade über sub­
ti­le Verhaltensunterschiede können sich Marken un­
ter­einander abgrenzen. Früher war das Material wich­
tig: Wie fühlt sich das Leder an, das Prada ver­wen­det?
Wie reagiert ein BMW beim Tritt auf das Gaspedal?
Heute erhält die digitale Interaktion eine ähnli­che
Qualität. Da die Berührungspunkte einer Marke im­
mer öfter primär im Digitalen zu finden sind, prägt
der digitale Auftritt das Markenverständnis ganz er­
heblich. Hier kommt es aufs Detail an: Eine Nike-
App muss sich »fit« anfühlen – augenblicklich rea­
gieren und das Einstellen des virtuellen Nest-Ther­
mostats fühlt sich ganz wunderbar nach dem Auf­
drehen einer Heizung an.
Bei digitalen Produkten hilft die Interaktion weit
mehr, die Markenbindung aufzubauen, als traditio­
nelle Corporate-Design-Merkmale wie Farbe und Ty­
pografie. Der iPhone-Homescreen ist so ein Bei­
spiel: kein Apple-Logo, keine Apple-Hausfarbe, nur
selten die Apple-Hausschrift – und dennoch signali­
sieren die Interaktionselemente ganz klar die Mar-
048 PAGE 01.15 › THEMEN › Microinteractions
Abbildung: Google
Große Kleinigkeiten
Das Anlegen eines Ordners gehört zu den oft gesehenen
Standards vieler Anwendungen und ist meist auch
gleich gestaltet. Beim Webservice Instapaper wird der
»Add Folder«-Button automatisch zum Benennungs-­
feld. Der Nutzer muss nur einmal interagieren. Das ist
ergonomisch und spart Zeit.
↗ www.instapaper.com
ke, indem sie sie wiedererkennbar machen. »Apple
war schon immer ganz groß in der Gestaltung dieser
kleinen Finessen«, konstatiert Müller-Prove.
Bei den Transitions gab Apple
zunächst den Ton an
Vor allem der Gestaltung der Transitions misst »Mi­
cro­interactions«-Autor Dan Saffer große Bedeutung
bei, also dem Übergang von einer Ansicht zur ande­
ren oder von einem Inhalt oder Button-Zustand zum
nächsten. »Apple war hier ganz klar Vorreiter und hat
im Sinne einer plattformweiten Konsistenz entspre­
chende Vorgaben in ihren Styleguide integriert«, er­
klärt der Berliner iOS-Entwickler Ivo Wessel (  w ww.
we-make-apps.com  ) Zum Beispiel empfiehlt das Un­
ternehmen, für einen Übergang die Dauer von 0,5 Se­
kunden nicht zu über­schreiten und setzt als Default-
Einstellung bei Bewegungen den Modus »nicht line­
ar« (»Ease in and out«), damit sie organischer wirken.
»Joy of Use hin, Delightful Design her – auf die
Ge­staltung des Feedbacks kommt es an«, ist Müller-
Prove sich mit Saffer einig. Es sollte dem User deut­
lich zeigen, was sein Input bewirkt, und vor allem,
dass sein Input etwas bewirkt. Man denke etwa an
die hüpfenden Programm-Icons in Apples OS-X-
Dock, die aktiv werden, sobald man sie angeklickt
hat, um zu signalisieren: »Es mag zwar noch etwas
dauern bis zum Start des Programms, aber, lieber
User, dein Befehl ist angekommen, es ist nicht nötig,
das Icon weitere 20-mal anzufeuern.« Gut gestalte­tes
Feedback macht auch deutlich, wo auf dem Screen
der User-Input eine Aktion ausgelöst hat, wo gerade
eine Veränderung stattgefunden hat und wo er als
Nächstes eine Eingabe tätigen soll. Zeigt das Inter­
face das Ergebnis der Veränderung nicht prompt,
Responsive Interaktion
Googles Schema für gelungenes Interaktionsverhalten: Die
beiden oberen Bilder zeigen, wie sich das animierte Element
von der Mitte aus ausdehnt, obwohl sich der Trigger unten
links befindet. Unten dagegen wächst es vom Triggerpunkt
unten links diagonal nach oben – so wird der Bezug zum
Berührungspunkt deutlich.
↗ www.google.com/design/spec/animation/
responsive-interaction.html
son­dern über eine kleine Animation an, hat der User
größere Chancen, den Wandel wahrzunehmen. Er­
schließt sich dem Nutzer dagegen nicht, ob sein In­
put angekommen ist, ist das ein gravierender Mi­
nuspunkt für die User Experience.
Wer setzt das eigentlich um?
»Die entscheidende Frage bleibt: Wer kümmert sich
im Konzeptions- und Entwicklungsprozess um das
Interaktionsverhalten und wie artikuliert man es
am besten?«, gibt der Hamburger Interaction Desi-­
gner Daniel Guse (  www.danielguse.de  ) zu bedenken.
»Nie­mand wird sich die Mühe machen, Transitions
in der Granularität eines Daumenkinos in Photo­
shop-Designs zu gestalten.« Von Haus aus sei das
Thema allerdings irgendwo zwischen Visual und
Interaction Design aufgehängt.
Um diesem Anspruch gerecht zu werden, hat man
bei denkwerk schon vor einiger Zeit begonnen, das
Abteilungsdenken aufzubrechen, und eine Sitzord­
nung eingeführt, bei der die verschiedenen Gewer­
ke gemischt Platz nehmen. »Im Sinne von Lean UX
versuchen wir außerdem die Dokumentation zu be­
schränken«, berichtet Informationsarchitekt Hen­
ning Schenk. »So müssen wir nicht ausufernde Story­
boards malen, um Animationen zu dokumentieren,
sondern es reicht ein Schulterblick und der kurze
Dialog. Manchmal bastelt unser Designer auch ein­
fach ein animiertes GIF, um zu zeigen, wo die Reise
hingehen soll.«
Dennoch: Um die einzelnen Bausteine in einer
wiederverwertbaren Form abzulegen, hält man sie
bei denkwerk besonders in größeren Projekten in
digitaler Form vor. »Eigentlich wäre das ein The­ma
für einen Styleguide, der allerdings immer mehr als

Abbildung: Google
Ausdruckstanz trifft Schwanensee
Statt mit wilden Choreografien zu verwirren und
abzu­lenken (unten), sollten alle Elemente während
des Übergangs von einer Ansicht zur nächsten einer
geordneten Bewegung folgen, um Aufbau und Struktur
der Anwendung plausibel zu machen.
↗ http://is.gd/consistentchoreography
Living Styleguide oder Pattern Styleguide zu ver­
stehen ist, also als Form eines digitalen Reservoirs«,
merkt Schenk an.
Kampf dem Look-and-feel-Wildwuchs
Nach genau diesem Prinzip funktioniert auch eine
Pattern Library, wie man sie im Bereich E-Comm­
merce bei Otto in Hamburg für die Neuentwicklung
der kompletten Plattform eingeführt hat. In einem ei­
gens aufgesetzten Framework ist dort das Design­
schema jedes einzelnen Elements der Webseite visu­
ell und als Code hinterlegt, ergänzt um eine kurze Be­
schreibung. »Der Vorteil an unserer Pattern Libra­r y
ist, dass sie wie unsere Shop-Plattform eine Websei­
te ist. Es wird nur der Code abgelegt, und ich sehe im
Browser seine visuelle Übersetzung. Ich muss nicht
noch mal separat ein Bild des Patterns spei­chern.«
Das Paradebeispiel eines Patterns ist der Button.
Meist kommt er in unterschiedlichen Bereichen be­
ziehungsweise Aktionen einer Website oder App
vor (Kontaktformular/»Absenden«, Suche/»Suchen«,
Log-in/»Anmelden«). Ganz im Sinne der Micro­in­ter­
actions zählen bei Otto zu den Patterns auch: Über­
gänge und Animationen (wie die Bewegung eines
Elements von links nach rechts), Flows (das Fehler-
und Erfolgsverhalten von Nutzerdialogen), Wordings
(ein Merkzettel sollte im gesamten Produkt und auf
allen Plattformen immer »Merkzettel« heißen und
nicht etwa »Merkliste«); ebenso ließe sich das Visual
Design eines Angebots mithilfe von Style Tiles als
Pattern definieren. »Die Bibliothek synchro­nisiert
sich bei Veränderungen auch mit den Anwen­dun­gen,
sodass kein händisches Nachbessern nötig ist«, be­
geistert sich Wolf Brüning, Senior Interaction Desi­
gner bei Otto (  w ww.produktbezogen.de  ).
PAGE 01.15 049
Der Eindruck von Knopfdruck
Auf Touch-Oberflächen sind viele Interface-Elemente nur
scheinbar direkt berührbar. Gestaltet man ihr Verhalten
responsiv, macht dies eine App zu einer Anwendung, die mit
dem User kommuniziert, statt nur Informationen zu liefern.
↗ http://is.gd/responsiveinteraction
Abbildung: Google
Authentische Bewegungen – Goodbye Linearität
Physikalisch korrekt animierte Objekte transportieren
Informationen auch über ihre Attribute: leicht oder
schwer, groß oder klein, starr oder biegsam. Korrekt ani­-
mierte Objekte verhalten sich beispielsweise nicht
linear, sondern beschleunigen und bremsen sukzessive.
↗ http://is.gd/authenticmotion
Dieses Prozedere schafft Konsistenz, sodass man
die gleiche Story stets mit gleichen Mitteln erzählt
und sich ein Button beispielsweise stets gleich ver­
hält und immer die gleiche Transition auslöst. Ein
konsistentes Look-and-feel verbessert die Nutzer­
freundlichkeit und trägt nachhaltig zum Erfolg ei­nes
Produkts bei, kreativer Wildwuchs dagegen be­ein­
trächtigt Qualität und Benutzbarkeit. »Ein Produkt
von dieser Größe ist nicht mit Prozessen allein be­
herrschbar«, so Brüning. Trotz eines vernünftigen
Pro­zessmanagements und intensiver Kommunika­
tion lässt sich über die Zeit der Wildwuchs kaum ver­
meiden. »Der beste Styleguide hilft eben nichts, wenn
sich gerade bei umfassenden und stetig wachsenden
Projekten Entwickler immer wieder aufs Neue da­
ranmachen, die Vorgaben mit immer wieder neuem
Code umzusetzen«, fasst er das Dilemma zusammen.
Photoshop-Styleguides passen
nicht zu agilen Prozessen
»Natürlich kostet es Zeit, die Details gut hinzubekom­
men«, räumt Brüning noch ein. »Das ist aufwendi­ges
Abbildung: Google
Handwerk, man muss sich konzentrieren, viel aus­
probieren und testen.« Gerade wenn man mit dem
Prinzip Minimum Viable Product im Hinterkopf ar­
beite, blieben die Details oft auf der Strecke. Eine
Pattern Library hilft, den einmaligen Zeitaufwand Begeisternde Details
für die liebevolle Gestaltung der Details zu rechtfer­ Viele Apps haben Elemente,
tigen, weil man diese Elemente immer wieder ver­ die User schon tausendmal
wen­den kann. So lassen sich Prototypen schneller gesehen haben. Ihre Funk-
tionsweise kennen alle –
erstellen und testen. »Und man muss die Gestaltung
warum also nicht mal mit
nicht immer wieder neu diskutieren, da man sich
einer ungewöhnlichen
bereits auf bestimmte Designschemata geeinigt hat«, Transition überraschen?
ergänzt Karolin Wisch, Teamleiterin User Experien­ce ↗ http://is.gd/delight
Design bei Otto, optimistisch. fuldetails
 050 PAGE 01.15 › THEMEN › Microinteractions
Abbildung: Google
Visuelle Kontinuität
Eine gut designte Transition
sollte klar, ruhig und gleich-­
mäßig gestaltet sein und dem
User vermitteln, auf welchen
Teil des Bildschirms er seinen
Fokus richten soll. Sie hat
herein- und hinausfahrende
sowie bleibende Elemente,
die beim Übergang aber Form
und Größe ändern. In die­sem
Beispiel derApp Google Music
geht die Alben-Übersicht
in eine bild­schirmfüllende
Play­list des ausge­-
wählten Albums über.
↗ http://is.gd/meaningful
transitions
»Wir arbeiten von Beginn eines Projekts an in
crossfunktionalen Teams«, erklärt Wolf Brüning.
Ent­sprechend interdisziplinär müssten auch die
Tools ausgelegt sein, mit denen er und sein Team ar­
beiten. »Photoshop-Styleguides sind sehr rigide Re­
gelwerke, die meist am Anfang eines Projekts erstellt
werden und daher besser zum wasserfallartigen Ent­
wicklungsprozess passen als zu unserem agilen«, so
Brüning. »Vor allem benötigen wir Tools, die eine
sehr enge Zusammenarbeit zwischen Designern und
Entwicklern ermöglichen. Aktuell gibt es viele Tools,
die an dieser Schnittstelle ansetzen und dem ehe­
maligen Platzhirsch Photoshop auf die Pelle rücken,
beispielsweise Sketch (  http://bohemiancoding.com/
sketch  ) oder Macaw (  http://macaw.co  ). Oft nutzen
wir auch Axure als Prototyping-Tool.«
Google weiß mal wieder, wo’s langgeht
Beinahe schon prototypisch hat Google gerade, be­
gleitend zur Version 5 ihres Betriebssystems An­
droid, einen Styleguide namens »Material Design«
(  http://is.gd/googlematerialdesign  ) veröffentlicht,
der besonders auf die gestalterischen Details eingeht.
Ganz im Sinne des »Practice what you preach« geht
der selbst in tadellosem Flat Design gehaltene An­
forderungskatalog vor allem auf das Verhalten und
die Bewegung der Animationen ein. »In dieser Qua­
lität und Detailliertheit hat es das zuvor nicht gege­
ben«, resümiert Janusz Leidgens, Android-Entwick­
ler und Teamleiter beim Regensburger App-Entwick­
lungsbüro Kupferwerk (  http://journeyman.janusz.
de  ). »Google liefert hier ein Beispiel eines modernen
Sty­leguides, der vor allem auch demonstriert, wie
man die interaktiven Elemente in die Roadmap ei­nes
Projekts und ins Produkt bekommt«, ergänzt Guse.
Aber in dem neuesten Android-Fahrplan steckt
noch mehr, wie Interaction-Design-Professor Her­
mann Klöckner feststellt: »Er zeigt, dass der Skeuo­
morphismus mit Aufkommen des Flat Designs nicht
gänzlich verschwunden ist, sondern sich quasi durch
die Hintertür wieder hereingeschlichen hat – jedoch
nicht in die Texturen. Jetzt sind die Bewegung und
das Verhalten der Elemente stark aus der physischen
Welt entlehnt. Das hat sich mit Apples iOS 7 bereits
deutlich angekündigt, zeigt sich aber noch stärker
in Googles Material Design.«
Dennoch, sowohl bei iOS 7 als auch bei Googles
Material Design zeige sich teilweise eine unnötige
Opulenz, die schon in Richtung Dekor tendiere, be­
mängelt Klöckner. »Bereits der Parallax-Effekt im
Hintergrund von iOS 7 ist schlicht parfümiertes Bei­
werk, weil er in dieser Form keine Funktionalität hat
und nicht zur Plausibilität des Systems beiträgt, ja
eher noch ablenkt«, lautet sein strenges Urteil. Da­
mit keine Missverständnisse aufkommen: Das Prin­
zip, Verhalten und Bewegungen aus der physikali­
schen Welt ins Interaction Design zu übernehmen,
funktioniert an sich gut. »Um natürlich wirkende
Bewegungsabläufe in eine Anwendung zu imple­
mentieren, zeichne ich öfter Bewegungen mit einer
Kinect auf und transferiere den entsprechenden
Code dann von ihr in meine Anwendung«, verrät
Hermann Klöckner seine Vorgehensweise.
Mikroeffekte sind kein Selbstzweck
Bleibt zu sagen, dass der Gestalter, ebenso wie in so
vielen anderen Designbelangen, in Sachen Micro
UX stets gefordert ist, das Prinzip »Form follows
function« zu wahren. Das gilt auch für gute Mikro­
interaktionen. Der Schlüssel zu gutem Design liegt
im Ver­ständnis des Nutzers und in dem Bemühen,
das best­mögliche Ergebnis und Erlebnis für ihn zu
schaffen und auf das Medium abzustimmen. Gute
Mikrointeraktionen sind heute genauso wichtig und
tragen zu gutem Design bei wie die klassischen De­
signelemente sowie gute Typo und gutes Wording
et cetera. Daher sollten sie weder in Styleguides noch
in Pattern Libraries fehlen. Richtig gestaltet, wir­
ken sie charmant, lassen Funktionen »smart« aus­
sehen und signalisieren jedem User unmittelbar,
dass hier Liebe im Produkt steckt. Was letzten En­
des Vertrauen schafft. Und Vertrauen ist der wich­
tigste Bestandteil für eine langfris­tige Kundenbin­
dung beziehungsweise Image-Bildung. Erst recht in
den Zeiten von tausendundeiner App für ein und den­
selben Use Case.  Stefan Bodeit/as
Stefan Bodeit ist selbstständiger User
Experience und Interaction Designer aus
Hamburg. Er verliebt sich gerne in Details.
Und er verliert sich gerne in Details.
↗ www.bodeit.de
Micro-UX-Blogs und -Beispielsammlungen.
Weitere Anre­gungen zu diesem Thema
finden Sie auf  www.page-online.de/
microinteractions0114  

Modulare
Systeme
● Am Anfang war Pinterest. Das soziale
Netzwerk zum Bildersammeln hat als einer
der Ersten die Karte als Design-Pattern po­
pulär gemacht. Seither setzen immer mehr
mobile Anwendungen auf dieses Format.
Ein Blick auf die digitalen Global Player
zeigt: Facebook, Twitter, Google – sie alle
nutzen die Karte als Gestaltungseinheit. Sie
besteht meist aus Headline, kurzem Text,
Bild, Audio- oder Video-File und lässt sich
ausklappen oder drehen. Der entschei­den­
de Vor­teil: Die digitale Karte bündelt Infor­
ma­tionen in kleinen Portionen. Auch Web­
sei­teninhalte lassen sich so komprimiert
und interaktiv darstellen und neu zusam­
menstellen. BlinkFeed, eine Startscreen-
App für das HTC One, etwa aggregiert In­
halte nach den Vorgaben des Users und fügt
sie in ei­nem Grid-Layout zusammen: News
aus dem favorisierten Sportportal neben
Posts aus dem persönlichen Twitter-Stream.
Aggregatoren an sich sind kein neues
Phä­nomen, schon die klassischen Feed­rea­
der haben Content gesammelt. Das Karten-
Format aber hat eine neue Qualität, meint
Paul Adams, ehemals Global Head of Brand
Design bei Facebook und Senior User Expe­
rience Researcher bei Google, heute Head
of Product Design des Start-ups Intercom.
In seinem Blog beschwört er einen Paradig­
menwechsel in App- und Webdesign (  http://
blog.intercom.io/author/pauladams  ). Ist es
wirklich schon so weit?
Für Paul Adams sind die Karten ein In­
dikator für die Neuorientierung weg von der
Website als (Sinn-)Einheit, hin zu individu­
024
PAGE 02.15
TITEL
Auf Smartphones ell zusammengestellten kleinen Modulen.
Im Zusammenspiel mit mobilen Ge­räten
fungieren immer wer­den Inhalte personalisiert und orts­be­
häufiger interaktive zogen kontextualisiert. So wie es Google
Now bereits mit den Google-eigenen Ser­
Module im Karten- vices vorführt: Die Anwendung bün­delt In­
formationen wie Wettervorhersage, Einzel­
Design als Mini-Apps. händler in der näheren Umgebung oder
Welche Konsequenzen die Routenplanung für den Weg vom Ar­
beitsplatz nach Hause kompakt als Karten­
hat das fürs stream, der – und auch das macht nach
Interaction Design? Adams die neue Qualität aus – als Push-
Nachrichten auf dem Smartphone landet.
Eine wesentliche Neuerung lasse sich,
so Adams, exemplarisch an den Benachrich­
tigungsmeldungen von iOS und Android
nachzeichnen. Als flüchtige Hinweise set­z­
ten sie den User früher zum Beispiel vom
Eingang einer E-Mail in Kenntnis und lots­
ten ihn zur entsprechenden Anwendung.
Mittlerweile kann der User im Benachrich­
tigungsfenster selbst Aktionen ausführen
und Inhalte über Facebook, Twitter oder
Pinterest teilen, ohne dass der User eine se­
parate Anwendung öffnen muss. Das über­
nimmt die Interactive Notification des Sys­
tems, die Inhalte und Interaktionsoptio­
nen der Original-App integriert, wobei für
den User kein Wechsel erkennbar ist.
Nach diesem Prinzip können Meta-Apps
die Inhalte von dritter Seite bündeln und
dem Nutzer personalisiert zur Verfügung
Interagiert man mit den Karten auf stellen. »Statt Interaktionen in verschiede­
der Website des News-Services nen Apps durchzuführen, werden diese
Bloomberg, öffnen sich weitere Inhalte zunehmend App-unabhängig auf System­
und starten zum Beispiel Videos basis für den Nutzer zusammengefasst«,
 BBC

GOOGLE MAPS

meint Interaction Designer Andreas Popp, FACEBOOK FACEBOOK FACEBOOK

Gründer des UX Camp Hamburg (  w ww.

supersoon.net  ). Der Smartphone-Screen BBC
als Ansammlung smartiebunter App-Icons,
TWITTER

als Anhäufung vieler Anwendungen mit

jeweils einem Use Case gehört dann der
Vergangenheit an, stattdessen bestimmen GOOGLE MAPS
Meta-Apps und Aggregatoren das Bild.

Navigationsflächen statt
Navigationselemente FACEBOOK FACEBOOK FACEBOOK

»Mit ihren Anzeigebereichen, Buttons und

Mechaniken ähnelten die Apps vorher Ma­
schinenoberflächen, heute erfolgt die In­
teraktion direkt über Elemente wie Texte
oder Bilder«, konstatiert Daniel Rothaug,
Professor für Interfacegestaltung an der
Hochschule Augsburg. »Im Web kennen wir
dieses Prinzip schon länger: Die Naviga­
tionselemente werden weniger und die In­
halte zu Navigationsflächen, wie bei vielen
klassischen Grid-Websites.«
In welche Richtung die Entwicklung
geht, zeigt schon der Microblogging-Dienst
Twit­ter: Mit den Twit­ter Cards (  https://dev.
twit­ter.com/cards/overview  ) bietet er eine
Samm­lung von Design-Templates, mit de­
nen jeder die Möglichkeit hat, auf die Prä­
sentation seiner Multimedia-Inhalte bei
Twitter Einfluss zu nehmen. Dies ist bei­
spiels­­weise für Verlage relevant, da viele
Content-Angebote, etwa einzelne Artikel
der »New York Times« oder des »Spiegel«,
heute häu­figer über Twitter wahrgenom­
men werden als über deren eigene Websei­
te. Muss man sich also künftig mehr Ge­
dan­ken darüber machen, in welcher Form
Inhalte in den Anwendungen der gängi­
gen Social-Media-Platt­formen er­scheinen
als darüber nachzudenken, wie sie auf der
eigenen Web­seite dargestellt werden?
Die Inhalte mehrerer Anwendungen gruppieren sich als
TWITTER
Kartenstream auf den Bildschirmen von Smartphone
(links) oder Smartwatch (oben), wo man sie individuell
bearbeiten, mit einer Wischgeste schließen oder
durch Tippen ver­größern kann. Der Zurück-Button führt
PAGE ONLINE den User wieder zum Stream. So wird suggeriert, er
navigiere durch eine homogene Anwendung. Nach diesem
Muster ist beispielsweise Google Now aufgebaut
ten wird – Paul Adams programmatische pagiert dieser ein Gestaltungskonzept, das
Thesen greifen wichtige Tendenzen auf. auf einzelne, wiederverwertbare Module
Und schaut man auf die Gestaltungspro­ ausgelegt ist, aus denen sich konsistente,
zesse in Agenturen und Unternehmen, beliebig skalierbare Systeme entwickeln
scheint die Idee des modularen Systems lassen. Atomic Design denkt Projekte von
tatsächlich schon in Design und Develop­ Anfang an als Summe kleinster Bausteine,
ment angekommen zu sein. So nutzte etwa die man zu größeren Interface-Elementen
das Hamburger Start-up Collins bei der kombiniert. Ähnlich modular ging OTTO
Ent­wicklung seiner Open-Com­mer­ce-Platt­ vor: Um seine E-Commerce-Plattform kom­
form About You den Atomic-De­sign-An­satz plett neu aufzusetzen, arbeitete das Unter­
(siehe PAGE 09.14, Seite 86 ff.). nehmen mit einer detaillierten Pattern Li­
Dabei folgte das Team der Maxime »Ent­ brary für das gesamte Interaction Design
werft Designsysteme statt Webseiten!« des (siehe PAGE 01.15, Seite 46 ff.). Sie scheint
Webdesigners, Beraters und Autors Brad also gar nicht mehr so weit entfernt zu
Frost (  http://bradfrost.com  ). Seit 2013 po­ sein, die Zukunft.  as

Modular entwickeln
Das Konzept der App als originäre Anwen­
dung und eigenständiger Inhalt wird – so
Paul Adams Szenario – abgelöst vom Kon­
zept der App als ein Contentlieferant, der
seine Inhalte über eine API anderen Diens­
ten zur Verfügung stellt. In kleine Einhei­
ten zerlegt, werden sie auf die mobilen De­
vices verteilt. Developer und Designer wer­
den mobile Apps und Webseiten in Zukunft
also weniger als autarke Einhei­ten konzi­
pieren, sondern als aus unterschied­
lichsten Modulen bestehende Syste­me, die
sich in kleinen Einheiten in die Anwen­
dungen Dritter ausspielen lassen. Fließender Übergang: Mit den Interactive Notifications erlauben sowohl iOS
Auch wenn es momentan noch schwer als auch Android (rechts) dem User die Interaktion direkt aus dem
vor­stell­bar ist, dass eine Degradierung von Benach­rich­tigungsfenster heraus. Dieses Prinzip gilt nicht nur für systemeigene
Websites und Apps im großen Stil eintre­ Anwendungen wie SMS, sondern auch für Drittanbieter wie Twitter
026 PAGE 04.15 › THEMEN › Algorithmic Layouts

> 640 px ≤ 640 px und > 320 px ≤ 320 px


Layouts aus
dem Rechen-
schieber
Die steigende Zahl an Bildschirmgrößen macht es immer aufwendiger,
responsive Layouts zu generieren. Können smarte Algorithmen helfen?
● »Die Zeiten, in denen man mit einem einzigen
responsiven Layout für drei Größen einen Großteil
der Bildschirme am Markt abdecken konnte, sind
vorbei«, konstatiert Daniel Rothaug, Professor für
Interfacegestaltung an der Hochschule Augsburg.
Rothaug ist Inhaber der Würzburger Digitalagentur
Zum Kuckuck (  w ww.zumkuckuck.com  ) und immer
wieder befasst mit der starken Fragmentierung der
aktuellen Gerätelandschaft. Das Dilemma: Das Prin­
zip responsiven Designs lässt sich nicht für ­beliebig
viele Screenformate adaptieren. »Bei drei Bildschirm­
größen kann man noch kontrollieren, was auf einer
Fläche passiert, aber bei zehn oder zwanzig geht das
nicht mehr«, meint Daniel Rothaug.
Das Bewusstsein für dieses Problem ist jedoch
noch längst nicht bei allen Beteiligten angekommen.
»Häufig läuft es so: Der Gestalter hat irgendwo ein
coo­les Grid gesehen und malt es in Photoshop auf.
Und dann schüttelt der Entwickler den Kopf«, be­
richtet Daniel Rothaug. »Da gibt es eine große Lü­
cke zwischen dem, was machbar ist, und dem, was
sich der Gestalter so vorstellt.« Dennoch sieht man
Anwendungen, bei denen sich die Inhalte auch bei
PAGE 04.15 027
Für die Layouts des News- vielen verschiedenen Geräten und Displaygrößen
und Social-Media- elegant, bildschirmfüllend und ohne Überlappun­
Aggregators Flipboard gen einpassen. Wie machen die das?
musste sich nicht
der Designer krumm Designprozess im Umbruch
machen. Die inhouse
entwickelte Layout- Schon länger halten Tools Einzug ins Repertoire der
Engine Duplo erstellte Gestaltungswerkzeuge, die fleißig rechnen und kal­
alle Inhalte automatisch kulieren. So arbeitet das aktuell beliebte Designtool
und passte sie an die Sketch (  http://bohemiancoding.com/sketch  ) mit ei­
jeweilige Seitenbreite an nem eigenen Grid-Generator, und Apple hat in den
Interface Builder der Entwicklungsumgebung Xcode
die Funktion »Auto Layout« zur Berechnung von
Layouts integriert (  http://is.gd/autolayout  ). Tatsäch­
lich scheinen Algorithmen eine Lösung zu sein, will
man Webseiten und Apps für die wachsende Zahl
an Screengrößen fit machen. Einen Algorithmus
einzusetzen bedeutet aber einen gravierenden Ein­
griff in den Designprozess. Auf Gestalter und Ent­
wickler kommen damit neue Herausforderungen zu.
Der Algorithmus kann im Layoutprozess zwei
Aufgaben erfüllen, er kann sowohl das Gestaltungs­
raster generieren als auch den Content auf diesem
verteilen – angepasst an die jeweilige Bildschirm
 PAGE 04.15 › THEMEN › Algorithmic Layouts
Drei Kriterien für den Pageflow
Damit die Flipboard-Magazinseiten abwechslungs-
reich gestaltet sind, variiert der Zufallsgenerator
Perlin Noise im Magazinverlauf drei Kriterien (siehe
unten): die Präferenz entweder für Bild- und Video-
inhalte oder für Artikel (1), die Menge der Elemente
pro Seite (2) sowie die Präferenz für Fotoalben (3).
einzelner Inhalt
Präferenz Bild/Video oder Artikel
Seiten
Menge der Elemente
Präferenz Fotoalbum
größe. Bereits die erste Aufgabe ist jedoch eine
harte Nuss: Der kalifornische Mathematiker Patrick
Kessler (  http://is.gd/patrickkessler  ) hat gemeinsam
mit dem Designer Hugh Dubberly berechnet, dass
es allein für ein Raster aus 4 mal 3 Quadraten 892
verschiedene Möglichkeiten gibt, diese Fläche auf­
zuteilen. Zusammen mit dem Designer Thomas
Gaskin hat er aus dieser nüchternen Information ein
beeindruckendes Poster gemacht (  w ww.dubberly.
com/concept-maps/3x4grid.html  ).
Der Ansatz, hierarchische Strukturen als ver­
schachtelte Rechtecke darzustellen, die ein Algo­
rithmus generiert und sortiert, ist im Grunde nicht
neu. Entworfen hat diese als Treemap bekannte Vi­
sualisierungsform Ben Shneiderman, Professor für
Computerwissenschaft an der Universität von Mary­
land (  w ww.cs.umd.edu/users/ben  ). Schon Anfang
der 1990er Jahre nutzte er sie, um einfach und nach­
vollziehbar darzustellen, welche Verzeichnisse sei­
nes Servers am meisten Platz benötigen.
Beispiel Flipboard: Design mittels
Algorithmen
Fast prototypisch haben die Flipboard-Macher die
Integration eines Algorithmus in den Designprozess
umgesetzt. Die App des amerikanischen Unterneh­
mens Flipboard Inc. sammelt Content auf News-
und Social-Media-Kanälen und präsentiert deren
Inhalte in Form eines Magazins, durch das der User
auf den mobilen Geräten blättert und im Web scrollt.
Die aggregierten Inhalte passen sich dabei so gefäl­
lig in die Seitenstruktur ein, als wären sie eigens da­
für konzipiert. Flipboards Herz ist die inhouse ent­
wickelte Layout-Engine Duplo. Sie basiert auf Java­
Script und arbeitet schrittweise vier Aufgaben ab:
Layouts erstellen, auf den jeweiligen Content an­
wenden, optimieren und darstellen.
Um Content in Seitenlayouts einzupassen, ver­
wendet Flipboard ein modulares Blocksystem: Zu­
Der Algorithmus checkt die Optionen
Wie ein Schachspieler, der vor der Ausführung seine möglichen Züge prüft, checkt
der Algorithmus alle Layoutmöglichkeiten für die jeweilige Screengröße, hier
schematisch als Baumdiagramm abgebildet. Handelt es sich zum Beispiel um
einen seitenfüllenden Inhalt, kommen ein Foto, Video oder Artikel als möglicher
Content in Betracht. Ist Letzteres der Fall, sind ein Portrait- oder ein Landscape-
Format die Optionen sowie abschließend eine kurze oder lange Überschrift.
Präferenz Fotoalbum
Präferenz Bild/Video
viele Inhalte Präferenz Artikel
nächst haben die Flipboard-Designer verschiedene
Layoutbausteine erstellt – hier hat der Algorithmus
also nicht freie Hand. Duplo beginnt mit einer Hoch­
rechnung an Layoutmöglichkeiten auf Basis dieser
vordefinierten Elemente und vergleicht schließlich,
abhängig vom Inhalt, 2000 bis 6000 Designs.
Daraufhin checkt der Algorithmus alle Möglich­
keiten für das jeweilige Bildschirmformat (siehe Gra­
xxxxxxxxxxxxxxxxxxxxxxx fik oben rechts) und versucht nicht nur, Screengrö­
ßen, Layouts und Inhalte aufeinander abzustimmen,
»Hinter son­dern auch einen abwechslungsreichen Pageflow
jedem zu erzeugen, eine Heftdramaturgie also, wie sie auch
ein Blattmacher entwerfen würde. Dafür haben die
Styleguide Flipboard-Entwickler den Fraktal-Algorithmus Per­
steht lin Noise (  www.noisemachine.com/talk1  ) integriert,
ein Regel- der nach drei Kriterien gewichtet (siehe Grafik oben
werk und links). Weitere Kriterien beim Abgleich von Layout
und Inhalt sind die Textmengen in einem Textfeld,
damit ein die Kohärenz des Inhalts und die Bildgröße.
Algorithmus«
Kontext statt Template
Marc-André
Weibezahn, Dozent Abschließend verfeinert die Engine das Layout, in­
dem sie etwa die einzelnen Elemente an einem
im Bereich Digitale
Medien der HAWK Grundlinienraster ausrichtet. So versucht sie gän­
Hildesheim gigen Designprinzipien gerecht zu werden. »Duplo
↗ http://weibezahn. ist ein beeindruckendes Beispiel, wie dynamische
com Plattformen heutzutage generiert werden können.
Hier bestimmt nicht irgendein Template die Form,
sondern der inhaltliche Kontext«, so Rothaug.
Auch die Nachrichten-Plattform Vox (  w ww.vox.
com  ) setzt zur Gestaltung ihrer Website Algorith­
men ein. Im Gegensatz zu Flipboard sammelt Vox
die Inhalte nicht im Netz, sondern verwendet eige­
nen redaktionellen Content. Um das passende Lay­
out für diese Inhalte zu finden, arbeitet der Vox-
Algorithmus mit einem Bewertungssystem für die
Layouts. Die einzelnen Inhalte sollen zunächst für
Desktop-Rechner auf ein vierspaltiges Raster ver­
teilt werden. Für jeden Inhaltstyp gibt es Vorgaben:
 PAGE 04.15 029

dreispaltiger Artikel mit ...

Foto, bildschirmfüllend Portrait, dreispaltig

kurzer Titel
Artikel, bildschirmfüllend Landscape, dreispaltig
Artikel ganzseitig
langer Titel
Video Untertitel, kurz

3 x Portrait Untertitel, lang

2 x Landscape Variation A
1024 x 768 px Screengröße Bildergalerie
3 x Portrait, 1 x Landscape Variation B

Variation A

5 Bilder, Square
Variation B Foto, Landscape

dreispaltiges Layout Status Grid

Variation C zweispaltiger Artikel Foto, Square

2 : 1-Spalten-Layout 2 Spalten Foto, Portrait Foto, Portrait

1 Spalte Artikel kurzer Titel, Landscape

Status Text/Bild- langer Titel, mittellanger Text,

Container kein Bild

Ein längeres Feature darf sich über die kompletten
vier Spalten erstrecken, um mit einem imposanten
Aufmacher auf sich aufmerksam zu machen, wäh­
rend kürzere Artikel maximal zwei Spalten belegen
dürfen. Unter der Vorgabe, dass alle Spalten befüllt
werden müssen, ermittelt der Vox-Generator die
möglichen Layouts für die vorhandenen Inhalte.
Über das besagte Punktesystem für den Auswahl­
prozess erhalten zum Beispiel Layouts Pluspunk­te,
in denen Features und Videos verwendet werden.
Minuspunkte gibt es für aufeinanderfolgen­de Ab­
schnitte mit identischem Layout. Asymmetri­sche
Layouts dagegen erhalten ebenso Bonuspunk­te wie
abwechslungsreiche Folgen, bei denen einem viel­
fältig bestückten Abschnitt einer mit wenigen Ein­
trägen folgt. Der Generator sortiert die ermittelten
Layouts schließlich nach Punktzahl und wählt das
mit dem höchsten Wert.
Einfaches Raster, komplizierte
Verteilung
Da HTML-Daten immer linear strukturiert sind,
sind Grids von Haus aus als Liste von Einträgen in
einer festgelegten Reihenfolge angelegt. Unforma­
tiert stehen sie schlicht untereinander. Dieses Ver­
halten kann man auf CSS-Ebene modifizieren und
die Elemente nebeneinander stehen lassen. Möchte
man nun die Reihenfolge aufbrechen, hackt man
sozusagen die Datenstruktur.
Die Herausforderung für Programmierer und
Gestalter besteht darin, eine Logik für diese Rei­
henfolge der einzelnen Inhalte zu finden, einen Kri­
terienkatalog, der auf die Inhalte angewendet wird
(neueste oder meistgeklickte Inhalte zuerst oder
Ähnliches). In der Regel werden, wie auch bei Flip­
board, mehrere Kriterien angewendet, die hierar­
chisch angelegt sind.
»Diese Algorithmen sind kompliziert. Sie versu­
chen für ein vermeintlich einfaches visuelles Sche­
ma eine möglichst logische Anordnung zu finden«,
erklärt Daniel Rothaug. »Dabei handelt es sich im
Grunde um ein rekursives Vorgehen, es müssen meh­
rere Verteilungsprinzipien vermischt werden, um
sämtliche Flächen zu füllen. Treemaps sind hier die
Königsdisziplin, weil sie die zur Verfügung stehen­
de Fläche vollständig füllen.« Eine Art »Tetris« unter
verschärften Bedingungen also.
xxxxxxxxxxxxxxxxxxxxxxx
Klein anfangen
»Im Grunde Für einen ersten Gehversuch muss es wahrschein­
arbeitet jeder lich nicht gleich ein komplett selbst aufgesetzter
Algorithmus sein. Im Netz finden sich verschiedene
Gestalter, der Libraries, die man in die eigene Anwendung inte­
prozesshaft grieren kann, um seine Layouts berechnen zu las­
vorgeht, nach sen. Etwa die auf JavaScript basierende Layoutbib­
dem gleichen liothek Packery, die sich auch individuell anpassen
lässt (siehe Kasten auf Seite 50).
Prinzip Aber gleichgültig, ob man sich die Mühe macht,
wie ein selbst einen Algorithmus zu entwerfen, oder eine
Algorithmus« Out-of-the-Box-Lösung wie Packery einsetzt: Ver­
wendet man Algorithmen, gibt man immer auch ei­
Daniel Rothaug, nen Teil seiner gestalterischen Hoheit ab, denn das
Professor für Inter- finale Layout generiert der Algorithmus, der Gestal­
facegestaltung an der
ter bestimmt lediglich die Parameter. Gemeinsam­
Hochschule Augsburg
keiten mit der generativen Gestaltung liegen auf der
↗ www.daniel
rothaug.com Hand: »Auch Processing eignet sich sehr gut, um
Grids zu generieren und visuell mit ihnen zu experi­
mentieren«, verrät Rothaug vor dem Hintergrund
langjähriger Agenturerfahrung.
Kann The Grid, was es verspricht?
Fast schon wie eine Parodie auf das Prinzip der algo­
rithmisch generierten Layouts liest sich die Ankün­
digung des in Kürze startenden Publishing-Tools
The Grid (  https://thegrid.io  ), das ein System ver­
spricht, das unter Einsatz künstlicher Intelligenz
ganze Webseiten selbst entwirft (siehe PAGE 03.15,
Seite 27). Die Blogging-Plattform mit integriertem
 PAGE 04.15 › THEMEN › Algorithmic Layouts
5 Plug-ins für smarte Grids
Masonry
Zu den populärsten Plug-ins für dynamische, von Pinterest
inspirierte Grid-Layouts zählt Masonry, das meist für
Bildergalerien eingesetzt wird. Seine einzige Funktion
besteht darin, Elemente unterschiedlicher Größe vertikal
zu platzieren. Masonry stammt wie die im Folgenden
vorgestellten Tools Isotope und Packery vom New Yorker
Developer David DeSandro.
↗  http://masonry.desandro.com
Isotope
Isotope ist flexibler als Masonry und steht – gemessen
an seiner Verbreitung auf GitHub und Stack Overflow –
an zweiter Stelle der Beliebtheitsskala der Grid-Plug-ins.
Isotope bietet mehr Features als Masonry, beispiels-
weise Filteroptionen und Animationen, endloses Scrollen
sowie anpassbare responsive Layouts. Im Unterschied
zu Masonry ist Isotope eine proprietäre Software und nur
für den privaten Gebrauch kostenlos.
↗  http://isotope.metafizzy.co
Packery
Das entscheidende Feature dieser Bibliothek ist ihr soge-
nannter Bin-Packing-Algorithmus, der dafür sorgt, dass
in einem Grid keine Lücken entstehen. Packery-Layouts
lassen sich streng geometrisch, aber auch ungeordnet
arrangieren. Die relativ junge Bibliothek bietet zudem meh-
rere Möglichkeiten, Layouts zu manipulieren. So lassen
sich einzelne Elemente fest verankern, während sich
andere drumherum verschieben und anordnen. Außerdem
kann man Inhalte in ihrer Größe anpassen und ihre
Position per Drag-and-drop ändern. Auch bei Packery
handelt es sich um eine proprietäre Software.
↗  http://packery.metafizzy.co
Gridster.js
Dieses Plug-in generiert dynamische Grid-Layouts, die
sich sehr flexibel konfigurieren lassen. Die einzelnen Grid-
Elemente – bei Gridster heißen sie Widgets – lassen sich
per Drag-and-drop verschieben, dynamisch ergänzen
oder auch entfernen. Abweichend von einer definerbaren
Basisgröße kann man die Maße der Widgets individuell
anpassen. Auch mehrspaltige und mehrzeilige Widgets sind
möglich. Nicht nur die Größe der Widgets, auch der Abstand
zwischen den einzelnen Elementen ist konfigurierbar.
↗  http://gridster.net
Shapeshift
Das jQuery-Plug-in ergänzt das klassische Pinterest-
Layout um mehrere Features. Die einzelnen Elemente
lassen sich per Drag-and-drop verschieben, wobei der
Algorithmus Lücken automatisch auffüllt. Auch Elemente
über mehrere Spalten sind möglich. Abstände lassen sich
ebenso wie Animationen konfigurieren. Shapeshift ver-
hält sich responsiv und ist unter MIT-Lizenz frei verfügbar.
↗  https://github.com/McPants/jquery.shapeshift
Content-Management-System soll es erlauben,
auch ohne Coding-Kenntnisse eine komplette Web­
site zu erstellen – man setzt lediglich einige Häk­
chen, den Rest erledigt The Grid auf Basis von Algo­
rithmen. Sogar auf einen ausgewählten Zweck hin
soll die Darstellung optimiert werden: die Verkäufe
ankurbeln, das Netzwerk erweitern oder den Kun­
denstamm vergrößern. Die detaillierte Funktions­
weise der Software allerdings ist bislang noch nicht
veröf­f entlicht – nur ihre Fähigkeiten: The Grid soll
Bilder zurechtschneiden, Farbe und Kontrast justie­
ren und sogar die emotionalen Konnotationen ei­
nes Textes ausmachen können.
Eine echte Wunderwaffe also? »Das ist schon
spannend, aber keine Magie. Viele Gestaltungspro­
zesse kann man besser strukturieren, als viele an­
nehmen«, meint Marc-André Weibezahn, Dozent
im Bereich Digitale Medien der HAWK Hildesheim.
Wahrscheinlich sei die Software in der Wahl ihrer
Layouts recht beschränkt und etwa für umfang­
reiche, anspruchsvoll strukturierte Artikel nicht ge­
eignet. Die Abbildungen auf der Website jedenfalls
legten die Vermutung nahe. »Interessant und auch
etwas abenteuerlich klingt zumindest das Verspre­
chen, die semantische Ebene einzubeziehen.« Hier
wird The Grid sich erst noch beweisen müssen.
Keine Angst vor Machtverlust
Aber wohin geht es mit der Gestaltung, wenn Algo­
rithmen Designaufgaben übernehmen? »An sich
steht doch hinter jedem Styleguide, hinter jedem
Corporate Design ein Regelwerk und damit ein Al­
gorithmus«, sagt Timm Kekeritz, Dozent im Studi­
engang Interface Design der Fachhochschule Pots­
dam. »Für Gestalter bedeutet das Vorrücken der Al­
gorithmen in den Designprozess, dass sie zukünftig
noch mehr in solchen Systemen denken werden.
Gerade im Interaction Design ist das Prinzip, von
vornherein in Patterns, Regeln und Mustern zu den­
ken, ein wesentliches Element.«
Auch Weibezahn gibt sich pragmatisch: »Die in
der Gestaltung oft bestimmende Geschmacksfrage
ist argumentativ oft nicht zu belegen und beruht eher
auf einem Bauchgefühl.« Solche intuitiven Ent­schei­­
dun­gen könne man auch durch Zufallsparameter
ersetzen. Am Ende werde es wohl darauf hinauslau­
fen, dass Menschen aus errechneten Vorschlägen der
Computer auswählen. Die Arbeit, die dadurch weg­
falle, sei bestenfalls als mühsam zu bezeichnen,
meint Weibezahn. »Keine Angst vor Algorithmen!«,
so auch Daniel Rothaug: »Ein Algorithmus ist doch
nichts anderes als die präzise Beschreibung eines
Prozesses.« Man könne beide Begriffe fast synonym
verwenden. »Im Grunde arbeitet jeder Gestalter,
der prozesshaft vorgeht, nach dem gleichen Prinzip
wie ein Algorithmus.«  as
Mehr über Layout-Algorithmen. Links zu Papers,
Beispielen, Projekten und Bibliotheken gibt’s auf
www.page-online.de/layoutalgorithmen_0415
086 PAGE 09.14 › PROJEKTE › Collins

Tarek Müller
(links) und
Sebastian Betz,
die kreativen
Köpfe hinter
About You und
Mitglieder
der Collins-
Geschäfts­
führung

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

PROJEKT Aufbau des Shops About You

( w
  ww.aboutyou.de )  und der Marke
Edited ( w
  ww.edited.de )  sowie Launch
der offenen App-Entwickungsplattform
h
  ttp://developer.aboutyou.de  
ZIEL Über eine Open-Commerce-Plattform
für Fashion- und Style-Apps dauer­haft
innovative Ansätze für ein besseres Einkaufs-
erlebnis generieren
UNTERNEHMEN Otto GmbH & Co KG,
Hamburg ( w   ww.ottogroup.com/de ) 
START-UP Collins GmbH & Co. KG, Hamburg
( w
  ww.project-collins.com ) 
TECHNIK Python, PHP, Axure
ZEITRAUM Seit Juni 2013
 PAGE 09.14 087

Die Dresscoder
Würden Sie zwei Mittzwanzigern ein dreistelliges Millionenbudget in die
Hand drücken, um im hart umkämpften Online-Modemarkt ein
E-Commerce-Start-up hochzuziehen? Die Otto Group wagt mit Projekt
Collins nicht nur ein großes Investment, sondern auch den Schritt
auf den App-Markt – alles unter dem Stichwort »Open Commerce«

Die von Collins für den Otto-Konzern gelaunchte Fashion-Plattform About You ist Shop und App Store zugleich. Die dort
vertriebenen Apps können auf das gesamte Modesortiment und den Fulfillment-Prozess von About You zugreifen (oben).
Ihre Entwicklung steuert Collins über die eigens gelaunchte Plattform  https://developer.aboutyou.de  (unten)
088 PAGE 09.14 › PROJEKTE › Collins
About You: Mode per App neu entdecken
Eine kleine Auswahl aus inzwischen über 30 Apps,
denen die Nutzer auch in ihrem persönlichen
Stream folgen können. Die ungewöhnlichen Zugänge
zum Sortiment inspirieren und faszinieren
die jungen User. App-Entwickler profitieren von
der Reichweite auf About You
● »Underdressed!«, twittert ein Besucher des Presse­
launchs von Projekt Collins, und das ist auch mein
erstes Gefühl, als ich Anfang Mai die Fabrikhalle in
den Lichtwerk Altona Studios betrete. Selbst die
Grün­der und Manager auf der Bühne entsprechen
so gar nicht dem Klischee der unrasierten Nerds in
Jeans und Oversize-Shirt: Benjamin Otto (39) steht
da im dunklen Sakko, Tarek Müller (25) und Sebastian
Betz (23) tragen Oberhemden. Ich dachte, es würde
nur um ein Start-up gehen. Hier geht es vor allem um
Mode, Marken und Erlebniswelten.
About You und Edited heißen die beiden Online­
shops, die Collins im Mai 2014 offiziell für die Otto
Group launchte. Aber wer dachte, dass uns Deutsch­
lands zweitgrößter Internethändler nur ein paar wei­
tere Mirapodos, Yalooks oder Refashions vorstellen
würde, hatte sich getäuscht. About You ist nicht ein­
fach nur ein neuer Kanal in der Otto-Vertriebsland­
schaft, sondern eine offene Modeplattform, für die
Developer die verschiedensten Fashion-Apps pro­
grammieren können (siehe Seite 88 ff.).
»Open Commerce« nennen das die Macher. Man
könnte auch »App-in-Shop-System« sagen, für das –
und das macht den Unterschied – Collins einen ei­
genen Entwicklerkreis umwirbt. Bisher gibt es rund
30 Apps auf  w ww.aboutyou.de/apps  , mit denen die
Kundschaft das 50 000 Produkte umfassende Sorti­
ment von About You erschließen kann, um dann
über einen zentralen Warenkorb einzukaufen. All
diese Anwendungen haben bereits externe Develo­
per pro­grammiert. About You beteiligt sie dafür am
Umsatz, der über ihre Apps erzielt wird. Mit einem
ersten Hackathon im Juni 2014, Start-up-Wochen­
enden und einem Inkubatorenprogramm will man
weitere Entwickler gewinnen.
Flops, Kritik und Experimente
Die Otto Group tut einiges, um das Online-Ein­
kaufs­verhalten ihrer Kunden zu durchschauen und
neue Märkte zu erschließen. Immer wieder inves­
tiert der Konzern in seine E-Commerce-Strategie
und ex­pe­ri­mentiert mit neuen Shopmodellen. Da­
für muss er sich bisweilen auch harscher Kritik stel­
len – besonders nach dem schnellen Untergang von
Refashion – und endlich aus Fehlern lernen: »Otto
hat im Internet nur dann eine Chance«, motzte Bran­
chen­ex­perte Jochen Krisch bereits im März 2011
zum Launch von Re­fa­shion auf Exciting Commerce
(  http://is.gd/jkrisch  ), »wenn es sich endlich einge­
stehen würde, dass es online keine Ahnung hat. Dann
bestünde die Hoffnung, dass man sich das feh­lende
Wissen relativ schnell und unvoreingenommen an­
eignen – und sich und der Welt absehbare Flops wie
Refashion ersparen könnte.«
Offenbar gibt es bei Otto doch ein paar internet­
affine Menschen, die einschlägige Commerce-Blogs
le­sen, denn was Krisch dem Konzern anriet, scheint
man dort inzwischen zu verstehen und zu beherzi­
gen: »Die Start-ups der Otto Group, inklusive Collins,
sind externe Innovationszellen, um neue Techno­lo­gi­
 PAGE 09.14 089

en und Ansätze sehr flexibel und schnell für die Edited: Mix aus
Grup­pe zu testen und zu operationalisieren«, erklärt Kuration, Redaktion
Benjamin Otto die Rolle des Tochterunternehmens. und Social Media
Eine Onlineredaktion
Neue Zielgruppen, neue Zugänge kuratiert das persönliche
Wie alle Textilversender steht der Hamburger Kon­ Shoppingangebot für
zern vor der Herausforderung, Neukunden zu akqui­ junge und jüngste
Fashion-Zielgruppen.
rieren, und die fehlen ihm vor allem in der jungen, di­
Hier wird auch die
gital affinen Zielgruppe, die – salopp gesagt – nicht zusammen mit About You
auf den Kataloglook steht. Im Juni 2013 kaufte die gelaunchte Website
Otto Group zunächst die Digitalagenturen von Sebas­ Edited betreut. Die neue
tian Betz (Creative-Task GmbH) und Tarek Müller Modemarke soll die
(NetImpact Framework GmbH). Die Firmen fusio­ jungen Frauen mit
nierten, und das Start-up Collins war geboren, mit ausgewählter Marken-
kleidung, exklusiven
Betz und Müller als Mitgliedern der Geschäftsleitung.
Newcomer-Labels und
Derzeit arbeitet ein 140 Mitarbeiter star­kes Team da­
inspirierenden Social-
ran, ein Einkaufserlebnis für junge Frau­en und Män­ Media-Inhalten versorgen
ner zu erschaffen, das ein Markenmodell besitzt und
so Bindungswirkung ausstrahlt, die über übli­che Va­
riablen wie Preis oder Bequem­lichkeit hinausreicht.
Insbesondere Edited, das nicht nur Shop, sondern
auch eigene Fashionmarke und Content-Plattform
mit fünfköpfiger Moderedaktion ist, soll junge Frau­
en mit ausgewählter Markenkleidung, exklusiven
Newcomer-Labels und inspirierenden Social-Media-
Inhalten als Kundinnen gewinnen. Und die beißen
an: Schaffte es Refashion damals in drei Wochen ge­
rade auf 268 Likes, zählte die Edited-Seite bei Face­
book nach drei Wochen über 10 000 Fans – Chapeau!

Magnet für Medienpartnerschaften
im Lifestyle-Bereich
»Wir wollen mit der mobilen Version von About You
der erste Touchpoint für Mode werden«, sagt Tarek
Müller. »Der Nutzer soll gleich morgens in der Bahn
die News seines App-Streams konsumieren.« Dazu
müsse man die mobile Seite bis zum Start der TV-
Kam­pagne im Herbst noch optimieren und den
Shop-Algorithmus etwas anpassen. Doch sei dies
machbar. Alles in allem sei der Kurs richtig – in spä­
testens fünf Jahren soll About You profitabel sein.
Sicher will man die Zahl der Apps weiter steigern –
alles darf probiert werden. Und wer weiß, viel­leicht
taucht aus dem Modedschungel eines Tages ein App-
Hitwunder à la »Angry Birds« auf . . . Ein App-Over­
load für den User ist nicht zu befürchten, weil des­sen
persönlicher Stream nur passende Apps vorschlägt.
Zudem arbeitet man an einem Bewer­tungs­system
und sucht nach weiteren Solution-Partner-Agen­tu­
ren, die man mit dem System vertraut machen will,
damit sie Kreativen ohne Program­mier­kennt­nisse
Hilfe bei der Umsetzung ihrer Apps anbieten können.
Auch Medienpartnerschaften mit TV-Sendern und
Verlagen, die ihre eigenen Shopping-Apps kreieren,
sind vielversprechend. Kooperationen mit Promi­nen­
ten wie der »GZSZ«-Schauspielerin Anne Men­den in
der About-You-App You&Idol haben bewiesen, wel­
ches Potenzial das neuartige System birgt. Men­den
hat 300 000 Fans auf Facebook – ein Foto-Post von
ihr in einem Outfit, das sie für You&Idol trägt, brach­
te der App 70 000 Besucher. »Das ist eine Vermark­
tungsweise, mit der sich die jungen Nutzer sehr
stark identifizieren«, so Müller.
Fokus auf Socia-Media-Marketing
About You setzt den Schwerpunkt eben etwas mehr
als andere auf Social Media. Zu den Marketingmaß­
nahmen gehören zwar auch SEO, Google AdWords,
Banner, Targeting, Affiliates und Preissuchmaschi­
nen – eben das, was alle machten –, und das sei auch
xxxxxxxxxxxxxxxxxxxxxxx wichtig, meint Tarek Müller. Doch allein auf klassi­
sche Online-Marketing-Kanäle zu setzen und sich
»Wir haben dem harten Wettbewerb um Aufmerksamkeit aus­
Collins zuliefern, sei auf Dauer unrentabel.
nach dem Die Strategie mit redaktionellem Content und
Apps schafft, so Tarek Müller, neue Anziehungskräf­
Management- te, um die User zurück auf die Shopseite zu bringen.
Experten Diese ließen sich günstiger und nachhaltiger gewin­
Jim Collins nen, indem man Mehrwert für sie schafft – ohne da­
benannt, der bei auf die großen Gatekeeper angewiesen zu sein.
»Wir haben uns überlegt«, erklärt Müller, »wie wir
untersuchte, Kunden besser abholen können, ohne mit anderen
wie große Anbietern konkurrieren zu müssen.«
Unternehmen Und es stimmt, About You lädt gerade auch we­gen
innovativ der Apps zum intensiven Entdecken und ausgie­bi­gen
Stöbern ein. Einige machen einfach nur Spaß, an­de­
bleiben« re bie­ten echten Mehrwert. Der Open-Com­mer­ce-
Benjamin Otto, Ansatz wird wohl nicht nur in modischer Hinsicht
CEO, Collins funktionieren, sondern bald Nachahmer auch in an­
deren Handelsbereichen finden.  Lena Simonis
090 PAGE 09.14 › PROJEKTE › Collins
Schneller umsetzen
mit Atomic Webdesign
● Im Zentrum der User Experience der About-
You-Site steht die Social-Media-affine Ziel­
grup­pe, die Imed Jami, Leiter Frontend, Kon-
zeption und UX Design, bis ins Detail studierte.
So ermittelte er anhand von Bevölkerungsda­
ten des Statistischen Bundesamts Haushalts­
größen, Internetverbindungen, Browser-Vor-
lieben oder vorhandene Unterhaltungselek­
tro­nik – auch um zu wissen, wie groß die Apps
sein durften, damit sie sich für den User schnell
an­fühlen. Mit dem App-Ansatz und der News-
stream-Idee gab es schon ein grobes Konzept.
Für erste Frontend-Entwürfe überlegte man
sich in kleiner Runde diverse Website-Uni­ver­
sen (»Frau­en«, »Männer«, »Marken«, »Apps«,
»You«). Diese Entwürfe präsentierte das Team
und probierte in A/B-Tests Na­vi­gationen aus.
Dabei setzte es viele Usability-Methoden ein.
Ungewöhnlicher ist der Atomic-Webde-
sign-Ansatz, den das Team verfolgte, als die
Informations­architektur stand: »Damit konn­
ten wir ganze Seiten auf Basis von Wireframes
in Axure umsetzen«, erklärt Jami. Das von Brad
Frost 2013 ins Spiel gebrachte Gestaltungs­
kon­zept denkt Webprojekte als Summe kleins­
ter Designbausteine (Formulare, Button, Text­
fel­­der et cetera), die man zu größeren Inter­
fa­ce-Elementen kombiniert, um daraus ganze,
wiederverwendbare Designs zu erzeugen
( h
  ttp://bradfrostweb.com )  . Mit ihnen konzi-
piert man dann Templates für die Website
( h
  ttp://is.gd/zweiblogatomic )  . Dies bewährt
sich gerade bei responsiven Projekten. »Die
Ent­wickler konnten sich stets an einem Kom-
ponentenkatalog orientieren und kamen sehr
schnell und strukturiert voran.« Tests zeigten
sogar, dass die für den Atomic-Ansatz so typi­
schen wiederkehrenden Elemente sich positiv
auf die Seitenverweildauer auswirken.  le
Concept Stores
mit Entwickler-
Die About-You-
Website setzten die
Collins-Entwickler
Background
komplett in der
Wireframing-Soft-
Was steckt hinter dem
ware Axure RP 7
um. Sie passt perfekt
Open-Commerce-Konzept
zum modularen von About You?
Ansatz des Atomic
Webdesigns, durch
den sich die Seiten ● Unter  http://developer.aboutyou.de  kön­nen De­
besonders zügig veloper nach erfolgter Registrierung über eine offe­
realisieren ließen ne Programmierschnittstelle auf die Produktdaten­
bank von About You zugreifen und daraus Apps ent­
wickeln, die nach dem Freigabeprozess in den Shop
integriert werden, sich aber auch in externe Syst­eme
einbinden lassen (siehe Seite 92).
Überhaupt ging es von Anfang an darum, etwas
ganz anderes zu machen. Auch Zalando oder Spread­
shirt öffnen zwar punktuell ihre APIs für Entwickler,
wenn sie Hackathons in eigener Sache veranstal­ten.
Das Start-up Collins verfährt darin aber deutlich ra­
dikaler: »Wir versuchen, Dritten die Möglichkeit zu
geben, eigene Shopping-Lösungen nahtlos in unse­
re Plattform ein­zubinden«, erklärt Tarek Müller. »Da­
hinter steht ein offenes Ökosystem, in dem wir eige­
ne Visionen schnell verwirklichen und an das externe
Entwickler sowie Kreative und Händler eigenstän­
dig andocken können.«
Statt lange über Funktionalitäten zu diskutieren,
setz­te man also bereits eine Schaltstelle weiter oben
an: »Das war auch der Moment, in dem Tarek und
ich uns in das Konzept verliebt haben«, bekennt
Sebastian Betz. »Wir hatten früher schon Tausende
Ideen für coole Shopping-Apps, aber es gab immer
diese Hemmschwelle, dass wir kein Kapital dafür­
hatten, das ganze Drumherum aufzubauen.« Mit
dem neuen Collins-Konzept ist für sie jedoch nun
xxxxxxxxxxxxxxxxxxxxxxx genau dies möglich.
»Wir haben Frontend auf Python- und
hier sehr viele PHP-Basis
Ideen, und Nicht einfach, dem Otto-Vorstand ein Vorhaben zu
es macht erklären, dessen Ansatz man nicht live demonstrie­
ren kann und von dem sich schon gar nicht sagen
Spaß, immer lässt, wie es nach der Umsetzung in einem Jahr aus­
wieder Neues sehen würde. Klar war damals nur, dass der Kon­
ausprobie­ren zern mit dem App-Konzept genau die gewünschte
zu können« Zielgruppe ansprechen könnte – und das überzeug­
te. Das Projekt sollte sich daher keinesfalls auf mo­
Imed Jami, Leiter bile Apps beschränken, sondern sich so öffnen, dass
Frontend, Konzeption auch Apps für Facebook, Spotify oder Twitter leicht
und UX Design bei zu realisieren wären. »Und wir haben gesagt: Wenn
About You, Hamburg wir den offenen Ansatz konsequent umsetzen wol­
len, müssen wir auch die eigenen Shops auf unsere
API aufsetzen«, erzählt Sebastian Betz.
 PAGE 09.14 091

»Alles ist von innen heraus gedacht«, beschreibt

er. »Wir haben nicht auf ein Shopdesign oder kon­
krete Funktionen hingearbeitet, sondern uns ein
tech­­nisches Fundament überlegt, eine Core-IT, die
die Merchants anbindet und die Kernprozesse fo­kus­
siert. Erst im Anschluss haben wir über das Front­
end nachgedacht.« Das Herzstück entstand dann
in Python: »Die Core-IT-Applikation kommuniziert
nur über APIs und bildet sehr viele interne Prozesse
ab. Da sich diese häufig verändern, hat sich Python
bewährt – so können wir schnell und flexibel Ände­
rungen vornehmen«, so Betz.
Parallel startete sein Team mit der API und über­
legte sich die Kernfunktio­nen, die App-Entwickler
für ihre Shops benötigen würden: »Eine App braucht
Pro­duktdaten, muss Artikel in den Warenkorb le-
gen und den Kunden zum Bestellprozess leiten«,
zählt Sebastian Betz auf. Gleichzeitig setzte sein
Team ­erste Testshops ganz nach klassischer E-Com­
merce-Manier in PHP auf. »Es sollte damals in er­
ster Linie schnell gehen.«

Flexibilität und Einfachheit

Während der gesamten Entwicklungsphase – agil
in ein- bis zweiwöchigen Sprints – galt es den Spa­
gat zwischen Flexibilität und Einfachheit zu halten:
»Wir wollten den Programmierern die größte Frei­
heit geben«, so Betz. »Andererseits durfte die Ein­
stiegshürde nicht zu hoch sein.« Also setzte sich das
Team auch am Wochenende hin, testete selbst und
ließ bald auch externe Coder auf die Schnittstelle,
um sich Feedback zu holen und sie schrittweise zu
verbessern – oder Aspekte zu verwerfen:
»Anfangs haben wir viel zu sehr im Grundgerüst
eines Shops gedacht, es müsste Kategorien ge­ben
und die Entwickler könnten die Produkte dann dort
hineinmappen«, berichtet Sebastian Betz. »Zahlrei­
che Apps funktionierten aber – zum Glück – gar nicht
nach dieser Logik. Eine ganze Reihe von Entwick­
lern wollte eher so was wie Newsstreams machen
oder Outfit-Generatoren. Dafür braucht man keine
Kategorien.« Diese lassen sich zwar anlegen, sind
aber verzichtbar. Ein anderer schwieriger Punkt wa­
ren die Detailseiten. »Wir dachten, dass die Entwick­
ler Freiheit bei der Produktdarstellung wollen. Viele
hatten aber gar keine Lust, die Detailseiten selbst
anzulegen«, so Betz. »Ihre App kann sie einfach aus
unserem System per Link aufrufen.«
Die komplexe Offenheit des Systems von About
You stellt die Entwickler immer wieder vor neue
­Herausforderungen, schließlich verzichtet man be­
wusst auf Fremdlösungen und optimiert stattdes­
sen stetig das eigene System. »Wir wollen die About-
You-Seite und ihre Apps noch stärker vermischen,
den Stream-Gedanken stärker verankern, um die
Apps beim User besser pushen zu können«, sagt
­Sebastian Betz. »Wir haben eine gute Basis geschaf­
fen, jetzt müssen wir die Plattform noch weiter ver­
bessern – immer mit Blick auf die Bedürfnisse der
Menschen, die mit uns entwickeln.«  le
Statistiken zum Umsatz und zur Conversion Rate ihrer App können die Entwickler im About You Developer Center einsehen.
Rechts: Das Design und die Produktanzeige der Apps lassen sich individuell programmieren
So entstehen die
Apps für den Shop
von About You
Sebastian Betz zeigt am Beispiel der App
Wetterfest, wie man Apps im Developer
Center des Shops anlegt und veröffentlicht
● Unsere in der Skriptsprache PHP
ge­schriebene Wetterfest-App war eine
der ersten Anwendungen im About
You App Store. Sie schlägt Usern Out­
fits vor, die zum aktuellen Wetter pas­
sen. Die Anwendung steht auch als
Open-Source-Projekt auf GitHub. Wer
will, kann sie von  http://github.com/
aboutyou  herunterladen und zu einer
eigenen App weiterentwickeln.
App anlegen
1
Im About You Developer Center
(  http://developer.aboutyou.de  )
lässt sich in wenigen Schrit­ten
eine App erstellen. Der Entwickler er­
hält automatisch eine App-ID sowie
ein App-Token, das später zur Authen­
tifizierung in der API dient.
Sortiment definieren
2 4
Die angelegte App hat jetzt
vol­len Zugriff auf das Sorti­
ment von About You. Über
das About You Developer Center so­
wie direkt über die API lassen sich
­bestimmte Marken, Ka­tegorien und
Produkte für die App deaktivieren. Al­
lerdings bleiben für die App Wetter­
5
fest sämtliche Produkte ange­schal-
­tet, um eine größtmögliche Aus­wahl
zu gewährleisten.
6
PHP-Projekt aufsetzen
und SDK einrichten
3
Für die Wetterfest-App ver­
wen­­deten wir das PHP-Web­
framework Laravel (  http://
laravel.com  ). Damit die Arbeit mit der
About-You-API leichter von der Hand
geht, bieten wir im About You De­ve­
loper Center Software De­velopment
Kits für PHP, Python, iOS, Ruby, Java­
Script und Android an. Für Wetter­fest
können Sie das PHP-SDK (  http://is.
gd/php_sdk  ) mit Com­poser (  https://
getcomposer.org  ) installieren.
Zum Wetter passende
Produkte abrufen
Die Funktion "getWeatherByIP($_
SERVER[‘REMOTE_ADDR’])" iden­ti-
fiziert die Herkunft des Besu­
chers über seine IP-Adresse und nutzt
diese Geodaten, um das Wetter vor Ort
bei einem Wetterdienst abzufragen.
Da­nach lädt die App Out­fits aus der
Datenbank, die zum Wetter passen.
Im About You App Store
veröffentlichen
Die Veröffentlichung der App
im About You App Store er­
folgt mit einem Klick über
das Developer Center. Das Team von
About You überprüft dann die App
und schaltet sie frei. Anschließend
kön­nen Besucher sie aufrufen. Außer­
dem bietet das Developer Center eine
Funktion, mit der man die App extern
beispielsweise in den eigenen Word­
Press-Blog einbinden kann.
Provision und
Reporting
Für die Verkäufe aus der App
heraus erhalten Entwickler ei­
ne Provision. Verkaufsstatis­ti­
ken sind in Echtzeit im Developer Cen­
ter einzusehen. Auf der Grundlage die­
ser Informationen kann man die App
stets optimieren und auch den Erfolg
diverser Online-Marketing-Aktivitäten
messen. Sebastian Betz (le)
Code zur About-You-App Wetterfest.
Den verwendeten Code finden Sie unter 
www.page-online.de/projektcollins  
Sebastian Betz ist CTO und Mitglied
der Geschäftsleitung von Collins.
Einer entrüsteten Stylistin musste
er erklären, dass die Developer
unschuldig waren, wenn sie von »Mongo«
sprachen. Gemeint war natürlich
die Open-Source-Datenbank MongoDB
Lena Simonis ist Journalistin in Hamburg
und schreibt über die Welt der digitalen
Medien. Zu Collins hätte sie gerne ihre
Söhne mitgenommen. Schließlich mode-
riert die Presse­verantwortliche Muschda
Sherzada auch den Tigerentenclub.
↗ http://lenasimonis.tumblr.com
Inspiration pur!

Gleich
zugreifen !

PAGE präsentiert die entscheidenden Trends

in Sachen Konzeption, Gestaltung & Technik.
Jetzt zugreifen: shop.page-online.de/page-mini