Warum wird mobiles App-Design anders bepreist als Webdesign?

Weil jede Plattform eigene Regeln hat. Bei Android werden Regeln wie die Zurück-Geste und randloser Inhalt auf jedem Screen eigens bedacht. Wird für zwei Plattformen gearbeitet, wird ein Teil der Screens zweimal gestaltet.

Ist es günstiger, nur Design zu kaufen?

Die Angebotssumme ist meist niedriger, weil kein Code geschrieben wird. Sie brauchen aber trotzdem ein Team, das das Design in Code übersetzt. Rechnen Sie beim Vergleich der Gesamtkosten dessen Zeit mit ein.

Wo fange ich an, wenn mein Umfang noch unklar ist?

Ist das Produkt live, klärt ein Audit den Umfang, weil es die Probleme findet. Gibt es das Produkt noch nicht, können wir die Screenliste zusammen erstellen. Dafür reicht ein 15-Minuten-Gespräch.

Ist die Umsatzsteuer in den Preisen von ux.center enthalten?

Nein. Preise in EUR zuzüglich Umsatzsteuer, die an der Kasse berechnet wird. Das Angebot richtet sich an Unternehmen. Audit und Sprint werden im Voraus per Karte bezahlt. Beim Festpreisprojekt schicke ich nach Ihrer Freigabe des Angebots einen Zahlungslink.

Was kostet App-Design? UI/UX-Kosten

Kurz gesagt

Auf die Frage „Was kostet ein App-Design?“ gibt es keine einzelne Antwort, weil das Wort „App“ in jedem Angebot eine andere Arbeit meint. Das eine meint einen Entwurf mit fünf Screens, das andere ein Produkt, das auf zwei Plattformen live ist.

Deshalb empfehle ich, den Umfang aufzuschreiben, bevor Sie nach dem Preis fragen. Steht der Umfang fest, lassen sich auch die Angebote vergleichen.

Den Preis bestimmen vor allem Screens und Abläufe, Plattform, Forschung und Code. Designsystem und Barrierefreiheitsziel sieht man auf den ersten Blick nicht, aber sie verlängern die Arbeit.
Bei ux.center stehen die Preise offen da. Die Auswahl unten zeigt, zu welchem Angebot Ihr Umfang passt.

Was bestimmt den Preis für App-Design?

Die Zahl im Angebot ist eine Schätzung der Stunden, die gebraucht werden. Jeder Posten unten macht diese Stunden mehr oder weniger.

Zahl der Abläufe und Screens

Ein Ablauf ist die Folge von Screens, die ein Nutzer für ein Ziel durchläuft, etwa die Registrierung oder die Bezahlung. Ein Screen ist eine einzelne Ansicht in dieser Folge. Ich zähle den Umfang zuerst in Abläufen, dann in Screens.

Die Zahl der Screens ist größer, als sie aussieht. Jeder Screen hat auch einen leeren Zustand, einen Ladezustand und einen Fehlerzustand. Der „Warenkorb“ wirkt wie ein Screen, aber der leere Warenkorb und der ungültige Gutschein werden einzeln gestaltet.

Listen Sie beim Anfragen die Screens einzeln auf. Fehlt die Liste, schätzt der Anbieter die Zahl, und die Schätzung wird meist zu seinen Gunsten gerundet.

Plattform

Web, iOS und Android erledigen dieselbe Aufgabe mit verschiedenen Regeln. Ist bei Android die Gestennavigation an, geht der Nutzer mit einem Wisch vom linken oder rechten Rand zurück. Bei der Navigation mit Schaltflächen tippt er auf die Zurück-Taste. Der Entwicklerleitfaden von Android verlangt, mehrere Navigationsarten zu berücksichtigen.

Laut demselben Leitfaden ist in Android 15 die randlose Darstellung (edge-to-edge) Pflicht, und die Statusleiste ist standardmäßig transparent. Der Leitfaden verlangt zu prüfen, dass Inhalt und Buttons nicht unter den Systemleisten liegen. Deshalb wird dieser Bereich auf jedem Screen eigens bedacht. Auch iOS hat eigene Regeln. Die Unterschiede beider Plattformen beschreibe ich im Ratgeber zum App-Design.

Zwei Plattformen heißt, einen Teil der Screens zweimal zu durchdenken. Soll auch Code entstehen, wird die Arbeit noch größer, weil zwei getrennte Apps entstehen.

Nutzerforschung

Forschung misst, ob das Design das richtige Problem löst. Interviews oder Tests brauchen eigene Zeit, von der Suche nach Teilnehmenden bis zur Auswertung. Sie gehören als eigene Zeile ins Angebot.

Am häufigsten wird nach der Zahl der Teilnehmenden gefragt. Jakob Nielsen empfiehlt für einen qualitativen Usability-Test 5 Nutzer. Nach ihm bringen mehr als 5 Personen im selben Test wenig zusätzlichen Nutzen, während die Kosten mit jeder Person steigen.

Für große Produkte mit vielen Funktionen empfiehlt Nielsen statt eines großen Tests mehrere einzelne. Jeder Test betrachtet einen kleineren Teil der Funktionen. Details finden Sie im Ratgeber zum Usability-Test.

Designsystem

Ein Designsystem ist die Gesamtheit wiederverwendbarer Komponenten und Regeln: Farben, Schriften, Buttons, Formularfelder und ihre Zustände. NN/g beschreibt es als Sammlung von Standards, mit der sich Design über wiederverwendbare Komponenten und Muster im großen Maßstab steuern lässt.

Im selben Artikel nennt NN/g auch die Kosten offen. Je individueller das System, desto mehr Zeit und Geld kostet der Aufbau. Für einen Prototyp oder einen Machbarkeitsnachweis, der sich wahrscheinlich noch ändert, lohnt sich ein vollständiges System kurzfristig nicht.

Meine Praxis: Für eine kleine Arbeit baue ich kein eigenes System, sondern halte die Komponenten des Produkts und seine Design Tokens ordentlich. Wenn das Produkt wachsen soll, kommt das Designsystem als eigener Posten ins Angebot.

Code

Eine Arbeit, die nur Design liefert, endet mit der Figma-Datei. Werden Design und Code zusammen verkauft, sind funktionierende Screens das Ergebnis. Deshalb können zwei Angebote mit derselben Zahl an Screens sehr verschieden ausfallen.

Kaufen Sie nur Design, rechnen Sie einen Kostenpunkt mit ein: das Team, das das Design in Code übersetzt. Bei dieser Übergabe können Details verloren gehen, und ihre Korrektur braucht eine neue Runde.

Ziel für Barrierefreiheit

Schreiben Sie das Ziel von Anfang an fest. Der Standard WCAG 2.2 des W3C kennt drei Stufen: A, AA und AAA. Für die Konformität mit AA erfüllt eine Seite alle Erfolgskriterien der Stufen A und AA. Zum Beispiel liegen 1.4.3 Mindestkontrast und 2.4.7 sichtbarer Fokus auf Stufe AA.

Nach meiner Erfahrung werden diese Regeln teurer, wenn man sie nachträglich einbaut. Die Stufen beschreibe ich im WCAG-Ratgeber.

Korrekturen und Änderungen am Umfang

Auch die Zahl der Korrekturrunden beeinflusst den Preis. Meine Beobachtung: Ein Angebot mit unbegrenzten Korrekturen ist entweder von Anfang an teurer oder zieht die Arbeit in die Länge. Lassen Sie sich schriftlich geben, wie viele Runden es gibt und was eine Runde umfasst.

Eine Änderung am Umfang ist ein eigenes Thema. Einen Ablauf, der unterwegs dazukommt, zähle ich als neue Arbeit. Wie sich das auf den Preis auswirkt, sollte man von Anfang an besprechen.

Warum es hier keine Marktpreisspanne gibt

Auf dieser Seite steht keine Spanne wie „App-Design kostet in Deutschland zwischen so viel und so viel“. Dafür bräuchte es eine öffentliche, datierte Preisstudie. Ohne eine solche Quelle geöffnet und gelesen zu haben, wäre jede Zahl eine Schätzung.

Außerdem sagt eine Spanne wenig, solange der Umfang offen ist. Ein Webentwurf mit fünf Screens und ein auf zwei Plattformen programmiertes Produkt fallen nicht in dieselbe Spanne.

Es gibt einen nützlicheren Weg: Schreiben Sie Ihren Umfang auf und holen Sie mit demselben Text mehrere Angebote ein. Legen Sie die Angebote dann anhand der Posten unten nebeneinander.

Wie vergleicht man Angebote?

Vergleichen Sie zwei Angebote zuerst nach ihrem Inhalt. Ich möchte in einem Angebot die Antworten auf diese Fragen schriftlich sehen:

Welche Abläufe und welche Screens werden gestaltet? Sind leere, Lade- und Fehlerzustände dabei?
Für welche Plattformen? Web, iOS, Android oder alle.
Gibt es Nutzerforschung? Wenn ja, wie viele Interviews oder Testsitzungen?
Wird ein Designsystem aufgebaut oder werden vorhandene Komponenten genutzt?
Wer macht den Code? Wer übersetzt das Design in Code, in welches Repository geht der Code?
Wie viele Korrekturrunden gibt es, und wie ändert sich der Preis, wenn sich der Umfang ändert?
Wann ist der Liefertermin, wie wird bezahlt, ist die Umsatzsteuer im Preis enthalten oder kommt sie dazu?

Jede Zeile ohne Antwort ist ein Kandidat für eine spätere Zusatzrechnung. Fällt es Ihnen schwer, den Umfang zu beschreiben, hilft die Seite zum MVP, auszuwählen, was in die erste Version gehört.

Beispiel: Wie schreibt man einen Umfang?

Stellen Sie sich vor, eine Café-Kette möchte eine Bestell-App. Fragt sie mit dem Satz „Wir brauchen eine Bestell-App“ nach Angeboten, stellt sich jedes Studio eine andere App vor.

So formuliert, werden die Angebote vergleichbar:

Abläufe: Registrierung und Login, Produkt aus der Karte wählen, Warenkorb und Bezahlung, Bestellstatus, Treuepunkte.
Screens: die Screenliste jedes Ablaufs. Zustände wie leerer Warenkorb, Zahlungsfehler und geschlossene Filiale gehören dazu.
Plattform: zuerst nur iOS und Android. Web kommt in der nächsten Version.
Forschung: nach dem Design eine Testrunde mit 5 Nutzern.
Designsystem: Markenfarben und Schriften gibt es, eine Komponentenbibliothek nicht.
Code: Auch der mobile Code wird gebraucht, angebunden an das bestehende Bestellsystem.
Barrierefreiheit: WCAG 2.2 AA.

Diese Liste ist nicht länger als eine Seite, nimmt dem Anbieter aber einen Großteil des Schätzspielraums. Fällt die Wahl schwer, welcher Ablauf für Nutzer wichtig ist, ist eine Customer Journey Map ein guter Anfang.

Markieren Sie in der Liste, was die erste Version wirklich braucht. Fallen die Treuepunkte aus der ersten Version, fallen ein Ablauf und alle zugehörigen Screens aus dem Angebot.

Zu welchem Angebot passt Ihr Umfang?

Wählen Sie unten Ihren Umfang mit fünf Fragen. Die Auswahl schätzt keinen Preis. Sie zeigt, zu welchem Angebot von ux.center Ihr Umfang passt und warum.

Umfang zuordnen

Die Auswahl braucht JavaScript. Dieselben Zuordnungsregeln stehen auch in der Tabelle unten.

Diese Auswahl schätzt keinen Preis, sie ordnet Ihren Umfang einem Angebot von ux.center zu. Die Zuordnungsregeln sind meine eigenen. Mit jeder Auswahl ändern sich das empfohlene Angebot und die Begründung.

Dieselben Regeln als einfache Tabelle:

Ihr Umfang	Passendes Angebot	Preis
1–30 Screens, eine Plattform, keine Forschung, mit Code	Design & Ship Sprint	1.949 € pro 2 Wochen
Nur Design, kein Code	Festpreisprojekt	Angebot in 24 Stunden
Mehr als 30 Screens	Festpreisprojekt	Angebot in 24 Stunden
Mit Nutzerforschung	Festpreisprojekt	Angebot in 24 Stunden
iOS und Android oder Web und Mobil, mit Code	Festpreisprojekt	Angebot in 24 Stunden
Produkt ist live, Sie wollen zuerst die Probleme finden	UX Audit oder UX Audit Pro	79 € ein Ablauf, 399 € bis zu 10 Abläufe

Die Regeln sind ein Ausgangspunkt. Bei einem Umfang an der Grenze klärt sich die Entscheidung im 15-Minuten-Gespräch.

Preise für UI/UX-Design bei ux.center

Meine eigenen Preise schreibe ich offen hin. Steht der Umfang fest, steht auch die Zahl fest, bevor die Arbeit beginnt.

UX Audit: 79 €, ein Ablauf, geliefert innerhalb von 48 Stunden.
UX Audit Pro: 399 €, die ganze App, bis zu 10 Abläufe, geliefert innerhalb von 48 Stunden.
Design & Ship Sprint: 1.949 € pro 2 Wochen. Design und Code, in Ihr Repository. Start am nächsten Werktag.
Festpreisprojekt: Sie beschreiben den Umfang, innerhalb von 24 Stunden schicke ich einen Preis und einen Liefertermin.

Preise in EUR zuzüglich Umsatzsteuer, die an der Kasse berechnet wird. Das Angebot richtet sich an Unternehmen. Buchen Sie innerhalb von 30 Tagen einen Sprint, ziehe ich die Audit-Gebühr vom Sprintpreis ab. Alle Angebote mit Dauer und Zahlungsweg sehen Sie in einer Tabelle auf der Preisseite.

Meine Notiz

Das häufigste Problem in Preisgesprächen: Der Umfang wurde nie aufgeschrieben. Eine Arbeit, die mit „Wir wollen eine App“ beginnt, wächst bei der ersten Lieferung mit „Daran hatten wir auch gedacht“.

Deshalb frage ich zuerst nach der Screenliste. Gibt es keine, erstellen wir sie zusammen. Oft kommt ein Teil der Liste nicht in die erste Version, und der Preis sinkt von selbst.

Das zweithäufigste Problem: Design und Code werden getrennt bepreist und von getrennten Teams umgesetzt. Das Design wird geliefert, das Code-Team startet Monate später, und ein Teil der Screens wird neu gedacht. Weil ich Design und Code selbst mache, gibt es diese Übergabe bei mir nicht.

Ist Ihr Produkt live, empfehle ich vor einem Redesign ein Audit. Neue Screens, die gezeichnet werden, ohne zu wissen, was nicht funktioniert, tragen alte Probleme in ein neues Aussehen. Mehr dazu im Beitrag Erst Audit, dann Design.