Zum Inhalt
Adam H.

Arbeiten

Ein paar Sachen, die ich gebaut habe.

Manches für die Arbeit, manches für mich.

Interaktive HTML5-Werbemittel

07

Die hier laufen genau so, wie sie in einer Platzierung laufen würden, unter einer erfundenen Marke. Sie zeigen die Mechanik und keine Kampagne, hinter den Buttons liegt also nichts.

Wurf

Ein Schleuderwurf mit echtem Wurfkörper dahinter. Nichts läuft auf einer Zeitleiste: Das Zurückziehen setzt eine Geschwindigkeit, den Rest machen Schwerkraft und Luftwiderstand. Kein Wurf sieht aus wie der davor.

Mechanik
Halten, zurückziehen, loslassen
Gebaut mit
HTML, Canvas 2D, JavaScript

Der schwierige Teil

Ein Ziel dieser Größe in einem 300-Pixel-Rahmen ist entweder unmöglich oder trivial, dazwischen liegt fast nichts.

Wissenswert

25 KB. Keine Bibliothek, kein Bild, keine Schriftanfrage.

Technische Notizen

Die erste Fassung war nicht spielbar. Ob es an der Physik lag oder an der Geometrie, konnte ich nicht sagen, also habe ich nicht geraten, sondern jede Kombination aus Winkel und Stärke durch dieselbe Schrittfunktion geschickt, die auch der Ball benutzt, und ausgegeben, welche treffen. Fast keine. Das Ziel war nicht zu klein, es war zu nah: Der Ball musste innerhalb von rund hundert Pixeln steigen und wieder fallen, und dieses Fenster trifft niemand zweimal.

Den Ring weiter weg und tiefer zu setzen hat der Flugbahn Platz gegeben, und aus einer Handvoll Treffer wurde ein Band über zwanzig Grad und sechs Stärkestufen. Dann kam die gepunktete Ziellinie dazu, die mit demselben Integrator rechnet wie der Wurf. Was sie zeichnet, passiert auch. Genau das macht es fair. Du siehst, wo der Bogen landet, bevor du loslässt, ein Fehlwurf geht also auf deine Kappe.

Das letzte Stück ist ein sanfter Zug zur Seite, während der Ball fällt, in einem schmalen Trichter über dem Ring. Jedes Handyspiel macht das. Ohne fühlt sich ein knapper Fehlwurf so an, als hätte das Spiel betrogen, und nicht umgekehrt.

Einzeln öffnen

Apps

03

Sechs Werkzeuge

Screens aus der App

Desktop-App, für die Arbeit gebaut

Reframe

Im Einsatz, wo ich arbeite, im ganzen Team. Kein öffentliches Produkt.

Eine Desktop-App für die Teile der Bannerarbeit, die sich wiederholen, über Monate gebaut, ohne dass jemand danach gefragt hätte. Sie baut nie ein Banner neu. Sie kopiert das fertige und ändert nur, was sich ändern muss, damit sich das Ergebnis genau wie das Original verhält.

Warum es das gibt

Die teuren Fehler in dieser Arbeit sind die, die man nicht sieht. Sie tauchen beim Ausspielen auf, nach der Freigabe, dann wird die Kampagne zurückgerollt und alle verlieren eine Woche. Nach einem Werkzeug dagegen hat niemand gesucht, weil niemand das Problem benannt hatte: Die Arbeit war langsam auf eine Art, an die sich alle gewöhnt hatten. Ich habe über ein paar Monate eins gebaut.

Was sich geändert hat

Rund die Hälfte des überflüssigen Aufwands in einer Kampagne ist weg. Fehler, die früher beim Ausspielen aufgefallen sind, fallen vor der Auslieferung auf. Das Team arbeitet heute damit.

Technische Notizen

Das meiste, was ein Designer nach dem ersten Aufbau an einer Kampagne tut, ist kein Design. Es ist dasselbe Banner nochmal in einem anderen Format, dasselbe Briefing nochmal getippt, dieselben Fallback-Screenshots und Aufnahmen von Hand für den Kunden. Ich habe das gemacht und dabei immer gedacht, dass dafür kein Mensch nötig ist.

Also baut die App nichts neu. Sie kopiert den freigegebenen Stand und ändert nur, was sich ändern muss, denn beim Neubauen driftet die Animation, und genau dafür sind die Prüfungen am Ende da. Danach geht sie weiter, als ein Designer normalerweise gehen würde: Sie liest Code und Daten einer fertigen Kampagne und zieht heraus, was sonst der Ad-Server findet, nach der Freigabe, wenn ein Fehler einen Rückzieher und eine Verzögerung kostet.

Sie steht bewusst auf Daten und nicht auf der Vermutung eines Modells. Ich arbeite täglich mit KI und finde, sie gehört dorthin, wo ein kreativer Kopf noch lenkt. Ein Werkzeug, das für dich entscheidet, ist eins, das du nachprüfen musst. Ein Werkzeug, das für dich misst, darf die langweilige Hälfte haben.

Was es macht

  • Baut ein freigegebenes Banner in allen anderen Formaten nach und behält die Animation
  • Stanzt die weiteren Versionen einer Kampagne aus, indem nur die Bilder getauscht werden
  • Liest Code und Daten und findet, was sonst erst beim Ausspielen auffällt
  • Schreibt das Creative-Briefing, das vorher von Hand getippt wurde
  • Macht die Fallback-Screenshots und die Bildschirmaufnahmen für Kunden
  • Nimmt die großen dynamischen Banner ab, die vorher ein eigener Job waren
  • Ein Figma-Plugin exportiert die Layouts, die sie braucht
  • Läuft offline, ohne Upload und ohne Konto

Gebaut mit

  • Electron
  • Node
  • Express
  • sharp
  • ffmpeg
  • Figma plugin
Satz eintragen

Screens, gezeichnet vom eigenen Figma-Plugin der App

Handy-App, privat

ProRep

Privates Projekt. Läuft auf meinem eigenen Handy.

Ein Trainingstagebuch, das offline funktioniert. Der Punkt war, einen Satz schneller einzutragen als die Pause dazwischen dauert. Kein Konto, kein Server.

Warum es das gibt

Zwischen zwei Sätzen hast du rund zwanzig Sekunden und eine freie Hand. Alles andere folgt daraus: Die Zahlen sind von letztem Mal vorbelegt, und du kannst den Satz laut sagen statt ihn zu tippen.

Was es macht

  • 282 Geräte über 78 Übungen, dazu alles, was du selbst anlegst
  • „80 für 8“ sagen und das Formular ist gefüllt, auf dem Handy, in drei Sprachen
  • Öffnet mit den Zahlen der letzten Einheit schon in den Feldern
  • Markiert einen persönlichen Rekord mit einem kurzen Buzz
  • Trainingstage kommen aus dem Log selbst, die beiden können sich also nicht widersprechen
  • Ein Figma-Plugin baut jeden Screen als editierbares Layout nach

Gebaut mit

  • React Native
  • Expo
  • SQLite
  • Speech recognition
  • Figma plugin
Übersicht

Screens aus der App

Web-App, privat

Cashflow

Privates Projekt.

Ein Finanz-Dashboard, das Kontoauszüge liest, statt dich tippen zu lassen. Du lädst ein PDF hoch, es zieht die Zeilen heraus.

Warum es das gibt

Einen Kontoauszug an ein Modell zu schicken heißt, dass Schlüssel und Datei beide aus dem Browser heraus bleiben müssen. Beide gehen über eine Serverfunktion, die vorher die Sitzung prüft, und das ist die kleinste Stelle, an der das Vertrauen sitzen kann.

Was es macht

  • Die Anthropic API liegt hinter einer kleinen Serverfunktion, der Schlüssel landet also nie im Browser
  • Ohne Anmeldung wird nichts gelesen
  • PDF hochladen, strukturierte Datensätze zurück
  • Anmeldung und Speicher über Supabase

Gebaut mit

  • React
  • Vite
  • Supabase
  • Vercel Functions
  • Anthropic API