Android App Design für Stupsa
Branding & App Design für Android
Referenz Inhalte
- App Features
- Projekt Besonderheiten
- Aufbereitung für Play Store
- Extra: App OnBoarding Screens
- App Design Einblicke
App Features
Stupsa ist eine kleine, feine Android App, die Bescheid gibt über Neuigkeiten gespeicherter Favoriten auf Amazon. Beispielsweise zeigt sie neueste Musik zu Beyoncé an, oder neueste Bücher von Tim Ferriss oder neue Produkte von Samsung. Je nach dem, worüber man benachrichtigt werden möchte.
Der Use Case der App war vorher genau umrissen und grundsätzlich brauchte es lediglich eine optische Überarbeitung der vorhandenen Standard-Screens aus Android.
Der Entwickler war sehr klar in dem, was er wollte und dadurch ging alles ziemlich zügig. Mit Hilfe von E-Mail, Dropbox, Sketch App und Zeplin konnten wir sehr gut kommunizieren und Screens so austauschen, dass jede Position der Elemente rasch feststand. Über den klickbaren Prototyp konnte der Entwickler das Design der App anfühlen.
Projekt-Besonderheiten
- Reines Remote Projekt
- App Branding
- App Icon & Status Icon
- Vorschläge zur Bildsprache
- OnBoarding Konzept & Ausführung
- Login Screen
- Übersicht der Stupsa-Einträge
- Detailansicht Stupsa-Liste
- Grafiken für Play Store Eintrag
Aufbereitung für Darstellung im Play Store
Für das Einstellen einer App in den Play Store gibt es einige Dinge zu beachten. Neben der .apk Datei, die den kompilierten Quellcode mit sich trägt, werden allerhand Grafiken in unterschiedlichen Größen eingereicht, damit die App im Store attraktiv dargestellt werden kann – auf großen und kleinen Screens.
Eine genaue Beschreibung der geforderten Dateien findet man aufbereitet bei Google. Grafikinhalte, Screenshots und Videos.

Vorstellungs- bzw. Funktionsgrafik (Feature graphic)
Klingt auf Deutsch wieder etwas sperrig… Die Vorstellungsgrafik ist wie ein Teaser zu der App. Diese Grafik wird von Google eingefordert und sie wird benötigt, um die App zu veröffentlichen. Die Grafik ist für eine wirkungsvolle Präsentation der App und zur Gewinnung neuer Nutzer entscheidend, da sie sich bemüht, das „Wesen“ oder die Idee der App zu transportieren. Mit Bild, Text und Farben kreiert sie eine Stimmung, einen Mood. Die Vorstellungsgrafik erscheint vor Ihren Screenshots im Store-Eintrag Ihrer App. Für Stupsa gab es mehrer Vorschläge zur Auswahl:




Tipps zur Erstellung der Vorstellungsgrafik
- wichtige Informationen in die Mitte der Grafik setzen
- große Schriftgröße verwenden und Branding-Möglichkeiten nutzen
- die Vorstellungsgrafik muss allein funktionieren können
- JPEG oder 24-Bit-PNG (kein Alpha)
- Größe: 1.024 x 500 Pixel
App OnBoarding
Das so genannte „OnBoarding“ in einer App soll dem Nutzer schnell vermitteln, worum es geht und wie neue Stupsas angelegt werden können. Das OnBoarding sollte in der Regel nicht mehr als aus 5 Schritten bestehen. Zu lange App OnBoardings nutzen nichts, weil sie einfach übersprungen werden. Sinn des OnBoardings ist es, die wichtigsten Features der App kurz zu vermitteln, damit der Nutzer zu Beginn der Nutzung eine Orientierung dazu hat, was er wo tun kann.
Screen Designs
Screendesign ist abhängig von Daten: ohne Daten gibt es nichts zu sehen. Daher ist ein wichtiges Element, um den Nutzer mit der App vertraut zu machen, das App Design von leeren Zuständen. Gern „Empty states“ genannt. Wenn noch nichts vorhanden ist, das dem Nutzer nützt, dann braucht es eine (humrovolle) Aufforderung, etwas zu tun, damit beim nächsten Mal etwas zu sehen ist. Im Fall von Stupsa gibt es zwei signifikante Empty states: 1. es sind noch keine Stupsas angelegt und 2. etwas ist schief gegangen oder konnte von der Amazon API nicht abgerufen werden. Die nachfolgenden zwei Screens beschäftigen sich mit der Lösung dieses Falls.
Ausfürhliche Informationen zu Empty states gibt es in den Material Design-Richtlinien von Google.
Artikel zu App Design
5 elementare Tipps für App Design
Egal, ob du selbst App Designer*in bist und ein App Design erstellen sollst oder ein App Design für deine App suchst, es gibt 5 elementare Dinge beim App Design zu beachten. Arbeite selbst damit oder achte darauf, dass dein/deine angeheuerte/r App Designer*in...
App Mockup Teil 2: Bessere Usability
Usability ist die Basis für Conversions. Gute Usability herzustellen, geht heute viel einfacher und ist nicht nur Design-Profis vorbelassen. „Design ist how it works“, sagte Steve Jobs. Wie es funktioniert, kann man relativ zügig mit einem Klick-Protot...
App Mockup Arten, Teil 1
Wozu dient das App Mockup? Wen soll es überzeugen…? Wenn Sie ein App Mockup entwickeln wollen, sollten Sie zunächst überlegen, zu welchem Zweck Sie es brauchen und wem Sie es zeigen wollen. Ein Mockup für den technischen Leiter, das Dev-Team, die...
Das Kern-Vermögen eines UX Designers: Konzipieren
Kuckt man sich näher an, welche Anforderungen auf einen UX Designer zukommen, dann kann einem schon schwindelig werden. Doch keine Angst, in Schuhe kann man hineinwachsen. In diesem Artikel werden die während eines Projekts auf den UX Designer oder eben UX D...
UX Designer sind Hybrid Thinker
Designer gehören bei Apple zu den Wortführern. Anders als in so mancher Agentur-Klitsche haben sie dort die wichtige Rolle, das Produkt so attraktiv zu machen, dass Menschen es kaufen wollen. Apps sind auch Produkte. Daher sind UX Designer digitale Produkt-D...
UX Designer werden: Vom Web zur App
Du möchtest den Sprung vom Webdesigner zum UX Designer wagen? Und damit Deine Kenntnisse und Fähigkeiten erweitern? Wunderbar! In diesem Artikel erkläre ich Dir, was der grundlegende Unterschied zwischen dem Nutzungserlebnis (User Experience) im Web und dem...
UX Design mit Sketch 3
Sketch 3 ist für mich DAS Grafikprogramm für Screen Designs. Bisher arbeitete ich gern mit FireWorks CS6. Mir gefielen die übersichtliche Menge an Tools, die das Wichtigste aus Fotobearbeitung und Vektorgrafik anboten, und die auf das Web fokussierten Bilde...
Apps. Woher kommen sie und was soll dieser Hype?
Tatsächlich . . . „App“ leitet sich nicht von Apple ab. Auch wenn es passend wäre. Die einfachste (und zugleich unspektakulärste) Variante ist, dass eine App ein Programm ist. So wie Photoshop auch ein Programm ist. Oder Microsoft Word. Oder der Text...
iPhone – Wenn Apple Handys baut, werden daraus Mini-Computer, die den PC abschaffen
Wie Steve Trends verbesserte Als Steve Jobs 2007 das erste iPhone der begeisterten Anhängerschaft vorstellte, gab es schon Smartphones, sogar schon seit den 90er-Jahren. IBM, Nokia und BlackBerry waren damals erfolgreich am Markt. Vielleicht erinnern Sie sic...