How This Design Hub Works

Motion and brand design work focused on systems, campaigns, and visual storytelling.

Crafting kinetic identities and motion systems that breathe life into digital brands, blending typography and animation seamlessly.

Motion & Brand Design

Motion and brand design projects focused on identity systems, campaigns, and high-quality visual storytelling.

Design (Motion & Brand) Work

Brand Design

Motion &

Building identities that move and scale across channels.

How This UX/UI Hub Works

UX/UI projects covering navigation, interaction design, reusable components, and collaboration with developers.

Designing interfaces for native apps and the web, from user flows and prototypes to reusable components and documented handoffs for developers.

UX/UI Architecture

UX/UI case studies and product interface work with strong information architecture, usability, and design systems.

UX/UI Architecture Work

Architecture

UX/UI

Translating product complexity into clear user decisions.

How This Development Hub Works

Frontend and creative development with React, Next.js, WebGL, animation, and AI workflows.

Engineering robust, performant web applications. Turning high-end designs into reality using React, Next.js, and generative AI.

Creative Development

Frontend and creative development projects with React, Next.js, WebGL, animation, and AI-assisted workflows.

Creative Development Work

Development

Creative

Performance-first frontend engineering for ambitious digital experiences.


The Eyes and Ears Awards are among the most respected recognitions in European audiovisual design, celebrating strong ideas, thoughtful craft, and collaborative work across motion graphics, broadcast design, and digital media. Being part of this community alone already means a lot.

# The Projects

```small
I was very grateful to see our work nominated across several categories, including **Best programme lead-in: Culture & Documentary**, **Best programme spot: News**, and **Best promotion of election coverage**.


Together with an amazing team, two projects were ultimately awarded: the **EU Election trailer**, recognized for *Best promotion of election coverage*, and **Zeitreise**, which received *Best programme lead-in: Culture & Documentary*. Both projects are very different in tone and purpose, but they share a common foundation – curiosity, trust in the process, and a lot of teamwork.
```

[projects:history-documentary-design, eu-election-trailer]

```small
The EU Election trailer was about translating a complex, political topic into a clear and energetic visual language. *Zeitreise*, on the other hand, was a passion project rooted in storytelling, history, and a strong editorial look. Seeing both approaches appreciated side by side was especially meaningful.
```

# What This Means to Me

Awards are a wonderful moment to pause and reflect. These projects represent many conversations, iterations, late tweaks, shared references, and collective problem-solving. They wouldn’t exist without the trust of colleagues, editors, producers, and everyone involved along the way.

![assets/eaea/eaea.jpg]

```small
I’m genuinely thankful for the recognition—and even more for the people I get to work with. It’s motivating to know that careful design, strong concepts, and collaborative thinking are seen and valued. I’m excited to keep building on this, exploring new ideas, and creating work that feels relevant, thoughtful, and fun to make.
```


Grateful for the Work, the Process, and the People

Multiple Projects won an Eyes and Ears Award 2024


Some productivity apps are *too good* at letting you plan. You end up with perfect lists… and zero momentum.

**Reminders+** is my attempt to fix that with one simple rule: **do at least one thing every day** — and let the streak do the heavy lifting. It’s a clean, fast, local-first iOS app we designed together with **Max Möckel** and built in **React Native**.  [App Store](https://apps.apple.com/ng/app/reminders/id6758573672)

# The idea: “one task a day” beats “a perfect plan”

```mockup type="iphone" image="assets/reminders-plus/IMG_3086.PNG" bgColor="#F5F5F7"
```

```mockup type="iphone" image="assets/reminders-plus/IMG_3087.PNG" bgColor="#F5F5F7"
```

Instead of pushing you into huge lists, Reminders+ is intentionally built around consistency:

```list style="numbered" split="none"
- **Tasks** for the stuff you need to get done
- **Routines** for habits (daily / weekly / monthly)
- **Projects** for bigger goals
- **Streaks** as the motivator — your progress stays visible and tangible
```

That mechanic sounds small, but it changes how you use the app: you stop aiming for “finish everything” and start aiming for “show up today”.

```mockup type="iphone" image="assets/reminders-plus/IMG_3090.PNG" bgColor="#F5F5F7"
```

```mockup type="iphone" image="assets/reminders-plus/streaks.png" bgColor="#F5F5F7"
```

```insight title="Motivation without gamification noise"
The streak isn’t a badge explosion — it’s just a calm, persistent signal: “you’re building something.” The UI stays minimal so the feedback loop stays strong.
```

# Calm, modern, and focused UX/UI Design

We designed Reminders+ around a few principles:

- Fast capture (getting a task in should never feel like work)
- Clear hierarchy between Tasks / Routines / Projects
- A UI that stays out of the way, so your attention stays on doing, not organizing

```mockup type="iphone" image="assets/reminders-plus/IMG_3089.PNG" bgColor="#F5F5F7"
```

```mockup type="iphone" image="assets/reminders-plus/IMG_3088.PNG" bgColor="#F5F5F7"
```

# Development

So Reminders+ is built on React Native and local-first by design:

- 100% local storage, no cloud dependency
- “Data not collected” (App Store privacy)
- Fast & lightweight, with smooth navigation and animations

```palette scales="true"
name="iOS-Blue" hex="#007EFF" rgb="0,126,255" usage="Primary" rank="1"
name="Off-White" hex="#F5F7FA" rgb="245,247,250" usage="Light Mode" rank="2"
name="Ink" hex="#0B1220" rgb="11,18,32" usage="Dark Mode" rank="2"
name="Red" hex="#F4512C" rgb="244,81,44" usage="Custom" rank="1"
name="Orange" hex="#F97316" rgb="249,115,22" usage="Custom" rank="3"
name="Green" hex="#22C55E" rgb="34,197,94" usage="Custom" rank="3"
name="Pink" hex="#FF2D55" rgb="255,45,85" usage="Custom" rank="4"
name="Violet" hex="#5856D6" rgb="88,86,214" usage="Custom" rank="4"
```

# Keeping clarity from the first click in Marketing

```mockup type="safari-tab" image="/assets/reminders-plus/landing.png" bgColor="#F5F5F7" url="https://reminders-plus.vercel.app/"
```

The landing page serves as a visual extension of the app's minimalist philosophy. It was designed to communicate the value of privacy and simplicity immediately, using clean layouts and interactive previews to demonstrate the fluid navigation and the "no-account-required" onboarding flow. 
[Visit the landing page](https://reminders-plus.vercel.app/) and
[download in the App Store](https://apps.apple.com/ng/app/reminders/id6758573672).

![assets/reminders-plus/-1.jpg|assets/reminders-plus/-2.jpg|assets/reminders-plus/-4.jpg]


Habit-building task app for iOS, built with React Native

Reminders+ is a local-first habit & task app for iOS

Building habits with Streaks


# Building strong brands at scale isn’t just about great visuals anymore. It’s about systems.

```small
For Premium Gruppe I built an automation platform that connects brand design, production and distribution into one coherent workflow.  
The goal is straightforward: make high-quality brand assets for streaming platforms faster, more reliable, and easier to scale.
```

This project lives exactly where my work tends to end up: between **brand design, automation and real-world production pressure**.

## The Challenge

We produce and maintain **hundreds of key visuals** across multiple streaming platforms. Each platform comes with its own reality:

- JOYN  
- Pluto TV  
- Amazon Prime Video  
- KDG / Vodafone  
- client platforms (welt.de, WELT mediathek and apps)

- different aspect ratios  
- different technical specs  
- different deadlines  
- constantly shifting program schedules



```small
None of this is conceptually complex, but at scale, it becomes fragile. Traditionally, a lot of time went into manual checks:  
availability, resizing, gap tracking, deadline coordination across teams.
```

# The bottleneck wasn’t creative quality. It was orchestration.

I designed a workflow that connects data, logic and creative production into a single pipeline, using **n8n as the orchestration layer**.

- **Detect missing assets** automatically per platform and format  
- **Generate structured tasks** with clear ownership and timing  
- **Scale, crop and validate existing key visuals** based on platform rules  
- **Trigger fast-turnaround production** for missing or breaking content  
- **Keep delivery states in sync** across internal tools and endpoints

### Design Meets Automation

```small
This project isn’t about replacing designers.  
It’s about **protecting design quality under scale**. By automating repetitive and error-prone steps, the system creates space for what still requires judgment:
concept, typography, composition and storytelling.
```

Brand systems don’t live in Figma alone.  
They live in **processes**, **decisions** and **tools** that support those decisions.

# What I Learned

- Brand consistency scales best when logic is explicit  
- Designers are well positioned to shape the systems they work with  
- Automation isn’t the opposite of creativity: it can be a multiplier  
- The best systems fade into the background while raising overall quality

Most importantly:  
Strong brands aren’t defined only by how they look, but by **how smoothly they operate**.


Key Visuals for VoD Streaming Services

Automating Production for Brand Assets

# Film Production for Artist Editions
Designing a film that behaves like a moving exhibition - that was the task for the WELT Künstlerausgabe in 2024. Instead of leaning on narration, the piece lets space, light, and composition carry the message. The result is a focused, under-one-minute film that’s effortless to present at events or embed online.

![assets/kunstlerausgaben-2.jpg]
![assets/kunstlerausgaben-2.jpg|assets/kunstlerausgaben-3.jpg]

The visual language places front pages of DIE WELT in minimalist, architectural interiors: illuminated cubes, suspended frames, and open gallery halls. Clean geometry and generous negative space give each edition the presence of a standalone artwork while keeping the environment quiet and unobtrusive.

```palette
Deep-Navy #003a5a rgb(0,58,90) usage=Brand Color rank=1
Gallery-White #F2F2F2 rgb(242,242,242) usage=Background rank=2
Neutral-Gray #A9A9A9 rgb(169,169,169) usage=Accents rank=2
```


# The Trailer
[video](assets/Künstlerausgaben.mp4|assets/kunstlerausgaben-4.jpg)


Film Production

Creating a Trailer for the artist edition of DIE WELT


Building on the original **mobile UX** of the [streaming news app](../welt-tv-app-handoff), the next step was translating the product to the **big screen** in the living room. Instead of redesigning the experience from scratch, the goal was to extend the existing product architecture to TV platforms while preserving familiar interaction patterns.

```small
The resulting TV application brings the core functionality of the [mobile and tablet product](../welt-tv-app-handoff) to Apple TV, Android TV, Samsung TV, Fire TV and Roku. It includes a hero-driven home screen, program detail pages, a continuous livestream, search and essential settings - all adapted for remote navigation, lean-back viewing and large-screen readability.
```

```mockup type="tv" bgColor="#F5F5F7" image="assets/vr/TV - 3.png"
```

## Designing for TV required adapting the interaction model rather than reinventing the product.

Touch-driven navigation was translated into a **focus-based remote interface**, while the content architecture of the existing app remained largely intact.

```small
The home screen highlights current programming through a large hero stage and editorial content rows. From there, users can enter program detail pages, browse topics or immediately start the livestream: maintaining the same editorial hierarchy already familiar from the [mobile experience](../welt-tv-app-handoff).
```

![assets/vr/TV - 4.png]

### Core TV Experience

- Hero-based home screen highlighting current programming and editorial picks
- Continuous livestream as the primary entry point into the product
- Detail pages for programs, topics and editorial video content
- Search for shows, topics and videos across the catalog
- Basic account and app settings
- Focus-based navigation optimized for remote control and lean-back viewing

```mockup type="tv" bgColor="#F5F5F7" image="assets/vr/TV-4.png"
```

While the TV application focuses on extending the existing product to the living room, the project also explored how the same content ecosystem could  **evolve on emerging spatial platforms**.

## Exploring VisionOS and Immersive News Experiences

On Apple Vision Pro, the concept shifts from a screen-based interface to a **spatial news environment**. Instead of a fixed layout, the livestream becomes a floating focal point surrounded by contextual information layers and immersive environments.

![/assets/vr/Video VisionOS.png]

![https://f33qiggog7gxjoua.public.blob.vercel-storage.com/projects/video-visionos-mmjhl4dg-961da1.webp]

```small
Users can watch news while standing inside **360° environments** captured from real locations: city squares during elections, reconstruction sites after natural disasters, or scientific expeditions. Documentary formats expand this concept further by offering fully **immersive storytelling** spaces.
```

- Floating live broadcast window with contextual data panels
- 360° environments from news locations (cities, events, crisis zones)
- Immersive documentary worlds: oceans, wildlife habitats, engineering sites
- Spatial article layers with charts, maps and timelines
- Ambient environments during ad breaks to keep viewers engaged

Together, these explorations outline two complementary directions: a production-ready TV application that scales the existing mobile product to living-room platforms, and a forward-looking spatial concept that rethinks how live news, data and documentary storytelling could be experienced in immersive environments.

## Reference

[projects:welt-tv-app-handoff,automating-brand-assets]


Building on the original mobile UX of the streaming news app, the next step was translating the product to the big screen. Instead of redesigning the experience, the goal was to extend the existing product architecture.

UX/UI Design for TV Interface and Explorations with Apple VisionOS

From Mobile News App to Living-Room Platform


Creating invoices on a smartphone sounds simple, but in reality it is a **risk-sensitive workflow**. Freelancers and small businesses often create invoices quickly between meetings while navigating increasingly strict regulatory requirements. Since 2026, electronic invoicing has become **mandatory for B2B transactions in Germany**, turning what used to be a simple administrative task into a compliance-critical process. Poor UX in this context is not just inconvenient - it can lead to rejected invoices, delays in payment, or financial errors. 

# Not a Form App, But a Guided Workflow.

### This was not a form design problem.

```small
What users described during research was not frustration with fields or layouts, but uncertainty. They were unsure whether their invoice was correct, whether something important was missing, or why invoices were sometimes rejected.

Typical patterns emerged quickly:
```
- Required fields and validation logic were unclear
- Errors often appeared too late in the process
- Trust did not come from the data model — it came from the final PDF

```mockup type="iphone" image="assets/einvoice/03.png" bgColor="#F5F5F7"
```

```mockup type="iphone" image="assets/einvoice/04.png" bgColor="#F5F5F7"
```

```insight title="UX requirement"
The goal was not to hide complexity, but to translate regulatory logic into clear and safe decision points.
```

## A guided workflow instead of a form.

The product strategy focused on turning invoicing into a structured workflow rather than a long form. Validation was integrated early in the process, complex inputs were broken into focused steps, and the interface provided continuous feedback about status and correctness.

```small
Instead of presenting all information at once, the system progressively reveals decisions as they become relevant. This reduces cognitive load while still allowing users to maintain control over the process.
```

```mockup type="iphone" image="assets/einvoice/06.png" bgColor="#F5F5F7"
```

```mockup type="iphone" image="assets/einvoice/05.png" bgColor="#F5F5F7"
```

```small
The central question was: how do you translate regulatory complexity into clear decision spaces without overwhelming or micromanaging users? The answer lay in the interplay of early validation, progressive disclosure, and trust through transparency.
```

## Structuring the product around real work.

```small
The navigation was designed as a productive workspace rather than a traditional app menu. Users can move between invoices, templates, contacts and products, while the invoicing flow itself remains modular and consistent.
```

- Select or create the invoice recipient
- Add line items manually or from saved products
- Define details such as dates, currency and invoice numbers
- Attach text blocks or supporting documents
- Manage the process state (offer, invoice, reminder, cancellation)
- Generate, review and export the final PDF

```mockup type="iphone" image="assets/einvoice/03.png" bgColor="#F5F5F7"
```

```mockup type="iphone" image="assets/einvoice/04.png" bgColor="#F5F5F7"
```

## Translating regulation into clarity.

The core design challenge was translating regulatory complexity into understandable steps without overwhelming the user. Early validation, progressive disclosure and clear status indicators work together to create transparency throughout the process.
```small
Rather than hiding complexity, the interface segments it into manageable decisions. This approach allows users to maintain confidence that their invoice is complete and compliant before sending it.
```

```mockup type="iphone" image="assets/einvoice/01.png" bgColor="#F5F5F7"
```

```mockup type="iphone" image="assets/einvoice/02.png" bgColor="#F5F5F7"
```

# Outcome

**Rechnungen+ provides a mobile end-to-end workflow from data entry to export-ready e-invoice.** The product focuses on clarity in regulation-heavy steps, trust through transparent status handling and efficiency through reusable structures such as templates and product catalogs.

```small
The key lesson from this project is simple: in complex domains, good UX does not remove complexity: **it organizes it into decisions users can confidently make**.
```

Since 2026, electronic invoices are mandatory for B2B transactions in Germany. For freelancers and small businesses this introduces regulatory complexity and uncertainty. This case study shows how the Rechnungen+ app translates that complexity into a clear, mobile-first workflow.

Designing a secure, regulation-ready invoicing experience for freelancers and small businesses

Turning E-Invoicing into a Clear Mobile Workflow


# How can a portfolio become more than a static showcase?

```small
That was the question driving this project for a product designer. Instead of relying on flat galleries or PDF presentations, I built an **interactive web experience** that brings his objects and furniture designs into a spatial, almost tangible environment.
```

```mockup type="macbook" bgColor="#F5F5F7" image="assets/upload/draft1-mmip2act-139d43.webp"
```

The site was developed with **Next.js** as the framework and **three.js** for rendering 3D visuals directly in the browser. This combination allowed us to merge robust performance and SEO with immersive, GPU-accelerated graphics. Every piece of furniture can be rotated, zoomed, and experienced in context, turning the website into a lightweight digital exhibition.

![assets/upload/bildschirmfoto-2026-03-09-um-13-38-13-mmj6sw6w-b28f60.webp] {shadow="false" radius="false"}

```small
The design language is kept clean and minimal: white backgrounds, cyan highlights, and large-scale imagery let the organic forms of the furniture stand in the foreground. A modular grid organizes news, objects, exhibitions, and partners - giving the designer full flexibility to expand the portfolio over time.
```

```palette
name="Blue" hex="#009EDC" rgb="0,158,220" usage="Brand" rank="3"
name="Cyan" hex="#00ECEB" rgb="0,236,235" usage="Highlight" rank="3"
name="Gallery-White" hex="#F2F2F2" rgb="242,242,242" usage="Background" rank="1"
name="Black" hex="#000000" rgb="0,0,0" rank="4"
```

```small
From a technical perspective, the challenge was to create a smooth 3D experience without heavy loading times. We used optimized GLTF models, lazy loading, and fine-tuned lighting settings to ensure that every scene runs fluidly on both desktop and mobile devices. The Next.js architecture provided the foundation for fast builds and scalable hosting.
```

```code type="javascript"
<Canvas
  shadows
  linear
  dpr={[1, 2]}
  camera={{ position: [camPos.x, camPos.y, camPos.z], fov: 65 }}
  onCreated={({ gl, scene }) => {
    gl.shadowMap.enabled = true;
    gl.shadowMap.type = PCFSoftShadowMap;
    gl.toneMapping = ACESFilmicToneMapping;
    gl.toneMappingExposure = 1.2;
    gl.physicallyCorrectLights = true;
    scene.background = null;
  }}
>
  <Preload all />
  <Scene items={items} targetIndex={index} />
```

```mockup type="macbook" bgColor="#F5F5F7" image="assets/bt/three.mp4"
```

The result is more than just a portfolio website - it’s a **digital stage for design**. By blending frontend development with immersive 3D presentation, the project opens new perspectives on how product designers can present their work online: as interactive, living objects instead of static images.

```mockup type="macbook" bgColor="#F5F5F7" image="assets/bt/transition.mp4"
```


A Frontend Developement Project opening Perspectives with three.js

Developing a Next.js-Portfolio for a Product Designer

The starting point for this project wasn’t a tool: it was a **camera idea**. A shot that feels instantly cinematic, a smooth camera move straight through an airport body scanner, revealing the title **“Airport Security USA”**. A shot that would normally be expensive, hard to shoot and to nieche to be found as stock footage - perfect territory to explore what AI can actually contribute to professional trailer production.

# Envisioning an image of the idea

I began the process very traditionally: with a **rough sketch**. Just enough to define perspective, framing and the moment where the title should appear. This sketch then became the basis for my Midjourney prompts.

I generated **lots of variations** – tweaking scanner design, lighting, lens feel and crowd density. The goal wasn’t realism alone, but something that already felt like a frame from a TV production.

Once I had a promising base image, I moved into **Photoshop**. Here I cleaned up the composition, removing unnecessary people and visual noise to make the camera path clearer and the focus more intentional.

![assets/airport-01.avif|assets/airport-02.avif]


# Image to Video in Runway AI.

I defined a **dolly move straight through the scanner**, describing the camera motion, speed and depth in detail. It took a few attempts to get a usable result – some versions felt too floaty, others broke perspective – but eventually I landed on footage that felt grounded enough to work with. With that clip in hand, I switched back to conventional territory: **After Effects**. Even though the footage was AI-generated, I treated it like real camera material:
- tracking the camera move  
- stabilizing and refining the motion  
- placing the title cleanly into the scene  

On top of that, I added small details that sell the realism:
- a **subtle blinking light** on the scanner  
- restrained depth blur  
- cinematic color grading  
- a touch of grain to break the “too perfect” AI look  

All of it aimed at making the shot feel like something that could have been filmed on a real set.

# Why this matters

This project wasn’t about replacing traditional production – it was about **extending it**. AI helped me prototype a complex shot, iterate quickly and arrive at a result that would otherwise require a full location, extras and VFX work.

Used thoughtfully, these tools don’t lower quality – they **unlock ideas** that were previously out of reach.

# The Packshot
[video](assets/airport.mp4|assets/airport-03.jpg)

Using Midjourney, Chat-GPT 4o Image Generation and Runway to create Footage

Generative Video in Trailer Production


For the 2024 EU election campaign, I created a trailer that frames Europe as a vibrant, forward-looking idea. The color palette is rooted in the EU flag: a deep blue with a turquoise twist and that unmistakable golden yellow.
```stats
12::Rotating Stars
20+::European Cities
3::Brand Colors
```

![assets/Europawahl Trailer Frame 182.jpg]

```palette title="EU Color Palette" description="Primäre Trailer-Farben (Blau, Türkis & Gold)"
Deep-Navy #003a5a rgb(0,58,90) usage=Brand Color rank=2
Turquoise #00728f rgb(0,114,143) usage=Brand Color rank=1
EU-Gold #E6A105 rgb(230,161,5) usage=Sterne/Highlight rank=1
White #F5F5F7 rank=2
```

```font name="Mark OT" styles="Medium, SemiBold, Bold" bgColor="#F5F5F7" color="#E6A105" svgAa="assets/fonts/mark-ot-aa.svg" svgTitle="assets/fonts/mark-ot-title.svg"
```

One standout detail: the twelve stars. They rotate in opposition to the overall scene while staying perfectly horizontal within the viewport. It's a subtle effect powered by After Effects expressions – but visually, it makes all the difference.

```javascript title="After Effects Expression"
-thisComp.layer("EU FLAG ROTATION").transform.rotation
```

## The trailer also includes:

- the packshot
- an animated bar chart showing political stats
- visuals of EU buildings in Brussels  
- a ticker of European cities, countries and flags
- stylish split screens for pace and variety
- a cinematic color grade to tie it all together

```mockup type="tv" video="assets/Eu Wahl Loop.mp4" bgColor="#F5F5F7"
```

![assets/Europawahl Trailer Frame 290.jpg]

The result? A motion-driven trailer full of structure, rhythm and European energy – and yes, it got nominated for the **2024 Eyes & Ears Award**.

# The Trailer

[video](https://f33qiggog7gxjoua.public.blob.vercel-storage.com/projects/TR000X5A.mp4|assets/EU_wahl.webp)


My Trailer for the 2024 EU Election

Europe in Motion


Designing for a history format that feels fast, fresh and not like a museum tour? Yes, please. When the production company asked me to take on the show’s visual identity, I knew this would be something fun to dig into.


![assets/Zeitreise Logo.avif|assets/Zeitreise_1.avif]
![assets/Zeitreise_2.avif|assets/Zeitreise_3.avif]

The first idea came from the reference book and "Der Bader-Meinhof-Komplex", paired with those gritty 90s Spiegel TV graphics. Rough textures, Helvetica, punchy cuts – that raw, documentary feel was the core vibe I wanted to channel.

![assets/Zeitreise_7.jpg]

The color palette leans into black and white images and warm rust tones – like old film footage that’s been sitting on a shelf a little too long. There’s nostalgia, but also a sharp digital clarity that keeps it grounded in the now.

![assets/Zeitreise_4.avif|assets/Zeitreise_5.avif]
```palette
Rust-Red #CD412D rgb(205,65,45) usage=Primary rank=1
Off-White #F5F5F5 rgb(245,245,245) usage=Background rank=2
Charcoal #121212 rgb(18,18,18) usage=TextBG rank=2
```

For the typeface, I chose **Berthold Block** – bold, boxy, full of character. It screams “headline” in the best way. And whether it’s in the opener, lower thirds, or on the site, it holds its ground.

![assets/Zeitreise_6.avif]


# The Opener
[video](assets/Zeitreise_Opener.mp4|assets/Zeitreise.webp)


Show Design for a German History Documentation Series

Zeitreise


The project was designed for the business department of the German news media brand WELT, aiming to attract young employees through a magazine ad. The creative brief was to embody the claim "Erfolg beginnt mit neuem Denken" (Success begins with thinking new), integrating a QR-code.

# Discovering Stable Diffusion

Just as this project came to my desk, I started exploring Stable Diffusion and Midjourney.

I delved into its different models, plug-ins, inpainting features, and most notably, ControlNet. This tool revolutionized the way I could integrate images into the generation process, allowing for pixel-perfect inclusion of logos, typography, and even machine-readable QR-Codes.

## Inspiration from TikTok
Sometimes, inspiration comes from unexpected sources. For me, it was while scrolling through TikTok. I stumbled upon a video showcasing Stable Diffusion-generated artworks that seamlessly incorporated QR-codes into their designs. This experience opened my eyes to the full potential of AI in the creative process.

## The Creative Process

My workflow involved generating countless visuals, tweaking and experimenting with the outputs. Not all attempts were successful; some QR-codes were unreadable by my iPhone, while others lacked visual appeal or were distorted.

I focused on refining three core ideas using ControlNet and careful prompting:

- Up in the Sky - A theme that elevates the concept to new heights.
- Micro Chip - Reflecting the intricate, technology-driven aspect of our brand.
- Company Headquarters - Emphasizing our foundation and stability.

![assets/qr-1.jpg::Bits and Bytes|assets/qr-2.jpg::Office Headquarters|assets/qr-3.jpg::Connectivity and Ideas|assets/qr-4.jpg::Micro-Chip 01|assets/qr-5.jpg::Micro-Chip 02|assets/qr-6.jpg::Up in the Sky]

## Final Touches in Photoshop
The last step was to outpaint, upscale, and composite the image using Photoshop. This stage was crucial for placing the campaign claim and brand logo, correcting colors, and preparing a printable PDF that met the specifications of the print company.

![assets/qr-0.jpg]


# Reflections on AI in Creative Design

This project was a pivotal moment for me, demonstrating how AI can serve as a versatile tool in virtually any workflow. The thrill of integrating such cutting-edge technology into a printed magazine campaign continues to inspire my work.

Through this experience, I've seen firsthand the transformative impact AI can have on creative design, making the once-impossible a reality. It's an exciting time to be at the intersection of technology and creativity, and I look forward to pushing these boundaries even further.


Ad-campaign leaveraging Generative AI in Design

Generating QR-Codes with Stable Diffusion

# Strong brands don’t happen by accident: they grow through thousands of decisions.

During my time at WELT from 2019, I worked across UI and motion design, translating the brand’s visual language into apps, broadcast graphics, and other formats. Working with the brand team, I also helped develop practical guidelines for colleagues and external partners.

The 2023 Brand Manual brought these rules together to support consistent design decisions across everyday production.

```mockup type="tv" image="assets/welt-brand/230413_WELT_Brand Manual-_Seite_23.jpg" bgColor="#F5F5F7"
```


The manual provides a practical framework for applying WELT’s identity across print, TV, and digital products.

# One brand. Many touchpoints.

WELT shows up everywhere: television studios, apps, websites, print products, social media, and physical merchandise. In a fast-paced news environment, consistency can quickly break (and very often does) not because people don’t care, but because teams need answers that work under pressure.

The goal of the Brand Manual was to reduce ambiguity and speed up confident decision-making. It brings the essentials into one coherent system:
- precise logo usage and edge cases
- color logic across print, screen, and broadcast
- typography rules that scale from headlines to UI
- naming conventions and writing style across products
- a structured product-logo ecosystem

![/assets/welt-brand/BM.jpg]

# From rules to a usable system

The centerpiece is the WELT logo - including the characteristic lowercase “e” - treated as a system, not just a mark. The guide defines when to use the positive, negative, or tile version, and makes the don’ts explicit (no recoloring, distortion, decorative misuse, or improvised tiles). This matters because the logo appears in countless contexts, often produced quickly, often by different teams. Clear guardrails protect recognition.

![/assets/brands/Welt-logo.png] {shadow="false" radius="false" padding="40"}

Color is handled with the same intent. WELT Blue remains the anchor, supported by WELT Orange as an activating accent and a structured set of secondary colors for charts, formats, and thematic content - with values that hold up reliably across media.

```palette
WELT-Blue #003A5A rgb(0,58,90) usage=Primary rank=1
WELT-Orange #F18825 rgb(241,136,37) usage=Accent rank=2
Blue-Light #246EA7 rgb(36,110,167) usage=Secondary rank=2
Greige-Fond #edece8 rgb(237,233,225) usage=Fond rank=3
Türkis #00728f rank=4
Koralle #e8461e rank=4
Sky-Blau #428ce5 rank=4
Lila #8836bf rank=4

```

Typography adds the editorial voice: a modern, clear grotesk for precision paired with a display serif for weight and storytelling - with concrete usage rules so the system works for everything from TV graphics to digital UI and long-form text.

```font name="Mark OT" styles="Medium, SemiBold, Bold" bgColor="#F5F5F7" color="#428ce5"
```

# Naming is part of the brand

One high-impact chapter for a newspaper is language: how we write WELT, how we refer to all the products - and where exceptions exist for readability in business contexts. These details aren’t “nice to have.” For a media brand that lives in words, consistency in naming is as important as consistency in layout.
```mockup type="macbook" image="/assets/welt-brand/230413_WELT_Brand Manual-_Seite_20.jpg" bgColor="#F5F5F7"
```
The manual includes practical downloads (logo packages, templates, email signatures, backgrounds) and clear contact points for approvals, questions, and special cases - designed to support everyday work across departments and external partners. It’s a living system meant to reduce friction, not add it.

Sometimes the most impactful design work isn’t the loudest. It’s the structure that makes everything else work smoothly - and keeps a brand strong, even when production moves fast.

# Motion Guidelines for TV Interfaces
More to share soon!


My Brand Guidelines for WELT

Brand Manual for German News Media Brand


For Berlin law firm **Rechtsklarheit** and lawyer Tarik Sharief, I worked across **brand identity, UX/UI design, and frontend development**. The project connected the firm’s visual identity with a responsive website that presents legal services clearly and gives the team a way to maintain its own content.

The design work and implementation informed each other: typography, color, and page structure became reusable patterns for service pages, legal content, and blog posts.

```mockup type="macbook" image="assets/rk-1.png" bgColor="#F5F5F7"
```

```small
A connected process from brand identity and interface design to a working website.
```

## Organizing services and content

The website brings together practice areas, legal information, blog posts, and contact options. I used a modular page structure to keep these different content types visually related while giving each enough space for its own information.

On mobile, readable text and a clear hierarchy were central to the UI. The same layout patterns carry through the site, helping visitors find their bearings as they move between service pages and articles.

## Bringing the brand into the interface

```small
Deep blue and turquoise form the core of the visual identity, paired with a logo designed for use across formats. On the website, the colors help distinguish headings, links, and accents. Typography and spacing give long legal texts a readable hierarchy on desktop and mobile.
```

```palette scales="true"
name="Dark-Blue" hex="#172340" rgb="23,35,64" usage="Primary" rank="1"
name="Cyan-Blue" hex="#258EA6" rgb="37, 142, 166" usage="Secondary" rank="1"
name="Light-Blue" hex="#33457C" rgb="51,69,124" usage="Highlight" rank="3"
name="Paper" hex="#E9ECF6" rgb="233,236,246" usage="Fond/Background" rank="3"
name="White" hex="#FFFFFF" rgb="255,255,255" rank="4"
```

```small
The interface uses shared layouts for service pages, legal content, and blog posts. Consistent headings, content sections, and contact options let visitors move between different subjects without having to learn a new page structure.
```

```mockup type="iphone" bgColor="#F5F5F7" image="assets/rk/rk.png"
```

These patterns connect the brand to everyday use: reading about a legal service, browsing an article, or finding a way to contact the firm. Reusable layouts also support additional topics and content over time.

## Developing the website

I implemented the website with **Gatsby and React**, translating the interface into reusable components for legal content, services, and blog posts.

```small
**Netlify** handles hosting and deployments from Git, while **Decap CMS** gives the team an editing interface for maintaining content.
```

```mockup type="safari-tab" bgColor="#F5F5F7" image="https://f33qiggog7gxjoua.public.blob.vercel-storage.com/projects/decap-cms-mmjiomas-dc9185.webp"
```

## Content Editing Made Simple

Behind the scenes, **Decap CMS** empowers the firm’s team to manage their own content without touching code.

- Blog posts, service pages, and updates can be added through a simple UI.  
- The CMS writes directly to the Git repository, keeping the workflow consistent and version-controlled.  
- Editors enjoy a clean, structured dashboard tailored to their needs.  
- Contact forms flow directly into the E-Mail inbox of the law firm.

## Performance & Scalability

- **Performance**: Lighthouse scores consistently above 90  
- **Scalability**: New practice areas or features can be added easily thanks to React components  
- **Accessibility**: WCAG 2.1 AA compliance built into the design system  
- **Security**: HTTPS/SSL by default via Netlify

![assets/upload/bildschirmfoto-2026-03-09-um-12-33-18-mmj3vpmk-14c3de.webp]

The result brings brand identity, responsive UI, and content management together in a website the firm can maintain over time.

Check it out here: [rechtsklarheit.de](https://rechtsklarheit.de)

## Update: 2026

```small
A further redesign is in progress in 2026. The new visual identity explores the idea of transparency in the name Rechtsklarheit, with corresponding updates to the website’s UI.
```

![assets/rk-5.png]


Brand identity, UX/UI design, and frontend development for Berlin law firm Rechtsklarheit, bringing legal services, contact options, and content editing into one consistent website.

From visual identity to a responsive website and CMS

Brand Identity and UX/UI for Rechtsklarheit


Designing the **WELT TV mobile app** meant structuring a complex streaming product rather than simply designing screens. The app combines documentaries, series, news clips and live broadcasts within a single platform, while also integrating editorial logic, brand requirements and monetization features such as Plus access and paywall elements.

```small
From the beginning, the focus of the project was to create a system that external development teams could implement without ambiguity. Instead of treating each screen as a standalone layout, the product was designed as a **structured UX architecture** that defines how content, components and navigation behave across devices.
```

![assets/upload/components-1-mmin00li-ea4d09.webp]

```insight title="Design must survive implementation"
A polished interface is only successful if it can be implemented reliably. Clear rules, documented behavior and defined edge cases turn design from visuals into a buildable product.
```

The foundation of the project was a documented **design system** that structured the visual language and interaction patterns of the app. Rather than designing isolated layouts, UI elements were organized into reusable components and states that could scale across the entire product.

```palette scales="true"
name="Blartz" hex="#171B2D" rgb="23,27,45" usage="Brand" rank="1"
name="Orange" hex="#F18825" rgb="241,136,37" usage="Accent" rank="1"
name="Background" hex="#0E101B" rgb="14,16,27" usage="Surface" rank="3"
```

- Brand-aligned color, typography and spacing systems
- Navigation patterns adapted to both iOS and Android conventions
- Defined component states such as loading, empty and error conditions
- Responsive rules for phone and tablet layouts, portrait and landscape
- Consistent media teaser and thumbnail hierarchies for editorial content

![assets/upload/group-165-mmjfesd9-ee81dc.webp|assets/upload/group-178-mmjfilo9-887a59.webp] {shadow="false" radius="false"}

# Screens alone don’t explain how a product behaves.

Beyond the visual system, the project included a detailed screen-by-screen specification describing how the interface behaves in real scenarios. These notes document logic that cannot be derived from static UI layouts.

- Home screen with editorial highlights and program navigation 
- Video detail pages for shows, series and news segments
- Streaming player with live and on-demand video
- Live broadcast section including EPG integration
- Authentication, account and profile flows
- Settings, notifications and platform-specific variations

```mockup type="iphone" bgColor="#F5F5F7" image="assets/upload/iphone-11-pro-mmjg1xbs-6cdb26.webp"
```

```mockup type="iphone" bgColor="#F5F5F7" image="assets/upload/serie-mmjgcv2c-72ea61.webp"
```

```small
Together with a component library containing more than one hundred component states and a device matrix covering phones and tablets across both platforms, the product became a coherent UI system rather than a collection of layouts.

Stakeholders from marketing, editorial, brand and management were involved throughout the process. User flows were mapped and reviewed iteratively to ensure that not only the visuals but also the structure and navigation of the product worked reliably.
```

## The outcome: a dev-ready design handoff.

The final deliverable was a structured package of components, rules and screen specifications that allowed the external development team to start implementation quickly and with minimal ambiguity.

```small
Instead of handing over design files, the project translated the product into a system developers could build with confidence.
```

![]

![assets/vr/epg.png] {shadow="false" radius="false"}


Designing a streaming news app is not only about the interface — it is about building a system that developers can implement reliably. This case study shows how a mobile and tablet streaming product was translated into a documented design system, component library and dev-ready handoff.

Design System, Component Library and Implementation-Ready Handoff for External Development Teams

Dev-Ready UX/UI for a Streaming App


This project is a short 3D book sequence created as part of a promotional trailer for a space-themed book. The goal was not to over-stylize the object, but to give a familiar book a slightly cinematic, almost weightless quality that fits the tone of the subject matter.

The animation appears only briefly in the final trailer, but a lot of care went into making the movement feel calm, physical, and believable.

## Project Overview

The focus of this piece was the page-turning motion. Books are deceptively complex objects: pages bend, overlap, collide, and never move in a perfectly clean way. Capturing that behavior in a controlled but natural-looking animation was the main challenge.

The book was fully modeled and animated in **Blender**, with particular attention paid to scale, proportions, and how light interacts with paper and the cover material.

## Animation & Rigging

Each page was rigged using an **armature setup**, allowing controlled deformation while still being influenced by physics. Subtle simulations were layered on top to avoid overly rigid motion and to introduce small imperfections that make the movement feel more organic.

Rather than aiming for dramatic motion, the animation stays restrained and precise — letting the pages open smoothly and settle into place without drawing attention to the technique itself.

## Pipeline

- **Modeling & Animation**: Blender  
- **Rigging**: Armature-based page setup  
- **Physics**: Subtle simulations for natural movement  
- **Rendering**: Image sequence export  
- **Compositing & Color**: After Effects  

Rendering was done as an image sequence to keep full control in post-production. In **After Effects**, the shots were composited, gently color-corrected, and integrated into the overall look of the trailer.

## Technical Details

- **Frame Count**: 501 frames  
- **Frame Rate**: 24 fps  
- **Output**: Image sequence → final video  
- **Resolution**: High-definition  

## Reflection

Even though the sequence is short, it was a great opportunity to dive deeper into character-like rigging for non-character objects and to combine controlled animation with physical behavior. Projects like this are a reminder that small moments in a trailer often benefit the most from careful detail work.

# The Render
[video](assets/book.mp4|assets/book.avif)


SelectedWork