Design trifft Code
Ich bin Alain — und chopART ist genau diese Kombination.
I’m Alain — and chopART is exactly this combination.
Branding, Identitäten, Interfaces — Konzept und Gestaltung mit Blick fürs Detail.
Branding, identities, interfaces — concept and design with an eye for detail.
Web-Projekte und Tools — den Code schreibe ich mit KI als Werkzeug: „Vibe Coding“.
Web projects and tools — I write the code with AI as a tool: „Vibe Coding“.
Eine ruhige, installierbare Gesundheits-App fürs Haustier: Gewicht, Symptome und Befinden als Tagebuch, Medikamentenpläne, Tierarztkosten mit KI-Rechnungsscan, eine Wissenssektion und ein KI-Assistent — für zwei Personen in Echtzeit. Was sonst auf Zetteln, Fotos und in Chats verstreut liegt, an einem Ort. Konzept, Design und Entwicklung aus einer Hand.
A calm, installable health app for your pet: weight, symptoms and wellbeing as a diary, medication plans, vet costs with AI receipt scanning, a knowledge section and an AI assistant — for two people in real time. What used to live on notes, photos and in chats, now in one place. Concept, design and development from one hand.
Gewichtskurve, Vitalwerte und Trends pro Tier auf einen Blick — mit Status-Ampel.
Weight curve, vitals and trends per pet at a glance — with a status light.
Dauerpläne, Bedarfsgaben und ein 30-Tage-Protokoll als Monatskalender — geteilt sichtbar.
Recurring plans, as-needed doses and a 30-day log as a monthly calendar — shared.
Ausgaben nach Kategorie; Belege werden per Foto ausgelesen — und nie gespeichert.
Expenses by category; receipts are read from a photo — and never stored.
Fasst den Verlauf zusammen und bereitet den Tierarztbesuch vor — kennt die Krankenakte.
Summarises the history and prepares the vet visit — it knows the record.
Kuratierte Kapitel, Impf-Erinnerungen und synchrone Tierarzt-Checklisten.
Curated chapters, vaccination reminders and synced vet checklists.
Geteilter Stand, Push-Erinnerungen, Dark Mode, offlinefähig — als App installierbar (PWA).
Shared state, push reminders, dark mode, offline-capable — installable as an app (PWA).
Eine massgeschneiderte Web-App für einen lokalen Barbetrieb — von der Schichtvergabe über die Tauschbörse bis zum Chef-Dashboard. Mitarbeiter bewerben sich auf offene Dienste, der Chef plant per Drag & Drop.
A custom web app for a local bar — from shift assignment and a swap market to the boss dashboard. Staff apply for open shifts, the boss plans via drag & drop.
Farbcodierung: Teal = besetzt, Pink = offen — mit Kalenderwochen und Heute-Marker.
Colour-coded: teal = filled, pink = open — with calendar weeks and a today marker.
Chef und Mitarbeiter haben eigene Dashboards — verwalten, bewerben, bestätigen.
Boss and staff get their own dashboards — manage, apply, confirm.
Der Chef zieht Mitarbeiter direkt auf Dienste; offene Bewerbungen lösen sich automatisch.
The boss drags staff straight onto shifts; open applications resolve automatically.
Dienste in die Börse stellen, optional mit Wunsch-Gegendienst — der Chef genehmigt final.
Put shifts up for swap, optionally with a preferred counter-shift — the boss gives final approval.
Echtzeit-Inbox für Bestätigungen, Ablehnungen und Tausch-Angebote.
Real-time inbox for confirmations, rejections and swap offers.
Ranking der aktivsten Mitarbeiter — mit Streaks und Tages-Motto.
Ranking of the most active staff — with streaks and a daily motto.
One-Pager für einen lokalen Brewpub — Brand Identity, Beerkarte, Events und Reservation. Der Hero zeigt live, ob gerade offen ist. Mobile-first gedacht, weil die Gäste fast nur vom Handy kommen. Zweisprachig DE/EN, fertiggestellt und bereit für den Livegang — Deploy-Paket und Abschluss-Audit liegen bereit.
One-pager for a local brewpub — brand identity, beer menu, events and reservations. The hero shows live whether it's open right now. Designed mobile-first, because guests come almost exclusively from their phones. Bilingual DE/EN, finished and ready to go live — deploy package and final audit are prepared.
Der Hero zeigt in Echtzeit «offen / bald / geschlossen» — je nach Öffnungszeiten.
The hero shows «open / soon / closed» in real time — based on opening hours.
12 Biere am Hahn in vier Kategorien: Eigenbrauung, Lokal, International, Saisonal.
12 beers on tap in four categories: house brew, local, international, seasonal.
Event-Sektion mit ausklappbarem Anfrage-Formular inkl. Spamschutz.
Events section with an expandable enquiry form incl. spam protection.
Warme Gold-Palette, Playfair Display — lokal, handwerklich, authentisch.
Warm gold palette, Playfair Display — local, crafted, authentic.
Kompletter DE/EN-Umschalter über alle Sektionen hinweg.
Full DE/EN switch across every section.
Vollständig responsive, Scroll-Fortschritt und Glass-Header — optimiert fürs Handy.
Fully responsive, scroll progress and a glass header — optimised for the phone.
Offlinefähige App (PWA) zum Führen eines Fahrzeug-Tankbuchs: jede Tankung mit Litern, Preis, Kilometerstand und Tankstelle erfassen — die App rechnet Verbrauch (L/100 km) und Kosten und stellt Monats- und Jahresauswertungen bereit. Single-File Vanilla-JS mit Service-Worker, optional Cloud-Sync. Konzept, Design und Code in einem.
Offline-capable app (PWA) for keeping a vehicle fuel log: record every fill-up with litres, price, odometer and station — the app computes consumption (L/100 km) and cost and provides monthly and yearly reports. Single-file vanilla JS with a service worker, optional cloud sync. Concept, design and code in one.
Datum, Liter, Literpreis, Total, Kilometerstand, Tankstelle, Voll- oder Teiltankung.
Date, litres, price, total, odometer, station, full or partial fill.
Automatische Berechnung L/100 km — mit Vergleich gegen den Werksverbrauch.
Automatic L/100 km — compared against the factory figure.
Werkstattbesuche, Teile und Kosten festhalten — alles an einem Ort.
Record workshop visits, parts and costs — all in one place.
Statistiken, Trends und ein Jahresbericht auf Knopfdruck.
Statistics, trends and a yearly report at the push of a button.
Service-Worker-Cache — funktioniert an der Tankstelle auch ohne Netz.
Service-worker cache — works at the pump even without a connection.
Login per E-Mail, Abgleich über Supabase — sonst rein lokal.
Email login, sync via Supabase — otherwise fully local.
Vollständige Brand Identity für das eigene Label — Logo-System, Farbkonzept mit CMYK/Pantone, Typografie und ein durchgehendes Anwendungssystem von der Visitenkarte über Office-Vorlagen bis zum Präsentations-Master. Dokumentiert als Styleguide-PDF und interaktiver CI-Hub. Teal steht für Code, Pink für Art — der Slash verbindet beides.
Complete brand identity for my own label — a logo system with three variants, colour concept, typography and applications from business card to e-mail signature. Teal stands for code, pink for art — the slash connects both.
Mark «Standard» und «Aurora» (Verlaufs-Ring), Wortmarke und Lockups — je hell/dunkel.
«Standard» and «Aurora» (gradient ring) marks, wordmark and lockups — each light/dark.
Fünf Core-Farben plus Void Black — je mit CMYK- und Pantone-Werten für Print.
Five core colours plus Void Black — each with CMYK and Pantone values for print.
Brief, Offerte und Rechnung — je DE/EN, als PDF und Word, im «Gradient Band»-Design.
Letter, quote and invoice — each DE/EN, as PDF and Word, in the «gradient band» design.
PowerPoint mit 7 Layouts und fertige Decks für Pitch, Proposal und Case Study.
PowerPoint with 7 layouts and ready decks for pitch, proposal and case study.
Visitenkarte mit Beschnitt, Profilbilder und Banner für LinkedIn, X und Facebook.
Business card with bleed, profile images and banners for LinkedIn, X and Facebook.
Styleguide als PDF und ein interaktiver CI-Hub mit Farben zum Kopieren und Datei-Index.
Styleguide as PDF and an interactive CI hub with copy-ready colours and a file index.
Das interne Werkzeug für den eigenen Projekt-Workflow — gewachsen aus einem bewährten Website-Tool, das Briefings erhebt und daraus KI-gestützt fertige Bau-Prompts erzeugt (u. a. für ein echtes Kundenprojekt im Einsatz). ProjektPilot verallgemeinert dieses Muster zur Mehrprojekt-Plattform: Anforderungen gemeinsam mit dem Kunden bearbeiten, beidseitig freigeben, versionieren — und aus denselben Daten Statusberichte und Doku erzeugen.
The internal tool for my own project workflow — grown from a proven website tool that captures briefings and turns them into ready-to-build AI prompts (used for a real client project). ProjektPilot generalises that pattern into a multi-project platform: edit requirements together with the client, approve on both sides, version them — and generate status reports and docs from the same data.
Alle Projekte mit Status, Fortschritt und Kunde auf einem Board — plus Detailansicht.
All projects with status, progress and client on one board — plus a detail view.
Kunden bearbeiten Anforderungen direkt mit — mit MoSCoW-Priorität und Kommentaren.
Clients edit requirements directly — with MoSCoW priority and comments.
Owner und Kunde geben frei; danach gesperrt und versioniert — lückenlose Historie.
Owner and client approve; then locked and versioned — a complete history.
Statusbericht, Konzept und Lastenheft aus den Daten — Export als PDF und Word.
Status report, concept and spec from the data — export as PDF and Word.
Anforderungen aus Konzept-PDFs auslesen — oder per Excel/CSV importieren.
Read requirements from concept PDFs — or import via Excel/CSV.
Der Vorgänger: Briefing in Phasen erheben, KI-Prompt und PDF erzeugen — bereits erprobt.
The predecessor: capture a briefing in phases, generate an AI prompt and PDF — already proven.
Konzept und Markenidentität für eine interaktive, offlinefähige Tracking-App: Trainings- und Ernährungsplan an einem Ort abhaken und protokollieren, Fortschritt verfolgen, ein KI-Coach für kontextbezogene Tipps und ein integriertes Feedback-System. Aus zwei statischen Plänen wird ein täglicher Begleiter. Stand: Konzept mit Screenflow und ausgearbeiteter CI «Aubergine & Gold».
Concept and brand identity for an interactive, offline-capable tracking app: tick off and log a training and nutrition plan in one place, track progress, an AI coach for contextual tips and an integrated feedback system. Two static plans become a daily companion. Status: concept with a screen flow and a fully developed «Aubergine & Gold» identity.
Wochenplan und Mahlzeiten an einem Ort — abhaken, anpassen, protokollieren.
Weekly plan and meals in one place — tick off, adjust, log.
Gewicht, Adhärenz und Trends — sichtbar über Wochen hinweg.
Weight, adherence and trends — visible across the weeks.
Kontextbezogene Tipps — «Was könnte ich zu Abend essen?»
Contextual tips — «What could I have for dinner?»
Integriertes Ticketing mit Status-Workflow, Kommentaren und Anhängen.
Integrated ticketing with status workflow, comments and attachments.
Mobile-first und offlinefähig gedacht — der Begleiter für den Alltag.
Mobile-first and offline by design — the everyday companion.
Logo-System, Farbwelt und Typografie mit Fraunces & Inter — warm und ruhig.
Logo system, colour world and type with Fraunces & Inter — warm and calm.
Von der Idee zum fertigen Design-System.
From concept to complete design system.
z.B. chopART Brand Identity
e.g. chopART Brand Identity
PROJEKT ANFRAGEN →REQUEST PROJECT →Websites die funktionieren — vom Konzept bis live.
Websites that work — from concept to live.
z.B. diese Website
e.g. this website
PROJEKT ANFRAGEN →REQUEST PROJECT →Aus manuellen Abläufen werden schlanke Tools.
Turn manual workflows into lean tools.
z.B. Schichtplanung für Bar
e.g. shift planning for bar
PROJEKT ANFRAGEN →REQUEST PROJECT →Massgeschneiderte Apps — von Idee zu Live in Wochen statt Monaten.
Custom-built apps — from idea to live in weeks, not months.
z.B. interaktive Dashboards
e.g. interactive dashboards
PROJEKT ANFRAGEN →REQUEST PROJECT →