Carola Schulte, App-Entwicklerin

App-Design-Kosten: Was kostet gutes UX/UI Design?

“Design ist doch nur Farben und Schriften?” Nein. Gutes App-Design entscheidet über Erfolg oder Misserfolg – und kostet zwischen 3.000-20.000 €.

Als Software-Architektin zeige ich Ihnen die ehrliche Wahrheit über App-Design-Kosten: Was kosten Human Interface Guidelines vs. Material Design? Wann reicht Standard-Design (3-8k), wann brauchen Sie Premium (8-20k)?

🔔 WICHTIG: Alle Preise verstehen sich netto (zzgl. 19% USt.). DE-Sätze; Offshore/NE-EU abweichend.

Die Wahrheit über App-Design-Kosten

Design ist nicht “hübsch machen” - Design ist Usability.

✅ Standard-Design: 3.000-8.000 € (Material Design / HIG-konform)
✅ Premium-Design: 8.000-20.000 € (Custom-Design, Animationen, Design-System)
✅ Enterprise-Design: 20.000-50.000 € (Brand Guidelines, Accessibility, Design-Ops)
❌ Billiges Design: 500-2.000 € (Fiverr/Upwork) → Wirkt unprofessionell, User deinstallieren

Fazit: Design ist 15-18% des Gesamt-Budgets (in unseren Projekten meist ~16%) – aber entscheidet über 80% des ersten Eindrucks.

⚠️ Vorsicht Billig-Design-Falle

“Ich bekomme Design auf Fiverr für 500 €” – Ja. Aber:

Kriterium	Billig-Design (500-2k)	Professionelles Design (3-20k)
Erfahrung	Junior-Designer (0-2 Jahre)	Senior (5+ Jahre)
Research	❌ Keine Zielgruppen-Analyse	✅ Competitor-Research, User-Personas
Wireframes	❌ Direkt zu Mockups (Fehler teuer)	✅ Wireframes → klären UX vor Design
Revisions	1-2 Runden (dann extra Kosten)	2-4 Runden inkludiert
Design-System	❌ Keine Dokumentation	✅ Component-Library + Tokens
Handoff	❌ PNGs per E-Mail	✅ Figma mit Inspect-Mode
Accessibility	❌ Keine WCAG-Checks	✅ WCAG AA-konform (EU-Pflicht 2025)

Real Case: Startup zahlte 1.200 € auf Fiverr → Entwickler brauchte 3× länger (keine Design-Tokens, falsche Abstände) → +10k € Entwicklungskosten. Billig-Design = teuer in Entwicklung.

Empfehlung: Bei Budget <20k → Standard-Design (3-8k). Aber NICHT billiger – sonst zahlen Sie doppelt.

Was ist der Unterschied: Standard vs. Premium Design?

Standard-Design (3.000-8.000 €)

Was Sie bekommen:

✅ Material Design (Android) oder Human Interface Guidelines (iOS) befolgt
✅ 3-5 Screens designed (Home, List, Detail, Profil, Settings)
✅ Standard-Komponenten (Material Buttons, iOS Navigation Bar)
✅ 1 Farbschema (Primary + Accent)
✅ Responsives Design (Phone + Tablet)
✅ Wireframes + Mockups (Figma/Sketch)
✅ 2-3 Feedback-Runden inkludiert (Anpassungen nach Review)
✅ Handoff: Figma-File (Inspect-Mode), Export-Assets (SVG/PNG/WebP), Style-Guide

Was fehlt:

❌ Keine Custom-Animationen
❌ Kein Design-System (Dokumentation fehlt)
❌ Keine Brand-spezifischen Illustrationen
❌ Keine Accessibility-Audits (WCAG)

Dark Mode: +20-25% Kosten (wenn von Anfang an); nachträglich +40-60%

Use Case: Standard-Apps (CRM, Ticketing, Inventur) ohne Brand-Fokus

Premium-Design (8.000-20.000 €)

Was Sie bekommen:

✅ Custom-Design (nicht nur Material/HIG-Komponenten)
✅ 10-15 Screens designed + Edge-Cases
✅ Custom-Komponenten (eigene Buttons, Cards, Icons)
✅ Design-System (Component Library + Dokumentation)
✅ Animationen & Micro-Interactions (Button-States, Transitions)
✅ Brand-Integration (Logo, Farben, Typografie)
✅ Prototyping (Clickable Prototype in Figma)
✅ Accessibility-Audit (WCAG AA-konform)
✅ Dark Mode (falls nötig)
✅ 3-4 Feedback-Runden inkludiert (inkl. zusätzliche Konzept-Iterationen)
✅ Handoff: Alles aus Standard + Component-Library + Design-Tokens (JSON/SCSS)

Was fehlt:

❌ Keine Motion-Design (aufwändige Animationen)
❌ Keine 3D-Grafiken / Illustrationen

Dark Mode: +20-25% Kosten (wenn von Anfang an); nachträglich +40-60%

Use Case: Consumer-Apps (E-Commerce, Social Media), Brand-fokussierte Apps

Enterprise-Design (20.000-50.000 €)

Was Sie bekommen:

✅ Alles aus Premium
✅ 20-30 Screens + Edge-Cases + Error-States
✅ Design-Ops (Versionierung, Design-Tokens, Handoff-Automation)
✅ Accessibility WCAG AAA (höchster Standard)
✅ Motion-Design (aufwändige Animationen, Lottie-Files)
✅ Illustrationen/3D-Grafiken (Custom)
✅ Multi-Brand-Support (White-Label-Apps)
✅ User-Research (5-10 User-Interviews, Usability-Tests)
✅ 4-6 Feedback-Runden inkludiert (inkl. User-Testing-Feedback einarbeiten)
✅ Handoff: Alles aus Premium + Design-Ops/Handoff-Automatisierung (Figma-Plugins, Versionierung)

Dark Mode: +20-25% Kosten (wenn von Anfang an); nachträglich +40-60%

Use Case: Enterprise-Apps (Banking, Health), große Consumer-Apps (Airbnb-Level)

Der Design-Prozess: Von Idee zu Mockups

Phase 1: Discovery & Research (1-3 Tage)

Was passiert:

Zielgruppen-Analyse
Competitor-Research (5-10 ähnliche Apps analysieren)
User-Journey definieren
Feature-Priorisierung

Deliverables:

User-Personas (1-3 Personas)
User-Journey-Map
Feature-Liste (priorisiert)

Kosten: 500-1.500 €

Tipp: Bei knappem Budget → Workshop mit Kunde (1 Tag, 800 €) statt langem Research.

Phase 2: Wireframes (Low-Fidelity) (2-4 Tage)

Was passiert:

Grobe Skizzen der Screens
Navigation definieren
Content-Hierarchie festlegen
Keine Farben, keine Typografie (nur Grayscale)

Deliverables:

5-10 Wireframe-Screens (Grayscale)
Navigation-Flow

Kosten: 800-2.000 €

Tools: Figma, Balsamiq, Pen & Paper

Warum wichtig: Klären, WAS die App macht, bevor WIE sie aussieht.

Phase 3: Mockups (High-Fidelity) (4-8 Tage)

Was passiert:

Farben definieren (Primary, Accent, Background)
Typografie wählen (iOS: SF Pro, Android: Roboto, Custom)
Icons erstellen/kaufen
Screens detailliert designen

Deliverables:

5-15 Mockup-Screens (Pixel-perfekt)
Style-Guide (Farben, Fonts, Icon-Set)

Kosten: 2.000-8.000 € (je nach Komplexität)

Tools: Figma (dominant), Sketch (macOS only), Adobe XD (veraltet)

Phase 4: Prototyping (Optional) (1-3 Tage)

Was passiert:

Mockups verlinken (clickable Prototype)
Transitions definieren
User-Testing (5-10 User)

Deliverables:

Clickable Prototype (Figma/InVision)
User-Testing-Report

Kosten: 800-3.000 €

Wann sinnvoll: Bei komplexen Apps (10+ Screens) oder neuen Konzepten.

Phase 5: Design-System (Optional) (3-5 Tage)

Was passiert:

Component-Library erstellen (Buttons, Cards, Inputs)
Design-Tokens definieren (Farben, Spacing, Typography)
Dokumentation schreiben (für Entwickler)

Deliverables:

Figma Component Library
Design-Tokens (JSON/SCSS)
Handoff-Dokumentation

Kosten: 2.000-5.000 €

Wann sinnvoll: Bei Apps mit 15+ Screens oder mehreren Entwicklern.

Style-Guide vs. Design-System: Was ist der Unterschied?

Beide Begriffe werden oft verwechselt – hier die Klarstellung:

	Style-Guide	Design-System
Was ist es?	Dokumentation (PDF/Figma-Page)	Lebende Component-Library
Inhalt	Farben, Fonts, Logo-Usage, Do’s/Don’ts	Components (Buttons, Cards) + Code
Für wen?	Designer, Marketing	Designer + Entwickler
Interaktiv?	❌ Nein (statisches Dokument)	✅ Ja (Figma Components + Code)
Beispiel	”Primary Color: #1A355E, Font: Roboto”	Button-Component mit States (Default, Hover, Pressed)
Kosten	500-1.500 € (1-2 Tage)	2.000-5.000 € (3-5 Tage)

Empfehlung:

<10 Screens: Style-Guide reicht (500-1k €)
10-20 Screens: Style-Guide + Component-Library (2-3k €)
>20 Screens: Volles Design-System (3-5k €)

Design-Sprints: 5 Tage von Idee zu Prototype

Design-Sprint = strukturierter 5-Tage-Prozess (Google Ventures) von Idee zu getestetem Prototype.

Was ist ein Design-Sprint?

Erfunden von Google Ventures (Jake Knapp, “Sprint” Buch) – heute Standard bei Startups/Agenturen.

Das Problem: Monate designen → bauen → User hassen es → von vorne.

Die Lösung: 5 Tage Sprint → Prototype → User-Testing → wissen, was funktioniert.

Der 5-Tage-Sprint

Tag	Phase	Was passiert	Output
Montag	Map & Define	Problem definieren, Ziele setzen	Problem-Statement, User-Journey
Dienstag	Sketch	Jeder skizziert Lösungen (individuell)	20+ Lösungs-Skizzen
Mittwoch	Decide	Team wählt beste Lösung aus	1 finale Lösung + Storyboard
Donnerstag	Prototype	Clickable Prototype in Figma bauen	Figma-Prototype (10-15 Screens)
Freitag	Test	5 User-Interviews mit Prototype	User-Testing-Report + Learnings

Design-Sprint-Kosten

Team: 1 Designer + 1 Facilitator + Stakeholder (Product Owner, Entwickler)

Kosten:

Designer (5 Tage): 3.000-4.000 € (600-800 €/Tag)
Facilitator (5 Tage): 2.500-3.500 € (Sprint-Expertise)
User-Testing (5 User): 1.000-1.500 € (200-300 €/User Incentive + Recruiting)

Gesamt: 5.000-8.000 € (5 Tage)

Wann lohnt sich ein Design-Sprint?

✅ Ja, wenn:

Neue App-Idee (noch nicht gebaut)
Mehrere mögliche Lösungen (Unsicherheit)
Budget >50k (Sprint verhindert teure Fehler)
Team verfügbar (5 Tage Vollzeit)

❌ Nein, wenn:

App-Konzept klar (kein Unsicherheit)
Budget <30k (zu teuer relativ)
Keine User-Testing möglich (Nischen-Zielgruppe)

Real Case: E-Commerce-App Design-Sprint (5k €) → verhinderte 20k € Redesign, weil User Checkout-Flow nicht verstanden.

Empfehlung: Bei neuen Consumer-Apps (>50k Budget) immer Design-Sprint einplanen (spart Redesign-Kosten).

Human Interface Guidelines vs. Material Design

DIE zentrale Design-Entscheidung: Apple HIG oder Google Material?

Human Interface Guidelines (iOS)

Was ist HIG?

Apple’s offizielle Design-Guidelines für iOS-Apps.

Key-Prinzipien:

Clarity: Inhalte im Fokus, minimale UI
Deference: UI tritt zurück, Content dominiert
Depth: Layering (z.B. Modal over Content)

Typische HIG-Elemente:

Navigation Bar (oben, 44px hoch)
Tab Bar (unten, 5 Tabs max)
SF Pro (System-Font)
SF Symbols (iOS-Icon-Set)
Corner-Radius: 8-12px (iOS-typisch)

Vorteile:

✅ Sieht “nativ” auf iOS aus
✅ User kennen Patterns (weniger Erklärungsbedarf)
✅ Schnellere Entwicklung (iOS-Komponenten vorhanden)

Nachteile:

❌ Sieht auf Android “fremd” aus
❌ Weniger Flexibilität (Apple-Vorgaben strikt)

Kosten: 3.000-6.000 € (Standard HIG-Design)

Empfehlung: iOS-only Apps oder wenn iOS >70% User.

Material Design (Android)

Was ist Material Design?

Google’s Design-System für Android (aktuell: Material Design 3 / Material You).

Key-Prinzipien:

Material as Metaphor: UI-Elemente wie “Papier”-Schichten
Bold, Graphic, Intentional: Starke Farben, große Typografie
Motion provides meaning: Animationen erklären Übergänge

Typische Material-Elemente:

App Bar (oben, 56dp hoch)
Bottom Navigation (unten, 5 Items max)
Roboto (System-Font)
Material Icons (Google-Icon-Set)
Floating Action Button (FAB) (runder Button, primary Action)
Corner-Radius: 4-8px (Material-typisch)

Material You (seit Android 12):

Dynamic Colors (System extrahiert Farben aus Wallpaper)
Adaptive Icons
Over-Scroll-Effects

Vorteile:

✅ Sieht “nativ” auf Android aus
✅ Mehr Flexibilität als HIG (Google weniger strikt)
✅ Material You = moderne, adaptive UI

Nachteile:

❌ Sieht auf iOS “fremd” aus (FAB gibt’s nicht auf iOS)
❌ Komplexer als HIG (mehr Variations-Möglichkeiten)

Kosten: 3.000-6.000 € (Standard Material-Design)

Empfehlung: Android-only Apps oder wenn Android >70% User.

Cross-Platform: HIG + Material kombinieren?

Problem: Flutter/React Native-Apps laufen auf iOS + Android → Welches Design?

Option 1: Material auf beiden Plattformen

Vorteil: 1× Design, günstiger (3-6k)
Nachteil: Sieht auf iOS “nicht nativ” aus (FAB, Material-Icons)

Option 2: HIG auf beiden Plattformen

Vorteil: 1× Design, günstiger (3-6k)
Nachteil: Sieht auf Android “nicht nativ” aus (iOS Tab Bar unten)

Option 3: Adaptive Design (2× Design)

Prinzip: iOS-Screens mit HIG, Android-Screens mit Material
Vorteil: Sieht auf beiden Plattformen nativ aus
Nachteil: 2× Design-Aufwand (+40-60% Kosten)

Kosten:

Option 1/2: 3.000-6.000 € (1× Design)
Option 3: 5.000-10.000 € (2× Design, adaptive)

Empfehlung: Option 1/2 (Material für alle) bei Budget <50k, Option 3 (adaptive) bei Consumer-Apps >50k.

Flutter-Tipp: Flutter hat Cupertino (iOS-Style) + Material Widgets → Adaptive Design möglich ohne 2× Code.

🎯 Klare Leitplanke für Cross-Platform-Design:

Budget <50k: Ein Stil (meist Material) für beide Plattformen → günstiger, schneller Launch
B2C/Brand-Apps ODER Budget >50k: Adaptives Design (HIG auf iOS, Material auf Android, +40-60%) → beste UX auf beiden Plattformen, höhere Conversion

Design-Kosten nach Plattform: Übersichtstabelle

Alle Zahlen bei 10 Screens, Standard-Komplexität:

Strategie	Plattformen	Design-Aufwand	Kosten	Vorteil	Nachteil
iOS-only (HIG)	iOS	5-8 Tage	3.000-6.000 €	Nativ auf iOS	Kein Android
Android-only (Material)	Android	5-8 Tage	3.000-6.000 €	Nativ auf Android	Kein iOS
Material für beide	iOS + Android	5-8 Tage	3.000-6.000 €	Günstiger (1× Design)	Sieht auf iOS “fremd” aus
HIG für beide	iOS + Android	5-8 Tage	3.000-6.000 €	Günstiger (1× Design)	Sieht auf Android “fremd” aus
Adaptive (HIG + Material)	iOS + Android	8-12 Tage	5.000-10.000 €	Nativ auf beiden	Teurer (+40-60%)

Empfehlung:

Budget <40k: Material für beide (günstiger, Android hat >70% Marktanteil weltweit)
Budget 40-80k: HIG für beide (wenn iOS-Fokus in DE/US)
Budget >80k: Adaptive Design (beste UX auf beiden Plattformen)

Was kostet gutes Design wirklich?

Kosten-Breakdown nach App-Typ

App-Typ	Screens	Design-Aufwand	Kosten	Was enthalten
Simple MVP	3-5	3-5 Tage	3.000-5.000 €	Wireframes + Mockups, Standard HIG/Material
Standard Business-App	5-10	5-8 Tage	5.000-10.000 €	+ Prototyping, Custom-Icons
Premium Consumer-App	10-15	10-15 Tage	10.000-18.000 €	+ Design-System, Animationen, Accessibility
Enterprise/Complex	15-30	15-25 Tage	18.000-35.000 €	+ User-Research, Motion-Design, Multi-Brand

Design vs. Entwicklung: Verhältnis

Gesamt-Budget	Design-Anteil	Entwicklung	Verhältnis
20.000-40.000 €	3.000-6.000 €	17.000-34.000 €	15-18%
40.000-80.000 €	6.000-12.000 €	34.000-68.000 €	15-17%
80.000-150.000 €	12.000-22.000 €	68.000-128.000 €	15-16%

Faustformel: Design = 15-18% des Gesamt-Budgets (in unseren Projekten meist ~16%).

Real Cases: Design-Kosten in der Praxis

Case: CRM-App für Vertrieb (Simple)

Anforderung:

5 Screens (Dashboard, Kontakte, Details, Kalender, Profil)
Material Design (Android-Fokus)
Standard-Komponenten (Material Buttons, Cards)

Design-Prozess:

Discovery: 1 Tag (Workshop mit Kunde)
Wireframes: 2 Tage
Mockups: 4 Tage (Material Design)

Kosten Design: 4.500 € (bei 600 €/Tag Designer)

Gesamt-Budget: 28.000 €

PWA-Entwicklung: 22.000 € (siehe PWA vs Native)
Design: 4.500 € (16%)
Testing & Launch: 1.500 €

Case: E-Commerce-App (Premium)

Anforderung:

12 Screens (Home, Kategorie, Produkt-Detail, Warenkorb, Checkout, Profil, etc.)
Custom-Design (Brand-Integration)
Animationen (Produkt-Zoom, Add-to-Cart-Animation)
Dark Mode

Design-Prozess:

Discovery + Research: 2 Tage (Competitor-Analyse)
Wireframes: 3 Tage
Mockups: 8 Tage (Custom-Design)
Prototyping: 2 Tage (Clickable Prototype)
Design-System: 3 Tage (Component-Library)

Kosten Design: 14.000 € (bei 700 €/Tag Senior-Designer)

Gesamt-Budget: 85.000 € (davon Design 16%)

Case: Banking-App (Enterprise)

Anforderung:

25 Screens (inkl. Onboarding, TAN-Verfahren, Transaktionen, Settings)
WCAG AAA-konform (Accessibility)
Custom-Illustrationen (Onboarding)
Motion-Design (Lottie-Animationen)
User-Research (10 Interviews, 2 Usability-Tests)

Design-Prozess:

Discovery + Research: 5 Tage (User-Interviews, Usability-Tests)
Wireframes: 4 Tage
Mockups: 12 Tage (Custom-Design)
Prototyping: 3 Tage
Design-System: 5 Tage (Design-Tokens, Handoff-Automation)
Motion-Design: 3 Tage (Lottie-Animationen)

Kosten Design: 28.000 € (bei 800 €/Tag Senior-Designer + Accessibility-Expert)

Gesamt-Budget: 180.000 € (davon Design 16%)

Design-Tools: Figma dominiert

Die Tool-Landschaft hat sich geklärt: Figma ist der Gewinner.

Tool-Vergleich

Tool	Market-Share	Preis	Plattform	Empfehlung
Figma	~70%	Kostenlos/12 USD/User/Monat	Browser (Mac/Win/Linux)	✅ Standard-Tool
Sketch	~15%	99 USD/Jahr	macOS only	⚠️ Nur wenn Mac-only Team
Adobe XD	~10%	12 USD/Monat	Mac/Win	❌ Veraltet (Adobe fokussiert auf Figma)
Penpot	~5%	Kostenlos (Open Source)	Browser	⚠️ Noch nicht ausgereift

Warum Figma?

✅ Browser-basiert (keine Installation, läuft überall)
✅ Real-time Collaboration (mehrere Designer gleichzeitig)
✅ Developer-Handoff (Inspect-Mode für Entwickler)
✅ Component-System (Design-System-Support)
✅ Community (tausende Templates, Plugins)

Kosten:

Free: 3 Files, unbegrenzte Viewer (Viewer = kostenlos, auch im Paid-Plan!)
Professional: 12 USD/Editor/Monat (unbegrenzte Files, Versionierung)
Organization: 45 USD/Editor/Monat (Design-System-Features, Libraries)

Wichtig: Viewer (Entwickler, Stakeholder) sind immer kostenlos – nur Editoren (Designer) zahlen.

Empfehlung: Figma Professional (12 USD/Monat) für professionelle Projekte.

Wann lohnt sich Premium-Design?

Standard-Design reicht wenn:

✅ B2B-App (interne Tools, CRM, Ticketing)
✅ Budget <50k
✅ Funktionalität wichtiger als Ästhetik
✅ Zielgruppe: Business-User (nicht Consumer)
✅ Keine Brand-Fokussierung (App ist Tool, keine Brand-Experience)

Beispiele: Inventur-App, Wächterkontrolle, CRM, Projektmanagement

Premium-Design lohnt sich wenn:

✅ Consumer-App (Endkunden-facing)
✅ Budget >50k
✅ Brand-Fokussierung (App ist Teil der Brand-Experience)
✅ Zielgruppe: Consumer (B2C)
✅ Wettbewerb: Viele ähnliche Apps (Design differenziert)
✅ Monetarisierung: In-App-Käufe, Subscriptions (Design erhöht Conversion)

Beispiele: E-Commerce, Social Media, Dating-Apps, Fitness-Apps

Enterprise-Design lohnt sich wenn:

✅ Budget >150k
✅ Accessibility Pflicht (WCAG AA/AAA)
✅ Multi-Brand (White-Label-Apps)
✅ Regulated Industry (Banking, Health, Insurance)
✅ Große User-Base (>100k User)

Beispiele: Banking, Health, Insurance, Enterprise-SaaS

Responsive Design: Phone, Tablet, Desktop

Problem: Apps laufen oft auch auf Tablets (iPad, Android-Tablets) – kostet Extrazeit.**

Responsive Design-Kosten

Plattformen	Design-Aufwand	Kosten	Was passiert
Phone-only	Basis (5-10 Screens)	3.000-8.000 €	Standard-Fall
+ Tablet	+30-40%	+1.500-3.000 €	Layouts anpassen (Split-Screen, Master-Detail)
+ Desktop-Web	+40-50%	+2.000-4.000 €	Navigation neu (Sidebar statt Tab Bar), mehr Content

Tipp: Bei B2B-Apps (CRM, Inventur) oft Tablet-Support nötig → +30% einplanen.

Empfehlung: Erst Phone-only designen → wenn User Tablets nutzen, später Tablet-Version.

Icon-Design: Standard vs. Custom

Icons sind überall – aber Custom-Icons kosten.

Icon-Design-Kosten

Icon-Typ	Anzahl	Kosten pro Icon	Gesamt	Use-Case
Standard-Icons (Material/SF Symbols)	unbegrenzt	0 €	0 €	Standard-Apps (CRM, Ticketing)
Angepasste Standard-Icons	10-20	20-50 €	300-1.000 €	Brand-Farbe, leichte Anpassung
Custom Simple Icons	10-20	50-100 €	500-2.000 €	Einfache Custom-Icons (Line-Style)
Custom Complex Icons	10-20	100-200 €	1.000-4.000 €	Detaillierte Icons (Illustrativ)

Standard-Icon-Sets:

Material Icons (Google): 2.000+ Icons, kostenlos
SF Symbols (Apple): 5.000+ Icons, kostenlos (nur iOS)
Phosphor Icons (Open Source): 1.200+ Icons, kostenlos

Wann Custom-Icons?

✅ Brand-fokussierte Apps (E-Commerce, Social Media)
✅ Unique Features (neue UI-Patterns)
✅ Budget >50k

Wann Standard-Icons?

✅ B2B-Apps (Funktionalität > Ästhetik)
✅ Budget <50k
✅ Schneller Launch wichtig

Illustration-Kosten: Custom-Grafiken

Illustrationen machen Apps unique – aber kosten Extrazeit.

Illustration-Kosten

Illustration-Typ	Kosten pro Illustration	Use-Case
Simple Spot-Illustration	200-500 €	Empty-States (“Keine Daten”), Error-Screens
Medium Illustration	500-1.500 €	Onboarding-Screens (3-4 Illustrationen)
Complex Illustration	1.500-4.000 €	Hero-Grafiken, Character-Design
Illustration-Set (10+)	3.000-10.000 €	Vollständiges Illustration-System

Alternative: Stock-Illustrationen

unDraw (kostenlos): 1.000+ Illustrationen, anpassbare Farben
Freepik (ab 10 €/Monat): Millionen Grafiken
Storyset (kostenlos): Animierte Illustrationen

Empfehlung:

Budget <30k: Stock-Illustrationen (unDraw) nutzen
Budget 30-50k: 3-5 Custom-Spot-Illustrationen (+1-2k €)
Budget >50k: Full Custom-Illustration-Set (+5-10k €)

Top Fehler bei App-Design

Fehler: Design ohne User-Research

Problem: Designer designt nach eigenem Geschmack, nicht nach User-Bedürfnissen.

Lösung:

Minimum: 3-5 User-Interviews (je 30 Min.) = 1 Tag = 600 €
Besser: Usability-Test (5-10 User) mit Prototype = 2 Tage = 1.500 €

Real Case: E-Commerce-App hatte “hamburger Menu” (☰) → User fanden Warenkorb nicht → Redesign zu Tab Bar → Conversion +25%.

Fehler: Zu viele Custom-Komponenten

Problem: Designer erfindet eigene UI-Patterns → User verwirrt, Entwicklung teuer.

Lösung:

80/20-Regel: 80% Standard-Komponenten (Material/HIG), 20% Custom
Custom nur, wenn Mehrwert (z.B. unique Produkt-Zoom-Funktion)

Kosten:

Standard-Button: 10 Min Design, 30 Min Dev
Custom-Button: 2h Design, 4-6h Dev

Fazit: Custom lohnt sich nur bei Key-Features, nicht überall.

Fehler: Design-System fehlt

Problem: 10+ Screens designt, aber keine Dokumentation → Entwickler raten, wie Buttons aussehen sollen.

Lösung:

Ab 10 Screens: Design-System erstellen (2-3 Tage)
Component-Library (Figma) + Design-Tokens (JSON/SCSS)

Kosten: +2.000-4.000 € (einmalig), aber spart 20-30% Entwicklungszeit.

Fehler: Keine Accessibility

Problem: App ist für Sehbehinderte/Blinde unbenutzbar → Potential-User verloren + ggf. rechtliche Probleme (EU-Richtlinie).

Lösung:

Minimum: Kontrast-Check (WCAG AA) = 1h Design-Review = 100 €
Besser: Accessibility-Audit (WCAG AA) = 1-2 Tage = 1.000-2.000 €

WCAG AA-Basics:

Kontrast >4.5:1 (Text zu Background)
Touch-Targets >44px (iOS) / >48dp (Android)
Screen-Reader-Support (Labels für Icons)

Tipp: Figma-Plugin “Stark” prüft Kontrast automatisch.

Fehler: Design für Desktop, nicht Mobile

Problem: Designer designt am 27” Monitor → App sieht auf iPhone SE (4.7”) zu vollgepackt aus.

Lösung:

Mobile-First Design: Erst für iPhone SE (320px breit) designen
Dann skalieren: iPad (768px), Desktop (1024px+)

Testing-Regel: Design auf echtem iPhone SE testen (nicht nur Simulator).

Accessibility: WCAG AA vs. AAA

Accessibility ist kein Nice-to-Have - in der EU ab Juni 2025 Pflicht.

European Accessibility Act (EAA): Ab 28. Juni 2025 faktisch verpflichtend für viele B2C-Angebote:

✅ E-Commerce-Apps (Online-Shops, Marktplätze)
✅ Banking/Finanz-Apps (alle Banken, Payment-Apps)
✅ Apps mit >10M € Jahresumsatz (große Unternehmen)
✅ Öffentliche Dienste (Verwaltung, öffentliche Unternehmen)

Ausnahmen: Kleinstunternehmen (<10 MA, <2M € Umsatz), interne B2B-Tools.

⚠️ Risiko bei Wachstum: Auch wenn Sie heute unter die Ausnahme fallen – bei Wachstum über 10 MA oder 2M € Umsatz greift die Pflicht sofort. Besser von Anfang an WCAG AA umsetzen.

WCAG-Levels

Level	Anforderungen	Kosten	Wann Pflicht?
WCAG A	Basis (Tastaturbedienung, Alt-Texte)	+500-1.000 €	Minimum für alle Apps
WCAG AA	Standard (Kontrast 4.5:1, Touch-Targets)	+1.000-3.000 €	EU-Pflicht ab 28.06.2025 (EAA)
WCAG AAA	Maximum (Kontrast 7:1, erweiterte Features)	+3.000-8.000 €	Nur für kritische Apps (Health, Banking)

WCAG AA-Checkliste (Minimum)

Kontrast: Text >4.5:1, UI-Komponenten >3:1
Touch-Targets: Min. 44px (iOS) / 48dp (Android)
Alt-Texte: Alle Icons/Bilder mit Screen-Reader-Label
Keyboard-Navigation: Alle Funktionen per Keyboard bedienbar
Focus-Indicator: Sichtbarer Fokus-Ring (Tastaturbedienung)
Heading-Hierarchie: H1 → H2 → H3 (nicht H1 → H3)

Kosten: 1-2 Tage Accessibility-Audit = 1.000-2.000 €

Empfehlung: WCAG AA als Standard (ab 2025 Pflicht in EU), AAA nur bei Health/Banking.

Dark Mode: Lohnt sich der Aufwand?

User erwarten Dark Mode - aber kostet Extrazeit.

Dark Mode-Kosten

Die ehrlichen Zahlen:

Strategie	Mehrkosten	Beispiel bei 10k Design	Beispiel bei 20k Design
Von Anfang an	+20-25% der Design-Kosten	+2.000-2.500 €	+4.000-5.000 €
Nachträglich	+40-60% der Design-Kosten	+4.000-6.000 €	+8.000-12.000 €

Warum nachträglich teurer?

❌ Alle Screens müssen angepasst werden (nicht nur designed)
❌ Color-System muss umgebaut werden (alle Tokens neu)
❌ Testing-Aufwand höher (Light + Dark Mode prüfen)
❌ Entwicklung muss refactoren (ThemeData nachträglich)

Empfehlung: Dark Mode von Anfang an einplanen (spart 30-50% Kosten).

Dark Mode Design-Regeln

Nicht einfach Farben invertieren (sieht schrecklich aus)
Grau statt Schwarz: #121212 (nicht #000000) als Background
Kontrast reduzieren: Weißer Text auf Schwarz = zu stark (60% Opacity besser)
Farben aufhellen: Primary/Accent-Farben müssen heller sein (Kontrast-Check!)

Kosten: +1.500-3.000 € wenn von Anfang an eingeplant.

Lottie-Animationen: Motion-Design für Apps

Lottie = JSON-basierte Animationen aus After Effects.

Was ist Lottie?

Lottie ist eine Library (Airbnb) die After Effects-Animationen als JSON exportiert und in Apps abspielt.

Vorteile vs. GIF/Video:

✅ Dateigröße: 50 KB (Lottie) vs. 2 MB (GIF) – 40× kleiner!
✅ Skalierbar: Vektor-basiert (kein Pixelbrei bei Zoom)
✅ Interaktiv: Animationen können gesteuert werden (Play/Pause/Speed)
✅ Farben änderbar: JSON = Text → Farben per Code anpassbar

Use-Cases:

Onboarding-Animationen (Swipe-Tutorials)
Loading-Animationen (statt Spinner)
Success/Error-States (Checkmark ✓, X ✗)
Empty-States (“Keine Daten”-Screens)

Lottie-Kosten

Animation-Komplexität	After Effects-Aufwand	Kosten	Beispiel
Simple	2-4h	300-600 €	Loading-Spinner, Checkmark
Medium	1-2 Tage	800-1.500 €	Onboarding-Sequence (3 Screens)
Complex	3-5 Tage	2.000-4.000 €	Produkt-Demo-Animation, Character-Animation

Tipp: LottieFiles.com hat 100.000+ kostenlose Animationen (oft ausreichend für Standard-Apps).

Empfehlung: Für Premium-Apps (E-Commerce, Social Media) lohnen sich 3-5 Custom-Lottie-Animationen (+2-3k €).

Micro-Interactions: Das “Feeling” der App

Micro-Interactions = kleine Animationen, die Feedback geben.

Was sind Micro-Interactions?

Beispiele:

Button-Ripple (Material Design): Button “pulsiert” beim Tippen
Like-Animation (Instagram/Twitter): Heart wird rot + ploppt
Pull-to-Refresh (iOS/Android): Spinner erscheint beim Ziehen
Swipe-Feedback (Tinder): Card verschwindet mit Swipe-Effekt
Input-Focus (Forms): Border wird blau bei Fokus

Warum wichtig?

✅ Feedback: User weiß, dass Tap erkannt wurde
✅ Feeling: App fühlt sich “polished” an (nicht “billig”)
✅ Delightful: User haben Spaß (höhere Retention)

Micro-Interactions-Kosten

Umfang	Design-Aufwand	Dev-Aufwand	Kosten
Standard (Material/iOS-Standard)	0h (vorhanden)	0h (vorhanden)	0 €
Custom Simple (5-10 Interactions)	1 Tag	1-2 Tage	1.500-2.500 €
Custom Complex (20+ Interactions)	2-3 Tage	3-5 Tage	3.000-6.000 €

Tipp: Bei Budget <50k → Standard-Interactions (Material/iOS) nutzen. Bei >50k → 1-2 Tage Custom-Interactions einplanen.

Empfehlung: Für Consumer-Apps (E-Commerce, Social Media) sind Custom-Interactions Pflicht (+1.5-2k €).

Checkliste: Bevor Sie Design beauftragen

Vorbereitung

Use-Cases definiert: Was muss die App können?
Zielgruppe klar: B2B oder B2C? Age-Range?
Competitor-Research: 3-5 ähnliche Apps analysiert?
Budget definiert: <50k = Standard, >50k = Premium?
Platform: iOS-only, Android-only, oder beide?
Design-Präferenzen: Referenz-Apps gesammelt? (3-5 Apps, die Ihnen gefallen)

Briefing für Designer

Screens-Liste: Welche Screens brauchen Sie? (min. 5, max. 30)
Brand-Assets: Logo, Farben, Fonts vorhanden?
Accessibility: WCAG AA nötig?
Dark Mode: Ja oder Nein?
Animationen: Standard oder Custom?
Timeline: Wann soll Design fertig sein?

Nach Design-Delivery

Figma-File erhalten: Alle Screens + Components?
Design-System: Component-Library + Style-Guide?
Export-Assets: Icons (SVG), Bilder (PNG/WebP)?
Developer-Handoff: Figma Inspect-Mode aktiviert?
Feedback-Runden: 2-3 Revisions inkludiert?

Design-Revision-Runden: Wie viele sind inkludiert?

Die Wahrheit: Ohne klare Vereinbarung → endlose Änderungs-Schleifen.

Standard-Revisions

Design-Paket	Inkludierte Revisions	Was ist “1 Revision”?
Standard	2-3 Runden	Feedback zu allen Screens, dann Anpassungen
Premium	3-4 Runden	+ zusätzliche Konzept-Iterationen
Enterprise	4-6 Runden	+ User-Testing-Feedback einarbeiten

Was zählt als 1 Revision?

✅ Feedback zu allen Screens (z.B. “Button zu klein”, “Farbe zu hell”)
✅ Designer passt an (1-2 Tage Arbeit)
✅ Neue Version wird präsentiert

Was zählt NICHT als Revision:

❌ Kleine Typos (kostenlos gefixt)
❌ Scope-Change (“Wir brauchen doch 5 Screens mehr”) → extra Kosten
❌ Komplettes Redesign (“Doch ganz anders”) → neues Projekt

Kosten für Extra-Revisions

Wenn 2-3 Runden nicht reichen:

1 Extra-Revision: 500-1.000 € (1-2 Tage)
Major-Redesign: 30-50% der Original-Kosten

Tipp: Design-Freeze vereinbaren → ab diesem Punkt kosten Änderungen extra.

Empfehlung: 2-3 Revisions reichen bei guter Vorbereitung (Briefing, Referenzen) meist aus.

Developer-Handoff: Was bekommt der Entwickler?

Design fertig ≠ Entwickler kann loslegen. Handoff entscheidet über Entwicklungs-Tempo.

Was gehört zum Handoff?

Minimum-Handoff (Standard-Design):

✅ Figma-File mit Inspect-Mode (Entwickler kann Abstände, Farben ablesen)
✅ Export-Assets (Icons als SVG, Bilder als PNG/WebP @2x, @3x)
✅ Font-Files (falls Custom-Font)
✅ Color-Palette (Hex-Codes dokumentiert)

Premium-Handoff (Design-System):

✅ Alles aus Minimum
✅ Component-Library (Figma-Components → Flutter/React Widgets)
✅ Design-Tokens (JSON/SCSS mit Farben, Spacing, Typography)
✅ States dokumentiert (Button: Default, Hover, Pressed, Disabled)
✅ Responsive-Breakpoints (Tablet, Desktop)

Enterprise-Handoff (Design-Ops):

✅ Alles aus Premium
✅ Figma-Plugins (z.B. Anima für Code-Export)
✅ Zeplin/Abstract (Design-Versionierung)
✅ Handoff-Meeting (Designer erklärt Entwickler die Designs)

Handoff-Kosten

Handoff-Typ	Aufwand	Kosten	Inkludiert in
Minimum	2-4h	200-400 €	Standard-Design
Premium	1-2 Tage	800-1.500 €	Premium-Design
Enterprise	2-3 Tage	1.500-2.500 €	Enterprise-Design

Tipp: Designer + Entwickler sollten VOR Design-Start sprechen (Tool-Setup, Namenskonventionen).

Empfehlung: Bei Flutter/React Native → Figma Inspect reicht meist. Bei Native (iOS/Android) → Design-Tokens helfen.

FAQs: App-Design-Kosten

Kann ich Template-Designs verwenden?

Kurze Antwort: Ja, aber sieht generisch aus.

Lange Antwort:

Vorteile:

✅ Günstiger (50-500 € Template)
✅ Schneller (keine Design-Phase)

Nachteile:

❌ Sieht nicht unique aus (10.000 andere Apps nutzen gleiches Template)
❌ Nicht anpassbar (oft React Native/Flutter-spezifisch)
❌ Keine Brand-Integration

Empfehlung: Templates okay für interne Prototypen, nicht für Consumer-Apps.

Template-Quellen:

ThemeForest (50-200 €)
UI8 (100-500 €)
Figma Community (kostenlos, aber generisch)

Was kostet ein Redesign?

Kurze Antwort: 30-50% der Original-Design-Kosten.

Lange Antwort:

Redesign-Gründe:

Alte App sieht veraltet aus (iOS 7-Style)
User-Feedback: App ist “unübersichtlich”
Material Design 2 → Material Design 3 Update

Kosten:

Redesign-Umfang	Kosten	Was passiert
Visual Refresh	30-40% Original	Farben, Icons, Typografie neu
Partial Redesign	40-60% Original	5-10 Screens neu designt
Full Redesign	70-100% Original	Alle Screens neu + neue UX-Patterns

Beispiel: Original-Design 10k € → Visual Refresh 3-4k €, Full Redesign 7-10k €.

Brauche ich einen UX-Designer UND einen UI-Designer?

Kurze Antwort: Bei <50k Budget: Nein. Bei >50k: Ja.

Lange Antwort:

UX-Designer (User Experience):

Fokus: Usability, User-Flow, Wireframes
Skills: User-Research, Information Architecture
Output: Wireframes, User-Journeys, Prototypes

UI-Designer (User Interface):

Fokus: Visuelles Design, Farben, Typografie
Skills: Grafik-Design, Animation, Branding
Output: Mockups, Icons, Design-System

Fullstack-Designer (UX/UI combined):

Kann beides (gängig bei Freelancern)
Bei Standard-Apps (<50k) ausreichend

Empfehlung:

<50k Budget: Fullstack-Designer (UX/UI)
>50k Budget: UX-Designer + UI-Designer (spezialisierter)

Was ist der Unterschied: Wireframes vs. Mockups vs. Prototypes?

Kurze Antwort: Wireframes = Skizze, Mockups = Pixel-perfekt, Prototype = Clickable.

Vergleichstabelle:

	Wireframes	Mockups	Prototypes
Fidelity	Low (Grayscale)	High (Pixel-perfekt)	High (Clickable)
Farben	❌ Keine	✅ Ja	✅ Ja
Typografie	❌ Placeholder	✅ Finales Font	✅ Finales Font
Interaktiv	❌ Nein	❌ Nein	✅ Ja (Clickable)
Aufwand	1-2 Tage	4-8 Tage	+1-2 Tage
Kosten	500-1.500 €	2.000-8.000 €	+800-2.000 €
Wann nutzen	Discovery-Phase	Design-Phase	User-Testing

Workflow: Wireframes → Mockups → (optional) Prototype → Development

Kann ich Design selbst machen (Canva, Figma Community)?

Kurze Antwort: Ja, aber sieht oft unprofessionell aus.

Lange Antwort:

DIY-Design Optionen:

Canva: Okay für Marketing-Grafiken, nicht für App-Screens
Figma Community: Templates kostenlos, aber generisch
ChatGPT + Figma: Kann helfen, aber braucht Design-Wissen

Wann DIY okay:

✅ Interne Tools (B2B, kein Brand-Fokus)
✅ Prototyp (später professionelles Design)
✅ Budget <20k

Wann Profi nötig:

❌ Consumer-Apps (B2C)
❌ Brand-fokussierte Apps
❌ Wettbewerb hoch (Design differenziert)

Kosten sparen:

Hybrid: DIY Wireframes → Profi Mockups (spart 30-40%)

Fazit: Design ist Investment, kein Kostenfaktor

Die wichtigsten Learnings:

✅ Design kostet 15-18% des Budgets (meist ~16%; 3-20k je nach Komplexität)
✅ Standard-Design (3-8k) reicht für B2B-Apps (Material/HIG-konform)
✅ Premium-Design (8-20k) lohnt bei Consumer-Apps (Brand, Animationen)
✅ Human Interface Guidelines (iOS) vs. Material Design (Android) (adaptive Design kostet +40-60%)
✅ Figma ist Standard-Tool (Browser-basiert, Real-time Collaboration)
✅ Accessibility WCAG AA ab 28.06.2025 Pflicht (EAA für E-Commerce, Banking, >10M €)
✅ Dark Mode von Anfang an (+20-25% Kosten, nachträglich +50%)

Design entscheidet über den ersten Eindruck - und User deinstallieren innerhalb 3 Sekunden, wenn App “billig” aussieht.

Investieren Sie in Design - es zahlt sich aus.

Lassen Sie uns über Ihr Design-Projekt sprechen

Sie brauchen App-Design, aber sind unsicher, ob Standard oder Premium? In einem kostenlosen Erstgespräch (30 Min):

✅ Analysieren wir Ihre Zielgruppe (B2B oder B2C?)
✅ Definieren wir Design-Scope (Screens, Animationen, Accessibility)
✅ Klären wir HIG vs. Material Design (iOS, Android, oder beide)
✅ Schätzen wir Design-Kosten transparent (Standard 3-8k, Premium 8-20k)

Keine Buzzwords, keine Verkaufs-Tricks - nur ehrliche Einschätzung aus 25+ Jahren Praxis.

Termin vereinbaren →

Weitere hilfreiche Artikel:

Ihr App-Projekt besprechen?

Lassen Sie uns in einem kostenlosen Erstgespräch über Ihre Anforderungen sprechen.

Jetzt Kontakt aufnehmen

App-Design-Kosten 2025: Was kostet gutes UX/UI Design?

Teilen

Inhaltsverzeichnis

Carola Schulte, App-Entwicklerin

App-Design-Kosten: Was kostet gutes UX/UI Design?

Die Wahrheit über App-Design-Kosten

⚠️ Vorsicht Billig-Design-Falle

Was ist der Unterschied: Standard vs. Premium Design?

Standard-Design (3.000-8.000 €)

Premium-Design (8.000-20.000 €)

Enterprise-Design (20.000-50.000 €)

Der Design-Prozess: Von Idee zu Mockups

Phase 1: Discovery & Research (1-3 Tage)

Phase 2: Wireframes (Low-Fidelity) (2-4 Tage)

Phase 3: Mockups (High-Fidelity) (4-8 Tage)

Phase 4: Prototyping (Optional) (1-3 Tage)

Phase 5: Design-System (Optional) (3-5 Tage)

Style-Guide vs. Design-System: Was ist der Unterschied?

Design-Sprints: 5 Tage von Idee zu Prototype

Was ist ein Design-Sprint?

Der 5-Tage-Sprint

Design-Sprint-Kosten

Wann lohnt sich ein Design-Sprint?

Human Interface Guidelines vs. Material Design

Human Interface Guidelines (iOS)

Material Design (Android)

Cross-Platform: HIG + Material kombinieren?

Design-Kosten nach Plattform: Übersichtstabelle

Was kostet gutes Design wirklich?

Kosten-Breakdown nach App-Typ

Design vs. Entwicklung: Verhältnis

Real Cases: Design-Kosten in der Praxis

Case: CRM-App für Vertrieb (Simple)

Case: E-Commerce-App (Premium)

Case: Banking-App (Enterprise)

Design-Tools: Figma dominiert

Tool-Vergleich

Wann lohnt sich Premium-Design?

Standard-Design reicht wenn:

Premium-Design lohnt sich wenn:

Enterprise-Design lohnt sich wenn:

Responsive Design: Phone, Tablet, Desktop

Responsive Design-Kosten

Icon-Design: Standard vs. Custom

Icon-Design-Kosten

Illustration-Kosten: Custom-Grafiken

Illustration-Kosten

Top Fehler bei App-Design

Fehler: Design ohne User-Research

Fehler: Zu viele Custom-Komponenten

Fehler: Design-System fehlt

Fehler: Keine Accessibility

Fehler: Design für Desktop, nicht Mobile

Accessibility: WCAG AA vs. AAA

WCAG-Levels

WCAG AA-Checkliste (Minimum)

Dark Mode: Lohnt sich der Aufwand?

Dark Mode-Kosten

Dark Mode Design-Regeln

Lottie-Animationen: Motion-Design für Apps

Was ist Lottie?

Lottie-Kosten

Micro-Interactions: Das “Feeling” der App

Was sind Micro-Interactions?

Micro-Interactions-Kosten

Checkliste: Bevor Sie Design beauftragen

Vorbereitung

Briefing für Designer

Nach Design-Delivery

Design-Revision-Runden: Wie viele sind inkludiert?

Standard-Revisions

Kosten für Extra-Revisions

Developer-Handoff: Was bekommt der Entwickler?

Was gehört zum Handoff?

Handoff-Kosten

FAQs: App-Design-Kosten

Kann ich Template-Designs verwenden?

Was kostet ein Redesign?

Brauche ich einen UX-Designer UND einen UI-Designer?

Was ist der Unterschied: Wireframes vs. Mockups vs. Prototypes?