Wie April Zero entstand

Wie April Zero entstand

Teil 1

Das ist das erste Kapitel darüber, wie ich die ursprüngliche April Zero-Website gestaltet habe. Ich zeige ein paar Skizzen, verworfene Konzepte und alte Prototypen und erkläre, wie sich das Ganze entwickelt hat.

Wenn du es selbst nutzen willst, kannst du dich jetzt für Gyroscope anmelden.

März 2014, die Inspiration

Beweg dich

Ich wollte gerade mit meinem Mitbewohner nach Paris. Er fotografiert leidenschaftlich gern, und wenn wir irgendwohin fahren, baut er meistens eine kleine Website über unsere Reise, voller schöner Vollbildfotos und Videos. Die davor war über unser Japan-Abenteuer.

Es hat immer Spaß gemacht, ein paar Monate später zurückzugehen und die genaue Chronik dessen zu sehen, was wir gemacht haben, mit wunderschönen Fotos und Videos von jedem Schritt.

Für diese Reise beschlossen wir, die Moves-App zu nutzen, um festzuhalten, wo wir überall waren. Ich habe sie in der Sicherheitsschlange am SFO installiert, ohne zu ahnen, dass hier etwas begann, das bald zur Besessenheit werden würde.

Manche haben Moves oder ähnliche Apps früher probiert und hatten Probleme mit dem Akku. Lange Zeit waren alle Apps mit GPS oder Bewegungserkennung (Nike, Find My Friends, Highlight und so weiter) schrecklich, weil sie den Akku im Nu leer saugten. Dann kam das iPhone 5S. Aber während die Gerüchteküche um die kommende iWatch brodelte, ging Apples bahnbrechende Einführung des M7-Prozessors fast an allen vorbei, an mir eingeschlossen.

Plötzlich war so vieles möglich, ohne den Akku zu belasten. Plötzlich gab es massenhaft reichhaltige Inhalte in Echtzeit. Plötzlich war eine ganze Generation von Fitnessgeräten überflüssig. Aus Hardwareproblemen wurden einfache Softwareprobleme. Moves war eine der wenigen Apps, die das wirklich ausgenutzt haben.

Herzschläge

Etwa zur selben Zeit erzählte mir jemand von einer App namens Cardiio, die den Puls mit der iPhone-Kamera messen konnte. Ich habe sie geladen, vor allem weil ich nicht glaubte, dass das funktioniert. Wie oft mein Herz schlägt, war mir eigentlich völlig egal.

Aber nachdem ich ein paar Tage damit herumgespielt hatte, war ich süchtig. Das Tolle daran war, dass eine Messung nur etwa 15 Sekunden dauerte, vielleicht 30, wenn man die Zeit mitzählt, das Handy aus der Tasche zu holen, zu entsperren und die App zu öffnen.

Richtig gepackt hat mich die Erkenntnis, dass gut trainierte Sportler meist einen niedrigeren Ruhepuls haben. Niedriger war besser. Das war ein sehr einfacher Weg, meinen aktuellen Zustand objektiv zu messen. Und es machte Spaß.

In einer Woche fiel mir auf, dass mein Puls ungewöhnlich hoch war, um die 80 oder 90, obwohl er sonst eher bei 60 lag. War ich wegen irgendetwas gestresst? Ich bin lange laufen gegangen und habe am nächsten Tag noch mal gemessen. Zurück bei 60. Faszinierend …

Es war, als hätte ich New Relic in meinem Körper installiert. Ich war es gewohnt, Graphen anzuschauen und Dinge zu reparieren. Nur war es diesmal kein Server, sondern mein Körper.

Lauf um dein Leben

Mein Hobby davor war Klettern in der Halle. Ich wohnte ein paar Blocks von Mission Cliffs entfernt, und dort bouldern zu gehen wurde mein abendliches Ritual. Aber es ist ein ziemlich anstrengender Sport, und ich hatte bald diverse Schulterverletzungen.

Also fing ich stattdessen mit Laufen an. Ich war gerade dabei, eine große Trennung zu verarbeiten, und das war ein sehr guter Weg damit umzugehen. Ich hatte die Nike-Lauf-App früher ab und zu benutzt, hier und da eine Meile, aber nie ernsthafte Distanzen. Die GPS-App hat mir den Akku zerlegt, es hat also nicht viel Spaß gemacht.

Jetzt aber, mit dem M7, gaben meine Knie lange vor meinem Handy auf. Die schicken Garmin-Laufuhren oder Fitbits, über die ich nachgedacht hatte, brauchte ich nicht mehr. Es ist leicht, sich mit einem fehlenden Gerät herauszureden, aber alles, was ich brauchte, hatte ich längst in der Tasche.

Die Fotos meiner Läufe auf Instagram zu posten hat mich motiviert, dranzubleiben, als ich einmal angefangen hatte. Nike hatte ein einfaches System, um Karte, Distanz und Logo über ein Bild zu legen. Mit dem Hashtag #nikeplus gepostet, gab es garantiert viele Likes von anderen Läufern aus aller Welt.

Es verband drei meiner Leidenschaften: Laufen, Fotografie und Aufmerksamkeit. Es war brillant. Es war eine großartige Zeit, Läufer zu sein, zwischen Runkeeper, Strava, Nike und so weiter gab es viele gute Tools und Communities.

All meine Werte zu jedem Lauf zu sehen gab mir etwas, das ich optimieren und in dem ich besser werden konnte. Ich konnte mir jetzt Herausforderungen und Ziele setzen.

Aber fast nichts anderes hatte ein vergleichbares Ökosystem. Ich wollte diese Art von Information und Motivation für jeden Bereich meines Lebens, nicht nur fürs Laufen. Das war ja nur Analytics. Analytics hatte ich schon gebaut. Zeit, mit dem Skizzieren anzufangen.

Blutwerte

Mein jährlicher Check-up war überfällig. Ich habe alle Standarduntersuchungen machen lassen und zusätzlich darum gebeten, eine Kopie meiner Blutwerte für meine eigenen Unterlagen per Mail zu bekommen.

In der Woche darauf bekam ich ein sehr umfassendes PDF. Es enthielt nicht nur meine aktuellen Werte, sondern auch eine Erklärung der Idealbereiche und eine Einordnung meiner Situation. Ich war überrascht, wie niedrig mein Vitamin D war, und ein paar andere Werte lagen außerhalb des Idealen. Das waren wirklich großartige Daten, aber sie steckten in einem Text-PDF im Anhang in meinem Postfach. Sie hatten viel mehr verdient.

Seitdem lasse ich jeden Monat Blut abnehmen und behalte die Veränderungen genau im Blick. In ein Dashboard gepackt wären sie eine ständige Erinnerung daran, woran ich arbeiten muss. Ich setzte auf meine These, dass sich Dinge allein dadurch verbessern, dass man sie trackt. Und wenn das nicht funktioniert, wüsste ich es wenigstens und könnte mich mehr anstrengen.

Körperfett

In Der 4-Stunden-Körper beschreibt Tim Ferriss diverse Geräte und Tests, mit denen er sich selbst vermessen hat. Eines davon war ein tragbares USB-Ultraschallgerät, um den Körperfettanteil genau zu messen. Ich hatte mich ohnehin schon gewogen, aber den Körperfettanteil zu kennen würde mir noch besser zeigen, was sich veränderte.

Das Ultraschallverfahren ist etwas unpraktisch, es dauert ein paar Minuten und man braucht ein spezielles Gel, aber die Daten daraus waren wirklich genau und jeden Tag faszinierend anzusehen. Man konnte tatsächlich in den eigenen Körper hineinsehen, bis auf den Millimeter Fett, Muskel und darunterliegenden Knochen.

Ich sah, wie das Körperfett am Wochenende nach epischen Cheat Days nach oben schoss und in der Woche darauf sogar noch tiefer fiel. Die Daten waren großartig, die App-Oberfläche und die Darstellung nicht.

Ich wollte sehen, wie das mit allem anderen zusammenhing, was ich tat.

Ich glaubte außerdem an die Idee, dass man etwas allein dadurch verbessert, dass man es trackt. Wenn man den aktuellen Stand und die Veränderungsrate kennt, trifft man bessere Entscheidungen, kann schnell nachjustieren und versteht, was wirklich funktioniert und was nicht. Ohne Messwerte für die Dinge, die einem wichtig sind, fliegt man im Grunde blind.

Mir wurde klar, dass ich die richtige Balance finden musste zwischen einfachen, häufigen Messungen wie Puls und Gewicht und lästigeren, aber aufschlussreichen Werten wie Körperfett und Blutwerten. Zusammen ergäben sie ein richtig gutes Dashboard und eine vollständige Geschichte. Ich setzte auch darauf, dass sich die Technik schnell verbessert, gerade wenn das populärer wird und die Nachfrage steigt. Wenn die Mikrochip-Implantat-Version auf Kickstarter erscheint oder Apple das mit der Apple Watch misst, müsste ich nur ein paar Zeilen Code ändern.

April 2014, die ersten Entwürfe

Ein Raster aus Datenpunkten

Mir gefiel die Idee und die Schlichtheit dieses Pod-Designs, mit einem schönen Raster und modularen Elementen, die man später aufwerten konnte. Die meisten ließen sich zu 100 % über APIs automatisieren, und die manuellen wie mein letzter Klettertag würden nur ein paar Minuten kosten.

Selbst wenn ich faul oder sehr beschäftigt wäre, würde die Seite nicht veralten. Ich würde ja trotzdem laufen, Musik hören oder neue Fotos auf Instagram posten!

Warum Skizzieren wichtig ist

Die frühen Phasen eines Projekts verbringe ich meist nur mit Skizzieren und Nachdenken. Ob ich gestalte oder Code schreibe, ich merke: Erst zu skizzieren hilft mir, klarer zu denken.

Mit Skizzen auf Papier zu arbeiten ist stark, weil man dabei schnell ist. Es ist vermutlich das einzige Medium, in dem man Ideen so schnell festhalten kann, wie sie kommen. Man legt sich selbst visuelle Optionen vor, statt sie nur im Kopf zu haben, und trifft dann besser informierte Gestaltungsentscheidungen. Zwei Möglichkeiten aufs Papier zu bringen, und sei es noch so grob, macht oft sofort deutlich, welche die bessere ist.

Wacom-Tablet

Nach dem Papier habe ich die Idee schnell in Photoshop skizziert, um sicherzugehen, dass sie auch digital funktioniert. Viele Entwürfe wirken auf Papier als winziges Thumbnail gut, funktionieren digitalisiert aber nicht. Irgendetwas am Stil einer Skizze lässt selbst eine schlechte Idee edel und durchdacht aussehen. Auf Whiteboard oder Papier trickst man sehr leicht bei den Größen, presst Text in Platz, wo er nicht hinpasst, oder lässt Elemente viel mehr Raum einnehmen, als sie am Ende füllen.

Manchmal behalte ich für die frühen Mockups gern einen skizzenhaften Stil bei. So denkt man weiter, als wäre man auf Papier, und arbeitet an einer Variablen nach der anderen. Layout und Inhalt standen ja gerade, jetzt konnte ich Farbe hinzufügen und prüfen, ob Kontrast und Größenverhältnisse noch stimmen. Textur, Typografie, Hintergrundbilder und andere zeitraubende Details kämen später, falls es grünes Licht gäbe.

Diese Version wirkte ganz ordentlich, also habe ich sie ein paar Freunden geschickt. Sie waren ziemlich begeistert, also habe ich in Photoshop weitergearbeitet und realistischere Mockups gebaut. Da war Potenzial drin.

Ich habe noch ein paar Tage damit verbracht, die Details aufzuräumen und mit Varianten zu experimentieren. Über den Inhalt und die Informationsarchitektur war ich sehr glücklich, das ist immer das Wichtigste, aber Stil und Layout raubten mir nicht jedes Mal den Atem, wenn ich hinsah.

Es war ein solides, brauchbares Design, aber nicht das beste der Welt.

Der April Zero-Styleguide

Das hier war die Zukunft. Die Möglichkeit, wie durch Zauberei alles über sich selbst zu analysieren und zu teilen, ist ungefähr so fantastisch wie Fliegen oder Elektrizität. Ich wollte, dass es sich so futuristisch anfühlt, wie es tatsächlich war.

Wenn ich eine Marke baue, lege ich meistens ein Moodboard an, um verschiedene Stile schnell zu prototypen und herauszufinden, welche Elemente die gewünschte Stimmung tragen. Die Teile können alles sein: Filmausschnitte, Fotos, Plakate, Screenshots anderer Apps und so weiter. Ich hole mir viel Inspiration aus Motion Design und Werbung, wo große Budgets und großartige Künstler dahinterstehen. Auf Dribbble und Behance findet man ebenfalls viel Gutes.

Es gibt viele Beispiele für großartige holografische Interfaces und Dinge, die futuristisch wirken, aber ich musste es auf eine engere Auswahl eingrenzen. Wie bei den meisten Entscheidungen in meinem Leben fragte ich mich: Was würde Tony Stark tun?

Wiederkehrende Elemente, die mir auffielen, waren: holografische Überlagerungen, konzentrische Kreise, isometrische Perspektive & dünne Linien. Das in ein Produkt zu bringen, ohne die Bedienbarkeit zu opfern, würde schwer werden, aber es war ein guter Ausgangspunkt.

Jetzt, wo Inhalt und Stil eingegrenzt waren, ging es zurück ans Reißbrett …

Version 2

Ich wollte die Modularität und die Architektur von vorher behalten, aber ohne dieses langweilige Layout. Also beschloss ich, alles in „Mini-Apps“ aufzuteilen, die die Daten rund um bestimmte Themen zeigen. Die ersten beiden könnten „Sport“ und „Explorer“ heißen.

Jeden Bereich auf einen einzigen Kontext einzugrenzen ließe eine zusammenhängende Geschichte entstehen, statt dem Besucher einfach einen Haufen Zahlen entgegenzuwerfen.

Und in Zukunft könnte ich neue Bereiche ausrollen, ohne die bestehenden neu bauen zu müssen. Ein paar Beispiele für Dinge, auf die ich Lust hatte:

„Aviation“, jeder Flug protokolliert, während ich meinen Pilotenschein machte

„Underwater“, Tauchgänge protokolliert, während ich den Tauchschein machte

„Digital“, was ich am Computer machte (Design, Code, Screencasting und so weiter)

„Finance“ , Ausgabegewohnheiten, Fortschrittsbalken auf dem Weg zum Milliardär

„Love“, mein Datingleben in Zahlen und so weiter

Manches müsste vielleicht mit einem Passwort geschützt werden …

Sport gestalten

Im Sport-Bereich käme alles rund um Fitness und Medizin unter, mit aktuellen Blutwerten und der Entwicklung der Leistung über die Zeit.

Die erste Version war ein Feed verschiedener Aktivitätstypen. Die Darstellung der Blutwerte gefiel mir sehr, aber der Feed war schwer zu überblicken. Ich sah immer nur die letzten paar Ereignisse, was keinen guten Überblick gab.

Ich wollte ein ganzes Jahr auf einen Blick sehen. Dafür brauchte ich mehr aggregierte Daten und musste alles kompakter machen.

Das Layout war besser, wirkte aber nicht besonders fortschrittlich. Dieses Problem ließe sich beim Bauen lösen, mit ein paar zurückhaltenden Animationen und feinen Details.

Das war die statische, ausprogrammierte Version. Die dunkleren Seitenspalten geben etwas mehr Kontrast und verbinden sie mit der Startseite, indem sie die Inhaltsspalte verschieben.

Ich wollte, dass alles erkundbar und interaktiv ist. Wer etwas mit der Maus berührte, sollte mehr darüber erfahren, unter der Haube lagen jede Menge Daten, die sich zeigen ließen.

Der Spinner

Ein Muster, das mir in den Analytics früherer Seiten aufgefallen war: Die meisten Leute sehen sich eine oder zwei Seiten an und springen dann ab. Selbst wenn dahinter eine ganze Welt an gutem Inhalt liegt, erreichen die meisten Besucher sie nie. Irgendwo draufzuklicken ist eine Verpflichtung, und jeden Bereich gründlich zu erkunden macht schlicht niemand.

Ich wollte eine neue Art von Interface bauen, bei der man sich anfangs zu nichts durchklicken muss, sondern einfach die Maus bewegen und erkunden kann, mit leichten Mikro-Interaktionen, die einfach sind und Spaß machen.

Und so wurde dieser Spinner geboren. Ich wollte etwas bauen, das so viel Spaß macht und so revolutionär ist wie der ursprüngliche iPod.

Er erlaubte außerdem, von den langweiligen rechteckigen Layouts abzurücken. Auf dem Moodboard waren viele runde, bewegte Elemente, und so konnten diese Details ganz natürlich im Interface auftauchen.

Als ich ein Mockup hatte, das mich ausreichend begeisterte, war es Zeit zu programmieren! Aus einem früheren Blog-Experiment hatte ich schon ein einfaches Jekyll-Grundgerüst. Ich habe einen neuen Branch aufgemacht und angefangen, den Spinner zu bauen.

Frühe Code-Prototypen

Das ist ein gutes Beispiel für eine Situation, in der es sehr nützlich ist, ein Problem sowohl zu gestalten & als auch zu programmieren. Dass die Seite gut aussieht, war wichtig, aber wie sie sich anfühlt & bewegt, war genauso wichtig herauszufinden. Also habe ich mit etwas leichtem JavaScript einen einfachen Prototyp gebaut, in dem Jekyll-Container, den ich ursprünglich für meinen Blog nutzen wollte.

Die erste Version sah nicht besonders beeindruckend aus. Version 1 (oben) war sehr rudimentär. Alles zum Drehen zu bringen und sauber auszurichten war etwas knifflig, deshalb habe ich beim Bauen und Debuggen mit knallbunten Kreisen gearbeitet.

Version 3 (unten) brachte die Ring-Elemente und JavaScript für mehr Interaktionen, etwa den Kreis zu drehen, wenn man über den Text fährt.

Version 5 brachte eine Intro-Animation, die schwieriger war als gedacht, weil ich Übergänge auf Elementen laufen ließ, die sich ohnehin schon bewegten.

Version 8 brachte eine Exit-Animation mit anderen Einstellungen als das Intro, damit sich ein Klick lohnender anfühlte.

Jede Iteration löste ein bestimmtes Problem oder brachte ein neues Feature, das es ein bisschen besser machte. Ich war angenehm überrascht, wie viel Spaß die Nutzung machte. Das bestätigte meine Ahnung, dass hier etwas war, in das man Zeit stecken sollte. Mit ein paar weiteren Verbesserungen und Designdetails könnte das ein großartiges Erlebnis werden.

Also habe ich weitergemacht und Stunden am Tag damit verbracht, die Seite neu zu laden und die Animationen flüssiger, interessanter und besser getimt zu machen.

Mir hat es Spaß gemacht, aber ich brauchte mehr Bestätigung, dass es keine Designprobleme gab. Ich habe damals in verschiedenen Cafés gearbeitet, also habe ich ein paar Fremde angeworben, die mit der Seite spielen sollten.

Außer „Probier das mal aus“ habe ich ihnen keine Anweisungen gegeben, ihnen meinen Laptop hingeschoben und genau beobachtet, was sie tun. Mir fielen ein paar Probleme auf, meist Klicks auf Stellen des Interface, die gar keine Links waren. Ich habe die Klickflächen schnell auf die häufig danebengeklickten Bereiche erweitert und ein paar Hover-Effekte ergänzt, die zeigen, dass etwas klickbar ist. Bald hatten meine Testfreiwilligen keine Probleme mehr, sich zurechtzufinden und die Seite zu verstehen.

Sie war so intuitiv, wie ich gehofft hatte. Wichtiger noch: Sie schienen wirklich Spaß daran zu haben, herumzufahren und auf Bereiche zu klicken, ein bisschen überrascht und begeistert von all den Animationen, die sie auslösten.

Mit dem Kern der Startseite zufrieden, war es Zeit für den Teil der Seite, vor dem ich am meisten Angst hatte.

Explorer

Jetzt kamen jede Menge technische Probleme ins Spiel. Die vorherigen Bereiche ließen sich mit ein paar Beispieldaten leicht skizzieren und in Photoshop bauen, aber für diesen brauchte ich echte Inhalte. Ich habe einen API-Key eingerichtet und angefangen, meine Daten aus Moves zu importieren.

Nach ein paar Wochen in San Francisco merkte ich, dass ich vielfältigere Daten brauchte. Also habe ich mein MacBook und meinen Pass geschnappt und bin zum Recherchieren nach New York. Ich musste wirklich in die Stimmung von Erkundung und Abenteuer kommen, wenn ich dieses Gefühl in diesem Bereich rüberbringen wollte.

Jetzt musste ich herausfinden, wie ich Flüge, Zeitzonenwechsel, Läufe im Central Park und die Menge verzehrter Pizza darstelle. Es war ein Glück, dass ich gefahren bin, denn ich stieß schnell auf viele Probleme damit, wie Moves mit Zeitzonen umgeht und was ich dafür berücksichtigen musste. Wäre ich in San Francisco geblieben und hätte mich für internationale Tests auf die alten Paris-Daten verlassen, wäre alles beim nächsten Flug über Zeitzonen hinweg zusammengebrochen.

Auf dem Rückflug habe ich angefangen, alle Moves-Daten zu verarbeiten und in einer einfachen Timeline anzuordnen. Es war ein ziemlich unlesbares Durcheinander, aber es lief mit den echten Daten meiner Reise!

Eine der größten Designentscheidungen war, die Timelines waagerecht zu machen und die Tage übereinanderzustapeln.

Fast alle vergleichbaren Entwürfe hatten sie senkrecht angeordnet und damit bequem das Textüberlappungsproblem umgangen, das ich hatte. Ich war aber überzeugt, dass es entscheidend ist, alle Tage im direkten Vergleich zu sehen. Ich wollte, dass jeder Tag eine Achse ist, die später viele reichhaltige Daten tragen kann. Wie ich die Beschriftungen unterbringe, musste ich also anders lösen.

Ich habe angefangen, mit einem Algorithmus zu spielen, der die Beschriftungen sauber über 4 Ebenen versetzt. Er analysiert den zeitlichen Abstand zwischen Orten und sorgt dafür, dass immer genug Platz für den Text bleibt.

Version 9 war auf hellem Hintergrund, für Version 10 bin ich auf dunkel gewechselt, damit die Orte stärker herausstechen und es zum Stil des Rests der Seite passt.

Ich habe beschlossen, zunächst nur die wichtigen Orte zu zeigen, und beim Hovern mehr Details zum Tag einzublenden und den kleineren Text sichtbar zu machen. Außerdem habe ich wiederkehrende Orte wie Zuhause oder Hotels heruntergestuft, weil sie weniger interessant sind als andere Orte, obwohl man dort viel mehr Zeit verbringt.

Und dann wollte ich eines Tages draußen im Park arbeiten. Der Bereich hieß schließlich Explorer.

Und … ich konnte gar nichts lesen.

Die ursprüngliche Version mit weißem Hintergrund funktionierte prima, aber die neue mit dem verbesserten dunklen Farbschema war im Sonnenlicht komplett unbrauchbar.

Genau deshalb ist es extrem wichtig, sein Produkt im echten Kontext zu benutzen. Je weiter man davon weg ist, auch auf scheinbar nebensächliche Weise, desto größer die Gefahr, kalt erwischt zu werden oder Designfehler zu übersehen. Deshalb arbeite ich gern im Flugzeug, im Café, kopfüber und auf andere Arten, die schräge Blicke ernten. Das öffnet den Kopf für andere Perspektiven und zeigt Probleme, die einem sonst entgehen.

Jetzt musste ich entscheiden: Bleibt es dunkel, weil das für 95 % der Leute drinnen besser aussieht, oder ergibt es Sinn, das Ganze auf hell umzubauen? Wenn es mir passiert ist, kann es auch jemand anderem passieren, oder, noch wichtiger, mir wieder.

Manchmal muss man, wenn man feststeckt oder gegen eine Schwelle läuft, einfach weitermachen und sich durchbeißen, Stunden auf das Problem werfen, bis es gelöst ist. In anderen Fällen ist es besser, umzuschalten und von einer anderen Seite heranzugehen. Ich habe eine dunkle Version (11) und eine helle Version (12) fürs Archiv gemacht und mich anderen Problemen zugewandt.

Reisen darstellen

In der ersten Version lagen Reisen und Orte in derselben Zeile. Ich wollte es intuitiver machen und Reisen von Punkt zu Punkt stattdessen als Sprünge darstellen.

Aggregierte Werte

Ich wollte die Weltkarte oben behalten, die meinen aktuellen Standort zeigt, aber auch Gesamtwerte auf die Seite bringen, die sie kurz zusammenfassen, ohne dass man 30 Timelines durchgehen muss. Also habe ich eine weitere Strukturebene ergänzt und alles nach Monaten aufgeteilt. Jeder Monat hätte eigene Werte, und die ließen sich miteinander vergleichen.

Es war faszinierend zu sehen, wie sich meine Gewohnheiten von Monat zu Monat änderten. In manchen Monaten war ich viel unterwegs und in Flughäfen, in anderen bin ich viel klettern gegangen oder habe den Großteil des Tages in Cafés verbracht. Italienische Restaurants fielen schnell weg, nachdem ich aus New York zurück war, ersetzt durch Burritos.

Auf responsiv umbauen

Als ich an der responsiven Version arbeitete, ging es bergab. Die waagerechte Timeline, die auf dem Desktop großartig funktionierte, passte nicht auf einen kleinen Bildschirm. Sie musste senkrecht werden, aber ich wollte nicht die Funktionalität der ganzen Seite für die mobile Umsetzung opfern. Also habe ich den Code umgebaut, damit er beide Ausrichtungen kann und beim Ändern der Bildschirmgröße sauber umschaltet.

Der Code für eine eigene mobile Version, ohne den Desktop kaputtzumachen, lief. Jetzt konnte ich für Mobil von Grund auf gestalten, statt die große Version in einen kleinen Raum zu quetschen.

Ich hatte die immer gleichen Daten satt. Das Design kam voran, aber irgendetwas fehlte noch. Ich brauchte einen Tapetenwechsel und eine neue Perspektive.

Ich saß in einem Café (Coffee Bar, am 6. Mai), als mir ein Freund schrieb.

Perfektes Timing.