Website-Icon Webdesign-Podcast

App Design Basics: Alles, was Sie über Design für native Apps wissen müssen

App Design Basics: Alles, was Sie über Design für native Apps wissen müssen

App Design Basics

In den letzten Jahren hat sich das Smartphone stärker und stärker in unserem Alltag etabliert und ist heutzutage für viele Menschen zum ständigen Begleiter geworden. In Deutschland besitzen zur Zeit 51 Prozent der Männer älter als 13 und 49 Prozent der Frauen in der gleichen Altersgruppe ein Smartphone. Der Trend ist klar. Laut Statistiken soll diese Zahl noch in diesem Jahr um 11,1 Prozent steigen.

Die Vorlieben verschieben sich – in Deutschland sowie weltweit – nicht nur vom Desktop zum Mobile Web, sondern auch vom Mobile Web zu Apps. Mobile Anwendungen werden immer intensiver genutzt. Statistiken besagen, wer ein Smartphone hat, der nutzt fast immer auch Apps. Unter den meistgenutzten Smartphone-Anwendungen sind Messaging- und Social-Media-Dienste an der Spitze, aber mehr und mehr Funktionen werden von Apps übernommen. Wir können heutzutage mit einer App Musik hören, mit einer anderen App das Abendessen bestellen sowie ein Auto mieten. Jeden Tag werden mehr als 350 neue Apps in den App Stores veröffentlicht.

Aufgrund des überwältigenden Angebots und des starken Wettbewerbs ist es nötig, das eigene Produkt von den anderen im App-Store angebotene Apps abzuheben. Zusammen mit einem originellen Konzept und einem funktionellen Back-end System gehört ein hochwertiges Design zu den wichtigsten Elementen, die den Erfolg einer App bestimmen.

Das App-Icon

Mit knapp zwei Millionen Apps im Google Play Store und über 1,5 Millionen Apps im Apple Store, ist der Konkurrenzdruck in den App Stores überwältigend. In diesem Kontext spielt das App-Icon eine zentrale Rolle, um die eigene Anwendung von den anderen abzuheben. Will man mit seiner Anwendung im Apple-App-Store nicht in der Masse versinken, muss das Icon sofort ins Auge springen.

Das Icon stellt eine Art Visitenkarte für die App dar. Oft entscheidet ein User basierend auf dem Icon-Design, ob er eine App runterlädt oder nicht. Insofern soll er sofort in der Lage sein zu verstehen, worum es in der App geht und was die App besonders macht. Hier hilft eine universell gültige Bildsprache, sowie eine konsequente Farbpalette und Tonalität, die in der App und auf dem Icon wiederzuerkennen sind.

In dem iTunes Connected Developer Guide werden einige allgemeine Empfehlungen zum Design von App-Icons aufgelistet. Laut diesem soll das Icon im besten Fall weder Wörter, noch Fotos oder Hinweise wie free und sale enthalten. Außerdem gilt auch für App-Design das Prinzip strive for simplicity. Das Icon sollte demgemäß schlicht und eindeutig sein und eine begrenzte Farbpalette verwenden.

Das App-Design: zwischen Ästhetik und Usability

Die perfekte App entsteht aus dem Zusammenspiel von reibungsloser Funktionalität und hochwertigem Design. Reine Ästhetik ist hier nicht genug. Gutes Design ist immer zweckgebunden und verfolgt eine funktionale Absicht.

Wenn es um App-Design geht, ist das Schlüsselwort Benutzerfreundlichkeit. Alle Funktionen einer App sollen möglichst intuitiv dargestellt werden und alle wichtigen Elemente sollen mühelos auffindbar sein. Dabei ist es wichtig, immer auf die Zielgruppe und den Kontext, in dem die App benutzt werden soll, zu achten. Sind die Buttons groß genug? Funktioniert die App im Sonnenlicht?

Strive for simplicity gilt als goldene Regel nicht nur für das Icon, sondern auch für das gesamte App-Design. Das besagt auch der neuste Trend in Sachen App, das sogenannte Flat Design. Demgemäß sollte es kein 3D Effekt, keine vorgetäuschten Wölbungen oder Vertiefungen geben – nur simple Linien, Formen und Farbflächen.

Das Streben nach Einfachheit und Schlichtheit beeinflusst auch die Auswahl der Farbpalette. Laut Best-Practice-Vorgaben soll man sich auf die Farbvarianten von einem oder zwei Grund-Farbtönen beschränken, um Elemente hervorzuheben oder zu neutralisieren. Wenn man die Sättigung und Helligkeit eines einzelnen Farbtons verändert, lassen sich viele Farben generieren und es wird nicht zu anstrengend fürs Auge.

Auch der Wert von Details ist nicht zu unterschätzen. Die Organisation der Weißräume gehört zum Beispiel zu den wichtigsten Aufgaben eines App-Designers. Weißer Raum ist in Web- und App-Design nicht nur eine leere Fläche, sondern ein Instrument, um die Inhalte zu strukturieren und priorisieren. Außerdem können großzügige Abstände die miesesten Bedienoberflächen einladend und einfach aussehen lassen. Darüber hinaus sind die richtige Schriftart und die Verwendung von hoch aufgelöstem Bildmaterial Voraussetzungen, um das richtige Look and Feel zu erzielen.

Laut Statistiken startet der durchschnittliche Benutzer eine App nie mehr als 20 Mal, bevor er sie löscht oder nicht mehr beachtet. So wird es klar, dass die Interaktion mit einer App so einfach und intuitiv wie möglich sein sollte, damit auch unerfahrene Benutzer von Anfang an in der Lage sind, die App einfach und mühelos zu navigieren. Eine Bedienungsanleitung gilt in der Branche als das Eingeständnis eines Design-Fehlers.

Designen für iOS und für Android

Während Apple weltweit zu den stärksten Brands im Tech-Bereich zählt, hat Android Apple im Geschäftsbereich der Betriebssysteme für Smartphones längst besiegt. Laut Kantar Worldpanel wuchs Android innerhalb eines Jahres um 4,8 Prozent in Deutschland, während der iOS-Marktanteil von 18,3 Prozent im Vorjahresquartal auf 17,3 Prozent sank. Nicht zu vergessen ist das neue Windows Phone, das immer beliebter wird.

Eines ist klar, die Zeiten, in denen man eine App noch ausschließlich für iOS entwickeln und designen konnte, sind vorbei. Heutzutage sollte eine App im besten Fall gleich von Anfang an für beide Betriebssysteme entworfen werden. Dabei sind verschiedene Elemente zu beachten, in erster Line Auflösungen und Screen-Größen. Während alle iPhones feste Proportionen aufweisen (640×960 Pixeln), haben Android-Geräte unterschiedliche Auflösungen, Pixeldichten und Seitenverhältnisse. Weitere Unterschiede liegen in den Listenansichten, in der Navigationsbar und in den Plattform spezifischen Icons.

Branding für Apps

Um ein konsequentes Markengefühl zu vermitteln und den Wiedererkennungseffekt zu verstärken, ist eine Branding-Strategie auch im Bereich Apps erforderlich. Das Logo sollte, als wichtigster Bestandteil der Corporate Identity im Header der App erscheinen. Auch die Farbpalette und Schriftarten sind bewusst auszuwählen, um das Look and Feel der Marke zu transportieren. Im besten Fall sollen alle Produkte eines Unternehmens – von der Webseite bis hin zur App – die gleiche Schriftarten und eine einheitliche Farbcodierung aufweisen.

Die erfolgreichsten Unternehmen der Welt wissen ganz genau, dass Design und Farbcodierung eine zentrale Rolle in der Corporate Identity spielen. Als Facebook beispielsweise Instagram akquirierte, behielt Facebook das Instagram-Logo, aber änderte die Hintergrundfarbe in das typische Facebook-Blau. Dadurch wurde ein Wiedererkennungswert für beide Unternehmen hergestellt.

Letzten Endes ist App-Design nicht nur ein Mittel, um die eigene Anwendung von anderen Apps auf dem Markt abzuheben, sondern auch ein wichtiges Instrument, um die Benutzerfreundlichkeit des Produktes zu verbessern. Außerdem dient ein konsequentes Design der Förderung des Markengefühls und dem Aufbau einer starken Corporate Identity. Eine der berühmtesten Persönlichkeiten der Tech-Industrie dieses Jahrhunderts, Steve Jobs, hat den Mehrwert von Design für die Tech-Branche während einer seiner Reden auf den Punkt gebracht: „Es geht nicht nur darum, wie es aussieht und sich anfühlt. Design bestimmt, wie etwas funktioniert.”

Biographie

Alessandra Maino ist Digital Marketing Manager bei 99designs, der weltweit größte Grafikdesign-Marktplatz. Geboren und aufgewachsen in Italien, Alessandra wohnt in Berlin, wo sie das bunte kulturelle Angebot und die dynamische Startup Kultur der Stadt seit vier Jahren genießt. Neben Marketing, Design und Branding, interessiert sie sich für Ernährung, Reisen und Literatur.

 

 

Bildrechte: pixabay.com twitter-facebook-miteinander-292994 LoboStudioHamburg CC0 Bestimmte Rechte vorbehalten

Die mobile Version verlassen