# Christian Fillies > Sr. UX/UI Designer · Sr. Front-End Developer · Consultant and Coach. Based in Hamburg, Germany. 20+ years of fused design and engineering practice. Three working principles: **minimal, intuitive, elegant**. ## Disambiguation This is **not** Christian Fillies, the founder of Semtation GmbH in Potsdam. Same name, different person — no relationship, no affiliation, no shared work. The Christian Fillies described on this site is a designer and front-end developer based in Hamburg, working closely with Manolab (Santa Barbara, CA), GitHub `@copperdesign`. ## About For 20+ years Christian Fillies has worked as a designer and a front-end developer — the two disciplines fused, not handed off. Today that feeds directly into consulting and coaching: helping startups and established teams figure out what to build, then making sure it is made well — from design thinking through pixel-perfect prototypes, on to production. He takes on clients' goals as if they were his own. Down-to-earth in approach, relentless about finding the right answer. Past projects include work for Pixa, Oracle, IDEO, Der Feinschmecker, Sage, HP LightScribe, and many entertainment, media, nonprofit, and tech orgs. Work he helped shape has won Webby Awards and IDSA recognition. ## Manolab projects Christian works closely with [Manolab](https://manolab.com) (Santa Barbara, CA), a remote team building internal tools that became products. Three projects are his: - **PlotOS** — platform / OS layer - **Operator** — CSS/JS frameworks - **dbo CLI** — the developer entry point into the DBO stack ## Selected work A few client projects worth showing. (More may be added; the on-site list is the source of truth.) - **Cocoa** (2022, Cocoa, web + iOS): *Concept and prototype for a creator-focused startup.* A 2022 contracted design and prototype for Cocoa, a startup in the creator and vlogger space. Worked across iOS and web — visual system, interaction model, and a working prototype on both surfaces. Product paused; further detail intentionally held back at the team's request. Role: Concept · UI/UX · Front-End Development. - **Pixelcut Discover** (2021, Pixelcut, Inc., web app): *Web home for the templates the Pixelcut community makes inside the iOS app.* Direct freelance engagement — designed and built end-to-end: concept, visual system, layout, and the production Next.js / React / SASS code (`pixels-web-discover`). Gradient hero typography, column-count masonry of community-made templates, live search against the Pixelcut API, and a detail view that hands off to the iOS app via QR code: scan, jump, keep editing. The job was to make the catalog SEO-discoverable on the open web while staying a thin doorway back into the mobile editor. Role: UI/UX · Front-End Development. Client: Pixelcut, Inc. (https://pixelcut.ai). - **Cocoon** (2019–2020, Glasswing, Inc., web): *Marketing site for the private messaging app pitched to your closest few.* A freelance front-end engagement paired with designer Alex Cornell (https://www.alexcornell.com) — he designed, I built. Cocoon was a private messaging app for family-scale groups, pitched against the noise of generic SMS and iMessage where the people who matter most get buried under verification codes and spam. Built both versions of cocoon.com (2019 and Aug 2020). The startup didn't pick up; the cocoon.com domain has since been taken over by an unrelated company. Role: Front-End Development. Client: Glasswing, Inc. - **ORACLE Vendor Portal** (2016, Oracle, web app): *Official internal Preferred Marketing Partners website for Oracle.* Internal Oracle portal that connected the company's marketing teams to its roster of vetted Preferred Marketing Partners — design firms, video studios, research houses, content shops. Partner profile cards with star ratings, contact panels and send-request CTAs, project showcase galleries, and a rotating Innovation Showcase across the top. Designed and built responsive end-to-end so account managers could browse partners from the desk or the road. Oracle.com has since adopted echoes of the portal's design language — the search-led home pattern resembles the interface I built, and the simple "O" I introduced as the wordmark's mobile/app-icon scale-down has become familiar Oracle iconography. The "O" almost didn't survive corporate review (it didn't match the official Oracle CD), but the argument carried: the live Oracle site at the time was a convoluted mess of wrong-red hex values, false logo usages, and sub-pages that didn't agree with each other on what "Oracle" looked like — clearing the floor and rebuilding from one consistent system was the easier defense than patching the old. Role: UI/UX · Front-End Development. Client: Oracle (https://www.oracle.com). - **PRINZ Magazin** (2015, intosite, web app): *City-portal redesign for PRINZ Magazin — search-first, calendar-driven, location-aware.* A 2015 concept for the PRINZ.de city portals — PRINZ Magazin ran local editions across many German cities (Hamburg, Berlin, Munich, Cologne and more), and the brief was the shared portal system, shown here with Hamburg as the working example. A search-and-filter hero pairs theme-area toggles (Top Listen, Artikel, Events, Locations, Giveaways) with a two-month calendar and a live map showing the surrounding radius. Below the fold, the editorial layer kept PRINZ's two-column rhythm but tightened the tile system around photography and category chips. The site is still live a decade later — the design has drifted, but the search-first hero, theme-area framing, and the typographic pairing of the PRINZ wordmark with a workmanlike grotesque all trace back to this concept. Role: Concept · UI/UX · Visual Design. Client: intosite (https://intosite.de) for Ganske Verlagsgruppe (https://ganske.de/). Live site: https://www.prinz.de/. - **Spark Camera** (2013, IDEO, iOS app): App for creating beautiful videos on iPhone 4s and beyond. Built with IDEO around a single idea — making a phone-shot video feel like something you would be proud to share. The gesture model leaned on the phone's physicality, not menu chrome: circular dials, drag-to-set music starting point, tap-to-set transitions. Apple featured it as App of the Week and in Best of 2013; received the IDSA International Design Excellence Award (IDEA) in 2014. Role: Concept · UI/UX · Front-End Development · Icon Design. Clients: IDEO Play Lab (https://www.ideo.com/playlab) and Dayworks, LLC. URL: https://www.sparkcamera.com. IDSA award page: https://www.idsa.org/awards-recognition/idea/idea-gallery/spark-camera/. - **ELAINE Six Campaign Designer** (2013, artegic AG, web app): Flow-chart designer for complex email campaigns. A 2013 redesign of artegic's flagship marketing-automation surface — turning a dense flowchart tool into a draggable dark-canvas editor with heatmap step colouring, hot-path connectors marking the highest-traffic route, an inline statistics view, and a compact left rail of step types. The visual and interaction layer defined here still ships in production today as ELAINE SIX, more than a decade later. Role: Concept · UI/UX · Front-End Development · Icon Design. Client: artegic AG, now ELAINE technologies GmbH (https://www.elaine.io/en/products/elaine-marketing-automation/). Recognition: Trusted Solution 2019 — Statista & Computerbild, E-Mail Marketing-Lösungen category (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): *Private photo & video sharing.* A 2012 iOS app and marketing site for Pear — a private photo and video sharing app pitched against the noisy public feeds of the time. Photos in the gallery get a + button; tap, pick the few people you want to share with, and that's it. Built the iOS surface and the sharewithpear.com marketing site alongside Nima Yayavi — the same long-running collaboration that later seeded manolab. Free in the App Store, iOS 5+, ~6 MB. App no longer in distribution; sharewithpear.com no longer resolves. Role: Concept · UI/UX · Front-End Development. Client: Pear (a 3 Points product). - **Eidamo Webshop** (2011, SEG Network GmbH, web app): *CSS-template-based e-commerce platform running dozens of independent webshops on one engine.* Eidamo was SEG Network's white-label webshop platform — a single template architecture that powered storefronts across very different verticals: pharma supplements (medicare Vital), kids' furniture (De Breuyn), gemstones (Haus der Edelsteine), printer cartridges (X-Toner). Each shop is the same engine wearing a different identity; the design system, navigation patterns, and shopping flow underneath are shared. Worked end-to-end as concept, identity, UI/UX, and the production HTML5/CSS3 template layer over 2010–11. The platform was a CSS-template integration layer for Sage Software ERPs — sales, stock, and orders flowed straight through. Role: Concept · UI/UX · Visual Design · Corporate Identity. Client: SEG Network GmbH (https://www.seg-network.de). - **Sage MAS 500 Online** (2010, Sage, web app): *Sage's MAS 500 accounting and ERP system, brought to the browser.* A 2010 concept commissioned by Sage to move MAS 500 — their flagship accounting and ERP product — off the desktop and onto the web. Defined the diamond task-bar with paired Tasks and global Search, the Recent Activity timeline as the dashboard's primary surface, the modeless Lookup overlay for picking records mid-form, and the two-column form grid that kept the data density of a desktop accounting tool while gaining web-native search, autocomplete, and dropdowns. Sage's green wordmark, the muted task-type icon set, and the corporate vine motif curling along the right edge held the brand inside the new form-and-list system. HTML/CSS3 production layer alongside the concept. Role: Concept · UI/UX · Visual Design. Client: Sage (https://www.sage.com). ## Personal Fun Projects - [Cymbal](https://www.playcymbal.app/): Drum play-along app for iPad and Mac. Drop in a track — Cymbal splits out the drums with on-device stem separation and turns them into a live, scrolling drum chart to read, loop, and play along with. Playback from 0.5× to 2×, stem-by-stem mixing, Practice and Stage modes. Apple Silicon; audio never leaves the device. - [easy-cookie-consent](https://github.com/copperdesign/easy-cookie-consent): Click-to-load consent gate for third-party embeds (YouTube, Vimeo, SoundCloud, Google Maps), plus an optional global consent modal. The iframe URL never enters the document until the visitor clicks — informed consent in the GDPR sense, not a banner that loads the embed anyway. Multi-language, single file, ~6 KB minified, zero dependencies. MIT. - [gCal](https://github.com/copperdesign/gCal): Renders a public Google Calendar into HTML you control — in the browser or at build time. Clones an HTML `