# reflect.media GmbH — Full Corpus This is the complete markdown corpus of every page on https://www.reflect-media.com, generated from the content/ directory. See /llms.txt for a curated index. --- # Brand Design That Works: From Strategy to Design System URL: https://www.reflect-media.com/en/blog/brand-design-strategy Locale: en Kind: blog Category: Brand Design Published: 2026-03-14 > How to build a brand identity that scales across digital products, print, and every touchpoint — with practical frameworks for positioning, visual. ::blog-cta{title="Need a Brand That Scales?" text="We build brand identities and design systems that work across every platform. From strategy to implementation." button="Start a conversation" variant="inline"} :: :div{.blog-tldr} **TL;DR** — Effective brand design in 2026 is a system, not a logo. It starts with strategic positioning, manifests through a coherent visual language (typography, color, motion), and scales through design tokens that synchronize every touchpoint automatically. The brands that win are the ones where every pixel reinforces the same story — whether on a billboard, a mobile app, or an invoice. : ## Why Most Brand Design Projects Fail The typical brand design project starts with excitement and ends with a PDF nobody opens. A beautifully designed brand book gets delivered, the team applauds, and within six months the brand has drifted back into inconsistency. Sales uses the old logo. Marketing picks colors that "feel right." The product team invents new button styles because the brand guidelines don't cover their use case. This happens because most brand projects confuse deliverables with systems. A logo, a color palette, and a font selection are deliverables. A brand design system — one that's integrated into the actual tools people use — is what creates lasting consistency. When we delivered the rebrand for **Parkett Hinterseer** (28 locations across Germany), that was exactly the challenge: a brand that needs to work consistently across outdoor advertising, product packaging, retail interiors and digital channels simultaneously. The result — a complete brand system comprising logo, typography, icon set and colour palette — was recognised with the **German Design Award 2025**. This guide covers the full arc: from the strategic foundation that gives a brand its reason to exist, through the visual decisions that make it recognizable, to the technical infrastructure that keeps it consistent at scale. ::case-ref{slug="parkett-hinterseer" image="/images/cases/hinterseer-2.webp" client="Parkett Hinterseer" label="Rebrand · German Design Award 2025"} Complete rebrand for Germany's leading premium flooring retailer — logo, corporate design, print, packaging and editorial design across 28 locations. :: ## Strategic Positioning: The Foundation Nobody Wants to Do Before touching Figma, a brand needs to answer three questions with uncomfortable clarity: 1. **Who are we for?** Not "everyone." A specific audience with specific needs. 2. **What do we do differently?** Not "better quality." A concrete, defensible difference. 3. **Why should anyone care?** Not features. The outcome the audience actually wants. These answers form the brand positioning — the strategic bedrock everything visual is built upon. Without it, design becomes decoration. ### The Positioning Framework A practical positioning statement follows this structure: > For **[target audience]** who need **[core need]**, **[brand name]** is the **[category]** that **[key differentiator]** because **[proof points]**. This isn't a tagline. It's an internal alignment tool. Every design decision, every copywriting choice, every product feature should be traceable back to this statement. If a visual direction doesn't reinforce the positioning, it's wrong — no matter how beautiful it looks. With **Caja von Steinling**, the positioning was clear: luxury dog accessories that stand apart from the mass market — not through decoration, but through restraint and precision. That informed every design decision: the minimalist custom lettering of the wordmark, the logo optimised for leather embossing at 3mm, the reduced colour palette. ### Competitive Landscape Mapping Positioning doesn't happen in isolation. Map your visual territory against competitors on two axes that matter to your audience. Common pairings: - **Premium vs. Accessible** (price positioning) - **Traditional vs. Innovative** (market approach) - **Corporate vs. Human** (communication style) - **Specialist vs. Generalist** (scope positioning) Find the quadrant that's genuinely unoccupied — or underserved — and own it visually. If every competitor in your space uses blue and sans-serif typography, that's useful information. You can either join them (signaling category belonging) or deliberately diverge (signaling differentiation). Both are valid strategies. What's not valid is defaulting into sameness by accident. ::case-ref{slug="caja-von-steinling" image="/images/cases/caja-2.webp" client="Caja von Steinling" label="Luxury Brand · Brand Development"} Brand development for a luxury leather goods label — logo optimised for leather embossing, WordPress e-commerce, full print collateral including packaging. :: ## Typography: The Most Underestimated Brand Asset If you could only choose one element of your visual identity, choose typography. Color is emotional but imprecise — many brands share the same blue. Photography can be replicated. But typography sets the tone of every piece of communication, every interface element, every document your brand produces. ### Choosing a Type System A functional brand typography system needs three roles: **Display typeface** — Used for headlines, hero sections, and high-impact moments. This is where personality lives. A geometric sans-serif communicates precision. A humanist serif signals authority and warmth. A custom variable font says "we invest in details." For the **Parkett Hinterseer** rebrand, we paired Bodoni Nova as the editorial display face with Corporate S for subheadlines and body copy — the serif-sans pairing positions the brand as both premium and approachable. **Body typeface** — The workhorse that carries long-form content, UI labels, and documentation. Optimized for readability at small sizes across screens. Generous x-height, open apertures, clear distinction between similar letterforms (Il1, O0). **Monospace typeface** (if applicable) — For code, data tables, and technical contexts. Aligns with the overall brand personality but serves a functional purpose. ::content-figure{src="/images/blog/brand-moodboard-kmm.jpg" type="image" alt="Corporate design moodboard Kunstmuseum Marburg — logo, typography, colour system and layout grid" caption="Corporate design system for the Kunstmuseum Marburg: logo variants, typography (Gill Sans), colour system and layout grid for publications and object labels." size="large"} :: ### Type Scale Architecture A well-structured type scale defines every text size your brand will ever need. Fewer sizes, used consistently, create stronger visual rhythm than many sizes used arbitrarily. ```css /* A systematic type scale based on a 1.25 ratio */ :root { --fs-2xs: 0.64rem; /* 10.24px — captions, legal */ --fs-xs: 0.8rem; /* 12.8px — labels, metadata */ --fs-sm: 0.9rem; /* 14.4px — secondary text */ --fs-base: 1rem; /* 16px — body copy */ --fs-md: 1.125rem; /* 18px — lead paragraphs */ --fs-lg: 1.25rem; /* 20px — subheadings */ --fs-xl: 1.563rem; /* 25px — section titles */ --fs-2xl: 1.953rem; /* 31.25px — page headings */ --fs-3xl: 2.441rem; /* 39px — hero secondary */ --fs-4xl: 3.052rem; /* 48.8px — hero primary */ } ``` The key discipline: never invent new sizes. If a design needs a size that's not in the scale, the answer is usually that the design needs to change — not the system. ## Color Architecture: Beyond the Palette Brand color isn't about picking five colors that look nice together. It's about building a functional color system that works in every context — from a dark-mode mobile app to a printed business card under fluorescent lighting. ::content-figure{src="/images/blog/brand-moodboard-rrteam.jpg" type="image" alt="Corporate design moodboard RR-Team — logo, iconography, colour system, typography and layout grid" caption="A complete colour system in practice: the corporate design for RR-Team defines primary and secondary colours with exact CMYK, RGB and HEX values — including gradient rules and contrast pairings." size="large"} :: ### The Three-Layer Color Model **Layer 1: Core palette** — The raw color values that define the brand. Typically 1–2 primary colors, 1–2 secondary colors, and a neutral scale. These are the source of truth but are never used directly in production. For the **Kunstmuseum Marburg**, we deliberately reduced the colour palette to just two tones: KMM Gold and KMM Black. A cultural institution doesn't need a rainbow — it needs colours that can stand alongside artworks spanning six centuries without competing with them. **Layer 2: Semantic tokens** — Contextual mappings that assign meaning. `color-primary` points to a core value. `color-text` maps to the appropriate neutral. `color-error` maps to a red that's been tested for contrast compliance. **Layer 3: Component tokens** — Specific usage contexts. `button-primary-bg`, `card-border`, `input-focus-ring`. These create a predictable, maintainable interface between design intent and implementation. ```json { "color": { "core": { "blue-600": { "value": "#0052CC" }, "blue-100": { "value": "#E6F0FF" }, "neutral-900": { "value": "#1A1A2E" }, "neutral-100": { "value": "#F5F5F7" } }, "semantic": { "primary": { "value": "{color.core.blue-600}" }, "bg-page": { "value": "{color.core.neutral-100}" }, "text-body": { "value": "{color.core.neutral-900}" } }, "component": { "button-primary-bg": { "value": "{color.semantic.primary}" }, "button-primary-text": { "value": "#FFFFFF" } } } } ``` ### Accessibility-First Color Selection Every color pairing in the system must meet WCAG 2.1 AA contrast requirements: - **4.5:1** minimum for body text - **3:1** minimum for large text (18px+ or 14px bold) - **3:1** minimum for UI components and graphical objects This isn't optional. Beyond legal compliance in many markets, poor contrast directly reduces conversion rates. Users who can't read your content can't buy your product. ::case-ref{slug="kunstmuseum-marburg" image="/images/cases/kunstmuseum-marburg-9.webp" client="Kunstmuseum Marburg" label="Brand Relaunch · German Design Award"} Logo relaunch and complete rebrand for one of Germany's most important university art museums — corporate design, print design and merchandise. :: ## Motion as Brand Language Static brands are incomplete brands. In 2026, motion is a core identity element — not an afterthought added during implementation. The way elements enter a page, how buttons respond to interaction, how content transitions between states — these behaviors communicate personality as powerfully as color or typography. ### Defining Motion Principles A brand's motion language should be defined through principles, not individual animations: **Tempo** — Is the brand energetic and quick, or measured and deliberate? This determines base duration values. A fintech brand might use 150–250ms transitions (efficient, responsive). A luxury brand might use 400–600ms (considered, premium). **Easing** — The acceleration curve tells a story. Linear motion feels mechanical. Ease-out feels responsive and natural. Spring-based easing feels playful and physical. Pick one family and use it consistently. **Choreography** — How do multiple elements relate in motion? Staggered entrances imply hierarchy. Simultaneous transitions imply equality. Connected animations (where one element's exit triggers another's entrance) imply narrative flow. ```css :root { /* Motion tokens */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); } ``` ::blog-cta{title="Struggling with Brand Consistency?" text="We audit existing brands and build design systems that keep every team aligned. From Figma to production code." button="Request a brand audit" variant="inline"} :: ## Design Tokens: The Technical Bridge Design tokens are the mechanism that turns a brand identity from a PDF into a living system. They're named entities — `color.primary`, `spacing.lg`, `font.heading` — stored in a machine-readable format (typically JSON) and transformed into platform-specific code: CSS custom properties for web, Swift constants for iOS, XML resources for Android, Figma variables for design. ### Token Architecture in Practice ```json { "spacing": { "2xs": { "value": "4px" }, "xs": { "value": "8px" }, "sm": { "value": "12px" }, "md": { "value": "16px" }, "lg": { "value": "24px" }, "xl": { "value": "32px" }, "2xl": { "value": "48px" }, "3xl": { "value": "64px" } }, "borderRadius": { "none": { "value": "0" }, "sm": { "value": "4px" }, "md": { "value": "8px" }, "lg": { "value": "16px" }, "full": { "value": "9999px" } } } ``` These tokens get compiled into every platform your brand touches: ```css /* Generated CSS */ :root { --spacing-2xs: 4px; --spacing-xs: 8px; --spacing-sm: 12px; --spacing-md: 16px; --spacing-lg: 24px; } ``` ```swift // Generated Swift enum Spacing { static let xxs: CGFloat = 4 static let xs: CGFloat = 8 static let sm: CGFloat = 12 static let md: CGFloat = 16 static let lg: CGFloat = 24 } ``` The power is in the single source of truth. Change the spacing scale once, and every platform updates. Rebrand? Swap the token values and every product reflects the new identity without touching component code. ::content-figure{src="/images/blog/brand-mockups.jpg" type="image" alt="Brand identity applied across business cards, letterheads, and digital interfaces" caption="A scalable identity works consistently from business cards to enterprise dashboards." size="large"} :: ## The Brand Design Process: What Actually Happens A professional brand design engagement isn't a linear march from brief to delivery. It's a structured cycle of divergence and convergence across four phases. ### Phase 1: Discovery (2–4 weeks) - Stakeholder interviews and alignment workshops - Competitor visual audit and landscape mapping - Audience research and persona validation - Brand positioning refinement or development - Deliverable: Strategic brief with positioning, personality, and constraints ### Phase 2: Visual Exploration (3–4 weeks) - 2–3 distinct visual directions (mood boards, type explorations, color studies) - Logo concepts and wordmark development - Photography and illustration style definition - Motion language principles - Deliverable: Approved visual direction with rationale ### Phase 3: System Design (3–5 weeks) - Complete type scale and pairing specifications - Full color system with semantic and component tokens - Component library (buttons, cards, forms, navigation patterns) - Responsive behavior definitions - Accessibility audit and adjustments - Deliverable: Design system in Figma with documentation ### Phase 4: Implementation & Handoff (2–4 weeks) - Design token export pipeline (JSON to CSS/Swift/XML) - Developer documentation and integration guide - Asset production (logos in all formats, social templates, print templates) - Brand guidelines (living documentation, not a static PDF) - Deliverable: Production-ready design system with integration support ## Measuring Brand Design Effectiveness Brand design isn't art — it's a business tool. Measure it accordingly: **Recognition metrics** — Unaided recall surveys before and after rebrand. Can people identify your brand from a cropped logo, a color, a typographic treatment? **Consistency score** — Audit all touchpoints quarterly. Score each on adherence to the design system. Track improvement over time. **Performance metrics** — Conversion rates, time on site, bounce rate. A strong brand identity directly impacts these numbers through trust and clarity. **Production velocity** — How fast can the team ship new pages, campaigns, or features? A working design system should measurably accelerate output. ## Conclusion Brand design in 2026 is an engineering discipline as much as a creative one. The brands that maintain consistency across hundreds of touchpoints aren't the ones with the best brand books — they're the ones who built systems. Design tokens replace style guides. Component libraries replace brand books. Automated pipelines replace manual QA. The creative vision still matters enormously. A technically perfect system built on weak positioning produces consistent mediocrity. But strong creative vision without systematic infrastructure produces beautiful chaos. The goal is both: a brand that's distinctive enough to be remembered and structured enough to be maintained. --- # Flutter App Development in 2026: Architecture, Performance & Deployment URL: https://www.reflect-media.com/en/blog/flutter-app-development-guide Locale: en Kind: blog Category: App Development Published: 2026-03-10 > A deep technical guide to building production-grade Flutter apps — from clean architecture and Impeller rendering to CI/CD pipelines and native platform. ::blog-cta{title="Planning a Flutter Project?" text="We build production-grade Flutter apps with clean architecture, native performance, and scalable CI/CD. Let's talk about your requirements." button="Get in touch" variant="inline"} :: :div{.blog-tldr} **TL;DR** — Flutter in 2026 is a mature, production-ready framework. Impeller 2.0 eliminates rendering jank with AOT shader compilation. Clean architecture with BLoC and GetIt keeps large codebases maintainable. FFI replaces method channels for high-performance native integration. WebAssembly is the new default for web builds. And automated CI/CD pipelines with GitHub Actions deploy to both app stores with a single merge. : ## Why Flutter Has Become the Default for Cross-Platform Development The cross-platform landscape has consolidated. While React Native remains a strong contender for JavaScript-heavy teams, Flutter has emerged as the framework of choice for teams that prioritize rendering performance, pixel-perfect design control, and true multi-platform reach. With Flutter 3.41, the framework has reached a level of maturity where the question is no longer whether Flutter is production-ready, but how to architect Flutter applications that scale. This guide covers the technical decisions that separate hobby projects from production-grade Flutter applications: architecture patterns, rendering pipeline optimization, native integration strategies, and deployment automation. ## The Rendering Revolution: Impeller 2.0 The most consequential change in the Flutter ecosystem is the completion of the Impeller rendering engine. Since Flutter's inception, the framework relied on Skia for GPU rendering — a capable engine, but one that compiled shaders at runtime. This caused the dreaded "shader compilation jank" — visible stutters the first time a user encountered certain animations or transitions. Impeller solves this problem fundamentally. Instead of compiling shaders on demand, Impeller uses ahead-of-time (AOT) shader compilation. Every shader the application might need is precompiled during the build step. The result: zero first-run jank, consistent frame timing, and nearly 50% reduction in frame rasterization time for complex scenes. ### How Impeller Achieves This Impeller integrates directly with the platform's native graphics API — Metal on iOS and Vulkan on Android. This is a significant departure from Skia's more abstract rendering approach: ```dart // Impeller benefits are automatic — no code changes needed. // But understanding the pipeline helps with performance optimization. // Heavy custom painting? Impeller's tessellator handles complex paths // far more efficiently than Skia's CPU-bound path rasterization. class OptimizedPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { final path = Path() ..moveTo(0, size.height) ..cubicTo( size.width * 0.25, size.height * 0.1, size.width * 0.75, size.height * 0.9, size.width, 0, ); // Impeller tessellates this path on the GPU, not CPU. // Complex gradients and blur effects also stay GPU-bound. canvas.drawPath(path, Paint()..color = Colors.blue); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) => false; } ``` In 2026, the legacy Skia backend is being removed for Android 10 and above. If your app targets Android 9 or below, Skia remains available as a fallback. For all practical purposes, Impeller is now the only rendering path that matters. ### Performance Profiling with Impeller Impeller changes how you profile Flutter applications. Frame rasterization is no longer the bottleneck — widget building and layout computation often are. The Flutter DevTools performance overlay now highlights widget rebuild counts and layout pass duration as the primary metrics to optimize. ```dart // Use RepaintBoundary strategically to isolate expensive subtrees class ExpensiveAnimatedWidget extends StatelessWidget { @override Widget build(BuildContext context) { return RepaintBoundary( child: CustomPaint( painter: _ComplexAnimationPainter(), size: const Size(400, 400), ), ); } } ``` ## Clean Architecture: Structuring Flutter for Scale A Flutter app with five screens works fine with any architecture. A Flutter app with fifty screens, three API integrations, offline caching, and a team of five developers requires discipline. Clean architecture — adapted for Flutter's reactive paradigm — provides that structure. ### The Three-Layer Model The architecture separates concerns into three layers with strict dependency rules. Dependencies only point inward: presentation depends on domain, domain depends on nothing, and data implements domain contracts. ``` lib/ ├── core/ │ ├── error/ # Failure classes, exceptions │ ├── network/ # HTTP client, interceptors │ └── di/ # GetIt dependency injection setup ├── features/ │ ├── authentication/ │ │ ├── domain/ │ │ │ ├── entities/ # AuthUser, Session │ │ │ ├── repositories/ # Abstract AuthRepository │ │ │ └── usecases/ # LoginUseCase, LogoutUseCase │ │ ├── data/ │ │ │ ├── models/ # AuthUserModel (JSON mapping) │ │ │ ├── datasources/ # AuthRemoteDataSource, AuthLocalDataSource │ │ │ └── repositories/ # AuthRepositoryImpl │ │ └── presentation/ │ │ ├── bloc/ # AuthBloc, AuthState, AuthEvent │ │ ├── pages/ # LoginPage, ProfilePage │ │ └── widgets/ # LoginForm, SocialLoginButton │ └── dashboard/ │ └── ... └── main.dart ``` ### Domain Layer: Pure Business Logic The domain layer contains entities, use case classes, and abstract repository interfaces. It has zero Flutter imports and zero external dependencies. This makes it testable with pure Dart unit tests and portable across projects. ```dart // Domain entity — immutable, no serialization logic class Project { final String id; final String name; final ProjectStatus status; final DateTime deadline; final List memberIds; const Project({ required this.id, required this.name, required this.status, required this.deadline, required this.memberIds, }); bool get isOverdue => status != ProjectStatus.completed && DateTime.now().isAfter(deadline); } // Abstract repository — the contract data layer must fulfill abstract class ProjectRepository { Future>> getProjects(); Future> getProjectById(String id); Future> updateStatus(String id, ProjectStatus status); } // Use case — single responsibility, single entry point class GetProjectsUseCase { final ProjectRepository repository; const GetProjectsUseCase(this.repository); Future>> call() => repository.getProjects(); } ``` ### Data Layer: API Contracts and Caching The data layer implements the repository interfaces defined in the domain layer. It handles JSON serialization, API calls, local caching, and error mapping. Models in this layer extend or map to domain entities but add serialization concerns. ```dart class ProjectRepositoryImpl implements ProjectRepository { final ProjectRemoteDataSource remote; final ProjectLocalDataSource local; final NetworkInfo networkInfo; const ProjectRepositoryImpl({ required this.remote, required this.local, required this.networkInfo, }); @override Future>> getProjects() async { if (await networkInfo.isConnected) { try { final models = await remote.fetchProjects(); await local.cacheProjects(models); return Right(models.map((m) => m.toEntity()).toList()); } on ServerException catch (e) { return Left(ServerFailure(e.message)); } } else { try { final cached = await local.getCachedProjects(); return Right(cached.map((m) => m.toEntity()).toList()); } on CacheException { return Left(const CacheFailure('No cached data available')); } } } } ``` ### Presentation Layer: BLoC Pattern BLoC (Business Logic Component) separates UI interaction from state transformation. Events go in, states come out. The UI subscribes to state changes and rebuilds accordingly. Combined with `freezed` for immutable state classes, this produces predictable, testable state management. ```dart // Events sealed class ProjectEvent {} class LoadProjects extends ProjectEvent {} class UpdateProjectStatus extends ProjectEvent { final String projectId; final ProjectStatus newStatus; UpdateProjectStatus(this.projectId, this.newStatus); } // States sealed class ProjectState {} class ProjectInitial extends ProjectState {} class ProjectLoading extends ProjectState {} class ProjectLoaded extends ProjectState { final List projects; ProjectLoaded(this.projects); } class ProjectError extends ProjectState { final String message; ProjectError(this.message); } // BLoC class ProjectBloc extends Bloc { final GetProjectsUseCase getProjects; ProjectBloc({required this.getProjects}) : super(ProjectInitial()) { on((event, emit) async { emit(ProjectLoading()); final result = await getProjects(); result.fold( (failure) => emit(ProjectError(failure.message)), (projects) => emit(ProjectLoaded(projects)), ); }); } } ``` ### Dependency Injection with GetIt GetIt wires everything together. Register abstract types with concrete implementations, and the presentation layer never knows which data source it's actually using. This makes swapping real APIs with fakes during testing trivial. ```dart final sl = GetIt.instance; void initDependencies() { // BLoCs sl.registerFactory(() => ProjectBloc(getProjects: sl())); // Use cases sl.registerLazySingleton(() => GetProjectsUseCase(sl())); // Repositories sl.registerLazySingleton( () => ProjectRepositoryImpl( remote: sl(), local: sl(), networkInfo: sl(), ), ); // Data sources sl.registerLazySingleton( () => ProjectRemoteDataSourceImpl(client: sl()), ); sl.registerLazySingleton( () => ProjectLocalDataSourceImpl(sharedPreferences: sl()), ); } ``` ## Native Platform Integration: FFI vs. Method Channels Flutter applications occasionally need to call platform-specific APIs — biometric authentication, Bluetooth protocols, camera pipelines, or proprietary SDKs. Flutter provides two integration mechanisms, and choosing the right one matters for both performance and maintainability. ### Method Channels: The Traditional Bridge Method channels are asynchronous message-passing bridges between Dart and native code. They serialize arguments, send them across a platform boundary, and deserialize the response. ```dart // Dart side class NativeBatteryService { static const _channel = MethodChannel('com.example.app/battery'); Future getBatteryLevel() async { final level = await _channel.invokeMethod('getBatteryLevel'); return level ?? -1; } } ``` ```kotlin // Android side (Kotlin) class BatteryMethodHandler(private val context: Context) : MethodChannel.MethodCallHandler { override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) { if (call.method == "getBatteryLevel") { val manager = context.getSystemService(Context.BATTERY_SERVICE) as BatteryManager result.success(manager.getIntProperty( BatteryManager.BATTERY_PROPERTY_CAPACITY )) } else { result.notImplemented() } } } ``` Method channels work well for infrequent, request-response interactions. But they serialize all arguments through a codec, which adds latency for high-frequency calls or large data transfers. ### FFI: Direct, Zero-Copy Native Calls Since Flutter 3.38, FFI (Foreign Function Interface) via `dart:ffi` is the recommended approach for performance-sensitive native integration. FFI calls are synchronous, avoid serialization overhead, and can share memory directly between Dart and native code. ```dart // Load a native library and call functions directly import 'dart:ffi'; import 'dart:io'; typedef NativeImageProcess = Int32 Function( Pointer data, Int32 width, Int32 height); typedef DartImageProcess = int Function( Pointer data, int width, int height); class NativeImageProcessor { late final DartImageProcess _process; NativeImageProcessor() { final lib = Platform.isAndroid ? DynamicLibrary.open('libimage_processor.so') : DynamicLibrary.process(); _process = lib .lookupFunction( 'process_image'); } int processImage(Pointer data, int width, int height) { return _process(data, width, height); } } ``` For new projects, generate FFI bindings automatically with `flutter create --template=package_ffi`. The `ffigen` tool reads C header files and generates type-safe Dart bindings, eliminating manual boilerplate. ### When to Use Each Use **method channels** when you need asynchronous platform interactions, when you're integrating with platform-specific lifecycle events, or when the overhead of serialization is negligible compared to the operation itself (e.g., requesting permissions, reading device settings). Use **FFI** when you need synchronous execution, when you're processing large data buffers (images, audio, sensor data), or when you're wrapping an existing C/C++ library that handles the heavy computation. ## Flutter for Web: WebAssembly as Default Flutter web has matured significantly. The transition from DOM-based rendering to WebAssembly is the defining change for 2026. Wasm delivers near-native execution speed for Dart code in the browser, replacing the slower JavaScript compilation target. ### Building for Wasm ```bash # Build with WebAssembly (becoming default in 2026) flutter build web --wasm # Check Wasm readiness of your dependencies flutter build web --wasm --wasm-opt ``` Not all Dart packages are Wasm-compatible yet. Packages that use `dart:js` or `dart:html` directly need migration to `package:web` and `dart:js_interop`. Run a Wasm dry compilation early in your project to identify incompatible dependencies before they become blockers. ### Stateful Hot Reload on Web Since Flutter 3.35, stateful hot reload works on web by default. This eliminates the productivity gap between mobile and web development. Change a widget, save, and see the result instantly — with application state preserved. ## CI/CD: From Commit to App Store A production Flutter project needs automated testing, building, and deployment. Manual builds introduce human error and slow down release cycles. GitHub Actions provides a solid foundation for Flutter CI/CD. ### Pipeline Architecture A production-ready pipeline has three stages: validate, build, and deploy. ```yaml # .github/workflows/flutter-ci-cd.yml name: Flutter CI/CD on: push: branches: [main] pull_request: branches: [main] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: subosito/flutter-action@v2 with: flutter-version: '3.41.0' channel: 'stable' - run: flutter pub get - run: flutter analyze --fatal-infos - run: flutter test --coverage build-android: needs: test runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: subosito/flutter-action@v2 with: flutter-version: '3.41.0' - run: flutter build appbundle --release - uses: r0adkll/upload-google-play@v1 with: serviceAccountJsonPlainText: ${{ secrets.PLAY_SERVICE_ACCOUNT }} packageName: com.example.app releaseFiles: build/app/outputs/bundle/release/app-release.aab track: internal build-ios: needs: test runs-on: macos-latest steps: - uses: actions/checkout@v4 - uses: subosito/flutter-action@v2 with: flutter-version: '3.41.0' - run: flutter build ipa --release --export-options-plist=ios/ExportOptions.plist - uses: apple-actions/upload-testflight-build@v1 with: app-path: build/ios/ipa/*.ipa issuer-id: ${{ secrets.APPSTORE_ISSUER_ID }} api-key-id: ${{ secrets.APPSTORE_API_KEY_ID }} api-private-key: ${{ secrets.APPSTORE_API_PRIVATE_KEY }} ``` ### Code Signing and Secrets Never commit signing keys or service account credentials to your repository. Store them as encrypted secrets in your CI platform: - **Android**: Upload keystore as a base64-encoded secret, decode it during the build step. Store the Google Play service account JSON as a secret. - **iOS**: Use Fastlane Match or manual provisioning profiles stored as secrets. App Store Connect API keys replace Apple ID credentials for automated uploads. ### Staged Rollouts Deploy to internal testing first, promote to beta after manual QA, then roll out to production at 10%, 50%, 100%. Google Play Console supports percentage-based rollouts natively. App Store Connect uses TestFlight groups for staged distribution. ::blog-cta{title="Need Help with Your Flutter Architecture?" text="We've shipped Flutter apps for enterprise clients across insurance, education, and public sector. Let's discuss your project." button="Schedule a call" variant="inline"} :: ## Testing Strategy for Production Flutter Apps Testing is not optional in production Flutter development. A layered testing strategy mirrors the clean architecture: - **Unit tests** for domain logic, use cases, and BLoC state transitions - **Widget tests** for component behavior and interaction - **Integration tests** for complete user flows on real devices ```dart // BLoC test example void main() { late ProjectBloc bloc; late MockGetProjectsUseCase mockGetProjects; setUp(() { mockGetProjects = MockGetProjectsUseCase(); bloc = ProjectBloc(getProjects: mockGetProjects); }); blocTest( 'emits [Loading, Loaded] when LoadProjects succeeds', build: () { when(() => mockGetProjects()) .thenAnswer((_) async => Right(testProjects)); return bloc; }, act: (bloc) => bloc.add(LoadProjects()), expect: () => [ isA(), isA(), ], ); } ``` Aim for 80%+ code coverage on the domain and data layers. Widget test coverage can be lower — focus on critical user interactions rather than pixel-perfect assertions. ## Making the Decision: When Flutter Is the Right Choice Flutter is the right technology when your project requires: - **Multi-platform reach** from a single codebase (mobile, web, desktop) - **Custom, branded UI** that doesn't follow platform conventions - **High frame-rate animations** and complex visual interactions - **Fast time-to-market** with a small team - **Long-term maintainability** through clean architecture and strong typing Flutter is not the ideal choice when your app is primarily a thin wrapper around platform-specific APIs (deep AR integration, specialized Bluetooth protocols) or when your entire team has deep React/JavaScript expertise and no Dart experience. ## Conclusion Flutter in 2026 is not the same framework it was three years ago. Impeller has solved the rendering performance question. Clean architecture with BLoC provides a battle-tested pattern for complex applications. FFI offers native-grade performance for platform integration. WebAssembly unlocks serious web deployment. And GitHub Actions automates the entire path from commit to app store. The technology choices are settled. What remains is the engineering discipline to apply them correctly — choosing the right architecture granularity for your team size, profiling before optimizing, testing at every layer, and automating everything that can be automated. That is what separates Flutter projects that ship from Flutter projects that stall. --- # The 10 Most Important On-Site SEO Measures for Your Website URL: https://www.reflect-media.com/en/blog/on-site-seo-checkliste-website Locale: en Kind: blog Category: SEO Published: 2024-04-08 Updated: 2026-03-01 > To ensure your website is properly displayed in search engines and apps, you should follow the essential SEO fundamentals. Learn about the most important. ::blog-cta{title="Free SEO Analysis for Your Website" text="We'll review your website for the most important SEO factors and show you concrete improvement opportunities." button="Request now" variant="inline"} :: :div{.blog-tldr} **TL;DR** — Successful on-site SEO rests on ten pillars: technical performance, unique content, optimized page titles and meta descriptions, readable URLs, clean heading hierarchy, images with alt attributes, strategic internal linking, social meta tags, an XML sitemap, and structured data. Master these fundamentals and you have the foundation for sustainable organic growth. : ## Why On-Site SEO Is the Foundation for Organic Growth Search engine optimization is not a one-time project but an ongoing process. However, before you think about link building, content marketing, or social media strategies, the fundamentals on your own website need to be solid. On-site SEO encompasses all measures you can implement directly on your website to improve visibility in search engines. Google and other search engines evaluate websites based on hundreds of factors. Many of these factors are entirely within your control. In this article, we show you the ten most important on-site SEO measures you can implement immediately — with concrete code examples and practical tips. ## 1. How Do I Optimize My Website's Technical Performance? Search engines like Google place strong emphasis on user experience, particularly loading speed. Since the introduction of Core Web Vitals, performance metrics are a direct ranking factor. Additional technical factors for ranking include: - **Mobile optimization** — Responsive design is mandatory; Google indexes mobile-first - **Compressed transmission** of CSS, HTML, and JavaScript (e.g., using gzip or Brotli) - **Providing a robots.txt** — controls which areas get crawled - **Minification** of CSS and JavaScript - **Browser caching** properly configured - **Reducing HTTP requests** per page visit - **Clean code** — valid HTML, CSS, and JavaScript - **Image optimization** — WebP format, responsive images, lazy loading - **SSL certificate** — HTTPS has been a ranking factor for years An example of an optimized `robots.txt`: ```txt User-agent: * Allow: / Disallow: /admin/ Disallow: /api/ Sitemap: https://www.yourwebsite.com/sitemap.xml ``` ## 2. Why Is Unique Content the Most Important Ranking Factor? Content remains the most important factor for good rankings. Google is getting increasingly better at evaluating the quality and relevance of content. Key principles: - **Each piece of content under a single URL** — no duplicate content - **No keyword cannibalization** — each page should target one primary keyword - **Important keywords in headings and paragraphs** — the main keyword belongs in the H1 - **Clearly defined target audience** with appropriate messaging - **No copied content** from other sites — Google detects this reliably - **Long-form content** (1,700+ words) demonstrably performs better for B2B topics The key is creating content that answers a question better than any other page on the internet. Think in topic clusters rather than individual keywords. ## 3. How Do I Write an Optimal Page Title? The HTML `` tag is one of the strongest on-page ranking factors. It appears as the clickable heading in search results and significantly determines the click-through rate. Best practices: - **Place important keywords at the beginning** - **Maximum approximately 60 characters** for full display in the SERP snippet - **A unique, topic-related title per page** - **Formulate as a question or clear statement** — this matches search intent ```html <!-- Good --> <title>10 On-Site SEO Measures for Better Rankings | reflect.media Blog | reflect.media GmbH ``` ## 4. What Makes a Good Meta Description? The meta description is not a direct ranking factor, but it influences the click-through rate (CTR) in search results — and CTR is an indirect ranking factor. - **A unique, individual description per page** - **Reflect the page content** and motivate clicks - **Integrate relevant keywords** — they appear bold when matching - **Between 140 and 160 characters** — short and concise ```html ``` ## 5. Why Are Readable URLs So Important for SEO? URLs are one of the first signals Google gets about a page's content. Readable URLs improve not only discoverability but also user experience. - **Use relevant keywords in the URL** - **No cryptic parameters** or session IDs - **Hyphens instead of underscores** for word separation - **Keep them short and descriptive** | URL Type | Example | Rating | |----------|---------|--------| | Readable | `https://www.yourwebsite.com/seo-measures` | Good | | Cryptic | `https://www.yourwebsite.com/index.php?id=423` | Bad | | Too long | `https://www.yourwebsite.com/blog/2024/04/the-ten-most-important-on-site-seo-measures-for-your-website` | Avoid | ## 6. How Do I Structure Headings Correctly? The heading hierarchy (H1–H6) helps search engines and users understand the content of a page. A clean structure signals topical relevance. - **H1 only once per page** — the main topic - **H2 for main sections** — formulate as questions for AI snippets - **H3–H6 for subsections** — logically nested - **Keywords naturally integrated** into headings ```html

The 10 Most Important On-Site SEO Measures

How Do I Optimize Technical Performance?

Understanding Core Web Vitals

Loading Speed Optimization

Why Is Content the Most Important Factor?

``` ::blog-cta{variant="inline"} :: ## 7. How Do I Optimize Images for Search Engines? Images offer enormous SEO potential — especially through Google Image Search. At the same time, unoptimized images are the most common cause of slow loading times. - **Alt and title attributes** on all images — descriptive and with keywords - **Image file names** alphanumeric only, separated by hyphens - **WebP format** for optimal compression - **Responsive images** with `srcset` for different screen sizes - **Lazy loading** for images outside the visible area ```html SEO checklist with the 10 most important on-site measures ``` ## 8. What Is the Right Strategy for Internal Linking? Internal links help Google understand your website's structure and distribute so-called "link power" to important pages. A well-thought-out internal linking strategy is one of the most underestimated SEO levers. - **Use title attributes on links** for additional context - **Formulate link text descriptively** — not "click here," but describe the target page - **Link thematically related pages** to each other - **Link important pages** from as many internal pages as possible ```html Learn more about our web development Click here ``` ## 9. Which Social Meta Tags Does My Website Need? When your website is shared on social networks, Open Graph and Twitter Card meta tags determine how the shared link is displayed. This directly affects the click-through rate. **Open Graph** for Facebook, LinkedIn, and other platforms: ```html ``` **Twitter Cards** for optimized display in tweets: ```html ``` ## 10. How Do I Create an Effective XML Sitemap? An XML sitemap is a file that lists all important URLs of your website and supports Google's crawling process. It is particularly valuable for: - **Getting new content indexed** faster - **Large websites** with deep page structures - **Making pages without many internal links** discoverable - **Communicating the last modification date** to Google ```xml https://www.yourwebsite.com/ 2026-03-01 weekly 1.0 https://www.yourwebsite.com/services 2026-02-15 monthly 0.8 ``` The sitemap should be accessible at `https://www.yourwebsite.com/sitemap.xml` and referenced in your `robots.txt`. ## Bonus: Structured Data for Rich Snippets In addition to the ten core measures, we recommend using structured data (Schema.org) in JSON-LD format. These help Google better understand your page content and display it as rich snippets in search results. ```html ``` ## Conclusion: Your SEO Action Plan On-site SEO is not a one-time task — it is an ongoing discipline that requires regular attention. The ten measures in this guide form the foundation for sustainable organic visibility. Start with the technical basics: ensure your site loads fast, is mobile-friendly, and uses HTTPS. Then move to content: create unique, long-form content that genuinely answers your target audience's questions. Finally, optimize the on-page elements: titles, descriptions, URLs, heading structure, image attributes, internal links, social meta tags, your XML sitemap, and structured data. The most successful websites treat SEO as an integral part of their development process, not an afterthought. Every new page, every content update, and every technical change should consider these ten principles. If you need professional support with your SEO strategy, our team at reflect.media combines over 15 years of web development and digital marketing expertise. We build websites that are not just visually compelling but technically optimized from the ground up. ## Frequently Asked Questions **How long does it take for SEO measures to show results?** Typically 3–6 months for noticeable results. Technical fixes take effect faster, while content optimizations need time for indexing and authority building. **Do I need to implement all ten measures?** Yes, because they build upon each other. Technical SEO is the foundation, followed by content optimization, then on-page elements. Gaps in the foundation limit everything above it. **Do I need an SEO tool?** For getting started, the free Google tools are sufficient: Search Console, PageSpeed Insights, and the Rich Results Testing Tool. For advanced analysis, we recommend Ahrefs or Semrush. **How often should I update my content?** Evergreen content should be reviewed and updated at least every 6–12 months. Google rewards freshness — "Updated" signals increase the chances of Featured Snippets. **What is the difference between on-site and off-site SEO?** On-site SEO encompasses everything you optimize on your own website. Off-site SEO refers to external factors like backlinks, brand mentions, and social signals. **What are Core Web Vitals and why do they matter?** Core Web Vitals are three Google metrics: LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift). They measure loading speed, interactivity, and visual stability and have been a direct ranking factor since 2021. **Is HTTPS really a ranking factor?** Yes, Google has confirmed HTTPS as a ranking signal since 2014. Without an SSL certificate, browsers display a security warning, which deters users and increases bounce rate. --- # Automotive Markets: Corporate Branding URL: https://www.reflect-media.com/en/case-studies/automotive-markets Locale: en Kind: case-study Client: Automotive Markets Year: 2022 Industry: Automotive > Corporate design and branding for Automotive Markets — a bold, geometric brand identity system for a company operating in the automotive industry, built. ## Challenge The automotive sector has a visual language all its own — geometric precision, minimal decoration, and a sense of forward motion that communicates performance without screaming it. Getting that register right requires understanding both the industry's conventions and the specific point where this brand needs to differ from its competitors. The identity also had to be genuinely flexible: working at the small scale of a business card icon, the medium scale of a letterhead, and the large scale of signage or vehicle graphics — all without losing coherence or impact. ## Solution The AM monogram is the core of the identity — a geometric mark that fuses the letters A and M into a single, precisely constructed form. The angular peak of the A creates a forward-pointing diagonal that gives the mark direction and energy; the M grounds it with stability and solidity. The result reads immediately as a professional, automotive-sector mark without borrowing from the generic visual vocabulary of the industry. The palette is executed in near-black with white — no colour needed. The geometry and the proportions do the work. The wordmark in clean sans-serif reinforces the brand's contemporary positioning, and the stationery suite deploys the identity with consistent confidence across every standard business touchpoint. ## Our Services - **Logo Design:** A geometric AM monogram built for the automotive sector — precise, directional, and versatile from icon to large format - **Corporate Design:** Complete visual identity system with typography, colour, and layout guidelines for consistent brand application - **Brand System:** Design assets and application rules enabling the brand to be used consistently across all contexts ## Result A brand identity that positions Automotive Markets with the authority the sector demands — precise, bold, and built to last. The AM mark works wherever the business needs it to, and the complete stationery system ensures every communication reflects the brand's standards. --- # Bethel bewegt: Employee Fitness Challenge Platform URL: https://www.reflect-media.com/en/case-studies/bethel-bewegt Locale: en Kind: case-study Client: Bethel Year: 2021 Industry: Non-profit / Social Welfare > UI/UX design and web development for Bethel's internal movement campaign — a digital platform where employees log activities, compete in teams, and track. ## Challenge Building a fitness challenge platform for a large, distributed workforce is a different problem from building a public-facing website. The platform had to handle individual activity logging, team formation across disparate divisions, real-time leaderboard calculation, and profile management — all within a system simple enough that employees from every level would actually use it. The campaign also needed to feel genuinely energetic, not like a corporate HR exercise. The UI had to motivate participation, make progress visible in satisfying ways, and support a sense of friendly competition without alienating users who were new to tracking their physical activity. Accessibility was non-negotiable: the platform serves an organisation whose own values are built around inclusion, and whose staff includes people with varying digital confidence. ## Solution We designed the platform around three core user journeys: log an activity, check the leaderboard, and see your team's progress. Everything else is secondary. The dashboard puts the essentials front and centre — personal stats, team ranking, recent activity — with a visual hierarchy that rewards engagement without punishing those just getting started. The activity logging flow is deliberately minimal: choose a sport, enter time and distance, done. The profile system lets employees connect to their specific Bethel division and team, feeding the multi-level leaderboard structure that makes the competition interesting at every scale. The visual design draws on Bethel's campaign identity — vibrant, colourful, and human — adapted into a dark-themed UI that reads cleanly on screen and gives the platform its own distinct energy. ## Our Services - **UI/UX Design:** User-centred design for a complex multi-role platform, simplified to the point where every employee can participate without friction - **Web Development:** Performant, accessible web application with real-time data, responsive across all devices - **Campaign Design:** Visual adaptation of Bethel's campaign identity into a digital product with its own coherent look and feel ## Result A digital platform that successfully translated a health campaign into an engaging, competitive experience for a large and diverse workforce. The work earned a **German Design Award Honorable Mention** — recognition not just of the design quality, but of the challenge of building something that serves an organisation as complex as Bethel with clarity and care. The platform ran the campaign, tracked the collective kilometres, and gave thousands of employees a reason to lace up their shoes. --- # Caja von Steinling: Luxury Dog Accessories Branding URL: https://www.reflect-media.com/en/case-studies/caja-von-steinling Locale: en Kind: case-study Client: Caja von Steinling Year: 2024 Industry: Luxury Pet Accessories > Complete brand development for a luxury dog accessories label — a logo engineered for leather embossing, a WordPress e-commerce site, and full print. ## Challenge The label needed a brand identity that could carry genuine luxury credentials across a wide range of contexts. The logo had to work at billboard scale and as a blind emboss on a 12mm collar tag — two completely different technical demands with zero tolerance for compromise. Beyond the logo, Caja needed a website that would position the products as the premium objects they are, and print materials that could stand next to the physical product without feeling inferior. Everything had to speak to an audience that can tell the difference between craft and simulation. ## Solution We built the identity around the CAJA wordmark — a custom lettering with precise proportions engineered for both digital display and the specific challenges of leather tooling. The geometric letterforms hold their character at any scale, and the minimal mark reduces to a single embossable element for product application. The brand palette — deep forest green, warm sage, and near-black — gives the identity a quiet luxury register without defaulting to the generic gold-and-cream codes of the category. Typography is set in Bebas Neue Pro throughout, reinforcing the brand's precise, unapologetic character. The WordPress website puts the products first: full-bleed lifestyle photography, clean navigation, and a tone of voice as confident as the product itself. Responsive design ensures the same premium experience on mobile, where most customers first encounter the brand. ## Our Services - **Logo Design:** Custom wordmark engineered for maximum versatility — from digital touchpoints to leather embossing, legible at any scale - **Brand Identity:** Complete visual system covering colour, typography, and layout principles for consistent brand expression - **WordPress Website:** E-commerce and brand presence built to match the luxury positioning of the product - **Print Design:** Business cards, letterhead, packaging, and marketing materials delivering consistent brand quality at every touchpoint ## Result A brand identity that earns the word luxury — not through decoration, but through precision and restraint. The CAJA visual system holds together across every application, from the website to the collar tag, and the website gives the products the editorial context they deserve. Caja von Steinling launched with a complete brand ready to grow — one that sets the visual standard for premium dog accessories in the German market. --- # Cessaro: Web & Print for Luxury Speakers URL: https://www.reflect-media.com/en/case-studies/cessaro Locale: en Kind: case-study Client: Cessaro Horn Acoustics Year: 2022 Industry: Luxury Audio / Hi-Fi > Web and print design for Cessaro Horn Acoustics — handcrafted horn loudspeakers of extraordinary scale and quality. A visual presence as precise. ## Challenge Designing for a product of this calibre is a specific creative challenge. The speaker itself is the visual centrepiece — designed with drama, precision, and an artisan quality that photography can communicate only partially. Everything around the product must support this impression without competing with it. The audience knows everything. They have read every review, attended every show, heard every competing system. A website or brochure that feels even slightly compromised will signal that the brand behind it might be too. The visual environment had to be as serious and as well-made as the product. The range also required comprehensive communication: multiple product families, deep technical specifications, customisation options (horn colours, cabinet finishes, wood veneers), and a global sales and service network — all organised without complexity becoming confusion. ## Solution The website was designed around the principle that photography is primary, everything else is secondary. The layout gives each product system the space and scale it deserves — full-bleed imagery, sparse typography, and navigation that stays out of the way. The slogan "Listen and you will hear" sets the tone: confident, direct, and completely secure in the product. The product brochures for OPUS-I and ALPHA III follow the same logic — dramatic product photography on the cover, precise technical specification within. These are not marketing documents; they are technical communications for an audience that reads every line. The product catalogue brings the full Cessaro range together in a hardcover format befitting the brand — from introduction text through individual system spreads, customisation options, and electronics, presented with the quiet authority of a well-produced object. ## Our Services - **Webdesign:** A premium web presence that showcases each product system at the scale and resolution the photography deserves - **Print Design:** Product brochures and comprehensive hardcover catalogue for the complete Cessaro range - **UI/UX Design:** Navigation and information architecture for a complex, multi-family product range presented without friction ## Result A digital and print presence that matches the ambition of Cessaro's products — built with the same care, precision, and refusal to compromise that goes into every speaker they make. The catalogue in particular is an object worthy of the brand: the kind of thing you keep on the shelf because it deserves to be there. --- # Cholomon: Webshop for a Greek Specialty Food Importer URL: https://www.reflect-media.com/en/case-studies/cholomon Locale: en Kind: case-study Client: Cholomon Gießen Year: 2019 Industry: Food & Beverage / Specialty Retail > Webshop design and development for Cholomon — a Gießen-based importer of authentic Greek specialty foods from the Chalkidiki region. ## Challenge Selling over 170 specialty food products online requires a shop that can handle real complexity: categories, filters, product variations, bundle promotions, and upsell logic — all while feeling warm, appetising, and trustworthy. The brand also had a story to tell. Cholomon is not just a product name — it is a place, a mountain, a region, and a philosophy of small-producer authenticity. The website needed to carry that story in a way that added meaning to every purchase, rather than presenting the products as just another online catalogue. The audience includes German consumers with an interest in authentic Mediterranean food — a market that rewards beautiful product presentation, clear provenance, and easy shopping. ## Solution We built a WooCommerce shop designed around natural food photography and a clean, readable structure. The homepage showcases promotional bundles through stacked hero banners — organic herb discounts, pasta combo packs, wine bundles — giving customers immediate value signals on arrival. Category navigation is layered and logical: products can be explored by type (Olivenöl & Co., Weine, Köstlichkeiten, Tee & Gewürze, Nudeln & Soßen, Trüffel und Spezialitäten) and by manufacturer (Gaea Landschaft, Naturkind, Laopetra, etc.), with a price range filter. Individual product pages lead with strong photography and detailed descriptions that emphasise origin and production method. The brand story section — "Berg Cholomon und die Region" — grounds the shopping experience in the landscape of Chalkidiki, with calligraphic type and nature photography that communicates why the provenance of these products matters. The mobile view is fully optimised: all sections, navigation, promotions, and categories are clear and tappable on smartphone screens. ## Our Services - **Webshop Design:** WooCommerce shop design for 170+ products across multiple food categories - **UI/UX Design:** Category navigation, product detail layout, and cross-sell logic for a complex food speciality assortment - **Web Development:** Full e-commerce implementation with filters, bundles, promotions, and responsive mobile experience ## Result A shop that makes Greek specialty food as appealing online as it is in a physical Gießen store. Customers can browse over 170 products, discover new producers, and understand the Chalkidiki provenance that makes Cholomon's range worth choosing over supermarket alternatives. --- # Der rosarote Elefant: Branding & Website URL: https://www.reflect-media.com/en/case-studies/der-rosarote-elefant Locale: en Kind: case-study Client: der rosarote Elefant Year: 2022 Industry: Business Coaching / Psychology > Corporate design, branding, and website for Der rosarote Elefant — a coaching practice for executives needing an identity as memorable as its name. ## Challenge The challenge was to design an identity that could hold two things simultaneously: the scientific credibility a practice needs to be trusted by senior executives, and the warmth and approachability that makes people actually reach out. Most psychology practices err heavily in one direction — either clinical and cold, or soft and unstructured. This brief demanded both. The name is playful; the service is serious. The identity had to bridge that gap without compromise. The visual system also needed to work across an unusually wide application range — from a formal business letterhead to a leather keychain — without losing coherence. ## Solution We built the identity around an abstract icon mark constructed from vertical bars — a form that reads simultaneously as a stylised figure, a row of people, and a bar chart. It's geometric and precise, but it has warmth. The pink draws from the brand name directly, used with restraint so it feels intentional rather than decorative. The typography is set in Azo Sans throughout — a typeface with a quiet authority and contemporary humanist character that gives the brand the right register across all contexts. The website was designed to speak directly to its audience: senior leaders who are time-poor, sceptical of jargon, and need to immediately understand what they're getting and why it matters. The hero is confident and direct. The service pages are clear and structured. The contact path is short. ## Our Services - **Corporate Design:** Complete visual identity system anchored in the brand's psychological positioning — rigorous without being cold - **Logo Design:** A distinctive geometric mark that works from business card to leather emboss, communicating both precision and humanity - **Webdesign:** A site structured around the client's decision journey — from first impression to appointment booking in as few steps as possible - **UI/UX Design:** Interface design that prioritises clarity and confidence, removing every barrier between visitor and contact ## Result A brand identity that earns its German Design Award Special Mention — not because it follows design conventions, but because it solves a genuinely difficult communication challenge with intelligence and precision. Der rosarote Elefant now has an identity as memorable as its name, and a website that converts professional curiosity into client conversations. The system scales from digital presence to physical merchandise without losing its voice. --- # ERGO: Digital Insurance Contract Platform URL: https://www.reflect-media.com/en/case-studies/ergo-online-vertragsabschluesse Locale: en Kind: case-study Client: ERGO Group AG Year: 2022 – ongoing Industry: Insurance & Financial Services > Microservices platform for one of Europe's largest insurance groups — enabling fully digital insurance contract completion with Java Spring Boot and. ## Challenge The ERGO Group is one of the largest insurance groups in Germany and Europe. The company needed a software solution to automate online insurance contract completions — enabling customers to complete insurance contracts entirely digitally, from quote to signature. The solution had to integrate with ERGO's existing systems while providing a modern, user-friendly frontend that guides customers through complex insurance products. ## Our Services We developed a comprehensive automation platform: - **Backend:** Java Spring Boot microservices architecture for scalability and maintainability - **Frontend:** Reactive Vue.js interface for a smooth customer experience - **CMS Integration:** Drupal for independent content management by specialist departments - **API Layer:** RESTful APIs connecting all system components - **DevOps:** Continuous integration and deployment pipelines ## Solution The solution is based on a modern microservices architecture with Java Spring Boot in the backend and Vue.js in the frontend. Drupal CMS was integrated to enable specialist departments to independently manage content — product descriptions, terms, and informational pages. The modular architecture allows for rapid extension with new insurance products and contract types. Each microservice handles a specific domain (quotes, contracts, payments, notifications), ensuring maintainability and independent scaling. ## Result A scalable automation platform for digital insurance contract completions that is continuously developed. The platform enables ERGO customers to complete insurance contracts fully online, significantly reducing processing time and improving customer satisfaction. --- # Federmeister: Branding & Web Platform URL: https://www.reflect-media.com/en/case-studies/federmeister Locale: en Kind: case-study Client: Federmeister Year: 2021 Industry: Construction / Trades > Logo design, UI/UX design, and web development for Federmeister — a digital-first facade renovation service with an online quote configurator, service. ## Challenge Building trust in a trades-adjacent service requires a very specific visual register. The brand had to feel professional and reliable — not slick or corporate — and had to communicate that the company knows its subject matter deeply. In a category where homeowners are often anxious about complexity and cost, the design had to reduce friction from first impression to contact. The website needed to do more than present information. It had to actively convert visitors: guiding them through service options, explaining the process, surfacing funding information, and ultimately routing them into the quote configurator without losing them along the way. ## Solution The brand identity anchors on the Federmeister wordmark and the bold F logomark — built with a geometric precision that communicates trade expertise, accented in orange (energy, action) and grounded in professional green. Source Sans Pro Black Italic runs throughout as the brand voice: direct, confident, and in motion. The website is structured as a conversion engine. The homepage establishes trust quickly and offers two clear entry paths — repair or new build. The configurator walks visitors through a 13-step process that captures everything needed for a meaningful quote, presented in a format that feels simple even as it gathers complex data. Service content pages cover every aspect of facade work in depth — painting, insulation, cleaning, repair — answering the questions visitors bring before they've thought to ask them. The location finder ensures the platform works at a local level, connecting each visitor with nearby partners. ## Our Services - **Logo Design:** A direct, professional mark built for a trades-adjacent context — authoritative and energetic without pretension - **Webdesign:** A conversion-focused website that guides visitors from awareness to configured quote request - **UI/UX Design:** Information architecture, configurator UX, and service content structure designed around the homeowner's actual decision journey ## Result A brand and website that together make facade renovation feel approachable — giving visitors the confidence to start the process and the tools to complete it. Federmeister launched with a digital presence that stands out from the generic landscape of trades websites and actively generates the qualified leads the business needs to grow. --- # Feed Me Daily: Logo & Brand Relaunch URL: https://www.reflect-media.com/en/case-studies/feed-me-daily Locale: en Kind: case-study Client: Feed Me Daily Year: 2022 Industry: Food & Lifestyle > Logo relaunch for Feed Me Daily — a bold, food-forward brand identity built for the digital-first world of food content creators. Character that scales. ## Challenge In the food content space, personality is the product. Generic, corporate-feeling design destroys the credibility that food creators work hard to build — an audience that follows you for your recipes will not forgive a logo that looks like a franchise. The identity had to feel genuinely character-led: bold, a little irreverent, and immediately shareable. At the same time, the brand needed to be more than just a social media presence. Feed Me Daily was growing into merchandise, product collaborations, and physical retail contexts — all of which demand a mark that holds together in formats well beyond an Instagram profile. ## Solution We designed a logo around the inherent geometry of the name itself: three staggered banner forms that stack and shift like a meal being plated. The teal calendar icon embedded at the top — the "daily" in Feed Me Daily — locks in the brand's routine-focused identity, while the fork and knife cutouts anchoring each end make the food connection unmistakable. The result is a wordmark with genuine energy. It's bold enough to read at thumbnail scale, distinctive enough to own its space in a feed, and structured enough to engrave cleanly on a cutting board. The colour palette is deliberately restrained: teal, near-black, and mid-grey. The contrast does the work. The teal is the accent; the black is the authority; the grey gives the system flexibility for neutral applications. ## Our Services - **Logo Relaunch:** A new wordmark with genuine character — built for digital-first visibility and flexible enough for physical product applications - **Corporate Design:** A visual identity system that gives the brand consistency across its diverse range of digital and physical touchpoints ## Result A brand identity that feeds the audience as well as the content does. The new Feed Me Daily mark is immediately recognisable, translates across every context from Reels to retail, and gives the brand a visual identity as full of personality as its name. --- # Feel Good Beauty: Brand Identity Design URL: https://www.reflect-media.com/en/case-studies/feel-good-beauty Locale: en Kind: case-study Client: Feel Good Beauty Year: 2022 Industry: Beauty / Wellness > Logo, corporate design, and complete print suite for Feel Good Beauty by Irina Huber — a beauty treatment studio offering aesthetic services in a warm. ## Challenge A beauty treatment studio sits in a genuinely difficult design space. Too clinical and it feels cold; too decorative and it loses credibility. Too trendy and it dates; too conservative and it blends into the background of a crowded market. The design had to find the register that was simultaneously personal, professional, warm, and timeless. The full print requirement added complexity: the same brand had to hold together across a formal treatment brochure listing medical aesthetic services, a hand-delivered gift voucher, a loyalty stamp card, wax-sealed envelopes, and a branded tote bag — all of which send different signals and serve different moments. ## Solution The logo is built around an elegant serif wordmark and a hand-drawn dandelion icon — a detail that makes the mark genuinely memorable without being decorative for its own sake. The dandelion brings nature, lightness, and the idea of a single breath of air changing everything. It is an illustration, but drawn with enough precision that it reads as intentional, not whimsical. The palette holds to a near-monochrome of warm grey and off-white, with blush tones entering through photography and print materials. The overall effect is calm, clean, and personal — a studio you would trust with your face. The print suite was designed as a complete system: each piece — brochure, voucher, loyalty card, envelope, cup — reflects the same visual language at a scale and format appropriate to its use. ## Our Services - **Logo Relaunch:** A distinctive wordmark and dandelion icon that communicates warmth, femininity, and professional care - **Rebranding:** A refreshed visual system bringing the brand up to the standard of the treatments the studio offers - **Print Design:** Brochure, gift voucher, loyalty card, stationery, and branded merchandise — designed as a coherent suite ## Result A brand identity that genuinely feels good — as warm, considered, and personal as the studio itself. Feel Good Beauty by Irina Huber now has a complete brand world that supports every client interaction, from the first printed brochure to the espresso cup waiting in the treatment room. --- # Hasacom: Change Management Branding URL: https://www.reflect-media.com/en/case-studies/hasacom Locale: en Kind: case-study Client: Hasacom Year: 2023 Industry: Business Coaching / Change Management > Complete brand identity for Hasacom — a change management and business coaching firm whose tagline says it all: 'Rebels for change & success.' Logo. ## Challenge Change management is a space filled with generic corporate-speak and bland visual identities. Hasacom wanted something that actually embodied their philosophy — a brand that felt alive, distinctive, and confident enough to say something. The logo had to work at every scale, carry real character, and speak equally well in professional and human contexts. The target audience spans corporate decision-makers, individual leaders, and teams in transition — a wide range that demands a brand capable of warmth and authority in equal measure. ## Solution The key was the mark: a stylised bird in flight, constructed from constellation-like dots and connecting lines. The metaphor lands intuitively — navigation, perspective, freedom, forward movement. The icon is distinctive without being decorative, and the construction from geometric nodes gives it a structured, precise quality that feels intentional rather than whimsical. The wordmark pairs with the mark seamlessly — the "o" in hasacom replaced by a warm gold dot that echoes the node points of the constellation, creating a subtle unity across the identity. The colour palette anchors the brand in warmth and credibility: a rich warm gold, near-black, whisper white, and cool grey. The typography — DIN 2014 in three weights — adds clarity and professionalism without cold distance. The identity was applied across all practical touchpoints: email signatures, office signage, merchandise, and stationery. ## Our Services - **Logo Design:** The constellation-bird mark and wordmark — distinctive, scalable, and conceptually sharp - **Design Concept:** Colour palette, typography, and design principles that establish a coherent visual language across all media - **Corporate Design:** Application design for digital (email signature) and physical (signage, print, merchandise) touchpoints ## Result A brand identity that lives up to the tagline. The constellation-bird is immediately recognisable and genuinely meaningful — it says something about navigation, transformation, and seeing things from a higher vantage point. Applied to everything from frosted glass to merchandise, the hasacom brand looks the part in any context. --- # Hörtheatrale: Festival Print Design URL: https://www.reflect-media.com/en/case-studies/hoertheatrale Locale: en Kind: case-study Client: Hörtheatrale Year: 2022 Industry: Culture / Live Theatre / Events > Print design for the Hörtheatrale Marburg — a live audio theatre festival performing classic and original works open air at the Waldbühne am. ## Challenge The festival needed print materials that could carry real dramatic weight. These weren't posters for a film or a concert — they were for an art form built on voice and imagination, where the visual design had to create atmosphere and anticipation without showing anything that would happen on stage. Each production had its own identity — horror, noir crime, children's literature, Latin folk music — and the design had to create individual character for each event poster while maintaining a coherent festival system. The materials also had to work at every scale, from a compact programme booklet to a weathered outdoor notice board. ## Solution We developed a typographic print system built on bold contrast, black-and-white photography, and a clear grid. The Hörtheatrale's distinctive red logomark anchors every piece, providing immediate recognition in any context. Each production gets its own poster with a dramatic black-and-white image drawn from the world of the story — a Victorian performer for Dr. Jekyll & Mr. Hyde, a noir actress for Die Mausefalle — set against a stark typographic layout. The headline fonts do the dramatic work: bold, editorial, direct. The seasonal programme booklet brings the complete summer series together in a landscape format, opening with a welcome text and moving through each production with photographs, descriptions, cast lists, and dates. The back matter includes the full team credits and all practical venue and ticket information. ## Our Services - **Print Design:** Individual event posters for each production in the summer programme - **Event Design:** Seasonal programme booklet with full production listings, cast details, and venue information - **Design Concept:** A unified typographic and visual system that holds the festival together across all print formats ## Result A print identity that does what good theatre design should: create excitement, communicate character, and make you want to be there. The Hörtheatrale's summer 2022 materials announced a serious cultural programme with the confidence and visual energy the performances deserved. --- # IoT System for Mobile LED Traffic Warning Systems URL: https://www.reflect-media.com/en/case-studies/iot-stauwarnanlagen Locale: en Kind: case-study Client: FERCHAU Engineering GmbH Year: 2020 – ongoing Industry: Engineering & Technology / IoT > Scalable IoT platform with Spring Boot microservices, Apache Kafka, and MQTT — revolutionising traffic safety management from days to hours. ## Challenge A manufacturer of innovative mobile LED traffic warning systems for road construction faced a decisive challenge: controlling and monitoring systems distributed across many kilometres was manual and laborious. Every new construction site required individual code adjustments for the system's switching logic — a time-intensive and error-prone process. The vision was ambitious: a fully connected IoT system enabling planning, configuration, and monitoring of all mobile units through a central web application. The solution had to be not only technically sophisticated but also guarantee highest availability — after all, traffic safety is at stake. ## Our Services We developed a scalable IoT system based on a Spring Boot microservice architecture: - **Event-Driven Architecture:** Apache Kafka for inter-service communication - **Real-Time Communication:** MQTT for live communication with mobile field units - **Cloud Infrastructure:** AWS for high availability and automatic scaling - **Web Application:** Drag & drop configuration of warning system switching logic — no code required - **Field Operations:** Direct traffic information switching for police and emergency services ## Solution The heart of the system is an event-driven architecture with Apache Kafka for communication between services and MQTT for real-time communication with mobile units in the field. The cloud infrastructure on AWS guarantees high availability and automatic scaling. The web application enables engineers to graphically plan new construction sites and configure the switching logic of warning systems via drag & drop — without writing a single line of code. For emergency services such as police, there is the ability to directly switch traffic information for long road sections on site. ## Result The impact is enormous: planning and commissioning of new construction sites was reduced from days to hours. The system revolutionised the market for mobile traffic warning systems in Germany and is now used nationwide. A highly available, scalable IoT system that digitises the entire workflow from construction site planning to live control. --- # Klimaschutz-Planer: Municipal Climate Tool URL: https://www.reflect-media.com/en/case-studies/klimaschutz-planer Locale: en Kind: case-study Client: Klima-Bündnis Services GmbH Year: 2014 – ongoing Industry: Public Sector / Environmental Planning > Nationwide online platform for municipal energy and CO2 balancing — used by thousands of German municipalities for standardised climate protection. ## Challenge Climate protection begins at the municipal level — but many of Germany's approximately 13,000 municipalities and districts faced the challenge of developing and implementing climate protection concepts without standardised tools. Klima-Bündnis e.V. initiated the "Klimaschutz-Planer" project to motivate municipalities to become active in climate protection on a large scale and to systematically support them in developing and implementing climate protection concepts. ## Our Services We planned, conceptualised, and developed a comprehensive online platform with three core modules: 1. **Energy & CO2 Balancing:** Systematic capture and analysis of municipal energy consumption and CO2 emissions by sector (households, industry, transport) 2. **Potential Analysis:** Identification and quantification of local potentials for renewable energy and energy efficiency 3. **Benchmarking:** Comparison with similarly sized municipalities to motivate through competition and showcase best practices Additionally: - Custom front and backend development in PHP, JavaScript, jQuery - Java components for complex calculations - MySQL database for efficient large-scale data processing - OpenStreetMap integration with additional layers for geographic data visualisation ## Solution The platform is based on scientifically agreed calculation methods, enabling standardised, comparable capture and assessment of municipal climate protection activities. The design follows the CI guidelines of Klima-Bündnis and offers intuitive user guidance for municipal administration staff who are often not IT specialists. The OpenStreetMap integration with GIS layers provides powerful geographic data visualisation, helping municipalities identify spatial patterns in energy consumption and renewable energy potential. ## Result A nationwide platform that supports thousands of municipalities in their climate protection work. The Klimaschutz-Planer has become the standard instrument for municipal climate protection concepts in Germany and makes a measurable contribution to the energy transition. --- # Kunstmuseum Marburg: Brand Relaunch URL: https://www.reflect-media.com/en/case-studies/kunstmuseum-marburg Locale: en Kind: case-study Client: Kunstmuseum Marburg Year: 2019 Industry: Culture / Museum > Complete logo relaunch and rebranding for the Kunstmuseum Marburg — a timeless visual identity for one of Germany's key university art museums. ## Challenge For an institution of this calibre, the visual identity was quietly falling behind. The existing brand no longer reflected the museum's standing — neither its scholarly depth nor its contemporary ambitions. The brief was clear in intent, but genuinely difficult to execute: create a new visual identity that feels timeless without being backward-looking, and approachable without being superficial. The identity also had to perform across an unusually wide range of applications. A brand that works on a scholarly catalogue must equally hold its own on a tote bag or a digital banner. Getting that range right — without it feeling like a compromise — was the core design challenge. ## Solution We started where the museum itself starts: with the work. Rather than imposing a visual language from the outside, we looked for what was already latent in the museum's character — precision, depth, a certain quietness that commands attention. The result is a mark that earns its authority through restraint. Clean geometry, considered proportions, and a typographic system that scales from exhibition signage down to letterhead without losing its presence. The colour palette was kept deliberately narrow — giving the identity room to breathe and ensuring the art always remains the focal point. The design system was built to be used by the museum's own team without constant agency involvement. That meant robust templates, clear usage guidelines, and a visual logic that's easy to follow even for non-designers. ## Our Services - **Logo Relaunch:** A new mark built for longevity — precise enough for an academic audience, open enough for the general public, and recognisable at every scale - **Corporate Design:** A complete design system covering typography, colour, layout principles, and visual language — documented for consistent in-house use - **Print Design:** Museum publications, stationery, invitations, and exhibition materials that position the institution with quiet confidence - **Merchandise Design:** A range of museum shop items that translate the brand identity into objects people actually want to own ## Result The new identity launched to strong internal reception — and was subsequently recognised with a **German Design Award Honorable Mention**, one of the most respected design accolades in Germany. More importantly, the museum now has a visual foundation it can grow into. The brand works. It holds together across contexts, communicates the right things to the right people, and — crucially — it doesn't need to be redesigned every few years. What we learned: cultural institutions often carry more creative ambition than they're given credit for. The Kunstmuseum team knew exactly what they wanted; our job was to find the form it should take. The best brand work happens when the client is a genuine collaborator — and this was that kind of project. --- # Landgrafenschloss: Exhibition Design URL: https://www.reflect-media.com/en/case-studies/landgrafenschloss-marburg Locale: en Kind: case-study Client: Landgrafenschloss Marburg Year: 2022 Industry: Culture / Heritage / Tourism > Bilingual exhibition design and signage system for the Landgrafenschloss Marburg — creating a complete visitor communication system for two permanent. ## Challenge Exhibition design inside a listed medieval building is as much about restraint as it is about communication. Every panel, label, and directional sign must earn its place. In a space of this quality, the wrong material choice, the wrong scale, or the wrong typographic tone can diminish the very thing you are trying to explain. The brief demanded a system that was genuinely bilingual (German and English with full parity), accessible to visitors of all ages and language backgrounds, and capable of holding together across the castle's dramatically varied spaces — from grand vaulted halls to narrow Gothic corridors. Object labels for a diverse collection of artefacts — medieval ceramics, historical documents, artworks, and curiosities — had to follow a consistent format while carrying widely varying amounts of information. ## Solution We designed a text-led system built on structural clarity and extreme typographic rigour. The hierarchy is unambiguous: exhibition title, section introduction, body text, and object caption each occupy a distinct visual register. The typeface choices — clean, contemporary, highly legible — read in the castle's ambient light without competing with the stonework or the artefacts. Every panel is bilingual throughout: German and English appear in a consistent parallel format, never as an afterthought. The wayfinding system reduces navigation to its simplest possible form, using directional arrows and exhibition names that visitors understand at a glance. The palette is deliberate restraint: white, black, and the paper tones of the materials themselves. Colour is introduced only through historical imagery and original artefacts — never imposed by the design. ## Our Services - **Exhibition Design:** Text panels, section introductions, and conceptual communication for two complete permanent exhibitions - **Signage Design:** Bilingual wayfinding that routes visitors through the castle's complex spatial sequence with absolute clarity - **Print Design:** Artefact labels, supporting print materials, and exhibition take-away formats ## Result An exhibition communication system that has become invisible in the best sense — it serves the visitor without drawing attention to itself, and it lets the castle and its collection do the work. The Landgrafenschloss now has a design language it can extend and maintain consistently across future exhibitions, new acquisitions, and changing displays. The system works because it never competes with what it is communicating. --- # Lehrer-Online: Education Platform URL: https://www.reflect-media.com/en/case-studies/lehrer-online Locale: en Kind: case-study Client: Eduversum GmbH Year: 2020 – ongoing Industry: Education & E-Learning > Continuous development and maintenance of Germany's leading education platform for teachers — 100,000+ teaching materials, 250,000+ community members. ## Challenge Lehrer-Online is not just another education website — it is the largest digital platform for teaching professionals in the German-speaking world. Over 250,000 community members, 100,000+ teaching materials across every subject and school type, 1,000+ training courses, partner portals, an AI-powered Classroom Manager, and a full e-commerce shop for premium content: the technical complexity grows with the platform. The challenge since 2020: keeping this grown platform stable, performant and extensible — while simultaneously adding new features like the Classroom Manager with AI assistance, badge certification for training courses, and new partner portals. All on a Typo3 foundation that must keep pace with the growth. ## Our Services Since 2020 we are responsible for the continuous technical development and operation: - **Typo3 development:** Custom PHP extensions for subject- and school-type-specific content management, didactic metadata and curriculum references — across all school types from primary to vocational education - **Shopware e-commerce:** Full integration of the premium shop with automatic content unlocking after purchase, membership management and payment processing - **Tool development:** Technical foundation for the Classroom Manager (including AI assistance), calculator tools, material exchange and badge certification for digital self-learning courses - **Partner portals:** Technical implementation of specialised themed worlds including school law, puberty education and vocational training - **Performance & operations:** Continuous optimisation for peak load periods — thousands of concurrent teachers at the end of holidays and start of the school year - **Security:** Regular updates, monitoring and hardening of the publicly accessible platform ## Result One of the most widely used education platforms in Germany — running stably for years. The combination of free teaching materials, certified training courses, AI-powered tools and an integrated premium shop makes Lehrer-Online a complete digital workspace for teachers. We keep the technical foundation clean, scalable and up to date. --- # Milk the Sun: Solar PV Marketplace URL: https://www.reflect-media.com/en/case-studies/milk-the-sun Locale: en Kind: case-study Client: Milk the Sun GmbH Year: 2015 Industry: Energy & Sustainability > Complete relaunch of Europe's leading online marketplace for photovoltaic systems — multilingual Drupal portal with Symfony backend API in 5 languages. ## Challenge Milk the Sun operates one of Europe's leading online marketplaces for photovoltaic systems. The platform connects buyers and sellers, covering the entire lifecycle of a PV system — from initial information through trading to document management. With growing international business, the old platform reached its limits. The task was clear: a complete relaunch of milkthesun.com with a fundamental visual overhaul and expanded infrastructure, information provision, and automated data exchange capabilities — all in 5 languages for European markets. ## Our Services We planned, conceptualised, and developed a comprehensive online portal on the Drupal CMS: - **Frontend & Content Management:** Drupal-based with custom module development - **Backend API:** Symfony PHP framework for all business processes - **Multilingual Architecture:** Full support for 5 European languages - **User Management:** Personalised cockpit areas for buyers and sellers - **Hosting Infrastructure:** Separate test and staging instances for independent country-specific releases - **SEO & Content Marketing:** Country-specific WordPress blogs in all 5 languages ## Solution The architecture combines Drupal for frontend and content management with a robust Symfony backend API. All business processes run through the self-developed API: system search with extensive filters, creation and management of new PV systems, sophisticated user management with personalised dashboards, and comprehensive document handling. Custom Drupal modules were developed to map the complex marketplace requirements. An extensive information section about photovoltaics and an automated newsletter system complete the offering. ## Result A scalable, multilingual marketplace that has been successfully operational since 2015 and is continuously developed. The platform enables efficient cross-border trading of photovoltaic systems, contributing to the energy transition. --- # NewMark: Financial PR Website Relaunch URL: https://www.reflect-media.com/en/case-studies/newmark Locale: en Kind: case-study Client: NewMark Year: 2024 Industry: Financial PR / Communications > Full web design and development for NewMark Finanzkommunikation GmbH — a leading German PR agency for asset managers, investment funds, and financial. ## Challenge In January 2024, NewMark launched a new logo and began the new year as a repositioned brand. They needed a website to match — one that communicated financial expertise and institutional credibility while feeling genuinely modern, dynamic, and forward-looking. The brief called for motion design and video integration: the site needed to feel alive, to show rather than just tell, and to make a strong impression on a sophisticated audience of asset managers, institutional investors, and corporate communicators. It also had to serve practical content needs: a regularly updated blog, a careers section attractive enough to recruit in a competitive Frankfurt market, and a bilingual (DE/EN) architecture for international clients and partners. ## Solution The design centres on a bold, dark-blue visual identity with yellow accent lines — confident, financial, and unmistakably NewMark. The homepage opens with an aerial Frankfurt skyline hero and the campaign line "Neue Zeichen Setzen!" — making a statement about both the brand's relaunch and its core proposition as a financial communications agency. Sections flow from company introduction and purpose statement, through the six service pillars (Financial Communications, Reputation Management, Public Affairs, Marketing & Sales Support, Digital & Social Media, and PR), to team photography, client logos, the 'NewMark und der Finanzplatz Frankfurt' brand story, and a strong contact CTA. The agency blog 'Im Fokus' is built as a proper content hub — article cards with category tagging, photography, and regular updates on financial communications, PR strategy, and market news. Navigation uses a distinctive circular flyout panel that opens over the page — a memorable interaction that feels as distinctive as the brand. The full experience is built responsively for mobile: pill-button careers sections, lifestyle photography of the site in use, and video content woven naturally into the page structure. ## Our Services - **Web Design:** Bold, bilingual visual design with motion transitions, circular navigation, and confident dark-blue and yellow brand palette - **Web Development:** Fast, performant multilingual website built for a professional financial services audience - **Video Integration:** Brand video content integrated into the page experience without sacrificing load performance - **Motion Design:** Animated section entries, hover states, and micro-interactions that give the site energy and precision ## Result A 2024 website relaunch that gives NewMark the digital presence their position as Germany's leading financial PR agency demands. The site sets new benchmarks — exactly what the brand promised. --- # Parkett Hinterseer: Rebranding a 120-Year Legacy URL: https://www.reflect-media.com/en/case-studies/parkett-hinterseer Locale: en Kind: case-study Client: Parkett Hinterseer GmbH Year: 2024 Industry: Retail / Premium Interior Design > Complete rebranding for Germany's leading premium parquet retailer with 28 locations — Logo, Corporate Design, Print, Packaging, and Editorial Design. ## Challenge The visual identity had simply not kept pace with the business. In a market driven by design, aesthetics, and the emotional pull of beautiful materials, Hinterseer was presenting itself in a way that no longer matched what it actually delivered. The brand felt dated — and in luxury retail, that gap between the product and its presentation is costly. The rebranding challenge was genuinely difficult: how do you modernise a brand that is defined by tradition, without losing the 120-year authority that is its most valuable asset? Wholesale reinvention would destroy what the brand had earned. Cosmetic adjustment would solve nothing. The identity also needed to scale across the full complexity of a 28-location retailer: from exterior location signage to product packaging, from campaign posters to image catalogues, from business stationery to the smallest product label. ## Solution We started with the logo — a new H monogram that traces its lineage directly from the old mark but is stripped of everything that had dated it. The geometry is precise, the proportions are considered, and the mark reads with confidence at every scale. The evolution is visible: this is recognisably Hinterseer, but future-facing. The colour palette built outward from the material world of parquet itself: warm coral as the brand accent, deep navy as the authority anchor, and a range of natural neutrals that give the system room to breathe. Bodoni Nova headlines bring the editorial weight of premium publishing; Corporate S provides the structural clarity the retail context demands. The campaign work — city lights, billboards, the image catalogue — positions Hinterseer not just as a flooring retailer, but as a brand with genuine lifestyle authority. The packaging brings the same rigour to the product experience. ## Our Services - **Logo Relaunch:** A new H monogram that connects 120 years of craft heritage to contemporary premium positioning — recognisable and evolved - **Corporate Design:** Complete design system covering typography, colour, photography direction, pattern, and icon language - **Print Design:** Full redesign of business stationery, brochures, and campaign materials, executed at premium production standard - **Packaging Design:** Product box designs that make the brand tangible from the first point of physical contact - **Editorial Design:** Large-format image catalogue and presentation materials that position parquet as a genuine design choice ## Result A brand transformation that earned the **German Design Award** — and more importantly, one that positions Hinterseer where it belongs: at the top of the German premium flooring market. The new identity holds across 28 locations, scales from outdoor billboard to product label, and gives the business a visual foundation that will serve it for the next 120 years as confidently as the last. Tradition and ambition, resolved. --- # Porta Polonica: Online Heritage Museum URL: https://www.reflect-media.com/en/case-studies/porta-polonica Locale: en Kind: case-study Client: Landschaftsverband Westfalen-Lippe (LWL) – Industriemuseum Year: 2017 – 2025 Industry: Public Sector / Cultural Heritage > Digital museum and community platform on Drupal 8 for the Documentation Centre for the Culture and History of Poles in Germany — funded by the German. ## Challenge The platform had to serve two very different but equally demanding audiences: academic researchers and archivists requiring depth, precision, and complex content relationships; and members of the Polish community in Germany who wanted a welcoming, navigable space for connection and cultural identity. Both audiences needed the content to be accessible in German and Polish, with a multilingual architecture maintained over many years of ongoing development. The content itself spans centuries and covers biography, historical events, locations, artefacts, photographs, oral testimony, and community contributions — requiring a flexible CMS that could handle complex relational content structures while remaining editable by non-technical staff. ## Solution We developed the complete digital museum on Drupal 8, designed to reflect the cultural significance of the project with an authoritative yet accessible visual language. The Atlas der Erinnerungsorte — a fully interactive map of Polish memory sites across Germany and Poland — became the centrepiece of the platform, allowing visitors to explore history geographically and by era (from before 1771 through to the present day). The Drupal architecture provides the flexibility to manage diverse content types: historical documents, eyewitness accounts, biographical entries, photographic archives, and current community contributions. The platform operates in both German and Polish, with SEO optimisation ensuring visibility for both language communities. ## Our Services - **Drupal 8 Development:** Complete platform design and build with custom content types for archive, biography, exhibitions, and community content - **UI/UX Design:** A design language reflecting the cultural weight of the project while remaining accessible and navigable for broad audiences - **SEO:** Multilingual SEO strategy for maximum visibility in German and Polish search contexts - **Ongoing Development:** Continuous feature development and maintenance since November 2017 ## Result A vibrant online museum that makes German-Polish history digitally accessible and serves as a networking platform for the Polonia in Germany. The project contributes sustainably to memorial culture and to intercultural dialogue between two of Europe's most historically connected nations. --- # Regionalfenster: E-Paper Service for Libraries URL: https://www.reflect-media.com/en/case-studies/regionalfenster Locale: en Kind: case-study Client: Deutsche Nationalbibliothek Year: 2016 – ongoing Industry: Public Sector / Cultural Heritage > Highly available Java EE web application for the German National Library — providing regional access to digital press archives with BITV 90+ accessibility. ## Challenge Around 1,200 daily newspapers are published as e-papers in Germany — and every regional legal deposit library is legally required to collect, provide access to and archive the titles from its region. Previously, publishers had to submit their e-paper editions separately to each regional library — significant logistical overhead for all parties involved. The German National Library and the Working Group of Regional Libraries (AG RB) sought a better way: a technical infrastructure combining central archiving at the DNB with legally sound, region-specific read access for each library. Additional requirements: maximum availability (downtime unacceptable), full BITV 90+ accessibility compliance, and granular access management — which title, for which library, in which time period, with how many simultaneous sessions. ## Solution Over 14 months we developed a high-availability Java EE web application meeting all requirements: - **Single submission:** Publishers deliver only to the DNB — no separate submissions to individual regional libraries - **Region-specific access:** Each library sees and opens only the titles for which it has an agreement with the publisher - **Granular permission management:** Title activation, access period and maximum parallel sessions managed centrally - **Redundant server architecture:** No single point of failure — uninterrupted continuous operation - **BITV 90+ accessibility:** All content and functions fully accessible to users with disabilities - **Responsive design:** Usable on all devices in library reading rooms ## Result Since going live in early 2018, the Service Regionale Bereitstellung has run continuously in production. Currently 777 e-paper titles are activated for participating regional libraries. Publishers fulfil their legal deposit obligation through a single submission to the DNB — not separately to every regional library. Libraries meet their statutory collection mandate without needing to operate their own archiving infrastructure. A nationwide infrastructure for Germany's digital press heritage — built for long-term operation, legal compliance and full accessibility. --- # RR Team: Tyre Specialist Branding URL: https://www.reflect-media.com/en/case-studies/rrteam Locale: en Kind: case-study Client: RR Team Laubach Year: 2021 Industry: Automotive / Tyre & Wheel Retail > Complete brand identity for RR Team GmbH Laubach — logo, corporate design guidelines, stationery suite, and print advertising templates for a professional. ## Challenge The existing brand presence did not reflect the professionalism of the service. RR Team needed a visual identity that would project competence and reliability at every touchpoint: from a local newspaper ad promoting summer tyre discounts to a branded envelope arriving in a customer's letterbox. The identity also had to be systematic and practical — easy for the team to apply across a wide range of materials, from A-format advertising sheets to stationery, without requiring design input every time. ## Solution The logo takes the RR TEAM name and gives it a distinctive visual treatment: bold, structured, and set with a characteristic 10° diagonal grid that generates both energy and precision. The claim "Service in Vollendung" establishes the service promise directly within the mark. The construction sheet specifies exact inner spacing, outer margins, and optical corrections for consistent reproduction at every scale. The colour palette centres on a strong Pantone blue (#1D71B8) — confident and automotive — paired with a cool grey and near-black. The Roboto type family, specified in multiple weights from Bold Italic through to Light, provides a versatile typographic range for headlines, subheadlines, and body copy across all brand materials. The layout system introduces a diagonal 15-column grid template with annotated Einklänker (insert) rules and a 10° angle — creating a visual logic that runs through every print format, from a full-page seasonal promotion to a DIN-long service brochure. The stationery suite and print advertising templates give the business everything needed to operate professionally from day one. ## Our Services - **Logo Design:** The RR TEAM mark with claim variant, construction specification, and spacing guidelines - **Corporate Design:** Pantone colour palette, Roboto typography system, and complete brand guidelines - **Print Design:** Business stationery suite, advertising templates, service brochure layout, and the Reifengarantie print material ## Result A complete brand identity that gives RR Team the professional visual presence their technical expertise deserves — applied systematically from letterhead to tyre promotion, and from business card to warranty brochure. --- # Satzbrand: Corporate Design for a PR Agency URL: https://www.reflect-media.com/en/case-studies/satzbrand Locale: en Kind: case-study Client: Satzbrand Kommunikation Year: 2018 Industry: PR & Communications > Modern, minimalist corporate identity and stationery for Bremen-based PR agency Satzbrand — letterhead, business cards, envelopes, and brand applications. ## Starting Point Satzbrand is a Bremen-based PR agency that sets itself apart from conventional communications firms through craftsmanship and a sociologically trained perspective. Its previous visual identity did not reflect this positioning — there was no distinctive brand mark that conveyed the agency's analytical, reduced character. ## The Task We developed a new corporate identity that translates the agency's ambition without compromise: restrained, typographically precise, and focused on the essential. At its heart sits a word-and-mark logo combining a distinctive circular symbol with a confident sans-serif wordmark. ## Execution The stationery — letterhead, business cards, envelopes, shipping tube, folder, and buttons — consistently works with black, white, and generous whitespace. Typography sets clear accents: a spaced-out, uppercase subject line deliberately breaks with classic DIN letterhead conventions and becomes a recognisable signature of the brand. Digital applications extend the same principle to mobile screens and web surfaces. ## Result A cohesive brand presence that positions Satzbrand as a modern, analytically minded PR agency and holds up consistently across every touchpoint — from the first client letter to the social media presence. --- # SDGnexus: Research Initiative Branding URL: https://www.reflect-media.com/en/case-studies/sdg-nexus Locale: en Kind: case-study Client: Justus Liebig Universität Giessen – SDGnexus Network Year: 2021 Industry: Academic Research / Sustainability > Corporate design for the SDGnexus Network at Justus Liebig University Giessen — a visual identity system for an international sustainability research. ## Challenge Designing for a network of this scope required navigating two very specific constraints. The brand had to align with the visual language of the UN Sustainable Development Goals — an internationally recognised system of 17 colours that carries enormous symbolic weight — without simply reproducing it. It also had to carry the authority of Justus Liebig University, a serious academic institution with its own established identity. At the same time, the design had to work across an enormous range of formats: research publications, conference brochures, digital communications, and physical merchandise for events in multiple countries. The identity needed to be systematisable — usable by different teams and partners without losing coherence. ## Solution The central mark is a ring of concentric arcs made from the 17 SDG colours — a visual metaphor for the network's core idea of interconnection and nexus between goals. The mark is distinctive, immediately readable, and flexible: it scales from a pin badge to a lanyard pattern to a conference stage, and it works in full colour, greyscale, and reversed. The full colour palette was derived from the UN SDG system and documented with CMYK, RGB, and HEX values for consistent reproduction in print and digital contexts globally. The welcome brochure establishes the publication template: a strong cover with full-bleed photography and co-branding (JLU, DAAD), a clear typographic grid for research content, and SDG-colour accent sections for navigating themes. Conference merchandise — pin badges in three colourways, a branded lanyard with repeating icon pattern, and a tote bag — extend the brand into the physical event space. ## Our Services - **Corporate Design:** Logo system with multiple variants, complete 18-colour SDG-derived palette, and brand application guidelines - **Print Design:** Welcome brochure, research publication templates with themed section colour coding - **Brand System:** Scalable identity designed for use by multiple network members, partner institutions, and event teams globally ## Result A professional and internationally credible visual identity that gives the SDGnexus Network a distinctive presence across research publications, conference halls, and digital channels — connecting the urgency of global sustainability work with the rigour of a major German research university. --- # STADTRADELN: Cycling for a Better Climate URL: https://www.reflect-media.com/en/case-studies/stadtradeln Locale: en Kind: case-study Client: Klima-Bündnis Services GmbH Year: 2015 – ongoing Industry: Public Sector / Climate Protection > Full-stack digital platform for Germany's most successful cycling campaign — web portal, native iOS & Android apps, and live tracking for hundreds of. ## Challenge STADTRADELN is one of Germany's most successful climate protection campaigns. Municipalities and their citizens cycle for 21 days to promote climate action — teams are formed, kilometres collected, and cities compete in a friendly race. What started as a local initiative has become a nationwide movement with thousands of participating municipalities and hundreds of thousands of active cyclists. The challenge was enormous: build a system that works simultaneously for individuals, teams, municipal administrations, and campaign organisers — all while remaining scalable during peak usage periods with tens of thousands of concurrent users. ## Our Services We developed the complete digital infrastructure from the ground up: **Web Platform (stadtradeln.de):** Built with modern web technologies — PHP backend and a reactive Vue.js frontend for a dynamic user experience. The platform enables municipality registration, cyclist sign-up, team formation, and offers comprehensive analytics and rankings. **Native Mobile Apps:** For iOS (Swift) and Android (Kotlin/Java), featuring GPS tracking for automatic kilometre logging, offline functionality, and seamless synchronisation with the web platform. Push notifications motivate participants and keep them informed about team achievements. **Key Features:** - Municipality and participant registration & management - Team formation and management - Kilometre tracking (manual and via app) - Live rankings and competitions - Statistics and analytics - RADar! reporting platform for infrastructure feedback - Multi-language support (DE, EN, FR) ## Solution The architecture is built for scalability — during peak phases, the system processes millions of kilometres and handles tens of thousands of concurrent users. The platform is continuously evolved to integrate new features such as the RADar! reporting platform and the BIKE MONITOR. A sophisticated campaign management system allows municipalities to individually configure and manage their STADTRADELN events. The RESTful API ensures seamless data exchange between web and mobile platforms. ## Result One of the most successful climate protection campaigns in Germany with digital infrastructure that motivates hundreds of thousands of people to cycle every year. STADTRADELN has become an integral part of municipal climate protection work and measurably contributes to the mobility transition. --- # WAS Winterdienst: Winter Service App URL: https://www.reflect-media.com/en/case-studies/was-winterdienst Locale: en Kind: case-study Client: Wetterauer Agrar Service GmbH Year: 2019 – ongoing Industry: Agriculture & Municipal Services > Cross-platform mobile app for coordinating and documenting winter road maintenance — GPS-tracked deployments, photo documentation, and real-time reporting. ## The Challenge Wetterauer Agrar Service coordinates a fleet of farmers operating tractors with snow ploughs and spreaders across hundreds of commercial and municipal properties in the Rhine-Main region. Before the app, every deployment was documented on paper — handwritten logs, manual timesheets, and phone calls to confirm completion. Billing at the end of the season was a weeks-long administrative nightmare. When extreme weather hit, coordination was chaotic. Dispatchers had no real-time visibility into which routes were cleared, which properties were still waiting, and whether deployments met contractual obligations. ## What We Built A mobile app paired with a web-based management portal that puts deployment management directly into the hands of drivers and dispatchers: **Mobile App (Android):** - **GPS route tracking** — every deployment is automatically logged with location, timestamps, and route data - **Photo documentation** — drivers photograph cleared properties on-site, geo-tagged and timestamped for auditable proof of service - **Deployment parameters** — weather conditions, salt/grit usage, equipment deployed, all captured in structured form fields - **Offline-first architecture** — winter service vehicles operate in rural areas with unreliable connectivity. The app queues all data locally and syncs when a connection becomes available - **Real-time task assignment** — dispatchers assign winter service areas to drivers through the portal, immediately visible in the app **Web Portal:** - **Object and billing management** — centralised database of all service properties with contract details and pricing - **Live deployment tracking** — real-time visibility into which areas have been serviced and which are pending - **Flexible assignment** — reassign routes and areas in real-time as weather conditions change - **Retroactive documentation** — add missing deployments after the fact when needed - **Personalised access** — each client and service provider sees only their relevant data ## The Result What previously required days of manual data entry at the end of each billing cycle now happens automatically. Every deployment is documented the moment it occurs — GPS-verified, photo-proven, and instantly available for invoicing. For WAS, the app transformed winter service from an operationally chaotic season into a professionally managed service line with complete transparency for their municipal and commercial clients. --- # Zukunft Bau: Sustainable Building 2.0 URL: https://www.reflect-media.com/en/case-studies/zukunft-bau Locale: en Kind: case-study Client: Federal Institute for Research on Building, Urban Affairs and Spatial Development (BBSR) Year: 2019 – ongoing Industry: Public Sector / Government Research > Complete visual, structural, and technical relaunch of Germany's central building research portal for the Federal Institute BBSR — Typo3 CMS with focus on. The Zukunft Bau portal is Germany's central platform for building research — publishing funding guidelines, active research projects, and innovation outcomes for the federal programme. Its audience spans architecture professionals, structural engineers, funding applicants, academic researchers, and specialist journalists. The existing system had grown organically over years: navigation was opaque, content was buried, and the technical foundation could no longer meet modern accessibility and SEO requirements. ::image-text{src="/images/cases/zukunft-bau-1.webp" alt="Zukunft Bau homepage redesign"} ## Information Architecture First We began by auditing how different user groups actually move through a research portal. Researchers need rapid access to funding criteria. Applicants need clear process flows. Journalists need press-ready materials. These are fundamentally different journeys — and the previous architecture treated them as one. We restructured the information architecture around user intent rather than content type, then built a visual system that guides each audience to their goal without friction. :: ::video-text{src="/videos/cases/zukunft-bau-1.mp4" :reverse="true"} ## Built on Typo3, Extended for Complexity The platform required custom Typo3 extensions to model the relationships between funding guidelines, research projects, and their published outcomes — a content structure unique to federal research portals. We built structured editorial workflows so the BBSR team can publish at scale, consistently and efficiently. Accessibility compliance (BITV 2.0 / WCAG) and responsive design were non-negotiable for a federal platform. The SEO architecture was rebuilt from the ground up to ensure research publications reach their intended audience through organic search. :: ::video-text{src="/videos/cases/zukunft-bau-2.mp4"} ## A Platform that Works for Everyone The final platform serves a wide spectrum of users through one coherent system. Advanced filtering and search, intuitive navigation, and a clear visual hierarchy make it easy to move from discovery to application — whether you are an experienced researcher or a first-time funding applicant. Since launch in 2019, we have continuously developed the platform alongside the BBSR team — shipping improvements, adding features, and ensuring long-term technical stability. :: --- # Branding & Retail URL: https://www.reflect-media.com/en/industries/branding-retail Locale: en Kind: industry ## Brand systems that work in the real world. We have been building brand systems for retail, luxury brands and consumer goods in Germany for over 15 years — including for **Parkett Hinterseer GmbH** (28 locations, German Design Award 2025), **Caja von Steinling** (luxury leather goods) and the **Kunstmuseum Marburg** (German Design Award). Three of our brand projects have been recognised with the German Design Award — not because they were beautiful in isolation, but because they worked. ## Branding. Website. Print. All from one source. ::two-col The brands that feel strongest are where print and digital are clearly related — same type hierarchy, same colour logic, same photography direction. We design both simultaneously: **logo, corporate identity, website, e-commerce, print collateral, packaging, signage**. Our websites run on **open-source CMS** (WordPress, Nuxt) — no vendor lock-in, no licence fees. Hosting on **German servers**, GDPR-compliant. Your source code belongs to you. :: ::image-text{src="/images/cases/caja-2.webp" alt="Caja von Steinling luxury brand identity"} ## Brand identity under real production constraints. A brand identity must work on a business card, a 6-metre banner, a dark-mode website and on embossed leather — each with different production constraints. **Parkett Hinterseer** — Complete rebranding for Germany's premium parquet retailer across 28 locations. Logo, corporate identity, print collateral, packaging, signage system. German Design Award 2025. **Caja von Steinling** — Brand development for a luxury leather goods label. Logo creation optimised for leather embossing at 3mm. WordPress e-commerce, packaging, hang tags, care cards. :: ## Selected projects for brand and retail clients ::case-ref{slug="parkett-hinterseer" image="/images/cases/hinterseer-1.webp" client="Parkett Hinterseer GmbH" label="Rebranding · 28 Locations · GDA 2025"} Parkett Hinterseer — Complete rebranding for Germany's leading premium parquet retailer. Logo, corporate identity, print collateral, packaging, editorial design and signage system. :: ::case-ref{slug="caja-von-steinling" image="/images/cases/caja-2.webp" client="Caja von Steinling" label="Luxury Brand · WordPress E-Commerce"} Caja von Steinling — Brand development for a luxury leather goods label. Logo optimised for leather embossing, WordPress e-commerce, full print collateral including packaging. :: ::case-ref{slug="kunstmuseum-marburg" image="/images/cases/kunstmuseum-marburg-9.webp" client="Kunstmuseum Marburg" label="Brand Relaunch · German Design Award"} Kunstmuseum Marburg — Logo relaunch and rebranding for one of Germany's most important university art museums. Corporate design, print design, merchandise. German Design Award. :: ::image-text{src="/images/cases/printdesign.webp" alt="Brand and print design process" reverse} ## We deliver systems, not files. Every brand project starts with the production constraint, not the inspiration. Manufacturing processes, budget ceilings, franchise structures — these are not limitations on the brief. They are the brief. We deliver documented **brand guidelines**, editable design templates and asset libraries structured for the teams who will actually use them — from the marketing manager to the franchise partner. :: --- # Energy & Sustainability URL: https://www.reflect-media.com/en/industries/energy-sustainability Locale: en Kind: industry ## Municipalities, energy providers and infrastructure operators are under pressure to act. The **Wärmeplanungsgesetz** requires large cities to submit municipal heat plans by 2026 and all other municipalities by 2028. The **smart meter rollout** demands new digital infrastructure from grid and metering operators. And **municipal CO₂ accounting** to BISKO standard is increasingly a prerequisite for funding and statutory reporting. We build the digital platforms that implement these requirements in practice — for over ten years. Including the **Klimaschutz-Planer** for municipal CO₂ accounting (2,200+ municipalities) and the campaign platform **STADTRADELN** (1M+ active participants) — both for **Klima-Bündnis Services GmbH**. ## Klimaschutz-Planer: used by over 2,200 municipalities. ::image-text{src="/images/cases/klimaschutz-planer-sc.webp" alt="Klimaschutz-Planer dashboard" contain} The **Klimaschutz-Planer** is the central digital instrument for municipal energy and CO₂ accounting in Germany. Developed for Klima-Bündnis Services GmbH, in operation since 2014, used by over 2,200 municipalities across Germany. The platform enables standardised CO₂ balances to **BISKO standard**, action planning and monitoring — for climate protection managers in municipal administrations who are often not IT specialists. Intuitive user guidance, scientifically validated calculation methods, regularly updated emission factors. :: ## Open source. German servers. GDPR-compliant. ::two-col We build on **open-source technology**: Spring Boot, Apache Kafka, Drupal, Nuxt/Vue.js, Flutter. No proprietary code, no licence fees. Hosting on **German servers** (Hetzner, AWS Frankfurt) — full GDPR compliance, no data transfer to third countries. For municipalities and public sector clients this means: **no hidden follow-up costs**, free choice of maintenance and development partners, full data sovereignty. :: ## What we build for the energy sector. ::two-col **Municipal climate tools** — CO₂ accounting, action planning, monitoring and reporting. Platforms that climate protection managers can operate independently — without developer dependency. **IoT platforms** — Real-time sensor integration, event-driven microservices, cloud infrastructure. For infrastructure operators who need to reliably process and visualise field data. **Energy marketplaces** — Multilingual portals for the European energy market. Drupal, Symfony, API integrations. Transaction-safe and scalable. **Campaign platforms** — Web and app for climate campaigns with hundreds of thousands of participants. STADTRADELN: over 1 million active users, 3,000+ municipalities. :: ## Selected projects in the energy sector ::case-ref{slug="klimaschutz-planer" image="/images/cases/klimaschutz-planer-hero.webp" client="Klima-Bündnis Services GmbH" label="Municipal Climate Tool · 2,200+ Municipalities"} Klimaschutz-Planer — Nationwide platform for municipal CO₂ accounting and climate protection planning to BISKO standard. In operation since 2014. :: ::case-ref{slug="stadtradeln" image="/images/cases/stadtradeln-app-hero.webp" client="Klima-Bündnis Services GmbH" label="Web + App · TYPO3 + Flutter"} STADTRADELN — Web portal and native apps for Germany's largest cycling campaign. Over 1 million active participants across more than 3,000 municipalities. Since 2015. :: ::case-ref{slug="iot-stauwarnanlagen" image="/images/cases/iot-stauwarnanlagen-hero.webp" client="FERCHAU Engineering GmbH" label="IoT Platform · Spring Boot + Kafka"} IoT traffic warning systems — Scalable IoT platform with Spring Boot, Apache Kafka and MQTT. AWS cloud with DevOps pipeline. Since 2020. :: ::case-ref{slug="milk-the-sun" image="/images/cases/milk-the-sun-hero.webp" client="Milk the Sun GmbH" label="Solar Marketplace · Drupal + Symfony"} Milk the Sun — European online marketplace for photovoltaic systems. Multilingual Drupal portal across five languages. :: --- # Engineering & Technology URL: https://www.reflect-media.com/en/industries/engineering-technology Locale: en Kind: industry ## Digital platforms for engineering companies. We build technical platforms for companies like **FERCHAU Engineering GmbH** — Germany's largest engineering services company with over 8,500 engineers — and the **ERGO Group AG**. IoT systems, enterprise web applications, API integrations with legacy systems. Our platforms run in continuous production, not as prototypes. ## Open source. Cloud-native. No vendor lock-in. ::two-col We build on **open-source technology**: Spring Boot, Apache Kafka, Vue.js, Nuxt, Drupal. Hosting on **AWS (Frankfurt)** or **German servers** (Hetzner) — full GDPR compliance. Infrastructure-as-code, container-based deployments, reproducible environments. Your source code belongs to you — fully documented, transferable at any time. The deployment pipeline, monitoring configuration and operational runbooks are deliverables, not afterthoughts. :: ::image-text{src="/images/cases/ferchau-7.webp" alt="FERCHAU IoT dashboard"} ## FERCHAU: IoT in the field. For FERCHAU Engineering we built a scalable IoT platform for mobile LED traffic warning systems. **Spring Boot microservices**, Apache Kafka for event streaming, **MQTT** for sensor communication, AWS cloud infrastructure with CI/CD pipeline. Deployment time for new warning configurations reduced from multiple days to under two hours. Ongoing partnership since 2020. :: ::pull-quote{author="Markus Beier, Regional Director FERCHAU GmbH"} The collaboration has been very professional and enjoyable. Communication is always friendly, transparent and constructive. The work packages consistently have very high quality. We will recommend you within FERCHAU at any time. :: ## Selected projects for engineering and technology clients ::case-ref{slug="iot-stauwarnanlagen" image="/images/cases/iot-stauwarnanlagen-hero.webp" client="FERCHAU Engineering GmbH" label="IoT Platform · Spring Boot + Kafka + MQTT"} IoT traffic warning systems — Scalable platform for Germany's largest engineering services company. Spring Boot, Apache Kafka, MQTT, AWS cloud with DevOps pipeline. Since 2020. :: ::case-ref{slug="ergo-online-vertragsabschluesse" image="/images/cases/ergo-hero.webp" client="ERGO Group AG" label="Enterprise Platform · Spring Boot + Vue.js"} ERGO online contract completion — Enterprise microservices platform for digital insurance contract completion. Java Spring Boot, Vue.js, Drupal CMS, REST API integration with legacy systems. :: ::image-text{src="/images/cases/ferchau-5.webp" alt="DevOps and technical delivery" reverse} ## DevOps is a deliverable. CI/CD pipelines with automated test gates, blue-green deployments and automatic rollback. Infrastructure-as-code for reproducible environments. Monitoring and alerting that catches issues before users notice them. An engineering firm that cannot independently operate and evolve its own digital infrastructure has not received a complete solution — it has received a dependency. :: --- # Public Sector URL: https://www.reflect-media.com/en/industries/public-sector Locale: en Kind: industry ## Digital platforms for public sector clients. We have been building digital platforms for German federal agencies, municipalities and research institutions for over ten years — including the **Federal Institute for Research on Building, Urban Affairs and Spatial Development (BBSR)**, **Klima-Bündnis Services GmbH**, the **Deutsche Nationalbibliothek** and the **Landschaftsverband Westfalen-Lippe (LWL)**. From the BBSR's research portal to the STADTRADELN climate campaign with over one million active participants across more than 3,000 municipalities — our platforms are embedded in the day-to-day operations of public institutions. ## Open source. No vendor lock-in. ::two-col We build exclusively on **open-source technology**: TYPO3, Drupal, Nuxt/Vue.js, Flutter. No proprietary code, no licence fees, no dependency on a single vendor. Your source code belongs to you — fully documented, transferable at any time. For your procurement office this means: **no hidden follow-up costs**, free choice of maintenance and development partners, and compliance with the principle of "Public Money, Public Code". :: ## Procurement-ready service packages. ::two-col Under the planned **Vergabebeschleunigungsgesetz** (Drucksache 21/1934), thresholds for direct procurement are set to increase significantly. Many of our service packages already fall within the range of simplified procurement. We work on the basis of **EVB-IT contracts** (EVB-IT Dienstleistung / EVB-IT Erstellung) and deliver all documentation your procurement office requires: service description, pricing sheet, acceptance protocol. All prices net plus VAT. :: ::image-text{src="/images/cases/zukunft-bau-1.webp" alt="Zukunft Bau research platform for BBSR"} ## Accessibility per BITV 2.0 and BFSG. Compliance with **WCAG 2.2 AA**, **BITV 2.0** and **EN 301 549** is legally required for German public bodies. With the **Barrierefreiheitsstärkungsgesetz (BFSG)**, extended requirements for digital products and services apply from June 2025. We build accessibility in from day one — keyboard navigation, colour contrast, screen reader annotations, focus management. Every delivery includes an **accessibility statement per §12b BGG** and a documented WCAG conformance test. :: ## Hosting on German servers. GDPR-compliant. ::two-col All projects are hosted on **German servers** — Hetzner or IONOS (data centres in Germany, ISO 27001 certified). No data transfer to third countries, full GDPR compliance. On request we deliver complete **source code documentation and escrow** for your IT department. Our infrastructure is reproducible and independently operable. :: ## Selected projects for public sector clients ::case-ref{slug="zukunft-bau" image="/images/cases/zukunft-bau-hero.webp" client="Federal Institute BBSR" label="Research Platform · TYPO3"} Zukunft Bau — Relaunch of the central building research portal of the Federal Institute for Research on Building, Urban Affairs and Spatial Development. TYPO3 CMS, accessible implementation, editorial training. Continuously developed since 2019. :: ::case-ref{slug="stadtradeln" image="/images/cases/stadtradeln-app-hero.webp" client="Klima-Bündnis Services GmbH" label="Web + App · TYPO3 + Flutter"} STADTRADELN — Web portal and native apps (iOS/Android) for Germany's largest cycling campaign. Live tracking for over 1 million active participants across more than 3,000 municipalities. In operation since 2015. :: ::case-ref{slug="klimaschutz-planer" image="/images/cases/klimaschutz-planer-sc.webp" client="Klima-Bündnis Services GmbH" label="Web Application · Municipal Planning Tool"} Klimaschutz-Planer — Tool for municipal CO₂ accounting and climate protection planning. Used by hundreds of municipalities across Germany. In operation since 2014. :: ::case-ref{slug="porta-polonica" image="/images/cases/porta-polonica-1.webp" client="Landschaftsverband Westfalen-Lippe (LWL)" label="Online Museum · Drupal"} Porta Polonica — Online museum for Polish culture and history in Germany. Drupal platform, accessible implementation, SEO optimisation. Maintained from 2017 to 2025. :: ::case-ref{slug="regionalfenster" image="/images/cases/dnb-regionalfenster-hero.webp" client="Deutsche Nationalbibliothek" label="Web Application · Java EE"} Regionalfenster — E-paper service for library reading rooms of the German National Library. High-availability Java EE web application, BITV 90+ accessibility, redundant server architecture. In operation since 2016. :: ::case-ref{slug="landgrafenschloss-marburg" image="/images/cases/landgrafenschloss-1.webp" client="Landgrafenschloss Marburg" label="Branding & Wayfinding"} Landgrafenschloss Marburg — Brand identity and print collateral for one of Hesse's most important cultural landmarks. Branding, wayfinding system and print materials. :: ::image-text{src="/images/cases/zukunft-bau-2.webp" alt="Project delivery for public sector clients" reverse} ## How we work with public sector clients. Every project starts with structured stakeholder interviews and user journey mapping. We document architecture decisions, accessibility test results and deviations from the service description — in a format your procurement and legal department can use. We work directly with federal agencies, state authorities, municipalities and research institutions. **On request, we prepare an EVB-IT-compliant service description for your internal approval.** :: --- # App Development URL: https://www.reflect-media.com/en/services/app-development Locale: en Kind: service > Native iOS and Android apps and cross-platform mobile applications — built to exceed user expectations and scale with your business. ## What We Build Mobile applications that users actually want to use — and that businesses can grow with. We have built native iOS and Android apps for some of Germany's most successful public campaigns, serving hundreds of thousands of users under peak load. Whether you need a consumer-facing campaign app, a field operations tool, or a mobile extension of your core platform, we have the experience to deliver it. ## Our Approach App development at reflect.media follows a full-cycle model: we handle everything from initial strategy and UI/UX design through development, quality assurance, and App Store submission. We choose the platform approach — native or cross-platform — based on what your use case actually demands, not on what is easiest for us to build. When native performance, GPS precision, or deep OS integration matters, we build native. When speed of delivery and code sharing across platforms is the priority, we use cross-platform frameworks. --- # Brand Design URL: https://www.reflect-media.com/en/services/brand-design Locale: en Kind: service > Comprehensive brand identity services — logo creation, corporate design systems, color palettes, typography, and brand manuals that ensure consistency. ## What We Do Brand Design is more than a logo. It is the complete visual language your business uses to communicate who you are, what you stand for, and why you deserve your customers' trust. At reflect.media, we approach branding as a system-building exercise. Every element we create is designed to work together — and to scale across every medium you will ever need. ## Our Process We begin with a structured brand discovery process before any design work begins. The strategic depth scales with the package — from a focused briefing for Brand Core to a half-day positioning session for Brand System. We want to deeply understand your business, your competitors, your audience, and your ambitions. Only then do we put pen to paper. From there, we develop the logo and visual identity in close collaboration, iterating until we have something that is distinctly yours. We then build out the full design system: color palettes, typography choices, spacing systems, presentation templates, social media kits, and the complete set of brand assets you need to operate. Finally, we document everything in comprehensive brand guidelines — so your team, your agencies, and your suppliers can all apply your identity consistently, without needing to call us every time. --- # Digital Consulting URL: https://www.reflect-media.com/en/services/digital-consulting Locale: en Kind: service > Digital strategy, technology audits, UX reviews, and SEO optimisation — helping businesses make smarter decisions about their digital investments. ## What We Do Digital consulting at reflect.media is about making better decisions faster. We bring 15+ years of project experience across dozens of industries to every engagement — so you benefit from patterns we have seen work and traps we have seen others fall into. We work across the full digital stack: performance optimisation, SEO strategy, technology selection, UX review, and digital roadmap planning. ## How We Work Every consulting engagement starts with listening. We want to understand your current situation, your goals, your constraints, and your team. Then we do the analysis — auditing your technology, your data, your UX, and your competitive positioning. The output is a structured set of prioritised recommendations with a clear rationale. We distinguish between quick wins you can act on immediately and strategic investments that will pay off over time. --- # Digital Design URL: https://www.reflect-media.com/en/services/digital-design Locale: en Kind: service > User-centric UI/UX design for web and mobile — intuitive interfaces that engage, convert, and delight across every digital touchpoint. ## What We Design Great digital products are experienced, not just seen. We design interfaces that feel intuitive from the first interaction — where the right next step is always obvious, friction is minimal, and the experience reflects the quality of your brand. Our digital design work spans web platforms, mobile applications, internal tools, and complex data-driven dashboards. The common thread: user needs come first, aesthetics follow. ## Our Process We always start with understanding. Who are your users? What are they trying to accomplish? Where do they struggle today? We conduct user research, map user flows, and define information architecture before a single screen is designed. From there, we build up through wireframes and prototypes, testing and iterating until we are confident the design solves the right problems. Then we produce pixel-perfect, developer-ready specifications in Figma. --- # Print Design URL: https://www.reflect-media.com/en/services/print-design Locale: en Kind: service > Professional print collateral — brochures, packaging, editorial design, stationery, signage, and exhibition materials — designed to make a lasting. ## What We Design Print is still the medium where brand quality is most viscerally felt. A beautifully produced brochure, a precisely embossed business card, or a perfectly executed packaging design communicates something that a website cannot. We design print materials that are not just visually strong — they are production-ready. Every file we deliver is prepared with the correct specifications for the intended print process, which saves our clients time, money, and frustration. ## What We Deliver Our print design scope includes corporate stationery (letterheads, envelopes, business cards), brochures and catalogues, packaging design, editorial materials, signage systems, and exhibition displays. We also coordinate production with our network of trusted print suppliers across Germany. --- # Website Development URL: https://www.reflect-media.com/en/services/website-development Locale: en Kind: service > Scalable, high-performance websites built with modern frameworks — Nuxt.js, Vue.js, Typo3, Drupal, and WordPress — tailored to your business goals and. ## What We Build Websites that serve your business — not the other way around. We build with the technology that fits your needs, not the one that's convenient for us. **WordPress & Elementor** — for marketing sites, landing pages and e-commerce where your team needs to edit content visually. The most popular CMS in the world, and we know it inside out. **Vue.js / Nuxt** — for high-performance, component-driven websites where speed, SEO and developer experience matter. Our own site runs on Nuxt. **TYPO3** — for enterprise portals, multi-language platforms and complex editorial workflows. The standard for German Mittelstand and public sector. Already running one of these systems? We take over, optimise and extend existing WordPress, TYPO3 and Vue/Nuxt projects. ## Our Approach A website project at reflect.media starts with a proper discovery phase. We want to understand your business model, your target audience, your content strategy, and your long-term ambitions. Only then do we define the technical approach. We build for performance, accessibility, and maintainability. Every site we deliver scores well on Core Web Vitals, passes accessibility audits, and is designed to be maintained — either by your team or by ours — for years to come. --- # Flutter App-Entwicklung 2026: Architektur, Performance & Deployment URL: https://www.reflect-media.com/de/blog/flutter-app-entwicklung-leitfaden Locale: de Kind: blog Category: App-Entwicklung Published: 2026-03-10 > Ein tiefgehender technischer Leitfaden für produktionsreife Flutter-Apps — von Clean Architecture und Impeller-Rendering bis zu CI/CD-Pipelines und. ::blog-cta{title="Planen Sie ein Flutter-Projekt?" text="Wir entwickeln produktionsreife Flutter-Apps mit Clean Architecture, nativer Performance und skalierbarer CI/CD. Sprechen wir über Ihre Anforderungen." button="Kontakt aufnehmen" variant="inline"} :: :div{.blog-tldr} **TL;DR** — Flutter ist 2026 ein ausgereiftes, produktionsreifes Framework. Impeller 2.0 eliminiert Rendering-Jank durch AOT-Shader-Compilation. Clean Architecture mit BLoC und GetIt hält große Codebasen wartbar. FFI ersetzt Method Channels für performante native Integration. WebAssembly wird zum Standard für Web-Builds. Und automatisierte CI/CD-Pipelines mit GitHub Actions deployen mit einem einzigen Merge in beide App Stores. : ## Warum Flutter zum Standard für Cross-Platform-Entwicklung geworden ist Die Cross-Platform-Landschaft hat sich konsolidiert. Während React Native für JavaScript-affine Teams eine starke Option bleibt, hat sich Flutter als Framework der Wahl für Teams etabliert, die Rendering-Performance, pixelgenaue Designkontrolle und echte Multi-Plattform-Reichweite priorisieren. Mit Flutter 3.41 hat das Framework eine Reife erreicht, bei der die Frage nicht mehr lautet, ob Flutter produktionsreif ist — sondern wie man Flutter-Anwendungen architektonisch so aufbaut, dass sie skalieren. Dieser Leitfaden behandelt die technischen Entscheidungen, die Hobby-Projekte von produktionsreifen Flutter-Anwendungen unterscheiden: Architektur-Patterns, Rendering-Pipeline-Optimierung, native Integrationsstrategien und Deployment-Automatisierung. ## Die Rendering-Revolution: Impeller 2.0 Die folgenreichste Veränderung im Flutter-Ökosystem ist die Fertigstellung der Impeller-Rendering-Engine. Seit Flutters Anfängen setzte das Framework auf Skia für GPU-Rendering — eine leistungsfähige Engine, die Shader jedoch zur Laufzeit kompilierte. Das verursachte den gefürchteten „Shader-Compilation-Jank" — sichtbare Ruckler beim ersten Auftreten bestimmter Animationen oder Übergänge. Impeller löst dieses Problem grundlegend. Anstatt Shader bei Bedarf zu kompilieren, nutzt Impeller Ahead-of-Time (AOT) Shader-Compilation. Jeder Shader, den die Anwendung benötigen könnte, wird beim Build-Schritt vorkompiliert. Das Ergebnis: null First-Run-Jank, konsistentes Frame-Timing und eine Reduktion der Frame-Rasterisierungszeit um fast 50% bei komplexen Szenen. ### Wie Impeller das erreicht Impeller integriert direkt mit der nativen Grafik-API der jeweiligen Plattform — Metal auf iOS und Vulkan auf Android. Das ist eine signifikante Abkehr von Skias abstraktererem Rendering-Ansatz: ```dart // Impeller-Vorteile sind automatisch — keine Code-Änderungen nötig. // Das Verständnis der Pipeline hilft aber bei Performance-Optimierung. // Aufwändiges Custom Painting? Impellers Tessellator verarbeitet // komplexe Pfade deutlich effizienter als Skias CPU-basierte Rasterisierung. class OptimizedPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { final path = Path() ..moveTo(0, size.height) ..cubicTo( size.width * 0.25, size.height * 0.1, size.width * 0.75, size.height * 0.9, size.width, 0, ); // Impeller tesselliert diesen Pfad auf der GPU, nicht der CPU. // Komplexe Gradienten und Blur-Effekte bleiben ebenfalls GPU-gebunden. canvas.drawPath(path, Paint()..color = Colors.blue); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) => false; } ``` 2026 wird das Legacy-Skia-Backend für Android 10 und höher entfernt. Wenn Ihre App Android 9 oder niedriger unterstützt, bleibt Skia als Fallback verfügbar. Für alle praktischen Zwecke ist Impeller jetzt der einzige relevante Rendering-Pfad. ### Performance-Profiling mit Impeller Impeller verändert, wie Flutter-Anwendungen profiliert werden. Frame-Rasterisierung ist nicht mehr der Flaschenhals — Widget-Building und Layout-Berechnung sind es oft. Das Flutter DevTools Performance-Overlay hebt jetzt Widget-Rebuild-Zähler und Layout-Pass-Dauer als primäre Optimierungsmetriken hervor. ```dart // RepaintBoundary strategisch einsetzen, um teure Subtrees zu isolieren class ExpensiveAnimatedWidget extends StatelessWidget { @override Widget build(BuildContext context) { return RepaintBoundary( child: CustomPaint( painter: _ComplexAnimationPainter(), size: const Size(400, 400), ), ); } } ``` ## Clean Architecture: Flutter für Skalierung strukturieren Eine Flutter-App mit fünf Screens funktioniert mit jeder Architektur. Eine Flutter-App mit fünfzig Screens, drei API-Integrationen, Offline-Caching und einem Team von fünf Entwicklern erfordert Disziplin. Clean Architecture — angepasst an Flutters reaktives Paradigma — bietet diese Struktur. ### Das Drei-Schichten-Modell Die Architektur trennt Zuständigkeiten in drei Schichten mit strikten Abhängigkeitsregeln. Abhängigkeiten zeigen nur nach innen: Presentation hängt von Domain ab, Domain hängt von nichts ab, und Data implementiert Domain-Verträge. ``` lib/ ├── core/ │ ├── error/ # Failure-Klassen, Exceptions │ ├── network/ # HTTP-Client, Interceptors │ └── di/ # GetIt Dependency-Injection-Setup ├── features/ │ ├── authentication/ │ │ ├── domain/ │ │ │ ├── entities/ # AuthUser, Session │ │ │ ├── repositories/ # Abstraktes AuthRepository │ │ │ └── usecases/ # LoginUseCase, LogoutUseCase │ │ ├── data/ │ │ │ ├── models/ # AuthUserModel (JSON-Mapping) │ │ │ ├── datasources/ # AuthRemoteDataSource, AuthLocalDataSource │ │ │ └── repositories/ # AuthRepositoryImpl │ │ └── presentation/ │ │ ├── bloc/ # AuthBloc, AuthState, AuthEvent │ │ ├── pages/ # LoginPage, ProfilePage │ │ └── widgets/ # LoginForm, SocialLoginButton │ └── dashboard/ │ └── ... └── main.dart ``` ### Domain Layer: Reine Geschäftslogik Die Domain-Schicht enthält Entities, Use-Case-Klassen und abstrakte Repository-Interfaces. Sie hat null Flutter-Imports und null externe Abhängigkeiten. Das macht sie testbar mit reinen Dart-Unit-Tests und portabel zwischen Projekten. ```dart // Domain Entity — immutable, keine Serialisierungslogik class Project { final String id; final String name; final ProjectStatus status; final DateTime deadline; final List memberIds; const Project({ required this.id, required this.name, required this.status, required this.deadline, required this.memberIds, }); bool get isOverdue => status != ProjectStatus.completed && DateTime.now().isAfter(deadline); } // Abstraktes Repository — der Vertrag, den die Data-Schicht erfüllen muss abstract class ProjectRepository { Future>> getProjects(); Future> getProjectById(String id); Future> updateStatus(String id, ProjectStatus status); } // Use Case — eine Verantwortung, ein Einstiegspunkt class GetProjectsUseCase { final ProjectRepository repository; const GetProjectsUseCase(this.repository); Future>> call() => repository.getProjects(); } ``` ### Data Layer: API-Verträge und Caching Die Data-Schicht implementiert die im Domain Layer definierten Repository-Interfaces. Sie kümmert sich um JSON-Serialisierung, API-Aufrufe, lokales Caching und Error-Mapping. ```dart class ProjectRepositoryImpl implements ProjectRepository { final ProjectRemoteDataSource remote; final ProjectLocalDataSource local; final NetworkInfo networkInfo; const ProjectRepositoryImpl({ required this.remote, required this.local, required this.networkInfo, }); @override Future>> getProjects() async { if (await networkInfo.isConnected) { try { final models = await remote.fetchProjects(); await local.cacheProjects(models); return Right(models.map((m) => m.toEntity()).toList()); } on ServerException catch (e) { return Left(ServerFailure(e.message)); } } else { try { final cached = await local.getCachedProjects(); return Right(cached.map((m) => m.toEntity()).toList()); } on CacheException { return Left(const CacheFailure('Keine gecachten Daten verfügbar')); } } } } ``` ### Presentation Layer: BLoC-Pattern BLoC (Business Logic Component) trennt UI-Interaktion von State-Transformation. Events gehen rein, States kommen raus. Die UI abonniert State-Änderungen und baut sich entsprechend neu auf. Kombiniert mit `freezed` für immutable State-Klassen entsteht vorhersagbares, testbares State Management. ```dart // Events sealed class ProjectEvent {} class LoadProjects extends ProjectEvent {} class UpdateProjectStatus extends ProjectEvent { final String projectId; final ProjectStatus newStatus; UpdateProjectStatus(this.projectId, this.newStatus); } // States sealed class ProjectState {} class ProjectInitial extends ProjectState {} class ProjectLoading extends ProjectState {} class ProjectLoaded extends ProjectState { final List projects; ProjectLoaded(this.projects); } class ProjectError extends ProjectState { final String message; ProjectError(this.message); } // BLoC class ProjectBloc extends Bloc { final GetProjectsUseCase getProjects; ProjectBloc({required this.getProjects}) : super(ProjectInitial()) { on((event, emit) async { emit(ProjectLoading()); final result = await getProjects(); result.fold( (failure) => emit(ProjectError(failure.message)), (projects) => emit(ProjectLoaded(projects)), ); }); } } ``` ### Dependency Injection mit GetIt GetIt verbindet alles miteinander. Registrieren Sie abstrakte Typen mit konkreten Implementierungen — die Presentation-Schicht weiß nie, welche Datenquelle tatsächlich verwendet wird. Das macht das Austauschen echter APIs mit Fakes beim Testen trivial. ```dart final sl = GetIt.instance; void initDependencies() { // BLoCs sl.registerFactory(() => ProjectBloc(getProjects: sl())); // Use Cases sl.registerLazySingleton(() => GetProjectsUseCase(sl())); // Repositories sl.registerLazySingleton( () => ProjectRepositoryImpl( remote: sl(), local: sl(), networkInfo: sl(), ), ); // Data Sources sl.registerLazySingleton( () => ProjectRemoteDataSourceImpl(client: sl()), ); sl.registerLazySingleton( () => ProjectLocalDataSourceImpl(sharedPreferences: sl()), ); } ``` ## Native Plattformintegration: FFI vs. Method Channels Flutter-Anwendungen müssen gelegentlich plattformspezifische APIs aufrufen — biometrische Authentifizierung, Bluetooth-Protokolle, Kamera-Pipelines oder proprietäre SDKs. Flutter bietet zwei Integrationsmechanismen, und die richtige Wahl wirkt sich auf Performance und Wartbarkeit aus. ### Method Channels: Die traditionelle Brücke Method Channels sind asynchrone Message-Passing-Brücken zwischen Dart und nativem Code. Sie serialisieren Argumente, senden sie über eine Plattform-Grenze und deserialisieren die Antwort. ```dart // Dart-Seite class NativeBatteryService { static const _channel = MethodChannel('com.example.app/battery'); Future getBatteryLevel() async { final level = await _channel.invokeMethod('getBatteryLevel'); return level ?? -1; } } ``` ```kotlin // Android-Seite (Kotlin) class BatteryMethodHandler(private val context: Context) : MethodChannel.MethodCallHandler { override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) { if (call.method == "getBatteryLevel") { val manager = context.getSystemService(Context.BATTERY_SERVICE) as BatteryManager result.success(manager.getIntProperty( BatteryManager.BATTERY_PROPERTY_CAPACITY )) } else { result.notImplemented() } } } ``` Method Channels funktionieren gut für seltene Request-Response-Interaktionen. Sie serialisieren jedoch alle Argumente durch einen Codec, was bei hochfrequenten Aufrufen oder großen Datentransfers Latenz verursacht. ### FFI: Direkte, Zero-Copy native Aufrufe Seit Flutter 3.38 ist FFI (Foreign Function Interface) via `dart:ffi` der empfohlene Ansatz für performance-sensitive native Integration. FFI-Aufrufe sind synchron, vermeiden Serialisierungs-Overhead und können Speicher direkt zwischen Dart und nativem Code teilen. ```dart // Native Library laden und Funktionen direkt aufrufen import 'dart:ffi'; import 'dart:io'; typedef NativeImageProcess = Int32 Function( Pointer data, Int32 width, Int32 height); typedef DartImageProcess = int Function( Pointer data, int width, int height); class NativeImageProcessor { late final DartImageProcess _process; NativeImageProcessor() { final lib = Platform.isAndroid ? DynamicLibrary.open('libimage_processor.so') : DynamicLibrary.process(); _process = lib .lookupFunction( 'process_image'); } int processImage(Pointer data, int width, int height) { return _process(data, width, height); } } ``` Für neue Projekte generieren Sie FFI-Bindings automatisch mit `flutter create --template=package_ffi`. Das `ffigen`-Tool liest C-Header-Dateien und erzeugt typsichere Dart-Bindings — kein manueller Boilerplate-Code nötig. ### Wann welchen Ansatz verwenden Nutzen Sie **Method Channels** für asynchrone Plattforminteraktionen, bei der Integration mit plattformspezifischen Lifecycle-Events oder wenn der Serialisierungs-Overhead vernachlässigbar gegenüber der eigentlichen Operation ist (z.B. Berechtigungen anfordern, Geräteeinstellungen lesen). Nutzen Sie **FFI** für synchrone Ausführung, bei der Verarbeitung großer Datenpuffer (Bilder, Audio, Sensordaten) oder beim Wrappen einer bestehenden C/C++-Bibliothek für rechenintensive Operationen. ## Flutter für Web: WebAssembly als Standard Flutter Web hat sich deutlich weiterentwickelt. Der Übergang von DOM-basiertem Rendering zu WebAssembly ist die definierende Veränderung für 2026. Wasm liefert nahezu native Ausführungsgeschwindigkeit für Dart-Code im Browser und ersetzt das langsamere JavaScript-Compilation-Target. ### Für Wasm bauen ```bash # Build mit WebAssembly (wird 2026 zum Standard) flutter build web --wasm # Wasm-Readiness der Dependencies prüfen flutter build web --wasm --wasm-opt ``` Noch sind nicht alle Dart-Packages Wasm-kompatibel. Packages, die `dart:js` oder `dart:html` direkt verwenden, müssen auf `package:web` und `dart:js_interop` migriert werden. Führen Sie früh im Projekt eine Wasm-Probe-Compilation durch, um inkompatible Dependencies zu identifizieren, bevor sie zu Blockern werden. ### Stateful Hot Reload im Web Seit Flutter 3.35 funktioniert Stateful Hot Reload im Web standardmäßig. Das eliminiert die Produktivitätslücke zwischen Mobile- und Web-Entwicklung. Widget ändern, speichern, Ergebnis sofort sehen — mit erhaltenem Anwendungsstate. ## CI/CD: Vom Commit zum App Store Ein produktives Flutter-Projekt braucht automatisiertes Testing, Building und Deployment. Manuelle Builds führen zu menschlichen Fehlern und verlangsamen Release-Zyklen. GitHub Actions bietet eine solide Grundlage für Flutter CI/CD. ### Pipeline-Architektur Eine produktionsreife Pipeline hat drei Stufen: Validieren, Bauen und Deployen. ```yaml # .github/workflows/flutter-ci-cd.yml name: Flutter CI/CD on: push: branches: [main] pull_request: branches: [main] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: subosito/flutter-action@v2 with: flutter-version: '3.41.0' channel: 'stable' - run: flutter pub get - run: flutter analyze --fatal-infos - run: flutter test --coverage build-android: needs: test runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: subosito/flutter-action@v2 with: flutter-version: '3.41.0' - run: flutter build appbundle --release - uses: r0adkll/upload-google-play@v1 with: serviceAccountJsonPlainText: ${{ secrets.PLAY_SERVICE_ACCOUNT }} packageName: com.example.app releaseFiles: build/app/outputs/bundle/release/app-release.aab track: internal build-ios: needs: test runs-on: macos-latest steps: - uses: actions/checkout@v4 - uses: subosito/flutter-action@v2 with: flutter-version: '3.41.0' - run: flutter build ipa --release --export-options-plist=ios/ExportOptions.plist - uses: apple-actions/upload-testflight-build@v1 with: app-path: build/ios/ipa/*.ipa issuer-id: ${{ secrets.APPSTORE_ISSUER_ID }} api-key-id: ${{ secrets.APPSTORE_API_KEY_ID }} api-private-key: ${{ secrets.APPSTORE_API_PRIVATE_KEY }} ``` ### Code Signing und Secrets Committen Sie niemals Signing-Keys oder Service-Account-Credentials in Ihr Repository. Speichern Sie sie als verschlüsselte Secrets in Ihrer CI-Plattform: - **Android**: Keystore als Base64-codiertes Secret hochladen und während des Build-Schritts dekodieren. Den Google Play Service Account JSON als Secret speichern. - **iOS**: Fastlane Match oder manuell verwaltete Provisioning Profiles als Secrets. App Store Connect API Keys ersetzen Apple-ID-Credentials für automatisierte Uploads. ### Stufenweise Rollouts Deployen Sie zuerst in internes Testing, promoten nach manuellem QA zu Beta, dann Rollout auf 10%, 50%, 100% der Nutzer. Google Play Console unterstützt prozentuale Rollouts nativ. App Store Connect nutzt TestFlight-Gruppen für gestuftes Ausliefern. ::blog-cta{title="Unterstützung bei Ihrer Flutter-Architektur?" text="Wir haben Flutter-Apps für Enterprise-Kunden in Versicherung, Bildung und öffentlichem Sektor ausgeliefert. Sprechen wir über Ihr Projekt." button="Gespräch vereinbaren" variant="inline"} :: ## Teststrategie für produktive Flutter-Apps Testing ist bei produktiver Flutter-Entwicklung nicht optional. Eine geschichtete Teststrategie spiegelt die Clean Architecture wider: - **Unit Tests** für Domain-Logik, Use Cases und BLoC-State-Transitionen - **Widget Tests** für Komponentenverhalten und Interaktion - **Integrationstests** für komplette User Flows auf echten Geräten ```dart // BLoC-Test Beispiel void main() { late ProjectBloc bloc; late MockGetProjectsUseCase mockGetProjects; setUp(() { mockGetProjects = MockGetProjectsUseCase(); bloc = ProjectBloc(getProjects: mockGetProjects); }); blocTest( 'emittiert [Loading, Loaded] wenn LoadProjects erfolgreich ist', build: () { when(() => mockGetProjects()) .thenAnswer((_) async => Right(testProjects)); return bloc; }, act: (bloc) => bloc.add(LoadProjects()), expect: () => [ isA(), isA(), ], ); } ``` Streben Sie 80%+ Code-Coverage für Domain- und Data-Layer an. Widget-Test-Coverage kann niedriger sein — fokussieren Sie auf kritische Nutzerinteraktionen statt auf pixelgenaue Assertions. ## Die Entscheidung: Wann Flutter die richtige Wahl ist Flutter ist die richtige Technologie, wenn Ihr Projekt folgendes erfordert: - **Multi-Plattform-Reichweite** aus einer einzigen Codebasis (Mobile, Web, Desktop) - **Individuelles, gebrandetes UI**, das nicht Plattformkonventionen folgt - **Hochfrequente Animationen** und komplexe visuelle Interaktionen - **Schnelle Time-to-Market** mit einem kleinen Team - **Langfristige Wartbarkeit** durch Clean Architecture und starke Typisierung Flutter ist nicht die ideale Wahl, wenn Ihre App primär ein dünner Wrapper um plattformspezifische APIs ist (tiefe AR-Integration, spezialisierte Bluetooth-Protokolle) oder wenn Ihr gesamtes Team tiefe React/JavaScript-Expertise mitbringt und keine Dart-Erfahrung hat. ## Fazit Flutter 2026 ist nicht dasselbe Framework wie vor drei Jahren. Impeller hat die Frage der Rendering-Performance gelöst. Clean Architecture mit BLoC bietet ein kampferprobtes Pattern für komplexe Anwendungen. FFI ermöglicht native Performance bei Plattformintegration. WebAssembly erschließt ernsthaftes Web-Deployment. Und GitHub Actions automatisiert den gesamten Weg vom Commit zum App Store. Die technologischen Entscheidungen sind getroffen. Was bleibt, ist die Engineering-Disziplin, sie korrekt anzuwenden — die richtige Architektur-Granularität für die Teamgröße wählen, vor dem Optimieren profilen, auf jeder Schicht testen und alles automatisieren, was automatisiert werden kann. Das ist es, was Flutter-Projekte, die ausliefern, von Flutter-Projekten unterscheidet, die stocken. --- # Markendesign das funktioniert: Von der Strategie zum Design System URL: https://www.reflect-media.com/de/blog/markendesign-strategie Locale: de Kind: blog Category: Markendesign Published: 2026-03-14 > Wie man eine Markenidentität aufbaut, die über digitale Produkte, Print und jeden Touchpoint skaliert — mit praktischen Frameworks für Positionierung. ::blog-cta{title="Brauchen Sie eine Marke die skaliert?" text="Wir entwickeln Markenidentitäten und Design Systems, die auf jeder Plattform funktionieren. Von der Strategie bis zur Implementierung." button="Gespräch starten" variant="inline"} :: :div{.blog-tldr} **TL;DR** — Effektives Markendesign 2026 ist ein System, kein Logo. Es beginnt mit strategischer Positionierung, manifestiert sich durch eine kohärente visuelle Sprache (Typografie, Farbe, Motion) und skaliert durch Design Tokens, die jeden Touchpoint automatisch synchronisieren. Die Marken, die gewinnen, sind diejenigen, bei denen jedes Pixel dieselbe Geschichte erzählt — ob auf einer Plakatwand, in einer mobilen App oder auf einer Rechnung. : ## Warum die meisten Markendesign-Projekte scheitern Das typische Markendesign-Projekt beginnt mit Begeisterung und endet mit einem PDF, das niemand öffnet. Ein wunderschön gestaltetes Markenhandbuch wird geliefert, das Team applaudiert, und innerhalb von sechs Monaten ist die Marke zurück in der Inkonsistenz. Der Vertrieb nutzt das alte Logo. Marketing wählt Farben, die sich „richtig anfühlen". Das Produktteam erfindet neue Button-Styles, weil die Markenrichtlinien ihren Anwendungsfall nicht abdecken. Das passiert, weil die meisten Markenprojekte Ergebnisse mit Systemen verwechseln. Ein Logo, eine Farbpalette und eine Schriftauswahl sind Ergebnisse. Ein Marken-Design-System — eines, das in die tatsächlichen Werkzeuge integriert ist, die Menschen benutzen — schafft dauerhafte Konsistenz. Als wir das Rebranding für **Parkett Hinterseer** (28 Filialen in Deutschland) umgesetzt haben, war genau das die Herausforderung: Eine Marke, die auf Außenwerbung, Produktverpackungen, Ladenbau und digitalen Kanälen gleichzeitig konsistent funktionieren muss. Das Ergebnis — ein vollständiges Markensystem aus Logo, Typografie, Icon-Set und Farbwelt — wurde mit dem **German Design Award 2025** ausgezeichnet. Dieser Leitfaden deckt den gesamten Bogen ab: vom strategischen Fundament, das einer Marke ihre Existenzberechtigung gibt, über die visuellen Entscheidungen, die sie wiedererkennbar machen, bis zur technischen Infrastruktur, die sie im großen Maßstab konsistent hält. ::case-ref{slug="parkett-hinterseer" image="/images/cases/hinterseer-2.webp" client="Parkett Hinterseer" label="Rebranding · German Design Award 2025"} Komplettes Rebranding für Deutschlands führenden Premium-Parketthändler — Logo, Corporate Design, Print, Verpackung und Editorial Design für 28 Filialen. :: ## Strategische Positionierung: Das Fundament, das niemand machen will Bevor Figma geöffnet wird, muss eine Marke drei Fragen mit unbequemer Klarheit beantworten: 1. **Für wen sind wir?** Nicht „alle". Eine spezifische Zielgruppe mit spezifischen Bedürfnissen. 2. **Was machen wir anders?** Nicht „bessere Qualität". Ein konkreter, verteidigbarer Unterschied. 3. **Warum sollte es jemanden interessieren?** Nicht Features. Das Ergebnis, das die Zielgruppe tatsächlich will. Diese Antworten bilden die Markenpositionierung — das strategische Fundament, auf dem alles Visuelle aufgebaut wird. Ohne sie wird Design zur Dekoration. ### Das Positionierungs-Framework Ein praktisches Positionierungs-Statement folgt dieser Struktur: > Für **[Zielgruppe]** die **[Kernbedürfnis]** braucht, ist **[Markenname]** die **[Kategorie]**, die **[zentrales Differenzierungsmerkmal]**, weil **[Beweispunkte]**. Das ist kein Slogan. Es ist ein internes Alignment-Tool. Jede Designentscheidung, jede Textwahl, jedes Produktfeature sollte auf dieses Statement rückführbar sein. Wenn eine visuelle Richtung die Positionierung nicht verstärkt, ist sie falsch — egal wie schön sie aussieht. Bei **Caja von Steinling** war die Positionierung klar: Luxus-Hundeaccessoires, die sich visuell vom Massenmarkt abheben — nicht durch Dekoration, sondern durch Zurückhaltung und Präzision. Das bestimmte jede Designentscheidung: das minimalistische Lettering der Wortmarke, die Optimierung des Logos für Lederprägung bei 3mm, die reduzierte Farbpalette. ### Wettbewerbslandschaft kartieren Positionierung findet nicht im Vakuum statt. Kartieren Sie Ihr visuelles Territorium gegenüber Wettbewerbern auf zwei Achsen, die für Ihre Zielgruppe relevant sind. Typische Kombinationen: - **Premium vs. Zugänglich** (Preispositionierung) - **Traditionell vs. Innovativ** (Marktansatz) - **Corporate vs. Menschlich** (Kommunikationsstil) - **Spezialist vs. Generalist** (Scope-Positionierung) Finden Sie den Quadranten, der tatsächlich unbesetzt oder unterversorgt ist — und besetzen Sie ihn visuell. Wenn jeder Wettbewerber in Ihrem Bereich Blau und serifenlose Typografie verwendet, ist das wertvolle Information. Sie können sich entweder anschließen (Kategorie-Zugehörigkeit signalisieren) oder bewusst abweichen (Differenzierung signalisieren). Beides sind valide Strategien. Was nicht valide ist: aus Versehen in die Gleichförmigkeit zu rutschen. ::case-ref{slug="caja-von-steinling" image="/images/cases/caja-2.webp" client="Caja von Steinling" label="Luxusmarke · Brand Development"} Markenentwicklung für ein Luxus-Lederwarenlabel — Logo optimiert für Lederprägung, WordPress-E-Commerce, vollständige Printausstattung inklusive Verpackung. :: ## Typografie: Das am meisten unterschätzte Marken-Asset Wenn Sie nur ein Element Ihrer visuellen Identität wählen könnten, wählen Sie Typografie. Farbe ist emotional, aber ungenau — viele Marken teilen sich dasselbe Blau. Fotografie lässt sich replizieren. Aber Typografie bestimmt den Ton jeder Kommunikation, jedes Interface-Elements, jedes Dokuments, das Ihre Marke produziert. ### Ein Typo-System aufbauen Ein funktionales Marken-Typografie-System braucht drei Rollen: **Display-Schrift** — Für Headlines, Hero-Sections und wirkungsstarke Momente. Hier lebt die Persönlichkeit. Eine geometrische Sans-Serif kommuniziert Präzision. Eine humanistische Serif signalisiert Autorität und Wärme. Ein Custom Variable Font sagt: „Wir investieren in Details." Beim Rebranding von **Parkett Hinterseer** haben wir Bodoni Nova als editoriale Display-Schrift mit Corporate S für Subheadlines und Fließtext kombiniert — die Serif-Sans-Paarung positioniert die Marke gleichzeitig als premium und zugänglich. **Body-Schrift** — Das Arbeitspferd für Fließtext, UI-Labels und Dokumentation. Optimiert für Lesbarkeit bei kleinen Größen auf Screens. Großzügige x-Höhe, offene Buchstabenöffnungen, klare Unterscheidung zwischen ähnlichen Zeichen (Il1, O0). **Monospace-Schrift** (falls zutreffend) — Für Code, Datentabellen und technische Kontexte. Passt zur Markenpersönlichkeit, dient aber einem funktionalen Zweck. ::content-figure{src="/images/blog/brand-moodboard-kmm.jpg" type="image" alt="Corporate Design Moodboard Kunstmuseum Marburg — Logo, Typografie, Farbwelt und Gestaltungsraster" caption="Corporate Design System für das Kunstmuseum Marburg: Logo-Varianten, Typografie (Gill Sans), Farbsystem und Gestaltungsraster für Publikationen und Objektschilder." size="large"} :: ### Type-Scale-Architektur Eine gut strukturierte Type Scale definiert jede Textgröße, die Ihre Marke jemals brauchen wird. Weniger Größen, konsistent eingesetzt, erzeugen stärkeren visuellen Rhythmus als viele Größen, willkürlich verwendet. ```css /* Eine systematische Type Scale basierend auf einem 1.25-Verhältnis */ :root { --fs-2xs: 0.64rem; /* 10.24px — Bildunterschriften, Legal */ --fs-xs: 0.8rem; /* 12.8px — Labels, Metadaten */ --fs-sm: 0.9rem; /* 14.4px — Sekundärer Text */ --fs-base: 1rem; /* 16px — Fließtext */ --fs-md: 1.125rem; /* 18px — Einleitungen */ --fs-lg: 1.25rem; /* 20px — Zwischenüberschriften */ --fs-xl: 1.563rem; /* 25px — Abschnittstitel */ --fs-2xl: 1.953rem; /* 31.25px — Seitenüberschriften */ --fs-3xl: 2.441rem; /* 39px — Hero sekundär */ --fs-4xl: 3.052rem; /* 48.8px — Hero primär */ } ``` Die zentrale Disziplin: Erfinden Sie niemals neue Größen. Wenn ein Design eine Größe braucht, die nicht in der Scale ist, muss meist das Design angepasst werden — nicht das System. ## Farbarchitektur: Jenseits der Palette Markenfarbe bedeutet nicht, fünf Farben zu wählen, die gut zusammenpassen. Es geht darum, ein funktionales Farbsystem aufzubauen, das in jedem Kontext funktioniert — von einer Dark-Mode-App bis zur gedruckten Visitenkarte unter Neonlicht. ::content-figure{src="/images/blog/brand-moodboard-rrteam.jpg" type="image" alt="Corporate Design Moodboard RR-Team — Logo, Iconography, Farbwelt, Typografie und Gestaltungsraster" caption="Ein vollständiges Farbsystem in der Praxis: Das Corporate Design für RR-Team definiert Primär- und Sekundärfarben mit exakten CMYK-, RGB- und HEX-Werten — inklusive Verlaufsregeln und Kontrastpaarungen." size="large"} :: ### Das Drei-Schichten-Farbmodell **Schicht 1: Kernpalette** — Die rohen Farbwerte, die die Marke definieren. Typischerweise 1–2 Primärfarben, 1–2 Sekundärfarben und eine Neutralskala. Diese sind die Quelle der Wahrheit, werden aber nie direkt in der Produktion verwendet. Beim **Kunstmuseum Marburg** haben wir die Farbwelt bewusst auf zwei Töne reduziert: KMM Gold und KMM Black. Eine kulturelle Institution braucht keine bunte Palette — sie braucht Farben, die neben Kunstwerken aus sechs Jahrhunderten bestehen können, ohne mit ihnen zu konkurrieren. **Schicht 2: Semantische Tokens** — Kontextuelle Zuordnungen mit Bedeutung. `color-primary` verweist auf einen Kernwert. `color-text` mappt auf die passende Neutralfarbe. `color-error` mappt auf ein Rot, das auf Kontrast-Compliance getestet wurde. **Schicht 3: Component Tokens** — Spezifische Verwendungskontexte. `button-primary-bg`, `card-border`, `input-focus-ring`. Diese schaffen eine vorhersagbare, wartbare Schnittstelle zwischen Designabsicht und Implementierung. ```json { "color": { "core": { "blue-600": { "value": "#0052CC" }, "blue-100": { "value": "#E6F0FF" }, "neutral-900": { "value": "#1A1A2E" }, "neutral-100": { "value": "#F5F5F7" } }, "semantic": { "primary": { "value": "{color.core.blue-600}" }, "bg-page": { "value": "{color.core.neutral-100}" }, "text-body": { "value": "{color.core.neutral-900}" } }, "component": { "button-primary-bg": { "value": "{color.semantic.primary}" }, "button-primary-text": { "value": "#FFFFFF" } } } } ``` ### Accessibility-First Farbauswahl Jede Farbpaarung im System muss die WCAG 2.1 AA Kontrastanforderungen erfüllen: - **4.5:1** Minimum für Fließtext - **3:1** Minimum für großen Text (18px+ oder 14px fett) - **3:1** Minimum für UI-Komponenten und grafische Objekte Das ist nicht optional. Neben der rechtlichen Compliance in vielen Märkten reduziert schlechter Kontrast direkt die Conversion-Raten. Nutzer, die Ihre Inhalte nicht lesen können, können Ihr Produkt nicht kaufen. ::case-ref{slug="kunstmuseum-marburg" image="/images/cases/kunstmuseum-marburg-9.webp" client="Kunstmuseum Marburg" label="Markenrelaunch · German Design Award"} Logo-Relaunch und vollständiges Rebranding für eines der bedeutendsten Universitätskunstmuseen Deutschlands — Corporate Design, Printdesign und Merchandise. :: ## Motion als Markensprache Statische Marken sind unvollständige Marken. 2026 ist Motion ein Kern-Identitätselement — kein Nachgedanke, der während der Implementierung ergänzt wird. Die Art, wie Elemente eine Seite betreten, wie Buttons auf Interaktion reagieren, wie Inhalte zwischen Zuständen wechseln — diese Verhaltensweisen kommunizieren Persönlichkeit ebenso kraftvoll wie Farbe oder Typografie. ### Motion-Prinzipien definieren Die Bewegungssprache einer Marke sollte durch Prinzipien definiert werden, nicht durch einzelne Animationen: **Tempo** — Ist die Marke energetisch und schnell oder bedacht und bewusst? Das bestimmt die Basis-Dauerwerte. Eine Fintech-Marke nutzt vielleicht 150–250ms Übergänge (effizient, responsiv). Eine Luxusmarke vielleicht 400–600ms (überlegt, premium). **Easing** — Die Beschleunigungskurve erzählt eine Geschichte. Lineare Bewegung wirkt mechanisch. Ease-out wirkt responsiv und natürlich. Spring-basiertes Easing wirkt spielerisch und physisch. Wählen Sie eine Familie und setzen Sie sie konsistent ein. **Choreografie** — Wie verhalten sich mehrere Elemente zueinander in Bewegung? Versetzte Einblendungen implizieren Hierarchie. Gleichzeitige Übergänge implizieren Gleichwertigkeit. Verbundene Animationen (wo der Abgang eines Elements den Auftritt eines anderen auslöst) implizieren narrativen Fluss. ```css :root { /* Motion Tokens */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); } ``` ::blog-cta{title="Probleme mit Markenkonsistenz?" text="Wir prüfen bestehende Marken und bauen Design Systems, die jedes Team auf Linie halten. Von Figma bis zum Produktionscode." button="Marken-Audit anfragen" variant="inline"} :: ## Design Tokens: Die technische Brücke Design Tokens sind der Mechanismus, der eine Markenidentität von einem PDF in ein lebendiges System verwandelt. Sie sind benannte Entitäten — `color.primary`, `spacing.lg`, `font.heading` — gespeichert in maschinenlesbarem Format (typischerweise JSON) und transformiert in plattformspezifischen Code: CSS Custom Properties für Web, Swift-Konstanten für iOS, XML-Ressourcen für Android, Figma-Variablen für Design. ### Token-Architektur in der Praxis ```json { "spacing": { "2xs": { "value": "4px" }, "xs": { "value": "8px" }, "sm": { "value": "12px" }, "md": { "value": "16px" }, "lg": { "value": "24px" }, "xl": { "value": "32px" }, "2xl": { "value": "48px" }, "3xl": { "value": "64px" } }, "borderRadius": { "none": { "value": "0" }, "sm": { "value": "4px" }, "md": { "value": "8px" }, "lg": { "value": "16px" }, "full": { "value": "9999px" } } } ``` Diese Tokens werden in jede Plattform kompiliert, die Ihre Marke berührt: ```css /* Generiertes CSS */ :root { --spacing-2xs: 4px; --spacing-xs: 8px; --spacing-sm: 12px; --spacing-md: 16px; --spacing-lg: 24px; } ``` ```swift // Generiertes Swift enum Spacing { static let xxs: CGFloat = 4 static let xs: CGFloat = 8 static let sm: CGFloat = 12 static let md: CGFloat = 16 static let lg: CGFloat = 24 } ``` Die Stärke liegt in der Single Source of Truth. Ändern Sie die Spacing-Scale einmal, und jede Plattform aktualisiert sich. Rebranding? Tauschen Sie die Token-Werte und jedes Produkt spiegelt die neue Identität wider — ohne Komponentencode anzufassen. ::content-figure{src="/images/blog/brand-mockups.jpg" type="image" alt="Markenidentität angewendet auf Visitenkarten, Briefpapier und digitale Interfaces" caption="Eine skalierbare Identität funktioniert konsistent von der Visitenkarte bis zum Enterprise-Dashboard." size="large"} :: ## Der Markendesign-Prozess: Was tatsächlich passiert Ein professionelles Markendesign-Engagement ist kein linearer Marsch von Brief zu Lieferung. Es ist ein strukturierter Zyklus von Divergenz und Konvergenz über vier Phasen. ### Phase 1: Discovery (2–4 Wochen) - Stakeholder-Interviews und Alignment-Workshops - Visuelles Wettbewerbs-Audit und Landschaftskartierung - Zielgruppenforschung und Persona-Validierung - Verfeinerung oder Entwicklung der Markenpositionierung - Ergebnis: Strategisches Briefing mit Positionierung, Persönlichkeit und Rahmenbedingungen ### Phase 2: Visuelle Exploration (3–4 Wochen) - 2–3 unterschiedliche visuelle Richtungen (Moodboards, Typo-Explorationen, Farbstudien) - Logokonzepte und Wortmarken-Entwicklung - Fotografie- und Illustrationsstil-Definition - Motion-Language-Prinzipien - Ergebnis: Freigegebene visuelle Richtung mit Begründung ### Phase 3: System Design (3–5 Wochen) - Vollständige Type Scale und Paarungsspezifikationen - Komplettes Farbsystem mit semantischen und Component Tokens - Komponentenbibliothek (Buttons, Cards, Formulare, Navigationspatterns) - Responsive-Verhaltensdefinitionen - Barrierefreiheits-Audit und Anpassungen - Ergebnis: Design System in Figma mit Dokumentation ### Phase 4: Implementierung & Übergabe (2–4 Wochen) - Design-Token-Export-Pipeline (JSON zu CSS/Swift/XML) - Entwickler-Dokumentation und Integrationsleitfaden - Asset-Produktion (Logos in allen Formaten, Social Templates, Druckvorlagen) - Markenrichtlinien (lebende Dokumentation, kein statisches PDF) - Ergebnis: Produktionsreifes Design System mit Integrationsunterstützung ## Markendesign-Effektivität messen Markendesign ist keine Kunst — es ist ein Business-Tool. Messen Sie entsprechend: **Wiedererkennung** — Ungestützte Recall-Umfragen vor und nach dem Rebranding. Können Menschen Ihre Marke an einem beschnittenen Logo, einer Farbe, einer typografischen Behandlung identifizieren? **Konsistenz-Score** — Prüfen Sie alle Touchpoints vierteljährlich. Bewerten Sie jeden nach Einhaltung des Design Systems. Tracken Sie die Verbesserung über die Zeit. **Performance-Metriken** — Conversion-Raten, Verweildauer, Absprungrate. Eine starke Markenidentität beeinflusst diese Zahlen direkt durch Vertrauen und Klarheit. **Produktionsgeschwindigkeit** — Wie schnell kann das Team neue Seiten, Kampagnen oder Features ausliefern? Ein funktionierendes Design System sollte die Produktion messbar beschleunigen. ## Fazit Markendesign 2026 ist eine Engineering-Disziplin ebenso wie eine kreative. Die Marken, die Konsistenz über hunderte Touchpoints hinweg aufrechterhalten, sind nicht diejenigen mit den besten Markenhandbüchern — es sind die, die Systeme gebaut haben. Design Tokens ersetzen Style Guides. Komponentenbibliotheken ersetzen Brand Books. Automatisierte Pipelines ersetzen manuelles QA. Die kreative Vision zählt nach wie vor enorm. Ein technisch perfektes System auf schwacher Positionierung produziert konsistente Mittelmäßigkeit. Aber starke kreative Vision ohne systematische Infrastruktur produziert schönes Chaos. Das Ziel ist beides: eine Marke, die markant genug ist, um erinnert zu werden, und strukturiert genug, um gepflegt zu werden. --- # Die 10 wichtigsten On-Site SEO Maßnahmen für deine Webseite URL: https://www.reflect-media.com/de/blog/on-site-seo-checkliste-website Locale: de Kind: blog Category: SEO Published: 2024-04-08 Updated: 2026-03-01 > Damit deine Webseite in Suchmaschinen und Apps vernünftig angezeigt wird, solltest du die wesentlichen Grundlagen des SEO beachten. Hier erfährst du mehr. ::blog-cta{title="Kostenlose SEO-Analyse für Ihre Webseite" text="Wir prüfen Ihre Webseite auf die wichtigsten SEO-Faktoren und zeigen Ihnen konkrete Verbesserungspotenziale." button="Jetzt anfragen" variant="inline"} :: :div{.blog-tldr} **TL;DR** — Erfolgreiches On-Site SEO basiert auf zehn Säulen: technische Performance, einzigartiger Content, optimierte Seitentitel und Meta-Descriptions, sprechende URLs, saubere Überschriften-Hierarchie, Bilder mit Alt-Attributen, strategische interne Verlinkung, Social-Meta-Tags, eine XML-Sitemap und strukturierte Daten. Wer diese Grundlagen beherrscht, hat die Basis für nachhaltiges organisches Wachstum. : ## Warum On-Site SEO die Grundlage für organisches Wachstum ist Suchmaschinenoptimierung ist kein einmaliges Projekt, sondern ein fortlaufender Prozess. Doch bevor du über Linkbuilding, Content-Marketing oder Social-Media-Strategien nachdenkst, müssen die Grundlagen auf deiner eigenen Webseite stimmen. On-Site SEO umfasst alle Maßnahmen, die du direkt auf deiner Webseite umsetzen kannst, um die Sichtbarkeit in Suchmaschinen zu verbessern. Google und andere Suchmaschinen bewerten Webseiten anhand hunderter Faktoren. Viele dieser Faktoren hast du selbst in der Hand. In diesem Artikel zeigen wir dir die zehn wichtigsten On-Site SEO Maßnahmen, die du sofort umsetzen kannst — mit konkreten Code-Beispielen und Praxis-Tipps. ## 1. Wie optimiere ich die technische Performance meiner Webseite? Suchmaschinen wie Google achten stark auf User Experience, insbesondere auf die Ladezeit. Seit der Einführung der Core Web Vitals sind Performance-Metriken ein direkter Ranking-Faktor. Weitere technische Faktoren fürs Ranking: - **Mobile-Optimierung** — Responsive Design ist Pflicht, Google indexiert Mobile-First - **Komprimierte Übertragung** von CSS, HTML und JavaScript (z.B. mit gzip oder Brotli) - **Bereitstellung einer robots.txt** — steuert, welche Bereiche gecrawlt werden - **Minifizierung** von CSS und JavaScript - **Browser-Caching** richtig konfigurieren - **Reduzierung der HTTP-Requests** beim Seitenbesuch - **Fehlerfreier Code** — valides HTML, CSS und JavaScript - **Bildoptimierung** — WebP-Format, responsive Bilder, Lazy Loading - **SSL-Zertifikat** — HTTPS ist seit Jahren Ranking-Faktor Ein Beispiel für eine optimierte `robots.txt`: ```txt User-agent: * Allow: / Disallow: /admin/ Disallow: /api/ Sitemap: https://www.deinewebseite.de/sitemap.xml ``` ## 2. Warum ist einzigartiger Content der wichtigste Ranking-Faktor? Content ist und bleibt der wichtigste Faktor für gute Rankings. Google wird immer besser darin, die Qualität und Relevanz von Inhalten zu bewerten. Entscheidend sind: - **Jeder Inhalt nur unter einer URL** — kein Duplicate Content - **Kein Keyword Cannibalization** — jede Seite sollte auf ein Hauptkeyword optimiert sein - **Wichtige Keywords in Überschriften und Paragraphen** — das Hauptkeyword gehört in den H1 - **Klar definierte Zielgruppe** mit passender Ansprache - **Kein kopierter Inhalt** von anderen Seiten — Google erkennt das zuverlässig - **Langform-Content** (1.700+ Wörter) performt für B2B-Themen nachweislich besser Der Schlüssel liegt darin, Inhalte zu erstellen, die eine Frage besser beantworten als jede andere Seite im Internet. Denke in Themen-Clustern statt in einzelnen Keywords. ## 3. Wie schreibe ich einen optimalen Seitentitel? Der HTML-``-Tag ist einer der stärksten On-Page-Ranking-Faktoren. Er wird als anklickbare Überschrift in den Suchergebnissen angezeigt und entscheidet maßgeblich über die Klickrate. Best Practices: - **Wichtige Keywords an den Anfang** stellen - **Maximal ca. 60 Zeichen** für vollständige Darstellung im SERP-Snippet - **Ein eigener, themenbezogener Titel pro Seite** - **Als Frage oder klares Statement** formulieren — das matcht die Suchintention ```html <!-- Gut --> <title>10 On-Site SEO Maßnahmen für bessere Rankings | reflect.media Blog | reflect.media GmbH ``` ## 4. Was macht eine gute Meta-Description aus? Die Meta-Description ist zwar kein direkter Ranking-Faktor, beeinflusst aber die Click-Through-Rate (CTR) in den Suchergebnissen — und die CTR ist ein indirekter Ranking-Faktor. - **Pro Seite eine eigene, einzigartige Description** - **Inhalt der Seite widerspiegeln** und zum Klicken motivieren - **Relevante Keywords integrieren** — sie werden bei Übereinstimmung fett dargestellt - **Zwischen 140 und 160 Zeichen** — kurz und prägnant ```html ``` ## 5. Warum sind sprechende URLs so wichtig für SEO? URLs sind einer der ersten Hinweise, die Google über den Inhalt einer Seite bekommt. Sprechende URLs verbessern nicht nur die Auffindbarkeit, sondern auch die Nutzererfahrung. - **Relevante Keywords in der URL** verwenden - **Keine kryptischen Parameter** oder Session-IDs - **Bindestriche statt Unterstriche** zur Worttrennung - **Kurz und beschreibend** halten | URL-Typ | Beispiel | Bewertung | |---------|----------|-----------| | Sprechend | `https://www.deinewebseite.de/seo-massnahmen` | Gut | | Kryptisch | `https://www.deinewebseite.de/index.php?id=423` | Schlecht | | Zu lang | `https://www.deinewebseite.de/blog/2024/04/die-zehn-wichtigsten-on-site-seo-massnahmen-fuer-deine-webseite` | Vermeiden | ## 6. Wie strukturiere ich Überschriften richtig? Die Hierarchie der Überschriften (H1–H6) hilft Suchmaschinen und Nutzern, den Inhalt einer Seite zu verstehen. Eine saubere Struktur signalisiert thematische Relevanz. - **H1 nur einmal pro Seite** — das Hauptthema - **H2 für Hauptabschnitte** — als Fragen formuliert für AI-Snippets - **H3–H6 für Unterabschnitte** — logisch verschachtelt - **Keywords natürlich in Überschriften** einbauen ```html

Die 10 wichtigsten On-Site SEO Maßnahmen

Wie optimiere ich die technische Performance?

Core Web Vitals verstehen

Ladezeit-Optimierung

Warum ist Content der wichtigste Faktor?

``` ::blog-cta{variant="inline"} :: ## 7. Wie optimiere ich Bilder für Suchmaschinen? Bilder bieten enormes SEO-Potenzial — besonders über die Google-Bildersuche. Gleichzeitig sind nicht-optimierte Bilder der häufigste Grund für langsame Ladezeiten. - **Alt- und Title-Attribute** bei allen Bildern setzen — beschreibend und mit Keywords - **Bildnamen** nur alphanumerisch, getrennt mit Bindestrichen - **WebP-Format** für optimale Komprimierung - **Responsive Bilder** mit `srcset` für verschiedene Bildschirmgrößen - **Lazy Loading** für Bilder außerhalb des sichtbaren Bereichs ```html SEO Checkliste mit den 10 wichtigsten On-Site Maßnahmen ``` ## 8. Was ist die richtige Strategie für interne Verlinkung? Interne Links helfen Google, die Struktur deiner Webseite zu verstehen und verteilen die sogenannte "Link Power" auf wichtige Seiten. Eine durchdachte interne Verlinkung ist einer der am meisten unterschätzten SEO-Hebel. - **Title-Attribut bei Links** nutzen für zusätzlichen Kontext - **Linktext zielführend formulieren** — nicht "hier klicken", sondern die Zielseite beschreiben - **Thematisch verwandte Seiten** miteinander verlinken - **Wichtige Seiten** von möglichst vielen internen Seiten verlinken ```html Erfahren Sie mehr über unsere Webentwicklung Hier klicken ``` ## 9. Welche Social Meta Tags braucht meine Webseite? Wenn deine Webseite in sozialen Netzwerken geteilt wird, bestimmen Open Graph und Twitter Card Meta-Tags, wie der geteilte Link dargestellt wird. Das beeinflusst direkt die Klickrate. **Open Graph** für Facebook, LinkedIn und andere Plattformen: ```html ``` **Twitter Cards** für optimierte Darstellung in Tweets: ```html ``` ## 10. Wie erstelle ich eine effektive XML-Sitemap? Eine XML-Sitemap ist eine Datei, die alle wichtigen URLs deiner Webseite auflistet und Google beim Crawling unterstützt. Sie ist besonders wertvoll für: - **Neue Inhalte** schneller indexieren lassen - **Große Webseiten** mit tiefer Seitenstruktur - **Seiten ohne viele interne Links** auffindbar machen - **Zeitpunkt der letzten Änderung** an Google kommunizieren ```xml https://www.deinewebseite.de/ 2026-03-01 weekly 1.0 https://www.deinewebseite.de/leistungen 2026-02-15 monthly 0.8 ``` Die Sitemap sollte unter `https://www.deinewebseite.de/sitemap.xml` erreichbar sein und in der `robots.txt` referenziert werden. ## Bonus: Strukturierte Daten für Rich Snippets Zusätzlich zu den zehn Kernmaßnahmen empfehlen wir den Einsatz von strukturierten Daten (Schema.org) im JSON-LD-Format. Diese helfen Google, den Inhalt deiner Seite besser zu verstehen und als Rich Snippet in den Suchergebnissen darzustellen. ```html ``` ## Fazit: Dein SEO-Aktionsplan On-Site SEO ist keine einmalige Aufgabe — es ist eine fortlaufende Disziplin, die regelmäßige Aufmerksamkeit erfordert. Die zehn Maßnahmen in diesem Leitfaden bilden das Fundament für nachhaltige organische Sichtbarkeit. Beginne mit den technischen Grundlagen: Stelle sicher, dass deine Seite schnell lädt, mobilfreundlich ist und HTTPS verwendet. Dann widme dich dem Content: Erstelle einzigartige, ausführliche Inhalte, die die Fragen deiner Zielgruppe wirklich beantworten. Optimiere schließlich die On-Page-Elemente: Titel, Descriptions, URLs, Überschriften-Hierarchie, Bild-Attribute, interne Links, Social-Meta-Tags, deine XML-Sitemap und strukturierte Daten. Die erfolgreichsten Webseiten behandeln SEO als integralen Bestandteil ihres Entwicklungsprozesses, nicht als nachträglichen Gedanken. Jede neue Seite, jede Content-Aktualisierung und jede technische Änderung sollte diese zehn Prinzipien berücksichtigen. Wenn du professionelle Unterstützung für deine SEO-Strategie benötigst, kombiniert unser Team bei reflect.media über 15 Jahre Erfahrung in Webentwicklung und digitalem Marketing. Wir bauen Webseiten, die nicht nur visuell überzeugend, sondern von Grund auf technisch optimiert sind. ## Häufig gestellte Fragen **Wie lange dauert es, bis SEO-Maßnahmen wirken?** In der Regel 3–6 Monate für spürbare Ergebnisse. Technische Fixes wirken schneller, Content-Optimierungen brauchen Zeit für Indexierung und Autoritätsaufbau. **Muss ich alle zehn Maßnahmen umsetzen?** Ja, denn sie bauen aufeinander auf. Technisches SEO ist die Basis, darauf folgt Content-Optimierung, dann On-Page-Elemente. Lücken in der Basis limitieren alles darüber. **Brauche ich ein SEO-Tool?** Für den Einstieg reichen die kostenlosen Google-Tools: Search Console, PageSpeed Insights und das Rich Results Testing Tool. Für fortgeschrittene Analyse empfehlen wir Ahrefs oder Semrush. **Wie oft sollte ich meine Inhalte aktualisieren?** Evergreen-Content sollte mindestens alle 6–12 Monate geprüft und aktualisiert werden. Google belohnt Frische — "Updated"-Signale erhöhen die Chance auf Featured Snippets. **Was ist der Unterschied zwischen On-Site und Off-Site SEO?** On-Site SEO umfasst alles, was du auf deiner eigenen Webseite optimierst. Off-Site SEO bezieht sich auf externe Faktoren wie Backlinks, Brand Mentions und Social Signals. **Was sind Core Web Vitals und warum sind sie wichtig?** Core Web Vitals sind drei Metriken von Google: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) und CLS (Cumulative Layout Shift). Sie messen Ladegeschwindigkeit, Interaktivität und visuelle Stabilität und sind seit 2021 ein direkter Ranking-Faktor. **Ist HTTPS wirklich ein Ranking-Faktor?** Ja, Google bestätigt HTTPS als Ranking-Signal seit 2014. Ohne SSL-Zertifikat zeigen Browser eine Sicherheitswarnung, was Nutzer abschreckt und die Absprungrate erhöht. --- # Automotive Markets: Markenidentität URL: https://www.reflect-media.com/de/case-studies/automotive-markets Locale: de Kind: case-study Client: Automotive Markets Year: 2022 Industry: Automobil > Corporate Design und Branding für Automotive Markets — ein ausdrucksstarkes, geometrisches Markenidentitätssystem für ein Unternehmen in der. ## Herausforderung Die Automobilbranche hat eine ganz eigene visuelle Sprache — geometrische Präzision, minimale Dekoration und ein Vorwärtsmomentum, das Performance kommuniziert, ohne es herauszuschreien. Diesen Ton genau zu treffen bedeutet, sowohl die Konventionen der Branche zu verstehen als auch den spezifischen Punkt, an dem sich diese Marke von ihren Wettbewerbern unterscheiden muss. Die Identität musste auch genuinen flexibel sein: im kleinen Maßstab eines Visitenkarten-Icons, im mittleren einer Briefbogenmarke und im großen Format von Beschilderung oder Fahrzeuggrafik — alles ohne Kohärenz oder Wirkung zu verlieren. ## Lösung Das AM-Monogramm ist das Herzstück der Identität — ein geometrisches Zeichen, das die Buchstaben A und M zu einer einzelnen, präzise konstruierten Form fusioniert. Der winklige Gipfel des A erzeugt eine vorwärtsweisende Diagonale, die dem Zeichen Richtung und Energie gibt; das M erdet es mit Stabilität und Solidität. Das Ergebnis liest sich unmittelbar als professionelles Automobilbranchenzeichen, ohne aus dem generischen visuellen Vokabular der Industrie zu schöpfen. Die Palette ist in Fast-Schwarz mit Weiß gehalten — keine Farbe nötig. Geometrie und Proportionen leisten die Arbeit. Die Wortmarke in klarer Serifenloser verstärkt die zeitgenössische Positionierung der Marke, und die Geschäftsausstattungs-Suite setzt die Identität mit konsistenter Überzeugung über alle Standard-Geschäfts-Touchpoints ein. ## Unsere Leistungen - **Logo Design:** Ein geometrisches AM-Monogramm für die Automobilbranche — präzise, richtungsweisend und vielseitig vom Icon bis zum Großformat - **Corporate Design:** Vollständiges visuelles Identitätssystem mit Typografie-, Farb- und Layoutrichtlinien für konsistente Markenanwendung - **Markensystem:** Design-Assets und Anwendungsregeln für konsistente Markennutzung über alle Kontexte ## Ergebnis Eine Markenidentität, die Automotive Markets mit der Autorität positioniert, die die Branche verlangt — präzise, ausdrucksstark und für Langlebigkeit gebaut. Das AM-Zeichen funktioniert überall, wo das Unternehmen es braucht, und die vollständige Geschäftsausstattungs-Suite stellt sicher, dass jede Kommunikation die Standards der Marke widerspiegelt. --- # Bethel bewegt: Digitale Mitarbeiter-Bewegungsplattform URL: https://www.reflect-media.com/de/case-studies/bethel-bewegt Locale: de Kind: case-study Client: Bethel Year: 2021 Industry: Non-Profit / Soziales > UI/UX-Design und Webentwicklung für Bethels interne Bewegungskampagne — eine digitale Plattform, auf der Mitarbeitende Aktivitäten eintragen, in Teams. ## Herausforderung Eine Fitness-Challenge-Plattform für eine große, verteilte Belegschaft zu bauen ist ein anderes Problem als eine öffentliche Website zu erstellen. Die Plattform musste individuelles Aktivitäts-Logging, Teambildung über unterschiedliche Bereiche hinweg, Echtzeit-Leaderboard-Berechnung und Profilverwaltung abbilden — in einem System, das einfach genug ist, damit Mitarbeitende aller Ebenen es tatsächlich nutzen. Die Kampagne musste sich auch genuinen Schwung verleihen, statt wie eine HR-Pflichtübung zu wirken. Die Benutzeroberfläche musste zur Teilnahme motivieren, Fortschritte auf befriedigende Weise sichtbar machen und freundschaftlichen Wettbewerb unterstützen — ohne Nutzende abzuschrecken, die erstmals ihre körperliche Aktivität tracken. Barrierefreiheit war nicht verhandelbar: Die Plattform dient einer Organisation, deren eigene Werte auf Inklusion aufgebaut sind und deren Belegschaft Menschen mit unterschiedlicher digitaler Erfahrung umfasst. ## Lösung Wir haben die Plattform rund um drei zentrale Nutzerreisen gestaltet: Aktivität eintragen, Leaderboard prüfen, Team-Fortschritt sehen. Alles andere ist sekundär. Das Dashboard zeigt das Wesentliche klar: persönliche Statistiken, Team-Ranking, letzte Aktivitäten — mit einer visuellen Hierarchie, die Engagement belohnt, ohne Einsteiger zu überfordern. Der Aktivitäts-Eingabefluss ist bewusst minimal gehalten: Sportart wählen, Zeit und Strecke eintragen, fertig. Das Profilsystem erlaubt Mitarbeitenden, sich ihrem Bethel-Bereich und Team zuzuordnen und so das mehrstufige Leaderboard-System zu speisen, das den Wettbewerb auf jeder Ebene spannend macht. Das visuelle Design greift Bethels Kampagnenidentität auf — lebendig, farbig und menschlich — und adaptiert sie in ein dunkel gehaltenes UI, das auf dem Bildschirm klar lesbar ist und der Plattform ihre eigene Energie verleiht. ## Unsere Leistungen - **UI/UX Design:** Nutzerzentriertes Design für eine komplexe Mehrfachrollen-Plattform, vereinfacht bis zu dem Punkt, an dem jede Mitarbeiterin teilnehmen kann — ohne Reibungsverluste - **Webentwicklung:** Performante, barrierefreie Web-App mit Echtzeit-Daten, responsiv für alle Endgeräte - **Kampagnendesign:** Visuelle Umsetzung der Bethel-Kampagnenidentität in ein digitales Produkt mit eigenem, stimmigem Erscheinungsbild ## Ergebnis Eine digitale Plattform, die eine Gesundheitskampagne erfolgreich in ein motivierendes Erlebnis für eine große und vielfältige Belegschaft übersetzt hat. Die Arbeit erhielt eine **German Design Award Auszeichnung** — als Anerkennung nicht nur der Designqualität, sondern der Leistung, etwas für eine Organisation so komplex wie Bethel mit Klarheit und Sorgfalt zu bauen. Die Plattform hat die Kampagne durchgeführt, die gemeinsamen Kilometer erfasst und Tausenden von Mitarbeitenden einen Grund gegeben, die Laufschuhe zu schnüren. --- # Caja von Steinling: Luxus-Branding URL: https://www.reflect-media.com/de/case-studies/caja-von-steinling Locale: de Kind: case-study Client: Caja von Steinling Year: 2024 Industry: Luxus-Tierbedarf > Komplette Markenentwicklung für ein Luxus-Hundeaccessoires-Label — Logo-Kreation optimiert für Lederprägung, WordPress-Website und vollständige. ## Herausforderung Das Label benötigte eine Markenidentität, die echte Luxus-Glaubwürdigkeit über ein breites Anwendungsspektrum trägt. Das Logo musste in Plakatgröße ebenso funktionieren wie als Blindprägung auf einem 12-mm-Collar-Tag — zwei völlig unterschiedliche technische Anforderungen ohne Kompromissspielraum. Darüber hinaus brauchte Caja eine Website, die die Produkte als die Premium-Objekte positioniert, die sie sind, sowie Print-Materialien, die neben dem physischen Produkt bestehen können, ohne minderwertig zu wirken. Alles musste eine Zielgruppe ansprechen, die den Unterschied zwischen Handwerk und Imitation erkennt. ## Lösung Wir haben die Identität rund um die CAJA-Wortmarke aufgebaut — ein maßgeschneidertes Lettering mit präzisen Proportionen, entwickelt für digitale Darstellung und die spezifischen Anforderungen der Lederprägetechnik. Die geometrischen Buchstabenformen behalten ihren Charakter in jeder Größe, und das minimale Zeichen reduziert sich auf ein einzelnes prägebares Element für die Produktanwendung. Die Markenpalette — tiefes Waldgrün, warmes Salbei und Fast-Schwarz — verleiht der Identität eine leise Luxusanmutung, ohne auf die generischen Gold-und-Creme-Codes der Kategorie zurückzugreifen. Die Typografie setzt durchgehend auf Bebas Neue Pro und verstärkt so den präzisen, kompromisslosen Charakter der Marke. Die WordPress-Website stellt die Produkte in den Mittelpunkt: vollflächige Lifestyle-Fotografie, klare Navigation und ein Tonfall, der so selbstbewusst ist wie das Produkt selbst. Responsive Design sorgt für dasselbe Premium-Erlebnis auf mobilen Geräten, über die die meisten Kunden die Marke zuerst entdecken. ## Unsere Leistungen - **Logo-Design:** Maßgeschneiderte Wortmarke für maximale Vielseitigkeit — von digitalen Touchpoints bis zur Lederprägung, in jeder Größe lesbar - **Markenidentität:** Vollständiges visuelles System mit Farbe, Typografie und Layoutprinzipien für konsistenten Markenauftritt - **WordPress-Website:** E-Commerce und Markenpräsenz im Einklang mit der Premium-Positionierung des Produkts - **Print-Design:** Visitenkarten, Briefbogen, Verpackung und Marketingmaterialien für konsistente Markenqualität an jedem Touchpoint ## Ergebnis Eine Markenidentität, die das Wort Luxus verdient — nicht durch Dekoration, sondern durch Präzision und Zurückhaltung. Das CAJA-Erscheinungsbild hält über alle Anwendungen zusammen, von der Website bis zum Collar-Tag, und die Website gibt den Produkten den redaktionellen Kontext, den sie verdienen. Caja von Steinling startete mit einer vollständigen Marke, die bereit ist zu wachsen — und die den visuellen Standard für Premium-Hundeaccessoires auf dem deutschen Markt setzt. --- # Cessaro: Web & Print Luxus-Lautsprecher URL: https://www.reflect-media.com/de/case-studies/cessaro Locale: de Kind: case-study Client: Cessaro Horn Acoustics Year: 2022 Industry: Luxury Audio / Hi-Fi > Webdesign und Printdesign für Cessaro Horn Acoustics — handgefertigte Hornlautsprecher außergewöhnlicher Dimension und Qualität. ## Herausforderung Für ein Produkt dieser Klasse zu gestalten ist eine spezifische kreative Herausforderung. Der Lautsprecher selbst ist das visuelle Herzstück — entworfen mit Dramatik, Präzision und einer handwerklichen Qualität, die Fotografie nur teilweise vermitteln kann. Alles darum herum muss diesen Eindruck unterstützen, ohne mit ihm zu konkurrieren. Die Zielgruppe weiß alles. Sie haben jeden Test gelesen, jede Messe besucht, jedes Konkurrenzsystem gehört. Eine Website oder Broschüre, die auch nur leicht kompromittiert wirkt, signalisiert, dass die Marke dahinter es vielleicht auch sein könnte. Das visuelle Umfeld musste genauso ernsthaft und gut gemacht sein wie das Produkt. Die Produktpalette erforderte auch eine umfassende Kommunikation: mehrere Produktfamilien, tiefe technische Spezifikationen, Individualisierungsoptionen (Hornfarben, Kabinettoberflächenbehandlungen, Holzfurniere) und ein globales Vertriebs- und Servicenetzwerk — alles organisiert, ohne dass Komplexität zur Verwirrung wird. ## Lösung Die Website wurde nach dem Prinzip gestaltet, dass Fotografie primär ist, alles andere sekundär. Das Layout gibt jedem Produktsystem den Raum und die Größe, die es verdient — vollflächige Bilder, sparsame Typografie und Navigation, die sich zurückhält. Der Slogan "Listen and you will hear" setzt den Ton: selbstbewusst, direkt und vollkommen sicher im Produkt. Die Produktbroschüren für OPUS-I und ALPHA III folgen derselben Logik — dramatische Produktfotografie auf dem Titel, präzise technische Spezifikationen im Inneren. Dies sind keine Marketingdokumente; es sind technische Kommunikationsmittel für ein Publikum, das jede Zeile liest. Der Produktkatalog bringt die gesamte Cessaro-Linie in einem Hardcover-Format zusammen, das der Marke würdig ist — vom Einführungstext über individuelle Systembilder, Individualisierungsoptionen und Elektronik, präsentiert mit der ruhigen Autorität eines gut produzierten Objekts. ## Unsere Leistungen - **Webdesign:** Eine Premium-Webpräsenz, die jedes Produktsystem in der Größe und Auflösung präsentiert, die die Fotografie verdient - **Print Design:** Produktbroschüren und umfassender Hardcover-Katalog für die gesamte Cessaro-Linie - **UI/UX Design:** Navigation und Informationsarchitektur für eine komplexe, mehrfamilige Produktpalette — präsentiert ohne Reibungsverluste ## Ergebnis Eine digitale und gedruckte Präsenz, die dem Anspruch der Cessaro-Produkte gerecht wird — gebaut mit derselben Sorgfalt, Präzision und Kompromisslosigkeit, die in jeden ihrer Lautsprecher fließt. Der Katalog ist ein Objekt, das der Marke würdig ist: die Art von Ding, das man im Regal behält, weil es dort hingehört. --- # Cholomon: Feinkost-Webshop URL: https://www.reflect-media.com/de/case-studies/cholomon Locale: de Kind: case-study Client: Cholomon Gießen Year: 2019 Industry: Lebensmittel & Getränke / Feinkost-Einzelhandel > Webshop-Design und -Entwicklung für Cholomon — ein Gießener Importeur authentischer griechischer Feinkost aus der Chalkidiki-Region. ## Herausforderung Über 170 Feinkost-Spezialitäten online zu verkaufen erfordert einen Shop, der echte Komplexität bewältigen kann: Kategorien, Filter, Produktvariationen, Aktionspakete und Upsell-Logik — und dabei warm, appetitlich und vertrauenswürdig wirkt. Die Marke hatte auch eine Geschichte zu erzählen. Cholomon ist nicht nur ein Produktname — es ist ein Ort, ein Berg, eine Region und eine Philosophie der Kleinproduzenten-Authentizität. Die Website musste diese Geschichte so tragen, dass sie jedem Kauf eine Bedeutung verleiht, statt die Produkte nur als Online-Katalog zu präsentieren. Die Zielgruppe sind deutsche Verbraucher mit Interesse an authentischer mediterraner Küche — ein Markt, der für schöne Produktpräsentation, klare Herkunft und einfaches Einkaufen belohnt. ## Lösung Wir bauten einen WooCommerce-Shop, der um natürliche Lebensmittelfotografie und eine klare, lesbare Struktur herum gestaltet ist. Die Startseite zeigt Aktionspakete durch gestapelte Herobanners — Rabatte auf Bio-Kräuter, Nudeln-Sossen-Kombi-Pakete, Weinpakete — und gibt Kunden sofortige Wertesignale beim Besuch. Die Kategorienavigation ist mehrschichtig und logisch: Produkte können nach Typ (Olivenöl & Co., Weine, Köstlichkeiten, Tee & Gewürze, Nudeln & Soßen, Trüffel und Spezialitäten) und nach Hersteller (Gaea Landschaft, Naturkind, Laopetra usw.) erkundet werden, mit Preisbereich-Filter. Einzelne Produktseiten führen mit starker Fotografie und detaillierten Beschreibungen, die Herkunft und Produktionsmethode betonen. Die Markengeschichten-Sektion — "Berg Cholomon und die Region" — verankert das Einkaufserlebnis in der Landschaft der Chalkidiki, mit kalligrafischer Typografie und Naturfotografie, die erklärt, warum die Herkunft dieser Produkte zählt. Die Mobilansicht ist vollständig optimiert: Alle Sektionen, Navigation, Aktionen und Kategorien sind auf Smartphone-Bildschirmen klar und bedienbar. ## Unsere Leistungen - **Webshop Design:** WooCommerce-Shop-Design für 170+ Produkte über mehrere Lebensmittelkategorien - **UI/UX Design:** Kategorienavigation, Produktdetaillayout und Cross-Sell-Logik für ein komplexes Feinkost-Sortiment - **Webentwicklung:** Vollständige E-Commerce-Implementierung mit Filtern, Paketen, Aktionen und responsivem Mobilerlebnis ## Ergebnis Ein Shop, der griechische Feinkost online genauso ansprechend macht wie im physischen Gießener Laden. Kunden können über 170 Produkte entdecken, neue Produzenten kennenlernen und die Chalkidiki-Herkunft verstehen, die das Cholomon-Sortiment gegenüber Supermarkt-Alternativen auszeichnet. --- # Der rosarote Elefant: Branding & Web URL: https://www.reflect-media.com/de/case-studies/der-rosarote-elefant Locale: de Kind: case-study Client: der rosarote Elefant Year: 2022 Industry: Business Coaching / Psychologie > Corporate Design, Branding und Website für Der rosarote Elefant — eine Coaching-Praxis für Führungskräfte mit einer einprägsamen Identität. ## Herausforderung Die Herausforderung bestand darin, eine Identität zu gestalten, die zwei Dinge gleichzeitig vermittelt: die wissenschaftliche Glaubwürdigkeit, die eine Praxis braucht, um von Führungskräften ernst genommen zu werden, und die Zugänglichkeit, die Menschen dazu bringt, tatsächlich Kontakt aufzunehmen. Die meisten Psychologie-Praxen tendieren stark in eine Richtung — entweder klinisch und kühl oder weich und unstrukturiert. Dieses Briefing verlangte beides. Der Name ist spielerisch; die Dienstleistung ist ernst. Die Identität musste diese Lücke überbrücken, ohne Kompromisse einzugehen. Das visuelle System musste zudem über ein ungewöhnlich breites Anwendungsspektrum funktionieren — von formalem Briefbogen bis hin zu einem Lederschlüsselanhänger — ohne seinen Zusammenhalt zu verlieren. ## Lösung Wir bauten die Identität um ein abstraktes Icon-Zeichen aus vertikalen Balken — eine Form, die gleichzeitig als stilisierte Figur, Menschenreihe und Balkendiagramm lesbar ist. Sie ist geometrisch und präzise, hat aber Wärme. Das Pink stammt direkt aus dem Markennamen und wird mit Zurückhaltung eingesetzt, damit es gezielt wirkt und nicht dekorativ. Die Typografie setzt durchgehend auf Azo Sans — eine Schrift mit ruhiger Autorität und zeitgenössisch-humanistischem Charakter, die der Marke in allen Kontexten den richtigen Ton verleiht. Die Website wurde konzipiert, um direkt mit der Zielgruppe zu sprechen: Führungskräfte, die wenig Zeit haben, Fachjargon ablehnen und sofort verstehen wollen, was sie bekommen und warum es relevant ist. Der Hero ist selbstbewusst und direkt. Die Leistungsseiten sind klar strukturiert. Der Weg zum Kontakt ist kurz. ## Unsere Leistungen - **Corporate Design:** Vollständiges visuelles Identitätssystem, verankert in der psychologischen Positionierung der Marke — präzise ohne Kälte - **Logo-Design:** Unverwechselbares geometrisches Zeichen, das von der Visitenkarte bis zur Lederprägung funktioniert und Präzision wie Menschlichkeit kommuniziert - **Webdesign:** Eine Website, die um die Entscheidungsreise des Klienten herum strukturiert ist — vom ersten Eindruck bis zum Terminwunsch in so wenigen Schritten wie möglich - **UI/UX Design:** Interface-Design, das Klarheit und Vertrauen priorisiert und jede Hürde zwischen Besucher und Kontakt abbaut ## Ergebnis Eine Markenidentität, die den German Design Award Special Mention verdient — nicht weil sie Design-Konventionen folgt, sondern weil sie eine echte Kommunikationsherausforderung mit Intelligenz und Präzision löst. Der rosarote Elefant hat jetzt eine Identität, die so einprägsam ist wie ihr Name, und eine Website, die professionelle Neugier in Kundengespräche verwandelt. Das System skaliert von der digitalen Präsenz bis zum physischen Merchandise, ohne seine Stimme zu verlieren. --- # ERGO: Digitale Vertragsplattform URL: https://www.reflect-media.com/de/case-studies/ergo-online-vertragsabschluesse Locale: de Kind: case-study Client: ERGO Group AG Year: 2022 – laufend Industry: Versicherung & Finanzdienstleistungen > Microservices-Plattform für einen der größten Versicherungskonzerne Europas — vollständig digitale Versicherungsvertragsabschlüsse mit Java Spring Boot. ## Herausforderung Die ERGO Group ist einer der größten Versicherungskonzerne in Deutschland und Europa. Das Unternehmen benötigte eine Software-Lösung zur Automatisierung von Online-Vertragsabschlüssen — Kunden sollen Versicherungsverträge vollständig digital abschließen können, vom Angebot bis zur Unterschrift. Die Lösung musste sich in die bestehenden Systeme von ERGO integrieren und gleichzeitig ein modernes, benutzerfreundliches Frontend bieten, das Kunden durch komplexe Versicherungsprodukte führt. ## Unsere Leistungen Wir entwickelten eine umfassende Automatisierungsplattform: - **Backend:** Java Spring Boot Microservices-Architektur für Skalierbarkeit und Wartbarkeit - **Frontend:** Reaktives Vue.js-Interface für ein reibungsloses Kundenerlebnis - **CMS-Integration:** Drupal für eigenständige Inhaltspflege durch Fachabteilungen - **API-Schicht:** RESTful APIs zur Verbindung aller Systemkomponenten - **DevOps:** Continuous Integration und Deployment Pipelines ## Lösung Die Lösung basiert auf einer modernen Microservices-Architektur mit Java Spring Boot im Backend und Vue.js im Frontend. Drupal CMS wurde integriert, um Fachabteilungen die eigenständige Pflege von Inhalten zu ermöglichen — Produktbeschreibungen, Bedingungen und Informationsseiten. Die modulare Architektur ermöglicht eine schnelle Erweiterung um neue Versicherungsprodukte und Vertragstypen. Jeder Microservice behandelt eine spezifische Domäne (Angebote, Verträge, Zahlungen, Benachrichtigungen) und gewährleistet so Wartbarkeit und unabhängige Skalierung. ## Ergebnis Eine skalierbare Automatisierungsplattform für digitale Versicherungsvertragsabschlüsse, die kontinuierlich weiterentwickelt wird. Die Plattform ermöglicht ERGO-Kunden den vollständig digitalen Abschluss von Versicherungsverträgen und reduziert die Bearbeitungszeit signifikant. --- # Federmeister: Branding & Webplattform URL: https://www.reflect-media.com/de/case-studies/federmeister Locale: de Kind: case-study Client: Federmeister Year: 2021 Industry: Bau / Handwerk > Logo-Design, UI/UX-Design und Webentwicklung für Federmeister — ein digital-first Fassadensanierungsservice mit Online-Angebotskonfigurator, Service-Hub. ## Herausforderung Vertrauen im handwerksnahen Servicebereich aufzubauen erfordert einen sehr spezifischen visuellen Ton. Die Marke musste professionell und verlässlich wirken — nicht glatt oder überprofessionell — und kommunizieren, dass das Unternehmen sein Fachgebiet wirklich kennt. In einer Kategorie, in der Hauseigentümer oft unsicher über Komplexität und Kosten sind, musste das Design Hürden vom ersten Eindruck bis zum Kontakt abbauen. Die Website musste mehr leisten als Informationen präsentieren. Sie musste Besucher aktiv konvertieren: durch Service-Optionen führen, den Prozess erklären, Fördermittel aufzeigen und sie schließlich in den Angebotskonfigurator leiten — ohne sie dabei zu verlieren. ## Lösung Die Markenidentität verankert sich in der Federmeister-Wortmarke und dem markanten F-Logozeichen — mit geometrischer Präzision für Fachkompetenz, akzentuiert in Orange (Energie, Handlung) und geerdet in Profi-Grün. Source Sans Pro Black Italic zieht sich als Markenstimme durch: direkt, selbstbewusst und in Bewegung. Die Website ist als Konversionsmaschine aufgebaut. Die Homepage schafft schnell Vertrauen und bietet zwei klare Einstiegswege — Sanierung oder Neubau. Der Konfigurator führt in 13 Schritten durch alles, was für ein belastbares Angebot nötig ist — in einem Format, das einfach wirkt, auch wenn es komplexe Daten sammelt. Service-Content-Seiten decken jeden Aspekt der Fassadenarbeit in der Tiefe ab — Streichen, Dämmung, Reinigung, Reparatur — und beantworten die Fragen, die Besucher mitbringen, bevor sie danach gesucht haben. Die PLZ-Standortsuche stellt sicher, dass die Plattform lokal funktioniert und jeden Besucher mit Partnern in der Nähe verbindet. ## Unsere Leistungen - **Logo-Design:** Ein direktes, professionelles Zeichen für den handwerksnahen Kontext — kompetent und energetisch ohne Angeberei - **Webdesign:** Eine auf Conversion ausgerichtete Website, die Besucher von der ersten Wahrnehmung zur konfigurierten Angebotsanfrage führt - **UI/UX Design:** Informationsarchitektur, Konfigurator-UX und Service-Content-Struktur — ausgerichtet auf die tatsächliche Entscheidungsreise des Hauseigentümers ## Ergebnis Eine Marke und Website, die Fassadensanierung gemeinsam zugänglich machen — Besuchern das Vertrauen geben, den Prozess zu beginnen, und die Werkzeuge, ihn abzuschließen. Federmeister startete mit einer digitalen Präsenz, die sich vom generischen Handwerker-Website-Umfeld abhebt und aktiv die qualifizierten Leads generiert, die das Unternehmen zum Wachsen braucht. --- # Feed Me Daily: Logo- & Markenrelaunch URL: https://www.reflect-media.com/de/case-studies/feed-me-daily Locale: de Kind: case-study Client: Feed Me Daily Year: 2022 Industry: Food & Lifestyle > Logo-Relaunch für Feed Me Daily — eine ausdrucksstarke, food-fokussierte Markenidentität für die digital-first Welt der Food-Content-Creator. Charakter. ## Herausforderung Im Food-Content-Bereich ist Persönlichkeit das Produkt. Generisches, corporate-wirkendes Design zerstört die Glaubwürdigkeit, die Food-Creator mühsam aufgebaut haben — ein Publikum, das wegen der Rezepte folgt, verzeiht kein Logo, das wie eine Franchise wirkt. Die Identität musste echten Charakter haben: ausdrucksstark, ein bisschen unkonventionell und sofort teilbar. Gleichzeitig musste die Marke mehr als eine Social-Media-Präsenz sein. Feed Me Daily wuchs in Merchandise, Produktkollaborationen und physische Handelskontexte hinein — alles Bereiche, die ein Zeichen erfordern, das in weit mehr Formaten als einem Instagram-Profil funktioniert. ## Lösung Wir gestalteten ein Logo um die inhärente Geometrie des Namens: drei gestaffelte Banner-Formen, die sich wie ein angerichtetes Gericht stapeln und verschieben. Das türkise Kalender-Icon oben — das „Daily" in Feed Me Daily — verankert die auf tägliche Routine ausgerichtete Markenidentität, während Gabel und Messer-Cutouts an beiden Enden den Food-Bezug unmissverständlich machen. Das Ergebnis ist eine Wortmarke mit echter Energie. Sie ist ausdrucksstark genug, um in Thumbnail-Größe zu lesen, markant genug, um im Feed ihren Raum zu behaupten, und strukturiert genug, um sauber auf einem Schneidebrett graviert zu werden. Die Farbpalette ist bewusst zurückhaltend: Türkis, Fast-Schwarz und Mittelgrau. Der Kontrast leistet die Arbeit. Das Türkis ist der Akzent; das Schwarz die Autorität; das Grau gibt dem System Flexibilität für neutrale Anwendungen. ## Unsere Leistungen - **Logo Relaunch:** Eine neue Wortmarke mit echtem Charakter — für digital-first-Sichtbarkeit gebaut und flexibel genug für physische Produktanwendungen - **Corporate Design:** Ein visuelles Identitätssystem für konsistente Markenpräsenz über alle digitalen und physischen Touchpoints ## Ergebnis Eine Markenidentität, die das Publikum genauso nährt wie der Content. Die neue Feed-Me-Daily-Wortmarke ist sofort erkennbar, überträgt sich von Reels bis zum Einzelhandel und gibt der Marke eine visuelle Identität mit so viel Persönlichkeit wie ihr Name. --- # Feel Good Beauty: Markenidentität URL: https://www.reflect-media.com/de/case-studies/feel-good-beauty Locale: de Kind: case-study Client: Feel Good Beauty Year: 2022 Industry: Beauty / Wellness > Logo, Corporate Design und vollständiges Printpaket für Feel Good Beauty by Irina Huber — ein Beautystudio für ästhetische Behandlungen in einer warmen. ## Herausforderung Ein Beautystudio befindet sich in einem genuinen schwierigen Design-Raum. Zu klinisch wirkt kalt; zu dekorativ verliert die Glaubwürdigkeit. Zu trendy und es veraltet; zu konservativ und es geht im Rauschen eines überfüllten Markts unter. Das Design musste den Ton finden, der gleichzeitig persönlich, professionell, warm und zeitlos ist. Der vollständige Printbedarf erhöhte die Komplexität: Dieselbe Marke musste über eine formale Behandlungsbroschüre mit medizinisch-ästhetischen Leistungen, einen handüberreichten Gutschein, eine Treuekarte, siegelversiegelte Umschläge und eine gebrandete Tragetasche hinweg zusammenhalten — alles sendet unterschiedliche Signale und dient unterschiedlichen Momenten. ## Lösung Das Logo ist um eine elegante Serifen-Wortmarke und ein handgezeichnetes Pusteblumen-Icon gebaut — ein Detail, das die Marke genuinen einprägsam macht, ohne dekorativ um seiner selbst willen zu sein. Die Pusteblume bringt Natur, Leichtigkeit und die Idee, dass ein einziger Atemhauch alles verändern kann. Es ist eine Illustration, aber mit genug Präzision gezeichnet, dass sie bewusst wirkt, nicht verspielt. Die Palette hält sich an ein Quasi-Monochrom aus warmem Grau und gebrochenem Weiß, mit Bluschtönen durch Fotografie und Druckmaterialien. Die Gesamtwirkung ist ruhig, klar und persönlich — ein Studio, dem man sein Gesicht anvertraut. Das Printpaket wurde als vollständiges System gestaltet: Jedes Stück — Broschüre, Gutschein, Treuekarte, Umschlag, Tasse — spiegelt dieselbe visuelle Sprache in einem Format wider, das seiner Verwendung angemessen ist. ## Unsere Leistungen - **Logo Relaunch:** Eine unverwechselbare Wortmarke und ein Pusteblumen-Icon, die Wärme, Femininität und professionelle Fürsorge kommunizieren - **Rebranding:** Ein aufgefrischtes visuelles System, das die Marke auf das Niveau der Behandlungen bringt, die das Studio anbietet - **Printdesign:** Broschüre, Gutschein, Treuekarte, Geschäftsausstattung und Markenmerchandise — als kohärentes Paket gestaltet ## Ergebnis Eine Markenidentität, die sich genuinen gut anfühlt — so warm, durchdacht und persönlich wie das Studio selbst. Feel Good Beauty by Irina Huber hat jetzt eine vollständige Markenwelt, die jede Klienteninteraktion unterstützt — von der ersten gedruckten Broschüre bis zur Espressotasse im Behandlungsraum. --- # Hasacom: Change-Management-Branding URL: https://www.reflect-media.com/de/case-studies/hasacom Locale: de Kind: case-study Client: Hasacom Year: 2023 Industry: Business Coaching / Change Management > Vollständige Markenidentität für Hasacom — eine Unternehmensberatung und Coaching-Firma, deren Claim alles sagt: 'Rebels for change & success.' Logo. ## Herausforderung Change Management ist ein Bereich voller generischer Unternehmensfloskeln und austauschbarer visueller Identitäten. Hasacom wollte etwas, das ihre Philosophie tatsächlich verkörpert — eine Marke, die lebendig, unverwechselbar und selbstbewusst genug ist, um wirklich etwas zu sagen. Das Logo musste in jeder Größe funktionieren, echten Charakter haben und gleichermaßen in professionellen wie menschlichen Kontexten überzeugen. Die Zielgruppe umfasst Unternehmensverantwortliche, Führungskräfte und Teams im Wandel — eine breite Bandbreite, die eine Marke verlangt, die Wärme und Autorität gleichermaßen ausstrahlt. ## Lösung Das Herzstück war das Zeichen: ein stilisierter Vogel im Flug, konstruiert aus konstellationsartigen Punkten und Verbindungslinien. Die Metapher erschließt sich intuitiv — Navigation, Perspektive, Freiheit, Vorwärtsbewegung. Das Icon ist unverwechselbar ohne dekorativ zu sein, und der Aufbau aus geometrischen Knotenpunkten verleiht ihm eine strukturierte, präzise Qualität, die intentional statt verspielt wirkt. Die Wortmarke verbindet sich nahtlos mit dem Zeichen — das "o" in hasacom ersetzt durch einen warmen Goldpunkt, der die Knotenpunkte der Konstellation widerspiegelt und eine subtile Einheit über die gesamte Identität schafft. Die Farbpalette verankert die Marke in Wärme und Glaubwürdigkeit: ein sattes Warmgold, Beinahe-Schwarz, Whisper White und ein kühles Grau. Die Typografie — DIN 2014 in drei Schnitten — fügt Klarheit und Professionalität hinzu, ohne kalte Distanz zu erzeugen. Die Identität wurde über alle praktischen Touchpoints angewandt: E-Mail-Signaturen, Bürobeschilderung, Merchandise und Geschäftspapiere. ## Unsere Leistungen - **Logo Design:** Das Konstellationsvogel-Zeichen und die Wortmarke — unverwechselbar, skalierbar und konzeptionell prägnant - **Designkonzept:** Farbpalette, Typografie und Designprinzipien für eine kohärente visuelle Sprache über alle Medien - **Corporate Design:** Anwendungsdesign für digitale (E-Mail-Signatur) und physische (Beschilderung, Print, Merchandise) Touchpoints ## Ergebnis Eine Markenidentität, die dem Claim gerecht wird. Der Konstellationsvogel ist sofort wiedererkennbar und wirklich bedeutungsvoll — er spricht von Navigation, Transformation und dem Blick aus der Vogelperspektive. Vom Milchglas bis zum Merchandise sieht die hasacom-Marke in jedem Kontext stimmig aus. --- # Hörtheatrale: Festival-Printdesign URL: https://www.reflect-media.com/de/case-studies/hoertheatrale Locale: de Kind: case-study Client: Hörtheatrale Year: 2022 Industry: Kultur / Live-Theater / Events > Printdesign für die Hörtheatrale Marburg — ein Live-Hörspiel-Festival, das Klassiker und Eigenproduktionen Open Air auf der Waldbühne am Spiegelslustturm. ## Herausforderung Das Festival benötigte Printmaterialien mit echter dramatischer Strahlkraft. Es gingen nicht um Plakate für einen Film oder ein Konzert — sondern für eine Kunstform, die auf Stimme und Imagination aufbaut, wo das visuelle Design Atmosphäre und Vorfreude erzeugen muss, ohne etwas vom Bühnengeschehen zu zeigen. Jede Produktion hatte ihre eigene Identität — Horror, Noir-Krimi, Kinderliteratur, lateinamerikanische Volksmusik — und das Design musste jedem Veranstaltungsplakat individuellen Charakter verleihen, ohne die Geschlossenheit des Festival-Systems aufzugeben. Die Materialien mussten zudem in jedem Format funktionieren: vom kompakten Programmheft bis zum verwitterten Stadtplakatrahmen. ## Lösung Wir entwickelten ein typografisches Printdesign-System auf Basis von starken Kontrasten, Schwarzweißfotografie und einem klaren Raster. Das markante rote Logo der Hörtheatrale verankert jedes Stück und sorgt in jedem Kontext für sofortige Wiedererkennung. Jede Produktion erhält ein eigenes Plakat mit einem dramatischen Schwarzweißbild aus der Welt der Geschichte — ein viktorianischer Performer für Dr. Jekyll & Mr. Hyde, eine Noir-Darstellerin für Die Mausefalle — gesetzt vor einem klaren typografischen Layout. Die Headline-Schrift übernimmt die dramatische Arbeit: fett, redaktionell, direkt. Das Saisonprogrammheft fasst das gesamte Sommerprogramm im Querformat zusammen — vom Willkommenstext über die einzelnen Produktionen mit Fotos, Beschreibungen, Besetzungslisten und Terminen bis hin zu den Team-Credits und allen praktischen Veranstaltungs- und Ticketinformationen. ## Unsere Leistungen - **Print Design:** Einzelplakate für jede Produktion des Sommerprogramms - **Event Design:** Saisonprogrammheft mit vollständigen Produktionsdetails, Besetzung und Ortsinformationen - **Designkonzept:** Einheitliches typografisches und visuelles System, das alle Printformate des Festivals zusammenhält ## Ergebnis Eine Printidentität, die das leistet, was gutes Theaterdesign leisten sollte: Vorfreude wecken, Charakter kommunizieren und Lust machen, dabei zu sein. Die Materialien zum Hör-Theater-Sommer 2022 der Hörtheatrale präsentierten ein ernsthaftes Kulturprogramm mit dem Selbstbewusstsein und der visuellen Energie, die den Aufführungen gerecht wurde. --- # IoT-System für mobile LED-Stauwarnanlagen URL: https://www.reflect-media.com/de/case-studies/iot-stauwarnanlagen Locale: de Kind: case-study Client: FERCHAU Engineering GmbH Year: 2020 – laufend Industry: Technik & Technologie / IoT > Skalierbares IoT-System mit Spring-Boot-Microservices, Apache Kafka und MQTT — Revolutionierung der Verkehrssicherheit von Tagen auf Stunden. ## Herausforderung Im Auftrag von FERCHAU Engineering entwickelten wir ein IoT-System für einen Hersteller innovativer mobiler LED-Stauwarnanlagen für den Straßenbau. Der Endkunde stand vor einer entscheidenden Herausforderung: Die Steuerung und Überwachung der über viele Kilometer verteilten Anlagen erfolgte manuell und aufwändig. Jede neue Baustelle erforderte eine individuelle Code-Anpassung — ein zeitintensiver und fehleranfälliger Prozess. Die Vision war ambitioniert: Ein vollständig vernetztes IoT-System, das die Planung, Konfiguration und Überwachung aller mobilen Einheiten über eine zentrale Webanwendung ermöglicht, mit höchster Verfügbarkeit — schließlich geht es um Verkehrssicherheit. ## Unsere Leistungen Wir entwickelten ein skalierbares IoT-System auf Basis einer Spring-Boot-Microservice-Architektur: - **Event-Driven Architecture:** Apache Kafka für die Kommunikation zwischen Services - **Echtzeit-Kommunikation:** MQTT für die Live-Kommunikation mit mobilen Einheiten im Feld - **Cloud-Infrastruktur:** AWS für hohe Verfügbarkeit und automatische Skalierung - **Webanwendung:** Drag-&-Drop-Konfiguration der Schaltlogik — ohne eine Zeile Code - **Feldbetrieb:** Direkte Verkehrsinformationsschaltung für Polizei und Einsatzkräfte ## Lösung Das Herzstück bildet eine Event-driven Architecture mit Apache Kafka für die Kommunikation zwischen den Services und MQTT für die Echtzeitkommunikation mit den mobilen Einheiten im Feld. Die Cloud-Infrastruktur auf AWS garantiert hohe Verfügbarkeit und automatische Skalierung. Die Webanwendung ermöglicht es den Ingenieuren, neue Baustellen grafisch zu planen und die Schaltlogik der Stauwarnanlagen per Drag & Drop zu konfigurieren — ohne eine Zeile Code schreiben zu müssen. Für Einsatzkräfte wie die Polizei besteht die Möglichkeit, vor Ort direkt Verkehrsinformationen für weite Streckenabschnitte zu schalten. ## Ergebnis Der Impact ist enorm: Die Planung und Inbetriebnahme neuer Baustellen wurde von Tagen auf Stunden reduziert. Das System revolutionierte den Markt für mobile Stauwarnanlagen in Deutschland und wird mittlerweile bundesweit eingesetzt. Ein hochverfügbares, skalierbares IoT-System, das den gesamten Workflow von der Baustellenplanung bis zur Live-Steuerung digitalisiert. --- # Klimaschutz-Planer: Kommunales Klima-Tool URL: https://www.reflect-media.com/de/case-studies/klimaschutz-planer Locale: de Kind: case-study Client: Klima-Bündnis Services GmbH Year: 2014 – laufend Industry: Öffentlicher Sektor / Umweltplanung > Bundesweite Online-Plattform für kommunale Energie- und CO2-Bilanzierung — genutzt von Tausenden deutschen Kommunen für standardisierte Klimaschutzplanung. ## Herausforderung Klimaschutz beginnt auf kommunaler Ebene — doch viele der rund 13.000 Kommunen und Landkreise in Deutschland standen vor der Herausforderung, Klimaschutzkonzepte zu entwickeln und umzusetzen, ohne über standardisierte Werkzeuge zu verfügen. Das Klima-Bündnis e.V. initiierte das Projekt „Klimaschutz-Planer", um Kommunen in großem Maßstab zu motivieren, im Klimaschutz aktiv zu werden. ## Unsere Leistungen Wir planten, konzipierten und entwickelten eine umfassende Online-Plattform mit drei Kernmodulen: 1. **Energie- und CO2-Bilanzierung:** Systematische Erfassung und Analyse des kommunalen Energieverbrauchs und CO2-Ausstoßes nach Sektoren (Haushalte, Wirtschaft, Verkehr) 2. **Potenziale:** Analyse der lokalen Potenziale für erneuerbare Energien und Energieeffizienz 3. **Benchmark:** Vergleich mit ähnlich großen Kommunen zur Motivation durch Wettbewerb und Best Practices Zusätzlich: - Individuelle Front- und Backend-Programmierung in PHP, JavaScript, jQuery - Java-Komponenten für komplexe Berechnungen - MySQL-Datenbankkonzeptionierung für effiziente Verarbeitung großer Datenmengen - OpenStreetMap-Integration mit zusätzlichen Layern für geografische Datenvisualisierung ## Lösung Die Plattform basiert auf wissenschaftlich vereinbarten Berechnungsverfahren und ermöglicht eine standardisierte, vergleichbare Erfassung und Bewertung kommunaler Klimaschutzaktivitäten. Das Design wurde nach den CI-Vorgaben des Klima-Bündnis umgesetzt und bietet eine intuitive Benutzerführung für Mitarbeiter in Kommunalverwaltungen. Die OpenStreetMap-Integration mit GIS-Layern bietet leistungsstarke geografische Datenvisualisierung, die Kommunen hilft, räumliche Muster im Energieverbrauch und Potenziale für erneuerbare Energien zu identifizieren. ## Ergebnis Eine bundesweit eingesetzte Plattform, die Tausende von Kommunen bei ihrer Klimaschutzarbeit unterstützt. Der Klimaschutz-Planer ist zum Standard-Instrument für kommunale Klimaschutzkonzepte in Deutschland geworden und leistet einen messbaren Beitrag zur Energiewende. --- # Kunstmuseum Marburg: Markenrelaunch URL: https://www.reflect-media.com/de/case-studies/kunstmuseum-marburg Locale: de Kind: case-study Client: Kunstmuseum Marburg Year: 2019 Industry: Kultur / Museum > Logo-Relaunch und Rebranding für das Kunstmuseum Marburg — eine zeitlose visuelle Identität für eines der bedeutendsten Universitätskunstmuseen. ## Herausforderung Das Kunstmuseum Marburg beherbergt eine der bedeutendsten Sammlungen von Druckgrafik und Zeichnungen in Deutschland — über 70.000 Werke aus sechs Jahrhunderten. Doch die visuelle Identität hatte mit dem Stellenwert des Museums nicht Schritt gehalten. Die Herausforderung bestand darin, eine neue Markenidentität zu entwickeln, die das akademische Erbe würdigt und gleichzeitig ein zeitgenössisches Publikum anspricht. Ein Universitätskunstmuseum nimmt eine einzigartige Stellung ein: Es muss Wissenschaftler und Fachleute ansprechen und gleichzeitig für die breite Öffentlichkeit zugänglich bleiben. Die Identität musste in sehr unterschiedlichen Kontexten funktionieren — von wissenschaftlichen Publikationen bis hin zu Museumsartikeln, von der Beschilderung bis zu digitalen Medien. ## Unsere Leistungen Wir entwickelten einen kompletten Markenrelaunch: - **Logo Relaunch:** Ein neues Markenzeichen, das intellektuelle Tiefe und künstlerische Präzision kommuniziert — klar und erkennbar in jeder Größe - **Corporate Design:** Ein umfassendes Designsystem, das Typografie, Farbpalette und visuelle Sprache zu einem kohärenten Markenauftritt vereint - **Printdesign:** Museumspublikationen, Geschäftsausstattung und Werbematerialien, die die Position des Museums an der Schnittstelle von Kunst und Wissenschaft widerspiegeln - **Merchandise Design:** Eine Reihe von Museumsshop-Artikeln, die die Markenidentität in greifbare Produkte übertragen ## Lösung Wir schufen eine visuelle Identität, die in den Grundwerten des Museums verwurzelt ist: Wissenschaftlichkeit, Präzision und Offenheit für die Kunst in all ihren Formen. Das neue Logo destilliert diese Qualitäten in ein Zeichen, das sowohl autoritativ als auch einladend wirkt. Das Designsystem gibt dem Museum die Flexibilität, in seinem breiten Tätigkeitsfeld zu kommunizieren — von wissenschaftlichen Katalogen und Forschungspublikationen bis hin zu öffentlichen Ausstellungsmaterialien und Bildungsprogrammen. ## Ergebnis Eine verfeinerte, zeitgenössische Markenidentität, die das Kunstmuseum Marburg mit Klarheit und Überzeugung positioniert. Die Arbeit wurde mit einem **German Design Award** ausgezeichnet und bestätigt die Qualität der für diese wichtige Kulturinstitution entwickelten visuellen Kommunikation. --- # Landgrafenschloss: Ausstellungsdesign URL: https://www.reflect-media.com/de/case-studies/landgrafenschloss-marburg Locale: de Kind: case-study Client: Landgrafenschloss Marburg Year: 2022 Industry: Kultur / Erbe / Tourismus > Zweisprachiges Ausstellungsdesign und Beschilderungssystem für das Landgrafenschloss Marburg — ein vollständiges Besucherkommunikationssystem für zwei. ## Herausforderung Ausstellungsdesign in einem denkmalgeschützten mittelalterlichen Gebäude ist ebenso eine Frage der Zurückhaltung wie der Kommunikation. Jede Tafel, jede Objektbeschriftung, jedes Richtungsschild muss seinen Platz verdienen. In einem Raum dieser Qualität kann die falsche Materialwahl, der falsche Maßstab oder der falsche typografische Ton genau das mindern, was man zu erklären versucht. Das Briefing verlangte ein System, das echte Zweisprachigkeit (Deutsch und Englisch in gleichwertiger Behandlung), Zugänglichkeit für Besucher aller Altersgruppen und Sprachhintergründe sowie Kohärenz über die dramatisch variierenden Räume der Burg hinweg sicherstellt — von großen gewölbten Sälen bis zu engen gotischen Korridoren. Objektbeschriftungen für eine vielfältige Sammlung — mittelalterliche Keramiken, historische Dokumente, Kunstwerke und Raritäten — mussten einem einheitlichen Format folgen, dabei jedoch sehr unterschiedliche Informationsmengen transportieren. ## Lösung Wir entwickelten ein textbasiertes System, das auf struktureller Klarheit und konsequenter typografischer Strenge aufbaut. Die Hierarchie ist eindeutig: Ausstellungstitel, Kapiteleinführung, Fließtext und Objektbeschriftung besetzen jeweils eine distinkte visuelle Ebene. Die Schriftwahl — klar, zeitgenössisch, hochlesbar — funktioniert im Umgebungslicht der Burg, ohne mit dem Mauerwerk oder den Artefakten zu konkurrieren. Jede Tafel ist durchgehend zweisprachig: Deutsch und Englisch erscheinen in einem konsistenten Parallelformat, nie als Nachgedanke. Das Wegeleitsystem reduziert die Navigation auf die einfachst mögliche Form: Richtungspfeile und Ausstellungsnamen, die Besucher auf einen Blick verstehen. Die Palette ist bewusste Zurückhaltung: Weiß, Schwarz und die Papiertöne der Materialien selbst. Farbe kommt ausschließlich durch historische Abbildungen und originale Artefakte ins Bild — nie durch das Design aufgezwungen. ## Unsere Leistungen - **Ausstellungsdesign:** Texttafeln, Kapiteleinführungen und konzeptionelle Kommunikation für zwei vollständige Dauerausstellungen - **Beschilderungsdesign:** Zweisprachige Wegeleitung durch die komplexe räumliche Abfolge der Burg mit absoluter Klarheit - **Printdesign:** Objektbeschriftungen, Begleitmaterialien und Mitnahmeformate für die Ausstellung ## Ergebnis Ein Ausstellungskommunikationssystem, das im besten Sinne unsichtbar geworden ist — es dient dem Besucher, ohne auf sich aufmerksam zu machen, und lässt Burg und Sammlung die Arbeit tun. Das Landgrafenschloss verfügt jetzt über eine Designsprache, die konsistent auf zukünftige Ausstellungen, neue Erwerbungen und wechselnde Präsentationen ausgeweitet werden kann. Das System funktioniert, weil es nie mit dem konkurriert, was es kommuniziert. --- # Lehrer-Online: Bildungsplattform URL: https://www.reflect-media.com/de/case-studies/lehrer-online Locale: de Kind: case-study Client: Eduversum GmbH Year: 2020 – laufend Industry: Bildung & E-Learning > Kontinuierliche Entwicklung und Wartung von Deutschlands führender Bildungsplattform für Lehrkräfte — 100.000+ Unterrichtsmaterialien, 250.000+. ## Herausforderung Lehrer-Online ist nicht irgendeine Bildungswebsite — es ist die größte digitale Plattform für Lehrkräfte im deutschsprachigen Raum. Über 250.000 Community-Mitglieder, 100.000+ Unterrichtsmaterialien für alle Fächer und Schulformen, 1.000+ Fortbildungen, Partnerportale, ein KI-gestützter Classroom-Manager und ein vollständiger E-Commerce-Shop für Premium-Inhalte: Die technische Komplexität wächst mit der Plattform. Die Herausforderung seit 2020: Diese gewachsene Plattform stabil, performant und erweiterbar zu halten — während gleichzeitig neue Features wie der Classroom-Manager mit KI-Assistenz, Badge-Zertifizierung für Fortbildungen und neue Partnerportale hinzukommen. Alles auf einer Typo3-Basis, die mit dem Wachstum Schritt halten muss. ## Unsere Leistungen Seit 2020 verantworten wir die kontinuierliche technische Weiterentwicklung und den Betrieb: - **Typo3-Entwicklung:** Custom PHP Extensions für fach- und schulformspezifische Inhaltsverwaltung, didaktische Metadaten und Lehrplanbezüge — über alle Schulformen von der Grundschule bis zur Berufsbildung - **Shopware-E-Commerce:** Vollständige Integration des Premium-Shops mit automatischer Inhaltsfreischaltung nach Kauf, Mitgliedschaftsverwaltung und Zahlungsabwicklung - **Tool-Entwicklung:** Technische Basis für Classroom-Manager (inkl. KI-Assistenz), Rechner-Tools, Tauschbörse und die Badge-Zertifizierung für digitale Selbstlernkurse - **Partnerportale:** Technische Umsetzung spezialisierter Themenwelten wie Schulrecht, Pubertät und Handwerk macht Schule - **Performance & Betrieb:** Kontinuierliche Optimierung für Spitzenlastzeiten — Tausende gleichzeitige Lehrkräfte zu Ferienende und Schuljahresbeginn - **Sicherheit:** Regelmäßige Updates, Monitoring und Hardening der öffentlich zugänglichen Plattform ## Ergebnis Eine der meistgenutzten Bildungsplattformen Deutschlands — stabil im Dauerbetrieb seit Jahren. Die Kombination aus kostenlosem Unterrichtsmaterial, zertifizierten Fortbildungen, KI-gestützten Werkzeugen und einem integrierten Premium-Shop macht Lehrer-Online zu einem vollständigen digitalen Arbeitsplatz für Lehrkräfte. Wir halten die technische Grundlage dafür sauber, skalierbar und auf dem neuesten Stand. --- # Milk the Sun: Solar-Marktplatz URL: https://www.reflect-media.com/de/case-studies/milk-the-sun Locale: de Kind: case-study Client: Milk the Sun GmbH Year: 2015 Industry: Energie & Nachhaltigkeit > Kompletter Relaunch von Europas führendem Online-Marktplatz für Photovoltaik-Anlagen — multilinguales Drupal-Portal mit Symfony-Backend-API in 5 Sprachen. ## Herausforderung Milk the Sun betreibt einen der führenden Online-Marktplätze für Photovoltaik-Anlagen in Europa. Die Plattform bringt Käufer und Verkäufer zusammen und deckt den gesamten Lebenszyklus einer Anlage ab. Mit dem wachsenden internationalen Geschäft stieß die alte Plattform an ihre Grenzen. Die Aufgabe war klar: Der komplette Relaunch von milkthesun.com — die Software sollte optisch grundlegend überarbeitet werden und das Angebot im Bereich Infrastruktur, Informationsbereitstellung und automatisierte Datenweitergabe deutlich erweitern. Eine besondere Herausforderung war die multilinguale Ausführung in 5 Sprachen. ## Unsere Leistungen Wir planten, konzipierten und entwickelten ein umfassendes Online-Portal auf Basis von Drupal: - **Frontend & Content-Management:** Drupal-basiert mit Custom-Modul-Entwicklung - **Backend-API:** Symfony PHP Framework für alle Geschäftsprozesse - **Multilinguale Architektur:** Volle Unterstützung für 5 europäische Sprachen - **Benutzerverwaltung:** Personalisierte Cockpit-Bereiche für Käufer und Verkäufer - **Hosting-Infrastruktur:** Separate Test- und Staging-Instanzen für unabhängige länderspezifische Releases - **SEO & Content-Marketing:** Länderspezifische WordPress-Blogs in allen 5 Sprachen ## Lösung Die Architektur kombiniert Drupal für Frontend und Content-Management mit einer robusten Symfony-Backend-API. Alle Geschäftsprozesse laufen über die selbst entwickelte API: Anlagensuche mit umfangreichen Filteroptionen, Erstellung und Verwaltung neuer PV-Anlagen, ausgefeilte Benutzerverwaltung mit personalisiertem Cockpit-Bereich und die Verwaltung aller technischen und rechtlichen Unterlagen. Custom Drupal-Module wurden entwickelt, um die komplexen Marktplatz-Anforderungen abzubilden. Ein umfangreicher Informationsbereich rund um Photovoltaik sowie ein automatisiertes Newsletter-System runden das Angebot ab. ## Ergebnis Ein skalierbarer, multilingualer Marktplatz, der seit 2015 erfolgreich im Einsatz ist und kontinuierlich weiterentwickelt wird. Die Plattform ermöglicht den effizienten Handel von Photovoltaik-Anlagen über Ländergrenzen hinweg und trägt damit zur Energiewende bei. --- # NewMark: Finanz-PR Website-Relaunch URL: https://www.reflect-media.com/de/case-studies/newmark Locale: de Kind: case-study Client: NewMark Year: 2024 Industry: Finanzkommunikation / PR > Vollständiges Webdesign und -entwicklung für NewMark Finanzkommunikation GmbH — eine der führenden deutschen PR-Agenturen für Asset Manager. ## Herausforderung Im Januar 2024 präsentierte NewMark ein neues Logo und startete das Jahr als repositionierte Marke. Die Website musste mithalten — professionell und institutionell glaubwürdig, aber auch modern, dynamisch und zukunftsorientiert. Das Briefing umfasste Motion Design und Videointegration: Die Website sollte lebendig wirken, zeigen statt nur beschreiben und bei einem anspruchsvollen Publikum aus Asset Managern, institutionellen Investoren und Corporate Communicators Eindruck hinterlassen. Gleichzeitig musste sie praktische Content-Anforderungen erfüllen: ein regelmäßig aktualisierter Blog, eine attraktive Karriereseite im wettbewerbsintensiven Frankfurter Markt und eine zweisprachige (DE/EN) Architektur für internationale Kunden und Partner. ## Lösung Das Design setzt auf eine selbstbewusste, dunkelblau-gelbe Farbwelt — finanziell, kompetent, unverwechselbar NewMark. Die Homepage öffnet mit einem Luftbild der Frankfurter Skyline und dem Kampagnen-Claim "Neue Zeichen Setzen!" — eine Aussage sowohl über den Agenturrelaunch als auch über das Kernversprechen der Finanzkommunikation. Die Sektionen fließen von Unternehmensvorstellung und Purpose-Statement über die sechs Service-Säulen (Financial Communications, Reputation Management, Public Affairs, Marketing & Sales Support, Digital & Social Media, PR) bis zu Team-Fotografie, Kunden-Logos, der 'NewMark und der Finanzplatz Frankfurt'-Marken-Sektion und einem starken Kontakt-CTA. Der Agentur-Blog 'Im Fokus' ist als vollwertiger Content-Hub aufgebaut — Artikel-Karten mit Kategorie-Tags, Fotografie und regelmäßigen Updates zu Finanzkommunikation, PR-Strategie und Markt-News. Die Navigation nutzt ein markantes kreisförmiges Flyout-Panel, das sich über die Seite öffnet — eine einprägsame Interaktion, die so unverwechselbar ist wie die Marke selbst. Das gesamte Erlebnis ist responsiv für Mobile gestaltet: Pill-Button-Karriere-Sektionen, Lifestyle-Fotografie der Website im Einsatz und Videoinhalte, die natürlich in die Seitenstruktur eingebettet sind. ## Unsere Leistungen - **Webdesign:** Selbstbewusstes, zweisprachiges Design mit Motion-Übergängen, kreisförmiger Navigation und dem Dunkelblau-Gelb-Markensystem - **Webentwicklung:** Schnelle, performante mehrsprachige Website für ein professionelles Finanzdienstleistungspublikum - **Videointegration:** Brand-Videoinhalte in die Seitenerfahrung integriert, ohne die Ladeperformance zu beeinträchtigen - **Motion Design:** Animierte Sektionseintritte, Hover-Zustände und Micro-Interaktionen, die der Website Energie und Präzision verleihen ## Ergebnis Ein Website-Relaunch 2024, der NewMark die digitale Präsenz gibt, die ihre Position als Deutschlands führende Finanzkommunikations-PR-Agentur verlangt. Die Website setzt neue Zeichen — genau das, was die Marke versprochen hat. --- # Parkett Hinterseer: Marken-Rebranding URL: https://www.reflect-media.com/de/case-studies/parkett-hinterseer Locale: de Kind: case-study Client: Parkett Hinterseer GmbH Year: 2024 Industry: Einzelhandel / Premium-Inneneinrichtung > Komplettes Rebranding für Deutschlands führenden Premium-Parketthändler mit 28 Filialen — Logo, Corporate Design, Print, Packaging und Editorial Design. ## Herausforderung Die visuelle Identität hatte schlicht nicht mit dem Unternehmen Schritt gehalten. In einem Markt, der von Design, Ästhetik und der emotionalen Kraft schöner Materialien getrieben wird, präsentierte sich Hinterseer auf eine Weise, die nicht mehr dem entsprach, was das Unternehmen tatsächlich lieferte. Die Marke wirkte veraltet — und im Luxuseinzelhandel ist diese Lücke zwischen Produkt und Präsentation kostspielig. Die Rebranding-Herausforderung war echtes Handwerk: Wie modernisiert man eine Marke, die durch Tradition definiert wird, ohne die über 120-jährige Autorität zu verlieren, die ihr wertvollstes Asset ist? Radikale Neuerfindung würde zerstören, was die Marke erworben hat. Kosmetische Anpassung würde nichts lösen. Die Identität musste auch über die gesamte Komplexität eines 28-Standorte-Händlers skalieren: von der Außenbeschilderung über Produktverpackungen bis hin zu Kampagnenplakaten, Image-Katalogen, Geschäftsausstattung und dem kleinsten Produktetikett. ## Lösung Wir begannen mit dem Logo — ein neues H-Monogramm, das seine Linie direkt vom alten Zeichen ableitet, aber von allem befreit ist, was es gealtert hat. Die Geometrie ist präzise, die Proportionen sind durchdacht, und das Zeichen liest sich in jeder Größe selbstbewusst. Die Evolution ist sichtbar: Das ist erkennbar Hinterseer — aber mit Blick nach vorne. Die Farbpalette baut direkt auf der Materialwelt des Parketts auf: warmes Koralle als Markenakzent, tiefes Navy als Autoritätsanker, und eine Reihe natürlicher Neutraltöne, die dem System Luft zum Atmen geben. Bodoni-Nova-Headlines bringen das editoriale Gewicht hochwertiger Publikationen; Corporate S liefert die strukturelle Klarheit, die der Einzelhandelskontext erfordert. Die Kampagnenarbeiten — City Lights, Großflächen, der Image-Katalog — positionieren Hinterseer nicht nur als Parketthändler, sondern als Marke mit echter Lifestyle-Autorität. Die Verpackungen übertragen dieselbe Sorgfalt auf das Produkterlebnis. ## Unsere Leistungen - **Logo Relaunch:** Ein neues H-Monogramm, das 120 Jahre Handwerkstradition mit zeitgenössischer Premium-Positionierung verbindet — erkennbar und weiterentwickelt - **Corporate Design:** Vollständiges Design-System mit Typografie, Farbe, Fotografie-Direktion, Muster und Icon-Sprache - **Print Design:** Vollständige Neugestaltung von Geschäftsausstattung, Broschüren und Kampagnenmaterialien in Premium-Druckqualität - **Packaging Design:** Produktverpackungen, die die Marke ab dem ersten physischen Kontakt greifbar machen - **Editorial Design:** Großformatiger Image-Katalog und Präsentationsmaterialien, die Parkett als echte Designentscheidung positionieren ## Ergebnis Eine Markentransformation, die den **German Design Award** gewann — und noch wichtiger: eine, die Hinterseer dort positioniert, wo sie hingehören: an der Spitze des deutschen Premium-Parkettmarkts. Die neue Identität hält über alle 28 Standorte, skaliert vom Außenplakat bis zum Produktetikett und gibt dem Unternehmen ein visuelles Fundament, das ihm die nächsten 120 Jahre ebenso selbstbewusst dienen wird wie die letzten. Tradition und Ambition — aufgelöst. --- # Porta Polonica: Online-Kulturmuseum URL: https://www.reflect-media.com/de/case-studies/porta-polonica Locale: de Kind: case-study Client: Landschaftsverband Westfalen-Lippe (LWL) – Industriemuseum Year: 2017 – 2025 Industry: Öffentlicher Sektor / Kulturelles Erbe > Digitales Museum und Community-Plattform auf Drupal 8 für die Dokumentationsstelle zur Kultur und Geschichte der Polen in Deutschland — gefördert durch. ## Herausforderung Die Plattform musste zwei sehr unterschiedlichen, aber gleichermaßen anspruchsvollen Zielgruppen gerecht werden: wissenschaftlichen Forschenden und Archivar:innen, die Tiefe, Präzision und komplexe Inhaltsstrukturen benötigten; und Mitgliedern der polnischen Gemeinschaft in Deutschland, die einen einladenden, navigierbaren Raum für Vernetzung und kulturelle Identität suchten. Beide Zielgruppen benötigten die Inhalte auf Deutsch und Polnisch, mit einer mehrsprachigen Architektur für viele Jahre der laufenden Weiterentwicklung. Die Inhalte selbst umfassen Jahrhunderte: Biographien, historische Ereignisse, Erinnerungsorte, Artefakte, Fotografien, Zeitzeugenberichte und Community-Beiträge — und erforderten ein flexibles CMS für komplexe relationale Inhaltsstrukturen, das auch von nicht-technischem Personal gepflegt werden kann. ## Lösung Wir entwickelten das vollständige digitale Museum auf Drupal 8 — gestaltet, um die kulturelle Bedeutung des Projekts mit einer autoritativen, aber zugänglichen Bildsprache widerzuspiegeln. Der "Atlas der Erinnerungsorte" — eine vollständig interaktive Karte der polnischen Erinnerungsorte in Deutschland und Polen — wurde zum Herzstück der Plattform und ermöglicht die geographische und epochale Erkundung der Geschichte. Die Drupal-Architektur bietet Flexibilität für vielfältige Inhaltstypen: historische Dokumente, Zeitzeugenberichte, biographische Einträge, Fotoarchive und aktuelle Community-Beiträge. Die Plattform ist zweisprachig (Deutsch/Polnisch) mit mehrsprachiger SEO-Optimierung. ## Unsere Leistungen - **Drupal-8-Entwicklung:** Vollständige Plattformgestaltung und -entwicklung mit Custom-Content-Types für Archiv, Biographie, Ausstellungen und Community-Inhalte - **UI/UX Design:** Visuelle Sprache, die dem kulturellen Gewicht des Projekts gerecht wird und für ein breites Publikum navigierbar bleibt - **SEO:** Mehrsprachige SEO-Strategie für maximale Sichtbarkeit in deutschen und polnischen Suchkontexten - **Laufende Entwicklung:** Kontinuierliche Feature-Entwicklung und Wartung seit November 2017 ## Ergebnis Ein lebendiges Online-Museum, das die deutsch-polnische Geschichte digital erlebbar macht und als Vernetzungsplattform für die Polonia in Deutschland dient. Das Projekt trägt nachhaltig zur Erinnerungskultur und zum interkulturellen Dialog zwischen zwei der historisch engst verbundenen Nationen Europas bei. --- # Regionalfenster: E-Paper-Service für Bibliotheken URL: https://www.reflect-media.com/de/case-studies/regionalfenster Locale: de Kind: case-study Client: Deutsche Nationalbibliothek Year: 2016 – laufend Industry: Öffentlicher Sektor / Kulturelles Erbe > Hochverfügbare Java-EE-Webanwendung für die Deutsche Nationalbibliothek — regionaler Zugang zu digitalem Pressearchiv mit BITV 90+ Barrierefreiheit. ## Herausforderung In Deutschland erscheinen rund 1.200 Tageszeitungen als E-Paper — und jede regionale Pflichtexemplarbibliothek ist gesetzlich verpflichtet, die Titel ihrer Region zu sammeln, bereitzustellen und langfristig zu archivieren. Bisher mussten Verlage ihre E-Paper-Ausgaben separat an jede Regionalbibliothek abliefern — ein enormer logistischer Aufwand für alle Beteiligten. Die Deutsche Nationalbibliothek und die Arbeitsgemeinschaft der Regionalbibliotheken (AG RB) suchten einen besseren Weg: eine technische Infrastruktur, die die zentrale Archivierung bei der DNB mit einem regionsspezifischen, rechtlich sicheren Lesezugang für jede Bibliothek verbindet. Zusätzliche Anforderungen: höchste Verfügbarkeit (Ausfall nicht tolerierbar), vollständige Barrierefreiheit nach BITV 90+ sowie eine differenzierte Zugangsverwaltung — welcher Titel, für welche Bibliothek, in welchem Zeitraum, mit wie vielen parallelen Zugriffen. ## Lösung Über 14 Monate entwickelten wir eine hochverfügbare Java-EE-Webanwendung, die alle Anforderungen erfüllt: - **Einmalige Ablieferung:** Verlage liefern nur an die DNB — keine separaten Ablieferungen an Regionalbibliotheken mehr - **Regionsspezifischer Zugang:** Jede Bibliothek sieht und öffnet ausschließlich die Titel, für die sie mit dem Verlag eine Vereinbarung geschlossen hat - **Granulare Berechtigungsverwaltung:** Titelfreischaltung, Zugriffszeitraum und maximale Parallelzugriffe werden zentral verwaltet - **Redundante Serverarchitektur:** Kein Single Point of Failure — der Betrieb läuft unterbrechungsfrei - **BITV 90+ Barrierefreiheit:** Alle Inhalte und Funktionen vollständig zugänglich für Menschen mit Behinderungen - **Responsive Design:** Nutzbar auf allen Endgeräten in den Lesesälen ## Ergebnis Seit dem Go-live Anfang 2018 läuft der „Service Regionale Bereitstellung" stabil im Dauerbetrieb. Aktuell sind 777 E-Paper-Titel für die beteiligten Regionalbibliotheken freigeschaltet. Verlage erfüllen ihre Ablieferungspflicht durch eine einzige Ablieferung an die DNB — statt an jede Regionalbibliothek separat. Die Bibliotheken kommen ihrem gesetzlichen Sammelauftrag nach, ohne eigene Archivierungsinfrastruktur betreiben zu müssen. Eine bundesweite Infrastruktur für das digitale Presseerbe Deutschlands — gebaut für Langzeitbetrieb, rechtliche Sicherheit und vollständige Zugänglichkeit. --- # RR Team: Reifen-Spezialist Branding URL: https://www.reflect-media.com/de/case-studies/rrteam Locale: de Kind: case-study Client: RR Team Laubach Year: 2021 Industry: Automobil / Reifen- & Felgenhandel > Vollständige Markenidentität für RR Team GmbH Laubach — Logo, Corporate-Design-Richtlinien, Geschäftsausstattung und Printwerbetemplates für einen. ## Herausforderung Der bisherige Markenauftritt spiegelte die Professionalität des Services nicht wider. RR Team brauchte eine visuelle Identität, die an jedem Touchpoint Kompetenz und Verlässlichkeit ausstrahlt: von der Lokalzeitungsanzeige für Sommerreifenrabatte bis zum gemarkten Umschlag beim Kunden. Die Identität musste zudem systematisch und praktisch sein — leicht anwendbar durch das Team über eine breite Materialpalette von A-Format-Anzeigen bis zur Geschäftsausstattung, ohne jedes Mal Design-Aufwand zu erfordern. ## Lösung Das Logo nimmt den Namen RR TEAM und gibt ihm eine unverwechselbare visuelle Behandlung: fett, strukturiert und mit einem charakteristischen 10°-Diagonalraster gesetzt, das sowohl Energie als auch Präzision erzeugt. Der Claim "Service in Vollendung" etabliert das Serviceversprechen direkt im Zeichen. Das Konstruktionsblatt spezifiziert exakte Innenabstände, Außenränder und optische Korrekturen für konsistente Reproduktion in jeder Größe. Die Farbpalette zentriert auf ein starkes Pantone-Blau (#1D71B8) — selbstbewusst und automotive — gepaart mit Kaltgrau und Beinahe-Schwarz. Die Roboto-Schriftfamilie, spezifiziert in mehreren Schnitten von Bold Italic bis Light, bietet eine vielseitige typografische Bandbreite für Headlines, Subheadlines und Fließtext über alle Markenmaterialien. Das Layoutsystem führt ein diagonales 15-Spalten-Raster-Template mit annotierten Einklänker-Regeln und 10°-Winkel ein — eine visuelle Logik, die sich durch jedes Printformat zieht, von der seitenfüllenden Saisonaktion bis zur DIN-Lang-Servicebroschüre. Die Geschäftsausstattung und Printwerbetemplates geben dem Unternehmen alles Nötige, um vom ersten Tag an professionell aufzutreten. ## Unsere Leistungen - **Logo Design:** Das RR TEAM-Zeichen mit Claim-Variante, Konstruktionsspezifikation und Abstandsrichtlinien - **Corporate Design:** Pantone-Farbpalette, Roboto-Typografiesystem und vollständige Markenrichtlinien - **Print Design:** Vollständige Geschäftsausstattung, Werbetemplates, Servicebroschüren-Layout und Reifengarantie-Druckmaterialien ## Ergebnis Eine vollständige Markenidentität, die RR Team die professionelle visuelle Präsenz gibt, die ihr technisches Know-how verdient — systematisch angewandt vom Briefbogen bis zur Reifenaktion und von der Visitenkarte bis zur Garantiebroschüre. --- # Satzbrand: Corporate Design für eine PR-Agentur URL: https://www.reflect-media.com/de/case-studies/satzbrand Locale: de Kind: case-study Client: Satzbrand Kommunikation Year: 2018 Industry: PR & Kommunikation > Modernes, minimalistisches Corporate Design und Geschäftsausstattung für die Bremer PR-Agentur Satzbrand — Briefbogen, Visitenkarten, Kuverts und Markenanwendungen. ## Ausgangslage Satzbrand ist eine PR-Agentur aus Bremen, die sich mit hohem handwerklichem Anspruch und einem soziologisch geschulten Blick von klassischen Kommunikationsagenturen unterscheidet. Das bisherige Erscheinungsbild wurde dieser Positionierung nicht gerecht — es fehlte ein eigenständiges Markenzeichen, das den analytischen, reduzierten Charakter der Agentur auch visuell transportiert. ## Aufgabe Wir entwickelten ein neues Corporate Design, das den Anspruch der Agentur kompromisslos übersetzt: zurückgenommen, typografisch präzise und auf das Wesentliche fokussiert. Im Zentrum steht ein Wort-Bild-Logo aus einem markanten Rundzeichen und der Wortmarke in einer charaktervollen Sans-Serif. ## Umsetzung Die Geschäftsausstattung — Briefbogen, Visitenkarten, Kuverts, Versandrolle, Mappe und Buttons — arbeitet konsequent mit Schwarz, Weiß und großzügigem Weißraum. Die Typografie setzt klare Akzente: eine gesperrte, versal gesetzte Betreffzeile bricht bewusst mit klassischen DIN-Briefbogen-Konventionen und wird zum wiedererkennbaren Merkmal der Marke. Die digitalen Anwendungen übertragen dasselbe Prinzip auf Mobile-Screens und Web-Oberflächen. ## Ergebnis Ein konsequent durchgezogenes Markenbild, das Satzbrand als moderne, analytisch arbeitende PR-Agentur positioniert und sich in der Anwendung über alle Touchpoints hinweg stimmig trägt — vom ersten Kundenkontakt per Brief bis zur Social-Media-Präsenz. --- # SDGnexus: Forschungsinitiative Branding URL: https://www.reflect-media.com/de/case-studies/sdg-nexus Locale: de Kind: case-study Client: Justus Liebig Universität Giessen – SDGnexus Network Year: 2021 Industry: Akademische Forschung / Nachhaltigkeit > Corporate Design für das SDGnexus Network der Justus-Liebig-Universität Gießen — ein visuelles Identitätssystem für ein internationales. ## Herausforderung Ein Netzwerk dieser Dimension zu gestalten erforderte die Berücksichtigung zweier spezifischer Rahmenbedingungen. Die Marke musste sich auf die visuelle Sprache der UN Sustainable Development Goals beziehen — ein weltweit anerkanntes System mit 17 Farben von enormer Symbolkraft — ohne es einfach zu reproduzieren. Gleichzeitig musste sie die Autorität der Justus-Liebig-Universität ausstrahlen, einer renommierten akademischen Institution mit eigener etablierter Identität. Hinzu kam: Das Design musste über eine enorme Formatspanne funktionieren — von Forschungspublikationen über Konferenzbroschüren bis hin zu digitalen Kommunikationsmitteln und physischem Merchandise für Events in verschiedenen Ländern. Die Identität musste systematisierbar sein — einsetzbar durch unterschiedliche Teams und Partnerinstitutionen ohne Verlust an Kohärenz. ## Lösung Das zentrale Zeichen ist ein Ring konzentrischer Bogen aus den 17 SDG-Farben — eine visuelle Metapher für die Kernidee des Netzwerks: Vernetzung und Nexus zwischen den Zielen. Das Zeichen ist unverwechselbar, sofort lesbar und flexibel: Es skaliert vom Pin-Badge bis zum Lanyard-Muster bis zur Konferenzbühne, und es funktioniert in Vollfarbe, Graustufen und Invertierung. Die vollständige Farbpalette wurde aus dem UN-SDG-System abgeleitet und mit CMYK-, RGB- und HEX-Werten für konsistente Reproduktion in Print und Digital global dokumentiert. Die Welcome-Broschüre etabliert die Publikationsvorlage: ein starkes Cover mit vollflächiger Fotografie und Co-Branding (JLU, DAAD), ein klares typografisches Raster für Forschungsinhalte und farbcodierte SDG-Abschnittsheader zur thematischen Navigation. Konferenzmerchandise — Pin-Badges in drei Farbvarianten, ein gebrandetes Lanyard mit wiederholendem Icon-Muster und eine Tragetasche — erweitert die Marke in den physischen Eventraum. ## Unsere Leistungen - **Corporate Design:** Logosystem mit mehreren Varianten, vollständige 18-Farben-SDG-Palette und Markenanwendungsrichtlinien - **Print Design:** Welcome-Broschüre, Publikationsvorlagen mit thematischer Farbcodierung der Abschnitte - **Markensystem:** Skalierbare Identität für den Einsatz durch mehrere Netzwerkmitglieder, Partnerinstitutionen und Eventteams weltweit ## Ergebnis Eine professionelle und international glaubwürdige visuelle Identität, die dem SDGnexus Network eine unverwechselbare Präsenz in Forschungspublikationen, Konferenzhallen und digitalen Kanälen verleiht — und die Dringlichkeit globaler Nachhaltigkeitsarbeit mit der Strenge einer bedeutenden deutschen Forschungsuniversität verbindet. --- # STADTRADELN: Radeln für ein gutes Klima URL: https://www.reflect-media.com/de/case-studies/stadtradeln Locale: de Kind: case-study Client: Klima-Bündnis Services GmbH Year: 2015 – laufend Industry: Öffentlicher Sektor / Klimaschutz > Full-Stack-Digitalplattform für Deutschlands erfolgreichste Fahrradkampagne — Webportal, native iOS- & Android-Apps und Live-Tracking für Hunderttausende. ## Herausforderung STADTRADELN ist eine der erfolgreichsten Klimaschutz-Kampagnen Deutschlands. Kommunen und ihre Bürger treten 21 Tage lang für den Klimaschutz in die Pedale — Teams werden gebildet, Kilometer gesammelt und Kommunen treten im freundschaftlichen Wettbewerb gegeneinander an. Was als Initiative begann, ist heute eine bundesweite Bewegung mit Tausenden teilnehmenden Kommunen und Hunderttausenden aktiven Radlern. Die Herausforderung war enorm: Ein System schaffen, das gleichzeitig für Einzelpersonen, Teams, Kommunalverwaltungen und Kampagnenorganisatoren funktioniert — und das bei stark schwankenden Nutzerzahlen während der Aktionszeiträume skalierbar bleibt. ## Unsere Leistungen Wir entwickelten die komplette digitale Infrastruktur von Grund auf: **Web-Plattform (stadtradeln.de):** Realisiert mit modernen Web-Technologien — PHP-Backend und ein reaktives Vue.js-Frontend für eine dynamische Benutzererfahrung. Die Plattform ermöglicht die Registrierung von Kommunen, die Anmeldung von Radelnden, die Bildung von Teams und bietet umfangreiche Auswertungen und Rankings. **Native Mobile Apps:** Für iOS (Swift) und Android (Kotlin/Java) mit GPS-Tracking für automatische Kilometererfassung, Offline-Funktionalität und nahtloser Synchronisation mit der Web-Plattform. Push-Benachrichtigungen motivieren Teilnehmer und informieren über Team-Erfolge. **Funktionsumfang:** - Registrierung und Verwaltung von Kommunen und Teilnehmern - Team-Bildung und -Management - Kilometer-Tracking (manuell und per App) - Live-Rankings und Wettbewerbe - Statistiken und Auswertungen - Meldeplattform RADar! für Infrastruktur-Feedback - Mehrsprachigkeit (DE, EN, FR) ## Lösung Die Architektur ist auf Skalierbarkeit ausgelegt — während der Hochphasen verarbeitet das System Millionen von Kilometern und bewältigt Zehntausende gleichzeitige Nutzer. Die Plattform wird kontinuierlich weiterentwickelt, um neue Features wie die RADar!-Meldeplattform oder den BIKE MONITOR zu integrieren. Ein ausgefeiltes Kampagnen-Management-System erlaubt es Kommunen, ihre STADTRADELN-Aktionen individuell zu konfigurieren und zu verwalten. Die RESTful API gewährleistet den nahtlosen Datenaustausch zwischen Web- und Mobilplattformen. ## Ergebnis Eine der erfolgreichsten Klimaschutz-Kampagnen Deutschlands mit digitaler Infrastruktur, die jährlich Hunderttausende Menschen zum Radfahren motiviert. STADTRADELN ist zum festen Bestandteil der kommunalen Klimaschutzarbeit geworden und trägt messbar zur Verkehrswende bei. --- # WAS Winterdienst: Mobile App für den Winterdienst URL: https://www.reflect-media.com/de/case-studies/was-winterdienst Locale: de Kind: case-study Client: Wetterauer Agrar Service GmbH Year: 2019 – laufend Industry: Landwirtschaft & Kommunale Dienstleistungen > Mobile App für die Koordination und Dokumentation des Winterdienstes — GPS-gestützte Einsatzverfolgung, Fotodokumentation und Echtzeit-Reporting für die. ## Die Herausforderung Die Wetterauer Agrar Service koordiniert eine Flotte von Landwirten mit Traktoren, Schneeschildern und Streuern über Hunderte von Gewerbe- und kommunalen Liegenschaften in der Rhein-Main-Region. Vor der App wurde jeder Einsatz auf Papier dokumentiert — handschriftliche Protokolle, manuelle Stundenzettel und Telefonanrufe zur Bestätigung. Die Abrechnung am Ende der Saison war ein wochenlanges administratives Problem. Bei extremen Wetterlagen war die Koordination chaotisch. Disponenten hatten keinen Echtzeit-Überblick, welche Routen geräumt waren, welche Objekte noch warteten und ob die Einsätze die vertraglichen Verpflichtungen erfüllten. ## Was wir gebaut haben Eine mobile App gekoppelt mit einem webbasierten Management-Portal, die die Einsatzverwaltung direkt in die Hände von Fahrern und Disponenten legt: **Mobile App (Android):** - **GPS-Routenverfolgung** — jeder Einsatz wird automatisch mit Standort, Zeitstempeln und Routendaten protokolliert - **Fotodokumentation** — Fahrer fotografieren geräumte Objekte vor Ort, mit Geokoordinaten und Zeitstempel als prüfbarer Leistungsnachweis - **Einsatzparameter** — Wetterbedingungen, Salz-/Splittverbrauch, eingesetztes Gerät, alles in strukturierten Formularfeldern erfasst - **Offline-First-Architektur** — Winterdienst-Fahrzeuge arbeiten in ländlichen Gebieten mit unzuverlässiger Mobilfunkabdeckung. Die App speichert alle Daten lokal und synchronisiert bei verfügbarer Verbindung - **Echtzeit-Auftragszuweisung** — Disponenten weisen Winterdienst-Gebiete über das Portal zu, sofort sichtbar in der App **Web-Portal:** - **Objekt- und Abrechnungsmanagement** — zentrale Datenbank aller Dienstleistungsobjekte mit Vertragsdaten und Preisen - **Live-Einsatzverfolgung** — Echtzeit-Überblick, welche Gebiete bearbeitet wurden und welche ausstehen - **Flexible Zuweisung** — Routen und Gebiete in Echtzeit neu zuweisen, wenn sich die Wetterlage ändert - **Nachträgliche Dokumentation** — fehlende Einsätze nachträglich ergänzen - **Personalisierter Zugang** — jeder Auftraggeber und Dienstleister sieht nur seine relevanten Daten ## Das Ergebnis Was früher tagelange manuelle Dateneingabe am Ende jedes Abrechnungszyklus erforderte, passiert jetzt automatisch. Jeder Einsatz wird im Moment seines Stattfindens dokumentiert — GPS-verifiziert, per Foto belegt und sofort für die Rechnungsstellung verfügbar. Für WAS hat die App den Winterdienst von einer operativ chaotischen Saison in einen professionell gesteuerten Geschäftsbereich mit vollständiger Transparenz für kommunale und gewerbliche Kunden transformiert. --- # Zukunft Bau: Nachhaltiges Bauen 2.0 URL: https://www.reflect-media.com/de/case-studies/zukunft-bau Locale: de Kind: case-study Client: Bundesinstitut für Bau-, Stadt- und Raumforschung (BBSR) Year: 2019 – laufend Industry: Öffentlicher Sektor / Bundesforschung > Kompletter visueller, struktureller und technischer Relaunch des zentralen Bauforschungsportals für das Bundesinstitut BBSR — Typo3 CMS mit Fokus auf UX. Das Zukunft-Bau-Portal ist die zentrale Plattform für Bauforschung in Deutschland — für Förderrichtlinien, laufende Forschungsprojekte und Innovationsergebnisse des Bundesinstituts BBSR. Die Zielgruppe umfasst Architekten, Bauingenieure, Antragstellende, Forschende und Fachjournalisten. Das bestehende System war über Jahre organisch gewachsen: Die Navigation war unübersichtlich, Inhalte schwer auffindbar, und das technische Fundament entsprach nicht mehr den Anforderungen an Barrierefreiheit und SEO. ::image-text{src="/images/cases/zukunft-bau-1.webp" alt="Zukunft Bau Homepage-Redesign"} ## Informationsarchitektur zuerst Wir analysierten zunächst, wie die verschiedenen Nutzergruppen ein Forschungsportal tatsächlich nutzen. Forschende brauchen schnellen Zugang zu Förderkriterien. Antragstellende brauchen klare Prozessführung. Journalisten brauchen pressefertige Materialien. Das sind fundamental unterschiedliche Nutzungsszenarien — und die alte Architektur behandelte sie wie eine einzige. Wir strukturierten die Informationsarchitektur nach Nutzerintention statt Inhaltstyp und entwickelten ein visuelles System, das jede Zielgruppe ohne Umwege zu ihrem Ziel führt. :: ::video-text{src="/videos/cases/zukunft-bau-1.mp4" :reverse="true"} ## Auf Typo3 gebaut, für Komplexität erweitert Die Plattform erforderte individuelle Typo3-Extensions für die Inhaltsbeziehungen zwischen Förderrichtlinien, Forschungsprojekten und Veröffentlichungen — ein Modell, das für Bundesforschungsportale spezifisch ist. Wir entwickelten strukturierte Redaktionsworkflows, mit denen das BBSR-Team effizient und skalierbar publizieren kann. Barrierefreiheit nach BITV 2.0 / WCAG und responsives Design waren für eine Bundesbehörde gesetzt. Die SEO-Architektur wurde von Grund auf neu aufgebaut, damit Forschungspublikationen über organische Suche ihre Zielgruppen zuverlässig erreichen. :: ::video-text{src="/videos/cases/zukunft-bau-2.mp4"} ## Eine Plattform, die für alle funktioniert Die Plattform bedient ein breites Nutzerspektrum mit einem einzigen, kohärenten System. Differenzierte Filter- und Suchfunktionen, intuitive Navigation und eine klare visuelle Hierarchie ermöglichen den Weg von der Entdeckung bis zur Antragstellung — für erfahrene Forschende ebenso wie für Erstantragstellende. Seit dem Launch 2019 entwickeln wir die Plattform gemeinsam mit dem BBSR-Team kontinuierlich weiter — mit neuen Funktionen, gezielten Verbesserungen und dauerhafter technischer Stabilität. :: --- # Energie & Nachhaltigkeit URL: https://www.reflect-media.com/de/industries/energie-nachhaltigkeit Locale: de Kind: industry ## Kommunen, Energieversorger und Infrastrukturbetreiber stehen unter Handlungsdruck. Das **Wärmeplanungsgesetz** verpflichtet Großstädte bis 2026 und alle übrigen Kommunen bis 2028 zur Vorlage kommunaler Wärmepläne. Der **Smart-Meter-Rollout** erfordert neue digitale Infrastruktur bei Netzbetreibern und Messstellenbetreibern. Und die **kommunale CO₂-Bilanzierung** nach BISKO-Standard ist für immer mehr Kommunen Voraussetzung für Fördermittel und Berichtspflichten. Wir bauen die digitalen Plattformen, die diese Anforderungen in der Praxis umsetzen — seit über zehn Jahren. Darunter den **Klimaschutz-Planer** für kommunale CO₂-Bilanzierung (2.200+ Kommunen) und die Kampagnenplattform **STADTRADELN** (1 Mio.+ aktive Teilnehmer) — beides für die **Klima-Bündnis Services GmbH**. ## Klimaschutz-Planer: Genutzt von über 2.200 Kommunen. ::image-text{src="/images/cases/klimaschutz-planer-sc.webp" alt="Klimaschutz-Planer Dashboard" contain} Der **Klimaschutz-Planer** ist das zentrale digitale Instrument für kommunale Energie- und CO₂-Bilanzierung in Deutschland. Entwickelt für die Klima-Bündnis Services GmbH, seit 2014 im Einsatz, genutzt von über 2.200 Kommunen bundesweit. Die Plattform ermöglicht standardisierte CO₂-Bilanzen nach **BISKO-Standard**, Maßnahmenplanung und Monitoring — für Klimaschutzmanager in Kommunalverwaltungen, die oft keine IT-Spezialisten sind. Intuitive Benutzerführung, wissenschaftlich validierte Berechnungsverfahren, regelmäßige Aktualisierung der Emissionsfaktoren. :: ## Open Source. Deutsche Server. DSGVO-konform. ::two-col Wir setzen auf **Open-Source-Technologie**: Spring Boot, Apache Kafka, Drupal, Nuxt/Vue.js, Flutter. Kein proprietärer Code, keine Lizenzgebühren. Hosting auf **deutschen Servern** (Hetzner, AWS Frankfurt) — volle DSGVO-Konformität, kein Datentransfer in Drittstaaten. Für Kommunen und öffentliche Auftraggeber bedeutet das: **keine versteckten Folgekosten**, freie Wahl bei Wartung und Weiterentwicklung, volle Datensouveränität. :: ## Was wir für den Energiesektor bauen. ::two-col **Kommunale Klimatools** — CO₂-Bilanzierung, Maßnahmenplanung, Monitoring und Berichterstattung. Plattformen, die Klimaschutzmanager eigenständig bedienen können — ohne Entwicklerabhängigkeit. **IoT-Plattformen** — Echtzeit-Sensorintegration, eventgetriebene Microservices, Cloud-Infrastruktur. Für Infrastrukturbetreiber, die Felddaten zuverlässig verarbeiten und visualisieren müssen. **Energiemarktplätze** — Mehrsprachige Portale für den europäischen Energiemarkt. Drupal, Symfony, API-Integrationen. Transaktionssicher und skalierbar. **Kampagnenplattformen** — Web und App für Klimakampagnen mit Hunderttausenden Teilnehmern. STADTRADELN: über 1 Million aktive Nutzer, 3.000+ Kommunen. :: ## Ausgewählte Projekte im Energiesektor ::case-ref{slug="klimaschutz-planer" image="/images/cases/klimaschutz-planer-hero.webp" client="Klima-Bündnis Services GmbH" label="Kommunales Klimatool · 2.200+ Kommunen"} Klimaschutz-Planer — Bundesweite Plattform für kommunale CO₂-Bilanzierung und Klimaschutzplanung nach BISKO-Standard. Seit 2014 in Betrieb. :: ::case-ref{slug="stadtradeln" image="/images/cases/stadtradeln-app-hero.webp" client="Klima-Bündnis Services GmbH" label="Web + App · TYPO3 + Flutter"} STADTRADELN — Webportal und native Apps für Deutschlands größte Radkampagne. Über 1 Million aktive Teilnehmer in mehr als 3.000 Kommunen. Seit 2015. :: ::case-ref{slug="iot-stauwarnanlagen" image="/images/cases/iot-stauwarnanlagen-hero.webp" client="FERCHAU Engineering GmbH" label="IoT-Plattform · Spring Boot + Kafka"} IoT-Stauwarnanlagen — Skalierbare IoT-Plattform mit Spring Boot, Apache Kafka und MQTT. AWS-Cloud mit DevOps-Pipeline. Seit 2020. :: ::case-ref{slug="milk-the-sun" image="/images/cases/milk-the-sun-hero.webp" client="Milk the Sun GmbH" label="Solarmarktplatz · Drupal + Symfony"} Milk the Sun — Europäischer Online-Marktplatz für Photovoltaikanlagen. Mehrsprachiges Drupal-Portal in fünf Sprachen. :: --- # Engineering & Technologie URL: https://www.reflect-media.com/de/industries/engineering-technologie Locale: de Kind: industry ## Digitale Plattformen für Ingenieursunternehmen. Wir entwickeln technische Plattformen für Unternehmen wie **FERCHAU Engineering GmbH** — Deutschlands größten Engineering-Dienstleister mit über 8.500 Ingenieuren — und die **ERGO Group AG**. IoT-Systeme, Enterprise-Webanwendungen, API-Integrationen mit Legacy-Systemen. Unsere Plattformen laufen im produktiven Dauerbetrieb, nicht als Prototyp. ## Open Source. Cloud-nativ. Kein Vendor Lock-in. ::two-col Wir setzen auf **Open-Source-Technologie**: Spring Boot, Apache Kafka, Vue.js, Nuxt, Drupal. Hosting auf **AWS (Frankfurt)** oder **deutschen Servern** (Hetzner) — volle DSGVO-Konformität. Infrastructure-as-Code, Container-basierte Deployments, reproduzierbare Umgebungen. Ihr Quellcode gehört Ihnen — vollständig dokumentiert, jederzeit übertragbar. Die Deployment-Pipeline, Monitoring-Konfiguration und Betriebsrunbooks sind Liefergegenstände, keine Nachgedanken. :: ::image-text{src="/images/cases/ferchau-7.webp" alt="FERCHAU IoT-Dashboard"} ## FERCHAU: IoT im Feldeinsatz. Für FERCHAU Engineering haben wir eine skalierbare IoT-Plattform für mobile LED-Stauwarnanlagen entwickelt. **Spring-Boot-Microservices**, Apache Kafka für Event-Streaming, **MQTT** für Sensorkommunikation, AWS-Cloud-Infrastruktur mit CI/CD-Pipeline. Deployment-Zeit für neue Warnkonfigurationen von mehreren Tagen auf unter zwei Stunden reduziert. Laufende Partnerschaft seit 2020. :: ::pull-quote{author="Markus Beier, Regionalleiter FERCHAU GmbH"} Ich finde die Zusammenarbeit mit Ihnen sehr professionell und angenehm! Die Kommunikation läuft immer freundlich, transparent und konstruktiv. Die Arbeitspakete haben durchweg eine sehr hohe Qualität. Wir werden Sie jederzeit FERCHAU intern weiterempfehlen. :: ## Ausgewählte Projekte für Engineering- und Technologieunternehmen ::case-ref{slug="iot-stauwarnanlagen" image="/images/cases/iot-stauwarnanlagen-hero.webp" client="FERCHAU Engineering GmbH" label="IoT-Plattform · Spring Boot + Kafka + MQTT"} IoT-Stauwarnanlagen — Skalierbare Plattform für Deutschlands größten Engineering-Dienstleister. Spring Boot, Apache Kafka, MQTT, AWS-Cloud mit DevOps-Pipeline. Seit 2020. :: ::case-ref{slug="ergo-online-vertragsabschluesse" image="/images/cases/ergo-hero.webp" client="ERGO Group AG" label="Enterprise-Plattform · Spring Boot + Vue.js"} ERGO Online-Vertragsabschlüsse — Enterprise-Microservices-Plattform für digitale Versicherungsvertragsabschlüsse. Java Spring Boot, Vue.js, Drupal CMS, REST-API-Integration mit Legacy-Systemen. :: ::image-text{src="/images/cases/ferchau-5.webp" alt="DevOps und technische Lieferung" reverse} ## DevOps ist ein Liefergegenstand. CI/CD-Pipelines mit automatisierten Testgates, Blue-Green-Deployments und automatischem Rollback. Infrastructure-as-Code für reproduzierbare Umgebungen. Monitoring und Alerting, das Probleme erkennt, bevor Nutzer sie bemerken. Ein Ingenieursunternehmen, das seine eigene digitale Infrastruktur nicht eigenständig betreiben und weiterentwickeln kann, hat keine vollständige Lösung erhalten — sondern eine Abhängigkeit. :: --- # Marken & Einzelhandel URL: https://www.reflect-media.com/de/industries/marken-einzelhandel Locale: de Kind: industry ## Markensysteme, die in der Praxis funktionieren. Wir bauen seit über 15 Jahren Markensysteme für Einzelhandel, Luxusmarken und Konsumgüter in Deutschland — darunter für **Parkett Hinterseer GmbH** (28 Standorte, German Design Award 2025), **Caja von Steinling** (Luxus-Lederwaren) und das **Kunstmuseum Marburg** (German Design Award). Drei unserer Markenprojekte wurden mit dem German Design Award ausgezeichnet — nicht weil sie in Isolation schön waren, sondern weil sie funktioniert haben. ## Branding. Website. Print. Alles aus einer Hand. ::two-col Die Marken, die am stärksten wirken, sind die, bei denen Print und Digital erkennbar zusammengehören — gleiche Typografie-Hierarchie, gleiche Farblogik, gleiche Bildsprache. Wir gestalten beides gleichzeitig: **Logo, Corporate Identity, Website, E-Commerce, Printausstattung, Verpackung, Beschilderung**. Unsere Websites laufen auf **Open-Source-CMS** (WordPress, Nuxt) — kein Vendor Lock-in, keine Lizenzgebühren. Hosting auf **deutschen Servern**, DSGVO-konform. Ihr Quellcode gehört Ihnen. :: ::image-text{src="/images/cases/caja-2.webp" alt="Caja von Steinling Luxusmarke"} ## Markenidentität unter realen Produktionsbedingungen. Eine Markenidentität muss auf der Visitenkarte funktionieren, auf dem 6-Meter-Banner, im Dark-Mode der Website und auf geprägtem Leder — mit jeweils unterschiedlichen Produktionsbedingungen. **Parkett Hinterseer** — Komplettrebranding für Deutschlands Premium-Parketthandel mit 28 Standorten. Logo, Corporate Identity, Print, Verpackung, Beschilderungssystem. German Design Award 2025. **Caja von Steinling** — Markenentwicklung für ein Luxus-Lederwarenlabel. Logoentwicklung optimiert für Lederprägung bei 3mm. WordPress-Shop, Verpackung, Hangtags, Pflegekarten. :: ## Ausgewählte Projekte für Marken und Einzelhandel ::case-ref{slug="parkett-hinterseer" image="/images/cases/hinterseer-1.webp" client="Parkett Hinterseer GmbH" label="Rebranding · 28 Standorte · GDA 2025"} Parkett Hinterseer — Komplettrebranding für Deutschlands führenden Premium-Parketthandel. Logo, Corporate Identity, Print, Verpackung, Editorial Design und Beschilderungssystem. :: ::case-ref{slug="caja-von-steinling" image="/images/cases/caja-2.webp" client="Caja von Steinling" label="Luxusmarke · WordPress E-Commerce"} Caja von Steinling — Markenentwicklung für ein Luxus-Lederwarenlabel. Logo optimiert für Lederprägung, WordPress-E-Commerce, vollständige Printausstattung inklusive Verpackung. :: ::case-ref{slug="kunstmuseum-marburg" image="/images/cases/kunstmuseum-marburg-9.webp" client="Kunstmuseum Marburg" label="Markenrelaunch · German Design Award"} Kunstmuseum Marburg — Logo-Relaunch und Rebranding für eines der bedeutendsten Universitätskunstmuseen Deutschlands. Corporate Design, Printdesign, Merchandise. German Design Award. :: ::image-text{src="/images/cases/printdesign.webp" alt="Marken- und Printdesign-Prozess" reverse} ## Wir liefern Systeme, nicht Dateien. Jedes Markenprojekt startet mit der Produktionsbedingung, nicht mit der Inspiration. Fertigungsprozesse, Budgetgrenzen, Filialstrukturen — das sind keine Einschränkungen des Briefings. Sie sind das Briefing. Wir liefern dokumentierte **Markenrichtlinien**, editierbare Designvorlagen und Assetbibliotheken, die für die Teams strukturiert sind, die sie tatsächlich nutzen — vom Marketingmanager bis zum Franchisenehmer. :: --- # Öffentlicher Sektor URL: https://www.reflect-media.com/de/industries/oeffentlicher-sektor Locale: de Kind: industry ## Digitale Plattformen für öffentliche Auftraggeber. Wir bauen seit über zehn Jahren digitale Plattformen für deutsche Bundesbehörden, Kommunen und Forschungseinrichtungen — darunter das **Bundesinstitut für Bau-, Stadt- und Raumforschung (BBSR)**, die die **Klima-Bündnis Services GmbH**, die **Deutsche Nationalbibliothek** und den **Landschaftsverband Westfalen-Lippe (LWL)**. Von der Forschungsplattform des BBSR bis zur Klimakampagne STADTRADELN mit über einer Million aktiver Teilnehmer in mehr als 3.000 Kommunen — unsere Plattformen sind im produktiven Regelbetrieb öffentlicher Einrichtungen verankert. ## Open Source. Kein Vendor Lock-in. ::two-col Wir setzen ausschließlich auf **Open-Source-Technologie**: TYPO3, Drupal, Nuxt/Vue.js, Flutter. Kein proprietärer Code, keine Lizenzgebühren, keine Abhängigkeit von einem einzelnen Anbieter. Ihr Quellcode gehört Ihnen — vollständig dokumentiert, jederzeit übertragbar. Das bedeutet für Ihre Vergabestelle: **keine versteckten Folgekosten**, freie Wahl bei Wartung und Weiterentwicklung, und Konformität mit dem Grundsatz „Public Money, Public Code". :: ## Vergabefähige Leistungspakete. ::two-col Im Rahmen des geplanten **Vergabebeschleunigungsgesetzes** (Drucksache 21/1934) sollen die Wertgrenzen für Direktaufträge deutlich angehoben werden. Schon heute liegen viele unserer Leistungspakete im Bereich der vereinfachten Vergabe. Wir arbeiten auf Basis von **EVB-IT-Verträgen** (EVB-IT Dienstleistung / EVB-IT Erstellung) und liefern alle Unterlagen, die Ihre Vergabestelle benötigt: Leistungsbeschreibung, Preisblatt, Abnahmeprotokoll. Alle Preise netto zzgl. MwSt. :: ::image-text{src="/images/cases/zukunft-bau-1.webp" alt="Zukunft Bau Forschungsplattform des BBSR"} ## Barrierefreiheit nach BITV 2.0 und BFSG. Konformität nach **WCAG 2.2 AA**, **BITV 2.0** und **EN 301 549** ist für deutsche öffentliche Stellen gesetzlich vorgeschrieben. Mit dem **Barrierefreiheitsstärkungsgesetz (BFSG)** gelten ab Juni 2025 erweiterte Anforderungen auch für digitale Produkte und Dienstleistungen. Wir bauen Barrierefreiheit von Tag eins ein — Tastaturnavigation, Farbkontraste, Screenreader-Annotationen, Fokusmanagement. Jede Lieferung enthält eine **Erklärung zur Barrierefreiheit nach §12b BGG** und einen dokumentierten WCAG-Konformitätstest. :: ## Hosting auf deutschen Servern. DSGVO-konform. ::two-col Alle Projekte werden auf **deutschen Servern** gehostet — Hetzner oder IONOS (Rechenzentren in Deutschland, ISO 27001-zertifiziert). Kein Datentransfer in Drittstaaten, volle DSGVO-Konformität. Bei Bedarf liefern wir eine vollständige **Quellcode-Dokumentation und -Hinterlegung** für Ihre IT-Abteilung. Unsere Infrastruktur ist reproduzierbar und unabhängig betreibbar. :: ## Ausgewählte Projekte für öffentliche Auftraggeber ::case-ref{slug="zukunft-bau" image="/images/cases/zukunft-bau-hero.webp" client="Bundesinstitut BBSR" label="Forschungsplattform · TYPO3"} Zukunft Bau — Relaunch des zentralen Bauforschungsportals des Bundesinstituts für Bau-, Stadt- und Raumforschung. TYPO3-CMS, barrierefreie Umsetzung, redaktionelle Schulung. Seit 2019 kontinuierlich weiterentwickelt. :: ::case-ref{slug="stadtradeln" image="/images/cases/stadtradeln-app-hero.webp" client="Klima-Bündnis Services GmbH" label="Web + App · TYPO3 + Flutter"} STADTRADELN — Webportal und native Apps (iOS/Android) für Deutschlands größte Radkampagne. Live-Tracking für über 1 Million aktive Teilnehmer in mehr als 3.000 Kommunen. Seit 2015 im Einsatz. :: ::case-ref{slug="klimaschutz-planer" image="/images/cases/klimaschutz-planer-sc.webp" client="Klima-Bündnis Services GmbH" label="Webanwendung · Kommunales Planungstool"} Klimaschutz-Planer — Tool für kommunale CO₂-Bilanzierung und Klimaschutzplanung. Genutzt von Hunderten Kommunen in ganz Deutschland. Seit 2014 in Betrieb. :: ::case-ref{slug="porta-polonica" image="/images/cases/porta-polonica-1.webp" client="Landschaftsverband Westfalen-Lippe (LWL)" label="Online-Museum · Drupal"} Porta Polonica — Online-Museum für polnische Kultur und Geschichte in Deutschland. Drupal-Plattform, barrierefreie Umsetzung, SEO-Optimierung. Von 2017 bis 2025 betreut. :: ::case-ref{slug="regionalfenster" image="/images/cases/dnb-regionalfenster-hero.webp" client="Deutsche Nationalbibliothek" label="Webanwendung · Java EE"} Regionalfenster — E-Paper-Service für Bibliothekslesesäle der Deutschen Nationalbibliothek. Hochverfügbare Java-EE-Webanwendung, BITV 90+ Barrierefreiheit, redundante Serverarchitektur. Seit 2016 in Betrieb. :: ::case-ref{slug="landgrafenschloss-marburg" image="/images/cases/landgrafenschloss-1.webp" client="Landgrafenschloss Marburg" label="Branding & Leitsystem"} Landgrafenschloss Marburg — Markenidentität und Printausstattung für eines der bedeutendsten hessischen Kulturdenkmäler. Branding, Leitsystem und Druckmaterialien. :: ::image-text{src="/images/cases/zukunft-bau-2.webp" alt="Projektarbeit für öffentliche Auftraggeber" reverse} ## So arbeiten wir mit öffentlichen Auftraggebern. Jedes Projekt startet mit strukturierten Stakeholder-Interviews und User-Journey-Mapping. Wir dokumentieren Architekturentscheidungen, Barrierefreiheits-Testergebnisse und Abweichungen von der Leistungsbeschreibung — in einem Format, das Ihre Vergabe- und Rechtsabteilung verwenden kann. Wir arbeiten direkt mit Bundesbehörden, Landesbehörden, Kommunen und Forschungseinrichtungen. **Auf Wunsch erstellen wir eine EVB-IT-konforme Leistungsbeschreibung für Ihre interne Freigabe.** :: --- # App-Entwicklung URL: https://www.reflect-media.com/de/services/app-entwicklung Locale: de Kind: service > Native iOS- und Android-Apps sowie plattformübergreifende mobile Anwendungen — entwickelt, um Nutzererwartungen zu übertreffen und mit Ihrem Unternehmen. ## Was wir bauen Mobile Anwendungen, die Nutzer wirklich nutzen wollen — und mit denen Unternehmen wachsen können. Wir haben native iOS- und Android-Apps für einige der erfolgreichsten öffentlichen Kampagnen Deutschlands entwickelt und dabei Hunderttausende von Nutzern unter Spitzenlast bedient. ## Unser Ansatz App-Entwicklung bei reflect.media folgt einem Full-Cycle-Modell: Wir übernehmen alles von der initialen Strategie und dem UI/UX-Design über die Entwicklung und Qualitätssicherung bis hin zur App-Store-Einreichung. Wir wählen den Plattformansatz — nativ oder plattformübergreifend — basierend auf dem, was Ihr Anwendungsfall tatsächlich erfordert. --- # Digital Consulting URL: https://www.reflect-media.com/de/services/digitale-beratung Locale: de Kind: service > Digitalstrategie, Technologie-Audits, UX-Reviews und SEO-Optimierung — für bessere Entscheidungen bei Ihren digitalen Investitionen. ## Was wir tun Digital Consulting bei reflect.media dreht sich darum, bessere Entscheidungen schneller zu treffen. Wir bringen 15+ Jahre Projekterfahrung aus Dutzenden von Branchen in jedes Engagement ein — damit Sie von Mustern profitieren, die wir haben funktionieren sehen, und von Fallen, in die andere getappt sind. ## Wie wir arbeiten Jedes Beratungsmandat beginnt mit Zuhören. Wir möchten Ihre aktuelle Situation, Ihre Ziele, Ihre Einschränkungen und Ihr Team verstehen. Dann führen wir die Analyse durch — Audit Ihrer Technologie, Ihrer Daten, Ihrer UX und Ihrer Wettbewerbspositionierung. Das Ergebnis ist ein strukturierter Satz priorisierter Empfehlungen mit klarer Begründung: Quick Wins für sofortige Maßnahmen und strategische Investitionen mit langfristiger Wirkung. --- # Digital Design URL: https://www.reflect-media.com/de/services/digitales-design Locale: de Kind: service > Nutzerzentriertes UI/UX-Design für Web und Mobile — intuitive Interfaces, die Nutzer begeistern, konvertieren und an jedem digitalen Touchpoint überzeugen. ## Was wir gestalten Großartige digitale Produkte werden erlebt, nicht nur gesehen. Wir gestalten Interfaces, die sich vom ersten Moment an intuitiv anfühlen — wo der nächste richtige Schritt immer offensichtlich ist, Reibung minimal ist und das Erlebnis die Qualität Ihrer Marke widerspiegelt. ## Unser Prozess Wir beginnen immer mit dem Verstehen: Wer sind Ihre Nutzer? Was versuchen sie zu erreichen? Wo scheitern sie heute? Wir führen Nutzerforschung durch, kartieren User-Flows und definieren die Informationsarchitektur — bevor ein einziger Screen gestaltet wird. Darauf aufbauend entwickeln wir Wireframes und Prototypen, testen und iterieren, bis wir überzeugt sind, dass das Design die richtigen Probleme löst. --- # Print Design URL: https://www.reflect-media.com/de/services/druckdesign Locale: de Kind: service > Professionelle Printmaterialien — Broschüren, Verpackungen, Editorialdesign, Geschäftsausstattung, Beschilderung und Messematerialien — gestaltet für. ## Was wir gestalten Print ist nach wie vor das Medium, in dem Markenqualität am stärksten körperlich erfahrbar wird. Eine schön produzierte Broschüre, eine präzise geprägte Visitenkarte oder eine perfekt ausgeführte Verpackung kommuniziert etwas, das eine Website nicht kann. Wir gestalten Printmaterialien, die nicht nur visuell stark sind — sie sind produktionsreif. Jede Datei, die wir liefern, ist mit den korrekten Spezifikationen für den vorgesehenen Druckprozess vorbereitet. ## Was wir liefern Unser Print-Design-Umfang umfasst Geschäftsausstattung (Briefpapier, Umschläge, Visitenkarten), Broschüren und Kataloge, Verpackungsdesign, Editorialmaterialien, Beschilderungssysteme und Messeauftritte. --- # Brand Design URL: https://www.reflect-media.com/de/services/markendesign Locale: de Kind: service > Umfassende Markenidentitäts-Services — Logo-Entwicklung, Corporate-Design-Systeme, Farbpaletten, Typografie und Markenhandbücher für konsistente. ## Was wir tun Brand Design ist mehr als ein Logo. Es ist die vollständige visuelle Sprache, mit der Ihr Unternehmen kommuniziert, wer Sie sind, wofür Sie stehen und warum Ihre Kunden Ihnen vertrauen sollten. Bei reflect.media betrachten wir Branding als Systemaufbau. Jedes Element, das wir entwickeln, ist darauf ausgelegt, als Ganzes zu funktionieren — und über jedes Medium zu skalieren, das Sie jemals benötigen werden. ## Unser Prozess Wir beginnen mit einem strukturierten Brand-Discovery-Prozess, bevor irgendwelche Designarbeiten beginnen. Die strategische Tiefe skaliert mit dem Paket — vom fokussierten Briefing bei Brand Core bis zur halbtägigen Positionierungs-Session bei Brand System. Wir möchten Ihr Unternehmen, Ihre Wettbewerber, Ihre Zielgruppe und Ihre Ambitionen tiefgehend verstehen. Erst dann beginnen wir mit dem Design. Von dort aus entwickeln wir das Logo und die visuelle Identität in enger Zusammenarbeit — iterierend, bis wir etwas haben, das unverwechselbar Ihres ist. Anschließend bauen wir das vollständige Design-System auf: Farbpaletten, Typografie, Präsentationsvorlagen, Social-Media-Kits und den vollständigen Satz an Marken-Assets. Abschließend dokumentieren wir alles in umfassenden Markenrichtlinien — damit Ihr Team, Ihre Agenturen und Ihre Lieferanten Ihre Identität konsistent anwenden können, ohne uns jedes Mal anrufen zu müssen. --- # Website-Entwicklung URL: https://www.reflect-media.com/de/services/webentwicklung Locale: de Kind: service > Skalierbare, hochperformante Websites mit modernen Frameworks — Nuxt.js, Vue.js, Typo3, Drupal und WordPress — maßgeschneidert auf Ihre Geschäftsziele. ## Was wir bauen Websites, die Ihrem Unternehmen dienen — nicht umgekehrt. Wir bauen mit der Technologie, die zu Ihren Anforderungen passt, nicht mit der, die für uns bequem ist. **WordPress & Elementor** — für Marketing-Websites, Landingpages und E-Commerce, bei denen Ihr Team Inhalte visuell bearbeiten muss. Das weltweit beliebteste CMS, und wir kennen es in- und auswendig. **Vue.js / Nuxt** — für hochperformante, komponentenbasierte Websites, bei denen Geschwindigkeit, SEO und Entwicklerfreundlichkeit zählen. Unsere eigene Website läuft auf Nuxt. **TYPO3** — für Enterprise-Portale, mehrsprachige Plattformen und komplexe redaktionelle Workflows. Der Standard für den deutschen Mittelstand und öffentlichen Sektor. Sie nutzen bereits eines dieser Systeme? Wir übernehmen, optimieren und erweitern bestehende WordPress-, TYPO3- und Vue/Nuxt-Projekte. ## Unser Ansatz Ein Website-Projekt bei reflect.media beginnt mit einer gründlichen Discovery-Phase. Wir möchten Ihr Geschäftsmodell, Ihre Zielgruppe, Ihre Content-Strategie und Ihre langfristigen Ambitionen verstehen. Erst dann definieren wir den technischen Ansatz. Wir bauen für Performance, Barrierefreiheit und Wartbarkeit — jede Website, die wir liefern, ist für jahrelangen Betrieb ausgelegt.