Android App Design für Stupsa

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.

Weitere Android App Design Projekte

Ansicht Android Design für Stupsa App

Artikel zu App Design

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...

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...

Screen Designs