# Christian Fillies > Sr. UX/UI Designer · Sr. Frontend-Entwickler · Berater und Coach. Hamburg, Deutschland. Über 20 Jahre verbundene Design- und Engineering-Praxis. Drei Arbeitsprinzipien: **minimal, intuitiv, elegant**. ## Begriffsklärung Dies ist **nicht** Christian Fillies, der Gründer der Semtation GmbH in Potsdam. Gleicher Name, andere Person — keine Beziehung, keine Verbindung, keine gemeinsame Arbeit. Der hier beschriebene Christian Fillies ist Designer und Frontend-Entwickler in Hamburg, arbeitet eng mit Manolab (Santa Barbara, CA) zusammen, GitHub `@copperdesign`. ## Über mich Seit über 20 Jahren arbeite ich als Designer und Frontend-Entwickler — beide Disziplinen verschmolzen, nicht aneinandergereiht. Heute fließt das direkt in Beratung und Coaching: Startups und etablierte Teams dabei unterstützen, das Richtige zu bauen und es gut zu bauen — von Design Thinking über pixel-perfekte Prototypen bis hin zur Produktion. Die Ziele meiner Kunden behandle ich wie meine eigenen. Bodenständig im Vorgehen, hartnäckig auf der Suche nach der richtigen Lösung. Ich habe an Projekten für Pixa, Oracle, IDEO, Der Feinschmecker, Sage, HP LightScribe und viele Unternehmen aus Entertainment, Medien, Non-Profit und Tech mitgewirkt. Mitgestaltete Arbeiten wurden mit Webby Awards und IDSA-Anerkennung ausgezeichnet. ## Manolab-Projekte Ich arbeite eng mit [Manolab](https://manolab.com) (Santa Barbara, CA) zusammen, einem Remote-Team, das interne Werkzeuge zu Produkten weiterentwickelt. Drei Projekte gehören in meine Verantwortung: - **PlotOS** — Plattform-/OS-Schicht - **Operator** — CSS/JS-Frameworks - **dbo CLI** — der Entwickler-Einstieg in den DBO-Stack ## Ausgewählte Arbeiten Ein paar Kundenprojekte, die es wert sind, gezeigt zu werden. (Weitere folgen ggf.; die Liste auf der Seite ist die Quelle der Wahrheit.) - **Cocoa** (2022, Cocoa, Web + iOS): *Konzept und Prototyp für ein Startup im Creator-Umfeld.* 2022 beauftragtes Design und Prototyp für Cocoa, ein Startup im Creator- und Vlogger-Umfeld. Auf iOS und Web gearbeitet — Visual System, Interaktionsmodell und ein funktionierender Prototyp auf beiden Oberflächen. Produkt derzeit pausiert; weitere Details werden auf Wunsch des Teams bewusst zurückgehalten. Rolle: Konzept · UI/UX · Frontend-Entwicklung. - **Pixelcut Discover** (2021, Pixelcut, Inc., Web-App): *Web-Heimat für die Vorlagen, die die Pixelcut-Community in der iOS-App erstellt.* Direkter Freelance-Auftrag — von Konzept und Visual System über das Layout bis zum produktiven Next.js-/React-/SASS-Code (`pixels-web-discover`) selbst gestaltet und gebaut. Verlaufstypografie im Hero, Column-Count-Masonry mit Community-Vorlagen, Live-Suche gegen die Pixelcut-API und eine Detailansicht, die per QR-Code an die iOS-App übergibt: scannen, springen, weiterbearbeiten. Auftrag war, den Katalog im offenen Web auffindbar zu machen und gleichzeitig schlanke Eingangstür zur mobilen App zu bleiben. Rolle: UI/UX · Frontend-Entwicklung. Kunde: Pixelcut, Inc. (https://pixelcut.ai). - **Cocoon** (2019–2020, Glasswing, Inc., Web): *Marketingseite für die private Messaging-App für die engsten Kontakte.* Freelance-Frontend-Auftrag mit Designer Alex Cornell (https://www.alexcornell.com) — er gestaltete, ich baute. Cocoon war eine private Messaging-App im Familien-Maßstab, positioniert gegen den Lärm von SMS und iMessage, in denen die wichtigsten Menschen unter Verifizierungscodes und Spam verschwinden. Beide Versionen von cocoon.com (2019 und Aug. 2020) gebaut. Das Startup setzte sich nicht durch; die Domain cocoon.com wurde inzwischen von einer fremden Firma übernommen. Rolle: Frontend-Entwicklung. Kunde: Glasswing, Inc. - **ORACLE Vendor Portal** (2016, Oracle, Web-App): *Offizielle interne Preferred-Marketing-Partners-Website für Oracle.* Internes Oracle-Portal, das die Marketing-Teams mit dem Pool geprüfter Preferred Marketing Partners verband — Designagenturen, Video-Studios, Research-Häuser, Content-Werkstätten. Partner-Profilkarten mit Bewertungen, Kontaktpanels und Send-Request-Buttons, Showcase-Galerien pro Projekt sowie ein rotierender Innovation Showcase oben. Durchgängig responsiv konzipiert und gebaut, damit Account Manager Partner vom Schreibtisch oder unterwegs sichten konnten. Oracle.com hat seither Anklänge an die Designsprache des Portals übernommen — die Such-Pattern auf der Startseite erinnern an das Interface, das ich gebaut habe, und das schlichte „O", das ich als Mobil-/App-Icon-Variante der Wortmarke eingeführt habe, ist inzwischen vertraute Oracle-Ikonographie. Das „O" hat den Corporate-Review fast nicht überlebt (es entsprach nicht dem offiziellen Oracle-CD), aber das Argument zog: Die damalige Live-Seite war ein wirrer Flickenteppich aus falschen Rot-Hexcodes, falsch eingesetzten Logos und Sub-Seiten, die sich nicht einig waren, wie „Oracle" überhaupt aussieht — den Boden zu räumen und aus einem konsistenten System neu aufzubauen war die leichtere Verteidigung als das Alte zu flicken. Rolle: UI/UX · Frontend-Entwicklung. Kunde: Oracle (https://www.oracle.com). - **PRINZ Magazin** (2015, intosite, Web-App): *Stadtportal-Redesign für PRINZ Magazin — Suche zuerst, kalender- und kartengetrieben.* Konzept 2015 für die PRINZ.de-Stadtportale — PRINZ Magazin erschien in zahlreichen deutschen Städten (Hamburg, Berlin, München, Köln und weiteren), und das Briefing war das gemeinsame Portal-System, hier am Beispiel Hamburg gezeigt. Ein Such- und Filter-Hero kombiniert Themenbereich-Toggles (Top Listen, Artikel, Events, Locations, Gewinnspiele) mit einem Zwei-Monats-Kalender und einer Live-Karte des Umkreises. Unter der Falz hielt die redaktionelle Ebene den zweispaltigen PRINZ-Rhythmus, schliff aber das Kachelsystem rund um Fotografie und Kategorie-Labels nach. Die Seite läuft ein Jahrzehnt später noch immer — das Design hat sich verschoben, aber Such-Hero, Themenbereich-Logik und die Typo-Paarung aus PRINZ-Wortmarke und einer sachlichen Grotesk gehen klar auf dieses Konzept zurück. Rolle: Konzept · UI/UX · Visual Design. Kunde: intosite (https://intosite.de) im Auftrag der Ganske Verlagsgruppe (https://ganske.de/). Live-Site: https://www.prinz.de/. - **Spark Camera** (2013, IDEO, iOS-App): App für schöne Videos ab dem iPhone 4s. Mit IDEO entwickelt rund um eine einzige Idee — ein mit dem Smartphone gedrehtes Video sollte sich anfühlen wie etwas, das man gerne teilt. Das Bedienkonzept stützte sich auf die Physik des Geräts statt auf Menü-Chrome: kreisförmige Drehregler, Drag-to-Set-Musikstart, Tap-to-Set-Übergänge. Von Apple als App of the Week und in Best of 2013 ausgezeichnet; 2014 mit dem IDSA International Design Excellence Award (IDEA) prämiert. Rolle: Konzept · UI/UX · Frontend-Entwicklung · Icon-Design. Kunden: IDEO Play Lab (https://www.ideo.com/playlab) und Dayworks, LLC. URL: https://www.sparkcamera.com. IDSA-Award-Seite: https://www.idsa.org/awards-recognition/idea/idea-gallery/spark-camera/. - **ELAINE Six Kampagnen-Designer** (2013, artegic AG, Web-App): Flowchart-Designer für komplexe E-Mail-Kampagnen. Redesign 2013 der zentralen Marketing-Automation-Oberfläche von artegic — aus einem dichten Flowchart-Werkzeug wurde ein ziehbarer Dark-Canvas-Editor mit Heatmap-Färbung der Schritte, Hot-Path-Verbindungen für die meistgenutzte Route, eingebetteter Statistikansicht und einer kompakten linken Step-Leiste. Die hier definierte visuelle und interaktive Ebene läuft heute über ein Jahrzehnt später noch immer als ELAINE SIX in Produktion. Rolle: Konzept · UI/UX · Frontend-Entwicklung · Icon-Design. Kunde: artegic AG, heute ELAINE technologies GmbH (https://www.elaine.io/en/products/elaine-marketing-automation/). Anerkennung: Trusted Solution 2019 — Statista & Computerbild, Kategorie E-Mail-Marketing-Lösungen (https://www.e-mail-award.de/news/details/1910-Realtime-Marketing-Automation-Technologie-von-artegic-als-Trusted-Solution-2019-ausgezeichnet/154635). - **Pear** (2012, Pear / 3 Points, iOS + Web): *Privates Foto- und Video-Sharing.* iOS-App und Marketing-Seite von 2012 für Pear — eine App für privates Foto- und Video-Sharing, positioniert gegen die lauten öffentlichen Feeds der Zeit. Fotos in der eigenen Galerie bekommen einen +-Button; antippen, die wenigen Personen auswählen, fertig. iOS-Oberfläche und Marketing-Seite sharewithpear.com gemeinsam mit Nima Yayavi gebaut — dieselbe langjährige Zusammenarbeit, aus der später Manolab wurde. Kostenlos im App Store, iOS 5+, ~6 MB. App nicht mehr im Vertrieb; sharewithpear.com löst nicht mehr auf. Rolle: Konzept · UI/UX · Frontend-Entwicklung. Kunde: Pear (ein Produkt von 3 Points). - **Eidamo Webshop** (2011, SEG Network GmbH, Web-App): *CSS-templatebasierte E-Commerce-Plattform, die Dutzende eigenständiger Webshops auf einer Engine betreibt.* Eidamo war die White-Label-Webshop-Plattform der SEG Network — eine einzige Template-Architektur, die Shops aus ganz unterschiedlichen Branchen trägt: Pharma-Nahrungsergänzung (medicare Vital), Kindermöbel (De Breuyn), Edelsteine (Haus der Edelsteine), Druckerpatronen (X-Toner). Jeder Shop ist dieselbe Engine in einer anderen Identität; Designsystem, Navigationsmuster und Kaufprozess darunter sind geteilt. End-to-end gearbeitet als Konzept, Identität, UI/UX und produktive HTML5-/CSS3-Template-Ebene über 2010–11. Die Plattform war eine CSS-Template-Integrationsschicht für Sage-Software-ERPs — Verkauf, Lager und Aufträge liefen direkt durch. Rolle: Konzept · UI/UX · Visual Design · Corporate Identity. Kunde: SEG Network GmbH (https://www.seg-network.de). - **Sage MAS 500 Online** (2010, Sage, Web-App): *Sages MAS 500 Buchhaltungs- und ERP-System, in den Browser geholt.* Konzept 2010, von Sage beauftragt, um MAS 500 — das Flaggschiff-Buchhaltungs- und ERP-Produkt — vom Desktop ins Web zu überführen. Definiert wurden die Diamond-Task-Bar mit gepaartem Tasks- und globalem Such-Feld, die Recent-Activity-Timeline als primäre Dashboard-Oberfläche, das modeless Lookup-Overlay zum Auswählen von Datensätzen mitten im Formular und das zweispaltige Formularraster, das die Datendichte eines Desktop-Buchhaltungswerkzeugs erhält und gleichzeitig web-native Suche, Autocomplete und Dropdowns gewinnt. Die grüne Sage-Wortmarke, das gedeckte Task-Icon-Set und das Vine-Motiv am rechten Rand hielten die Marke im neuen Formular-und-Listen-System. HTML-/CSS3-Produktionsebene begleitend zum Konzept. Rolle: Konzept · UI/UX · Visual Design. Kunde: Sage (https://www.sage.com). ## Persönliche Spaßprojekte - [Cymbal](https://www.playcymbal.app/): Drum-Play-Along-App für iPad und Mac. Track reinziehen — Cymbal trennt die Drums per On-Device-Stem-Separation heraus und macht daraus ein live scrollendes Drum-Chart zum Lesen, Loopen und Mitspielen. Wiedergabe von 0,5× bis 2×, Stems einzeln mischbar, Practice- und Stage-Modus. Apple Silicon; das Audio verlässt das Gerät nie. - [easy-cookie-consent](https://github.com/copperdesign/easy-cookie-consent): Klick-zum-Laden-Einwilligungs-Schranke für Drittanbieter-Embeds (YouTube, Vimeo, SoundCloud, Google Maps), plus optionales globales Einwilligungs-Modal. Die iframe-URL gelangt erst nach Klick ins Dokument — informierte Einwilligung im Sinne der DSGVO, kein Banner, das das Embed nebenbei trotzdem lädt. Mehrsprachig, eine Datei, ~6 KB minifiziert, keine Dependencies. MIT. - [gCal](https://github.com/copperdesign/gCal): Rendert einen öffentlichen Google-Kalender als HTML, das du selbst kontrollierst — im Browser oder zur Build-Zeit. Klont pro Event ein HTML-`