EN
Christian Fillies

Christian Fillies

Beratung & Coaching · Sr. UX/UI Designer · Sr. Frontend-Entwickler

Hamburg, Deutschland

Minimalistisch · Intuitiv · Elegant. Drei Prinzipien für meine Arbeiten.

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, Elaine, Der Feinschmecker und weitere mitgewirkt. Mitgestaltete Arbeiten wurden mit Webby Awards und IDSA-Anerkennung ausgezeichnet.

Ausgewählte Kunden & Partner

Pixa.com Handytick CyberPlus Group dbo.io IDEO Oracle Spark Camera Ducati Santa Barbara Sage Der Feinschmecker Gold Medal Wine Club HP LightScribe Highstreet Media Hub ELAINE (ehemals Artegic) Deutsche Welthungerhilfe e. V. MorningStar Entertainment Toad the Wet Sprocket Merian Germanwatch Gigbox Manoto, LLC Mortgage Center Motion TM PRINZ.de Colibri Entertainment SEG Network GmbH Pear | Share with Pear ChitChat

Kontakt

contact@christianfillies.com

github.com/copperdesign
linkedin.com/in/christian-fillies

Ausgewählte Arbeiten

  • Cocoa

    Konzept · UI/UX · Frontend-Entwicklung
    Cocoa Creator-Profil im Browser — @userName-Badge oben, eine Vintage-Zeiss-Ikon-Kamera als zentrales Video mit Titel und Text darunter, Highlights-Sidebar rechts mit gestapelten Bildkarten.
    Cocoa iOS-Feed — ein Hand-und-Licht-Video oben im Scroll, darunter beginnt die Highlights-Reihe. Cocoa iOS-Feed — zweite Ansicht mit einer Highlights-Karte (Fußabdruck im Sand) und ausführlichem Beschreibungstext.

    Konzept und Prototyp für ein Startup im Creator-Umfeld.

    Ein 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. Das Produkt ist derzeit pausiert; weitere Details werden auf Wunsch des Teams bewusst zurückgehalten.

    Jahr
    2022
    Kunde
    Cocoa

  • Pixelcut Discover

    UI/UX · Frontend-Entwicklung
    Pixelcut-Discover-Startseite — Verlaufs-Überschrift 'Explore thousands of designs made by creators like you' über einer Suchleiste, Kategorie-Chips (Profile, Shopify, Youtube Cover, Foodie, Pets) und ein Masonry-Grid mit Community-Vorlagen.
    Dasselbe Grid, gefiltert nach 'Shoes' — Sneaker-, Runner- und Anzugschuh-Layouts aus dem Community-Katalog. Detailansicht einer einzelnen Vorlage — ein Curology-Pflegeset auf Lavendel — daneben ein QR-Code 'Scan with your phone to edit in Pixelcut', der zur iOS-App übergibt.

    Web-Heimat für die Vorlagen, die die Pixelcut-Community in der iOS-App erstellt.

    Direkter Freelance-Auftrag mit Pixelcut, von Konzept und Visual System bis zum produktiven Next.js-/React-/SASS-Code 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.

    Jahr
    2021
    Kunde
    Pixelcut, Inc.

  • Cocoon

    Frontend-Entwicklung
    Cocoon-v1-Marketingseite, Desktop — dunkles Canvas mit der Cocoon-Wortmarke in Serif, Navigation (Why Cocoon? / Pricing / About Us) und grüner Get-Started-Pille. Headline: 'Some of these threads are not like the others.' Darunter ein Stapel Nachrichten-Karten — CBD-Spam, Verifizierungscode, Burrito-fertig-Benachrichtigung — die Threads, unter denen die wichtigen Menschen verschwinden.
    Cocoons Marken-Illustration in Aquarell — vier silhouettierte Figuren auf einem weichen grünen Hügel (eine sitzend), Schmetterlinge in der Luft, darüber die Cocoon-Wortmarke in Serif. Marketing-Collage, die zeigt, für welche Art enger Momente Cocoon gedacht ist — Architektur- und Reisefotos zusammen mit kräftigen Nachrichten-Bubble-Icons in Blau, Rot, Grün und Türkis; rechts blitzt der App-Feed in einem Smartphone hervor. Schwebende Aktivitätskarten aus dem Familien-Feed — '35 min of exercise today', 72 BPM, 'Nikki completed a 12 min walk', 'Everyone is at home', eine Weekly-Report-Kachel, '22 min of mindfulness' und ein Schrittzähler-Diagramm mit 115.235 Schritten in der Woche. Cocoons Live-Talk-Feature auf zwei iPhones — links eine 'Talking Now'-Karte mit Avataren und grünem Join-Button; rechts der Sperrbildschirm-Alert 'Home Team — Katie, Rui and Sara are talking live in Cocoon right now. Tap to connect.'

    Marketingseite für die private Messaging-App für die engsten Kontakte.

    Freelance-Frontend-Auftrag mit Glasswing, Inc., gemeinsam mit Designer Alex Cornell — 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. Ich baute beide Versionen der Marketingseite cocoon.com. Das Startup setzte sich nicht durch — die Domain cocoon.com wurde inzwischen von einer fremden Firma übernommen.

    Jahr
    2019–2020
    Kunde
    Glasswing, Inc.

  • ORACLE Vendor Portal

    UI/UX · Frontend-Entwicklung
    Oracle Preferred Marketing Partners — Desktop-Ansicht des Innovation Showcase mit Karten für Lionbridge, IDEO und Manolab YARP, jeweils mit Sterne-Bewertung, Beschreibung und View-Showcase-Gallery-Link.
    Mobile responsive Innovation-Showcase-Ansicht — Hartmann-Banner (strategy.design.production) und Lionbridge-Karte vertikal gestapelt. IDEO-Partnerdetailseite auf dem Tablet — Disney Concert Hall als Hero, Design-Firm-Bewertung, Kontaktpanel mit Carsen Callister. Desktop-Grid der Featured Partners — Karten für IDEO Design Firm, Manolab YARP, Lionbridge, Sandwich Video und Longitude Research. IDC-Partnerdetailseite — Wald als Hero, Beschreibung der Market-Intelligence-Services, Send-Request-CTA und Kontaktpanel.

    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. Das CD wurde mehr im Bruch als in der Einhaltung gepflegt; den Boden zu räumen und aus einem konsistenten System neu aufzubauen war die leichtere Verteidigung als das Alte zu flicken.

    Jahr
    2016
    Kunde
    Oracle

  • PRINZ Magazin

    Konzept · UI/UX · Visual Design
    PRINZ Magazin Stadtportal — roter Schriftzug, Wetter- und Datumszeile, Hauptnavigation (Meine Stadt · Gastro · Musik · Gewinnspiele · Leben & Shoppen · Nightlife) sowie ein Such- und Filter-Hero mit Themenbereich-Checkboxen, einem Zwei-Monats-Kalender und einer Hamburg-Karte mit 250 m-Umkreis-Marker.
    Derselbe PRINZ-Hamburg-Hero im Vollseiten-Konzept — Such- und Filterleiste über redaktionellen Tiles (Suspended Coffee, Yoga und Pilates, Finbury Fury Party). Weiterer Scroll-Ausschnitt des Konzepts — große redaktionelle Kacheln im zweispaltigen PRINZ-Rhythmus, Anzeigenflächen in der rechten Spalte.

    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 immer noch — 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.

    Jahr
    2015
    Kunde
    intosite (Ganske Verlagsgruppe)

  • Spark Camera

    Konzept · UI/UX · Frontend-Entwicklung · Icon-Design
    Eine Hand hält ein iPhone und filmt einen sonnigen See mit Heißluftballon — darüber das gestengeführte Aufnahme-Interface von Spark Camera.
    Spark Camera im App Store neben XCOM und Levels gefeatured. Kreisförmiger Regler mit Libellen-Illustration — ziehen, um den Musikstart festzulegen. In-App-Szene aus einem Segelvideo mit dem Titel RIO und überlagerten Steuerungen. Eine Hand tippt eine Reihe großer runder Share-Icons über einem Video-Frame an.

    App für Aufnahme und Schnitt von kurzen kreativen Videos.

    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.

    Jahr
    2013
    Kunde
    IDEO Play Lab · Dayworks, LLC
    URL
    sparkcamera.com
    Anerkennung
    Apple App of the Week · Apple Best of 2013 · IDSA IDEA Award 2014

  • ELAINE Six Kampagnen-Designer

    Konzept · UI/UX · Frontend-Entwicklung · Icon-Design
    ELAINE SIX Campaign Designer-Canvas im Dark Mode — ein Flussdiagramm aus E-Mail-, Open-, Bounce- und Filter-Knoten, verbunden mit grünen Hot-Path-Linien, mit geöffnetem Kontextmenü über einem Filter-Knoten.
    Light-Mode-Variante des Campaign-Designer-Canvas mit Email-Delivery-Knoten und Add-Branch-Kontextmenü. Zusätzliche UI-Panels — kompakte linke Step-Leiste und ein Script-Step mit eingebettetem Code-Editor. Mandantenspezifischer Menü-Edit-Dialog, eingesetzt von EWE (Telekom) auf der ELAINE-Plattform. Detail des Dark-Mode-Canvas — Script-Knoten mit Code-Editor, Hot-Path-Verbindungen und Heatmap-Färbung.

    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 in Produktion.

    Jahr
    2013
    Kunde
    artegic AG (heute ELAINE technologies GmbH)
    Anerkennung
    Trusted Solution 2019 (Statista & Computerbild) · seit über 13 Jahren in Produktion

  • Pear

    Konzept · UI/UX · Frontend-Entwicklung
    Eine Hand hält ein weißes iPhone 5 mit dem Pear-Fotoraster (eine dichte Mosaik aus persönlichen Fotos); daneben liegt ein schwarzes iPhone, das die Kontakt-Teilen-Ansicht zeigt (Me, Benjamin, Raphael, Christian).
    sharewithpear.com-Landing-Page im Browser — Video-Banner von Freunden auf einer Wanderung, Pear-App-Icon und Headline „Private Photo & Video Sharing“, App-Store-Badge und iPhone-Mockup mit dem Fotoraster. iTunes-Preview-Seite für Pear v1.0.4 (Sept. 2012) — „Pear is a simple, intuitive, and elegant app that lets you share photos in your gallery…“ mit drei iPhone-Screenshots aus Fotoraster und Aktivitäts-Feed. Pear iPhone-Fotoraster — Vollbild-Mosaik aus persönlichen Fotos mit blauem +-Button auf jedem Foto, bereit zum Teilen mit ausgewählten Kontakten. Pear iPhone-Aktivitäts-Feed mit den Kontakten, mit denen geteilt wurde (Christian 3s, Nima 14m, Andre 2h, Jesse 9h, Elika 2d) und einem Thumbnail des zuletzt geteilten Fotos auf der rechten Seite.

    Privates Foto- und Video-Sharing.

    Eine 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, die ohnehin in der eigenen Galerie liegen, bekommen einen +-Button; antippen, die wenigen Personen auswählen, mit denen geteilt werden soll, fertig. Kostenlos im App Store, iOS 5+, ~6 MB. Die App ist derzeit nicht mehr im Vertrieb.

    Jahr
    2012
    Kunde
    Pear (ein Produkt von 3 Points)

  • Eidamo Webshop

    Konzept · UI/UX · Visual Design · Corporate Identity
    Eidamo-Plattform-Template — Apple-Produkte-Demo-Shop mit Kategorienbaum in der linken Spalte, Produktraster (iPad, iPhone, Mac), Top-Angebote-Panel und Konto-/Warenkorb-Spalte rechts; das Master-CSS-Template, von dem alle Mandanten-Shops erben.
    medicare-Vital-Shop — Pharma und Nahrungsergänzung, blaue Markenpalette, Sport-&-Fitness-Kategorieseite mit redaktionellem Artikel und Produktliste. De-Breuyn-Kindermöbel-Shop — Kinderzimmermöbel, gelb-violette Markenpalette, empfohlene Produkte (Bett, Lampe, Maltisch, Schmuckdosen). Haus-der-Edelsteine-Shop — Edelsteine und Sammlerwaren, grünes Naturmotiv im Hero, dichter Kategorienbaum links (Bernstein, Achat, Citrin …). X-Toner-Shop — Druckerpatronen und B2B-Bürobedarf, blau-Brother-gebrandeter Header, Xerox-Papier-Produktkarten mit Cross-Sell-Spalte.

    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.

    Jahr
    2011
    Kunde
    SEG Network GmbH

  • Sage MAS 500 Online

    Konzept · UI/UX · Visual Design
    Sage-MAS-500-Online-Dashboard — grüne Sage-Wortmarke, Tasks- und Search-Felder in der Diamond-Task-Bar, ein Recent-Activity-Feed (Received, Opened, Saved, Edited, Logged-In-Zeitstempel verlinkt auf Rechnungen und Reports), Bookmarks- und To-Do-List-Panels links, News-from-Sage-Software-Panel rechts mit eingehender Nachricht von Joshua Kirk; Sage-Vine-Motiv rankt sich am rechten Rand.
    Maintain-Recurring-Voucher-Formular — zweispaltiges Feldraster (Vendor, Remit to, Purchase from, Contact, Addresses, Ship Via, F.O.B. … Status, Cycle, Invoice Number, Bank Account, Separate Check, Currency, Payment Terms, Billing Starting Date), jedes Eingabefeld mit Auge-Icon-Detail-Toggle. Process-Voucher-Formular mit geöffnetem Department-Autocomplete-Dropdown (Accounts Payable, Accounting Services, Account Receivables); Batch Number, Description, Options (Private / On Hold / Rapid Entry), Hold Reason, Status, Control Amount, Batch Total — das dichte Vokabular der Buchhaltung. Lookup-Modal über dem Process-Voucher-Screen — Voucher-Batch-Liste, gefiltert nach Batch Number, Batch Type, Status, Original User und Post Date, mit drei Zeilen (45, 46, 15 — alle Balanced, alle Admin); Cancel- und Choose-Aktionen unten. Search-Results für „Vendor“ — eine klare Liste aller zugehörigen Aufgaben im System (Add Vendor, Maintain Vendors, Maintain Vendor Classes, Explore Vendors, Age Vendor Accounts, Vendor Payment Activity, Vendor Purchase Analysis, Vendor List, Vendor Class List, Vendor 1099 Activity Report, Vendor 1099 History) mit Task-Typ-Icons.

    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, der 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.

    Jahr
    2010
    Kunde
    Sage

Persönliche Spaßprojekte