February 28, 2022

App Design erstellen - von der Idee zum fertigen Design

Zu Beginn wird ein Design erstellt, das die Funktionsweise der App darlegt und zeigt, wie sie einmal funktionieren soll. Das App Design durchläuft mehrere Phasen, in denen aus Deiner Idee ein fertiger Prototyp der App entsteht. Auf diese Weise können Verständigungsprobleme bereits vor der Programmierung selbst beseitigt und ein Konzept erstellt werden, das ganz Deinen Wünschen entspricht.

Was ist ein App Design?

Möchtest Du eine iOS oder Android App programmieren lassen, stellst Du Dir unter dem Begriff des App Design vermutlich die bunten Schaltflächen und Logos in der fertigen App vor. Dies ist allerdings nur der “letzte Schliff” im Design Prozess. Im Mittelpunkt stehen hier die Funktion der App, ihre internen Abläufe und ihre Interaktion mit dem Nutzer.

Ein App UX/UI Designer kümmert sich also in erster Linie um die Funktionalität der App und richtet sich nach den Bedürfnissen der User und dem Ziel des Kunden. Darüber hinaus soll selbstverständlich auch ein optisch ansprechendes Produkt entstehen, das der Endnutzer gerne verwendet. Die Optik selbst ist ebenfalls von dem Begriff des App Designs umfasst, spielt aber erst dann eine Rolle, wenn die Funktionalität zufriedenstellend gestaltet wurde.

Der erste Schritt der App Entwicklung - das Briefing des Kunden

Egal, ob Du native Apps, Web Apps oder Cross-Platform Apps programmieren lassen möchtest - am Anfang steht Deine App Idee. Die Entwickler müssen sie so umfassend und detailreich wie möglich kennenlernen, damit sie ein Konzept erstellen können, das Deinen Vorstellungen gerecht wird. Zu Beginn des Prozesses erstellst Du daher ein Briefing, in das Du alle Vorgaben und Informationen einfügst, die die Entwickler benötigen. Je mehr Du dabei ins Detail gehst, desto besser kannst Du bereits frühzeitig Missverständnissen entgegenwirken und dafür sorgen, dass der Design Prozess schnell und reibungslos abläuft.

Handy App programmieren - das erste Design

Dein fertiges Briefing dient als Grundlage für das erste Design, das die Entwickler für Deine iOS App oder Android App erstellen. Dabei werden zu Beginn sogenannte Wireframes verwendet, die es ermöglichen, ein grundlegendes Design ohne konkrete Inhalte aufzubauen. Fließtext wird dabei zum Beispiel in Form von Platzhaltern oder grauen Boxen angezeigt. So können alle Beteiligten bereits gut erkennen, wie die fertige App einmal aussehen wird, ohne bereits über alle Inhalte zu verfügen.

Mit Wireframes wird eine grobe Struktur festgelegt und entschieden, wo welcher Content später platziert wird. Dies dient der Strukturierung der Informationen und hilft den Entwicklern dabei, all Deine Informationen geordnet unterzubringen.
Auch Menus, Buttons und Logos erhalten hier bereits ihren Platz. Auf diese Weise können Dir die Entwickler ohne eine aufwendige Detailarbeit zeigen, wie sie sich die Ausfertigung Deines Projektes vorstellen.

Bist Du nicht zufrieden oder hast Änderungswünsche, können sie meist in wenigen Handgriffen umgesetzt werden. Das Design lässt sich in dieser Phase noch leicht anpassen. Dies wird genutzt, um den noch sehr groben Prototypen genau an Deine Vorstellungen anzupassen und so die spätere Arbeit zu erleichtern.

App entwickeln - mit Mockups ins Detail

Ist die erste Phase abgeschlossen, bedienen sich Android und Apple Developer sogenannten Mockups. Sie sind detailreicher als Wireframes und ermöglichen eine genauere Darstellung des Designs der späteren native App, Cross-Platform App oder Web App. In Mockups werden bereits Texte und Bilder integriert, die dem Betrachter helfen, ein realistisches Bild des Ergebnisses zu erhalten. Die Bausteine sind hier allerdings nach wie vor statisch, sodass die Feinschliffe auch hier noch nicht erkennbar sind.
Auch in dieser Phase arbeiten Entwickler eng mit ihrem Kunden zusammen, um ein direktes Feedback zum Mockup zu erhalten und es bei Bedarf anpassen zu können.

Android oder iOS Programmierung - der Prototyp der App

Ist das Mockup zur Zufriedenheit aller ausgefallen, geht es nun an die Erstellung des Prototypen. Er beendet den Design Prozess und ist eine detailreiche Darstellung dessen, wie die fertige App einmal im App Store oder im Google Play Store erhältlich sein wird.

Hier liegt der Fokus nicht mehr auf den grafischen Details, die in den früheren Phasen eine zentrale Rolle gespielt haben. Stattdessen steht die Funktion im Vordergrund. Das bedeutet, dass Du nun mit dem Prototypen interagieren und ihn so verwenden kannst, wie Du zum Beispiel Android Apps auf Android Smartphones nutzen würdest. Du kannst den tatsächlichen Content erleben und etwaige Probleme in der Nutzerfreundlichkeit erkennen. Dies ermöglicht noch einmal die Lösungsfindung und Verbesserung des Designs.

Eine Schwierigkeit in dieser Phase ist der Detailgrad des Prototypen. Ein möglichst detailreiches Design bietet zwar einen hervorragenden Einblick in die finale App, ist aber auch sehr zeitintensiv. Wird der Prototyp hingegen zu oberflächlich entworfen, kann dies dazu führen, dass er nicht richtig getestet werden kann und Probleme in der Nutzung durch den User unentdeckt bleiben.
Sollen Entwickler besonders komplexe hybride Apps oder Android Apps programmieren, erschaffen sie oft mehrere Prototypen. Auf diese Weise können sie sich schnell Feedback einholen und das Design gleichzeitig ständig verbessern.

Der Design Prozess endet mit einem detailreichen Prototypen, mit dem alle Beteiligten zufrieden sind. Er zeigt bereits sehr genau auf, wie die spätere App einmal aussehen wird und genutzt werden kann. Der Prototyp bildet die Grundlage für die tatsächliche Programmierung. Dabei wird die Idee des Kunden und der Designer zum Beispiel mit Hilfe der Programmiersprache Java, Java Codes und anderen Hilfsmitteln wie einem App Baukasten in die fertige App verwandelt, die Endnutzer schließlich auf ihre iOS oder Android Geräte downloaden können.


Der Prototyp der App ermöglicht auch die genaue Definierung der Kosten. Letztere sind anhand einer groben Idee nur schwer einzuschätzen, da sich der tatsächliche Arbeitsaufwand im Android Studio und die Komplexität der App erst dann aufzeigt, wenn die Vorstellung des Kunden in ein Design verwandelt wurde. Oft ändern sich in diesem Prozess auch noch einmal die Wünsche, die den Arbeitsaufwand erhöhen und das Ergebnis verkomplizieren können. Der Prototyp hält hingegen die genauen Abläufe in der App fest und definiert die einzelnen Schritte, die bis zur Fertigstellung notwendig sind. Daher können die Kosten Deiner App an dieser Stelle bereits genau beziffert werden.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Louis Nell
CEO Knguru Studios
Moin ich bin Louis, kreativer Kopf und Gründer von KNGURU Studios. Wenn wir einmal anfangen über Technik, Startups oder Produktdesign zu quatschen kannst du dir sicher sein, das es so schnell kein halten mehr gibt. Deswegen gibt es auch mittlerweile diesen Blog in dem ich meine Reise als Startup- und Agenturgründer dokumentiere.
#app
#design
Vera Große
UX Management
Hi, ich bin Vera! Meine Verantwortung liegt im Bereich Projektmanagement und Kundenbetreuung. In diesem Blog teilen wir nicht nur unsere Erfahrungen als Startup- und Agenturgründer, sondern auch unsere Begeisterung für kreative Ideen und visionäre Konzepte.Mit Expertise und Leidenschaft arbeiten wir daran, innovative Projekte zum Leben zu erwecken und gleichzeitig unsere eigene Reise zu dokumentieren.
#app
#design

Buche deinen kostenlosen Videocall

Du willst mit unserem Team über dein Projekt quatschen und einfach mal hören, was wir so für dich möglich machen könnten? Dann buche dir jetzt einfach einen kostenlosen Videocall mit uns!

1
Wie können wir dich erreichen?
2
Akzeptiere unsere Datenschutzrichtlinien.
Oops! Something went wrong while submitting the form.