Top App-Design: Tipps & Ideen für mobile Apps

Profitieren Sie vom Aufstieg von No-Code-Anwendungen und erfahren Sie in diesem Blogbeitrag, wie Sie das beste App-Design für Ihre Geschäftsanwendungen erstellen können.

person writing on white paper

Angelika Methner

Guide

“No-Code”-Plattformen haben einen beispiellosen Wandel in Gang gebracht. Open as App und seine automatische App-Erstellung sind das beste Beispiel dafür. In kurzer Zeit kann damit jeder eine funktionale App erstellen. Aber sieht sie auch gut aus? Unsere Tipps für App-Design zeigen, wie man mit einfachen Mitteln schnell und einfach eine benutzerfreundliche App erstellt – ohne dafür viel Zeit oder Geld zu aufzuwenden.

Zu den Grundregeln für die Gestaltung mobiler Anwendungen gehören in der Regel eine benutzerfreundliche Oberfläche, einfach verständliche Funktionen und ein klares Design. Mit ein paar bewährten Praxistipps erstellen Sie eine App, die nicht nur ihren Zweck erfüllt, sondern sich auch gleichzeitig einfach bedienen lässt und gut aussieht.   

Wenn Sie Apps mit einer No-Code-Plattform wie Open as App erstellen, sind bereits viele Funktionen in Ihrer App von vornherein enthalten. Das Design und die Anordnung der Elemente in Ihrer App können Sie jedoch immer frei wählen. Deshalb ist es auch bei der automatischen App-Erstellung gut zu wissen, wie man Funktionen und das Erscheinungsbild einer App optimal anlegt. 

Hier finden Sie die Grundlagen für das App-Design in iOS und Android und die Auswahl von Funktionen. Wenn Sie selbst Apps erstellen, können Sie sich daran orientieren und gleich alle App-Design-Tipps auf der Open as App-Plattform umsetzen. 

So setzen Sie Ihr App-Design gezielt für iOS und Android um 

Fokus, Fokus, Fokus ist das Schlüsselwort bei der Erstellung einer mobilen App, sei es mit Softwareentwicklung oder mit einer No-Code-Plattform. Nur so gelingt die Die Kombination von Funktionen und Design. Wer also von Anfang an über den Zweck seines Tools nachdenkt, wird später mit positivem Feedback der App-Nutzer belohnt. 

Klarheit, Einfachheit und Konsistenz

Damit sich Ihre App einfach bedienen lässt, sollten Sie vor allem auf Einfachheit und Konsistenz achten. Das Design der App sollte den Zweck nicht überschatten. Stattdessen sollte das App-Design durch ein klares und gezieltes Erscheinungsbild die Funktion der App unterstützen. Je stimmiger die Gestaltung ist, desto besser können sich die Benutzer in der App orientieren. 

Weiße Flächen

In der übersättigten digitalen Welt, in der wir uns bewegen, zögert man zunächst beim Gedanken, leere Flächen einzusetzen. Wenn es jedoch um das App-Design Ihrer individuellen mobilen App geht, wirkt der weiße Raum nicht langweilig oder überflüssig. Er ist vielmehr dazu da, Ihnen bei der bestmöglichen Strukturierung der App zu helfen. Mit gut genutzten “Weißräumen” können Sie die verschiedenen Bereiche unterteilen und stellen wichtige Inhalte in den Vordergrund.

Farbschemata 

Wie Sie Farben verwenden, ist entscheidend für die Benutzerfreundlichkeit Ihrer App. Setzen Sie sie klug ein. Eine gute Idee ist es beispielsweise, alle anklickbaren Oberflächen, wie Buttons, Links und Ankertexte, in der gleichen Farbe zu gestalten. Das ist eine einfache Regel, aber sie hilft jedem App-Nutzer. Denn weil man leicht erkennt, welche Elemente anklickbar sind, kann man nahtlos und ohne großartig nachzudenken durch Ihre Anwendung navigieren.

Texte und Schriftarten

Der Text in Ihrer App sollte prägnant und gut durchdacht sein. Überladen Sie das Design nicht mit Text. Das hat sich nicht bemerkt. Einzeiliger Text auf Schaltflächen und anklickbaren Links funktioniert viel besser. Die Verwendung von weniger, aber gut gewählten Wörtern steigert die Benutzerfreundlichkeit enorm. Sie sollten auch darauf achten, durchgängige Schriftarten zu wählen, am besten ein bis maximal zwei, die gut lesbar und klar sind.

Bildmaterial

Wägen Sie die Verwendung von Hintergrundbildern sorgfältig ab. Ein solches Bild zieht die Aufmerksamkeit des Benutzers auf sich und verursacht eine unnötige Ablenkung. Ein leerer Hintergrund vereinfacht die Benutzererfahrung, so dass sich der Anwender, auf den Inhalt konzentrieren kann. Dasselbe gilt für Header-Bilder. Ein großes Bild kann ein wunderbarer Einstieg in Ihre App sein. Es kann für den Benutzer aber auch leicht zu einer Hürde werden. Am besten verwenden Sie Ihr Logo oder ein einfaches, nicht zu kleinteiliges Bild, das dem Zweck der App entspricht. 

Marke & Branding 

Wenn Sie eine App für Ihr Unternehmen entwickeln, sollten Sie Ihrem Branding treu bleiben. Halten Sie sich zum Beispiel an das Farbschema Ihres Logos, Ihres Corporate Designs und (falls vorhanden) der Markenbilder. Als Faustregel gilt: Fügen Sie nicht mehr als eine zusätzliche Farbe hinzu. Sie können Adobe Color verwenden, um passende Farben für Ihre Anwendung zu finden – entweder komplementär oder mit ähnlichem Kontrast.

Wie man Apps in Open as App wirkungsvoll gestaltet

Wenn Sie No-Code-Apps mit Open as App erstellen, können Sie automatisch viele vordefinierte App-Features nutzen. 

Hier finden Sie zudem die wichtigsten Funktionen von Open as App, mit denen Sie ansprechende und vollfunktionsfähige Anwendungen erstellen können – ohne Programmiercode oder teure Designprogramme:

  • Ihre Apps funktionieren sowohl auf iOS und Android als auch in Webbrowsern
  • Sie können leistungsstarke native Anwendungen mit Tausenden von Listeneinträgen und komplexen Berechnungen erstellen 
  • Zahlreiche Funktionen lassen sich integrieren, wie z. B. Berechnungen, Listen, Filterung, Kommentare, Aktions-Buttons, Drucken und gemeinsame Bearbeitung
  • Sie können auch Dashboards mit Auswertungen und Analysen aus Ihren Geschäftsdaten erstellen
  • Optimieren Sie die Navigation und die Menüs Ihrer Anwendungen 
  • Sie haben immer volle Kontrolle über die Sicherheitseinstellungen und Benutzerrechte 

Tipps zur benutzerfreundlichen Gestaltung in Open as App

Mit Open as App machen Sie sich die App-Erstellung einfach: Das No-Code-Portal kümmert sich um die komplexen technischen Fragen der App-Erstellung. Sie können so eine leistungsstarke Anwendung ohne jegliche Programmierung erstellen und nach Ihren Vorstellungen gestalten. Die Design-Vorlagen, die Sie verwenden können, sind gut durchdacht und benutzerfreundlich. Es gibt auch viel Raum für Kreativität und Experimentierfreude, da Sie fast alles an der zu erstellenden Anwendung verändern können. 

Die vorher erwähnten Praxistipps für das App-Design gelten uneingeschränkt für die Erstellung von mobilen No-Code-Apps mit Open as App. 

Setzen Sie auf Einfachheit, um die Benutzerfreundlichkeit Ihrer Anwendung zu gewährleisten. Die Designvorlagen, die Sie innerhalb der Plattform wählen können, halten sich an dieses Prinzip. Sie können diese Vorlagen auch als Grundlage für Ihr App-Design nutzen. 

Ein weiterer wichtiger Punkt ist das Farbschema. Wählen Sie eine oder zwei Farben aus und verwenden Sie diese einheitlich für die Menüs, Buttons und den Hintergrund Ihrer Anwendung. Denken Sie auch hier eher an die Benutzerfreundlichkeit als an ein auffälliges Aussehen, da der Inhalt und die Funktionalität der App wichtiger sind. Stellen Sie sicher, dass das Farbschema mit dem Branding Ihres Unternehmens übereinstimmt. 

Dasselbe gilt für Schriftart und Schriftgröße. Wählen Sie eine Schriftart und -größe, die gut lesbar ist, insbesondere für kurze Texte auf Buttons und für Links. Vermeiden Sie sowohl übermäßig große als auch winzige Schriftgrößen, da beide eher unleserlich sind, insbesondere auf einem Smartphone-Bildschirm. 

Open as App ermöglicht es Ihnen, Bilder hinzuzufügen, die Sie für den Hintergrund Ihrer App, für die Kopfzeile oder für Kartendesign bei Listen verwenden können. Seien Sie jedoch vorsichtig mit der Verwendung von Bildern, da sie den Benutzer gerne ablenken. Es ist oft besser, sich für einen einfachen Hintergrund und ein Logo für Ihre Kopfzeile zu entscheiden, als komplexe Grafiken zu wählen. Das Hinzufügen von Bildern zu Karten kann jedoch zur Benutzerfreundlichkeit beitragen, so dass es je nach Zweck Ihrer Anwendung geeignet sein kann. 

Und schließlich ist die Wahl der richtigen Höhe für die einzelnen App-Elemente von entscheidender Bedeutung, wenn es darum geht, wie sie auf verschiedenen Geräten angezeigt werden sollen. 

Open as App unterstützt drei Versionen von Höheneinstellungen, die Designer normalerweise verwenden. 

  1. Die erste ist ein Prozentsatz der Bildschirmgröße. Dann ist bei kleineren Bildschirmen ein Bildlauf (Scrolling) erforderlich, während bei größeren Bildschirmen der Hintergrund der App angezeigt wird, wenn nicht genügend Content vorhanden ist. 
  2. Die zweite Möglichkeit besteht darin, einen festen Wert in Pixeln festzulegen. Dann ist bei kleineren Bildschirmen ein Bildlauf erforderlich. Auf größeren Bildschirmen wird der Hintergrund dort angezeigt, wo der Inhalt endet, aber die Schriftarten können kleiner als beabsichtigt aussehen. 
  3. Die dritte Variante besteht darin, eine gewichtete Höhe zu verwenden, so dass die Anwendung immer auf einem Bildschirm angezeigt wird. Dann erhalten Sie ein gestrecktes Bild auf größeren Bildschirmen und eine minimierte Version auf kleineren Bildschirmen. 

Die Entscheidung, welche Variante verwendet wird, hängt davon ab, was innerhalb eines Bildschirms sichtbar sein soll und was der Benutzer als erstes sehen muss, wenn er die App öffnet. Im Open as App-Portal können Sie zwischen Smartphone-, Tablet- und Desktop-Ansicht wechseln. So können Sie vergleichen, wie Ihre App auf einem sehr kleinen Bildschirm (iPhone 5), auf einem großen Tablet-Bildschirm und auf einem Desktop aussieht. 

Gestaltungstipps für verschiedene App-Typen in Open as App

Es gibt eine Reihe von Vorlagen, die Sie zur Erstellung Ihrer App in Open as App verwenden können. Dazu gehören Listen-, Kalkulations- und Dashboard-Apps. Hier finden Sie einen Überblick über die wichtigsten Tipps für jede Art von App sowie über deren Kombination. 

Listen-Apps

Eine der gebräuchlichsten Arten von Apps, die Sie in Open as App erstellen können, sind eine Listen-App. Listenanwendungen sind eine hervorragende Möglichkeit, Ihre Geschäftsdaten in einem benutzerfreundlichen Format zu präsentieren, das auf Smartphones und Tablets optimal angezeigt und bearbeitet werden kann. 

Wie gestalten Sie Listen-Apps am besten? Hier sind top Funktionen, die Sie verwenden können, damit Ihre No-Code-App gut aussieht und auch gut funktioniert. 

List app-design
  • Sie können zwischen mehreren verschiedenen Listenansichten wählen. Wählen Sie zwischen Raster, Kartendesign oder eine Simple-Liste (immer mit Dialogmenüs) aus. 
  • Sie können Indikatoren für Zeilenumbrüche (graue horizontale Linien) verwenden, um Werte visuell zu trennen. Wichtig! Verwenden Sie einen ausreichend großen Zeilenabstand, um die Lesbarkeit zu verbessern. Im Idealfall sollte der Abstand etwa das Dreifache der Zeilenhöhe (Textgröße) der Liste betragen. 
  • Sie können auch die Anzahl der Spalten ändern, die auf einem einzigen Bildschirm angezeigt werden. 
  • Sie können zu jedem Listen-Eintrag Bilder hinzufügen. Dies ist z.B. besonders nützlich für Listen mit Kontakten von Leads und Kunden.  
  • Sie können auch ein Header-Bild hinzufügen, das die visuelle Signatur Ihrer App sein kann. Sie können dafür auch Ihr Firmenlogo verwenden.
  • Für Kartenlisten können Sie verschiedene Kategorien einrichten und diese mit Hilfe von Farbkodierung sortieren.
  • Es ist möglich, eine Karte mit Geodaten hinzuzufügen, die dann im Detailmenü angezeigt wird. 

Ein praktisches Beispiel für eine Listen-App ist die Getränke- und Cocktail-App. Für jeden Cocktail in der Liste können Sie das genaue Rezept, ein Foto des Cocktails und den Herstellungsprozess einsehen. 

Apps mit Kalkulationen

Ebenso beliebt in Open as App ist die Erstellung von Berechnungs-Apps. Mit ihr können Sie komplexe Formeln und Berechnungen aus Ihren Excel- und Google Sheets-Tabellen in intuitive Apps umwandeln. 

Hier sind die Design-Tipps für die Erstellung einer funktionalen Berechnungs-App: 

Calculation App-design
  • Achten Sie auf ‘form follows function‘. Das Design soll die Nutzer der Funktionen unterstützen.
  • Sie können für jede Berechnung einen Headertext hinzufügen. 
  • Sie können die Mindesthöhe der verschiedenen Elemente und Zwischenräume frei wählen. 
  • Sie können ein Info-Symbol mit Erläuterungen zu den Eingabefeldern der Berechnung hinzufügen. 
  • Sie können die Felder für die Dateneingabe (editierbar) und die resultierende Ausgabe durch Farbcodierung optisch unterscheiden. 
  • Sie können zwischen verschiedenen Diagrammtypen und Farben für die Darstellung Ihrer Berechnungen wählen. 
  • Sie können zwei bis vier Spalten erstellen, um Platz bei der Anzeige der App zu sparen.  
  • Sie können einem Button zum Drucken oder Speichern als PDF einrichten. 

Der Body-Mass-Index-Rechner ist ein gutes Beispiel für eine Berechnungs-App. Der Benutzer kann sein Gewicht und seine Größe eingeben. Die App berechnet automatisch seinen Body-Mass-Index, dass sich der Anwender mit komplexen Formeln auseinandersetzen muss. 

Dashboard-Apps

Dashboard-Apps werden häufig zur Anzeige von Diagrammen und Datenanalysen verwendet. Sie müssen lediglich Ihre Geschäftsdaten aus Tabellenkalkulationen oder Datenbanken eingeben. Ein guter Tipp: Entscheiden Sie gleich zu Anfang, welches das wichtigste Thema für die Dashboard-App ist und stellen Sie sicher, dass es deutlich sichtbar ist, wenn der Benutzer die App öffnet. 

Dann können Sie sie auf verschiedene Weise gestalten: 

Dashboard app design
  • Sie können Farben für die Diagramme wählen, die Ihrem Branding entsprechen. 
  • Sie können auch Ihre gebrandeten Visuals und Logos hinzufügen.
  • Eine Möglichkeit, die Informationen zu strukturieren, ist eine Inhaltsseite mit Buttons, die zu den verschiedenen Diagrammen und Analysen führen. 
  • Sie können den Diagrammtyp frei ändern – ohne dass sich die Anzeige im verknüpften Excel-Sheet ändert. 
  • Sie können die Diagrammlegende ein- und ausschalten.
  • Sie können auch die Datenbeschriftung ein- oder ausschalten.  
  • Sie können einen Vollbildmodus für die Diagramme einstellen. 

Ein schönes Beispiel für eine Dashboard-App ist die interaktive Dashboard Report App

Komplexe Apps mit mehreren App-Typen

Neben den drei beliebtesten App-Typen können Sie auch komplexere Apps erstellen und dabei die Elemente dieser Apps zu einer einzigen mischen. Das bedeutet, dass Sie Ihre Kreativität voll entfalten und so eine App erstellen können, die am besten zu Ihren Geschäftsprozessen und Bedürfnissen passt. 

Zu den möglichen Kombinationen, die Sie erstellen können, gehören 

  • Sie können eine App erstellen, die sowohl Listen als auch Berechnungen enthält. 
  • Sie können Berechnungen und Dashboards mischen. Sie erhalten interaktive Diagramme, die sich ändern, wenn Sie unterschiedliche Werte für die Berechnungen eingeben. 
  • Sie können Listen und Dashboards kombinieren. Dann können Sie Listen mit Diagrammen filtern.

In jeder der einzelnen Arten von Apps sowie in den Kombinationen können Sie Textelemente verwenden, um über Informationsfelder zusätzliche Erklärungen zu liefern.

Wenn Sie komplexe Apps erstellen, müssen Sie unbedingt auf die richtige Höhe der verschiedenen App-Elemente achten, die Sie hinzufügen. Wenn Sie ein einzelnes Element, z. B. eine Liste, haben, ist es das einzige, das angezeigt werden muss. Wenn Sie jedoch mehrere Elemente haben müssen, wird jedes Element auf eine Standardhöhe eingestellt. Wenn eine Liste dann länger als der Anzeigebereich ist, wird ein interner Bildlauf hinzugefügt. Alternativ können Sie den Listenbereich vergrößern oder ein anderes Seitenelement anlegen und die Liste dort anzeigen.

Ein gutes Beispiel für eine kombinierte App ist der CO2-Emissionsrechner

Erste Schritte mit automatischer App-Erstellung

Möchten Sie Ihre erste No-Code-Anwendung erstellen? Sie können noch heute mit dem App-Wizard mit Open as App starten. Dann können Sie die Tipps aus diesem Leitfaden für top App-Design anwenden, um Ihrer App den letzten Schliff zu geben und eine maximale Wirkung mit Ihrer App zu erzielen. 

Kategorie

Apps Bewährte Methode Eigenschaften Fallstudie Guide Presse Uncategorized Veranstaltungen Webinare

Beliebte Beiträge

Alexandra Müller

Werksabnahme per App – das müssen Sie wissen

Factory Acceptance Test per App

Alexandra Müller

Pflicht zur Arbeitszeiterfassung – Umsetzung mit smarten Apps

Arbeitszeiterfassung mit smarten Apps

Alexandra Müller

So können Sie Ihre Produktionsplanung mit Apps optimieren

Produktionsplanung mit Apps optimieren

Alexandra Müller

Projektmanagement: Wieso Sie nicht auf Checklisten verzichten können

Projektmanagement-Checkliste

Alexandra Müller

11 gute Gründe für eine Unternehmens-App

Young urban professional man using smart phone in office building indoors. Businessman holding mobile smartphone using app texting sms message wearing suit jacket and bag.

Alexandra Müller

Checkliste für Baustellensicherheit – mit einer smarten App zu mehr Sicherheit

Checkliste für Baustellensicherheit – mit einer smarten App zu mehr Sicherheit

Alexandra Müller

Wie hoch sind die Kosten für die Entwicklung einer App?

Wie hoch sind die Kosten für die Entwicklung einer App?

Alexandra Müller

Digitales Bautagebuch einfach erstellen

Digitales Bautagebuch mit Open as App erstellen

Alexandra Müller

CRM-Systeme mit Excel erstellen

CRM-Systeme mit Excel erstellen

Alexandra Müller

Wie Sie mit No-Code-Apps Geld verdienen können

make money with no-code apps

Alexandra Müller

Die 8 besten App-Baukästen

Mit einem App-Baukasten einfach eine App selbst erstellen

Alexandra Müller

Wie kann ich eine App erstellen?

App erstellen - so funktioniert es

Alexandra Müller

iFrame einbinden – das müssen Sie wissen

Embedding an iframe - step by step

Manfred Streit

Der Basis-Guide für No-Code-Apps

basis guide no-code apps

Angelika Methner

Self-Service App mit Google Sheets oder Excel – drei Strategien für Einsteiger

self service app

Angelika Methner

MWC und 4YFN Barcelona – der Hotspot für Innovation und Impact

MWC und 4YFN Barcelona

Angelika Methner

Michael Stoelwinder wird CEO von Open as App

Michael_Stoelwinder_OpenasApp

Angelika Methner

Neues Preismodell 2021

pricing

Angelika Methner

Selber Brot backen – mit dieser App geht es ganz einfach

home made bread

Angelika Methner

Immobilienvermarktung mit No-Code-Apps – so geht’s

Boost real estate agent performance

Borislav Kiprin

Open as App bringt Produktivitäts-Schub für nicht-technische Citizen Developer in Microsoft 365

microsoft

Angelika Methner

Industrie 4.0 trifft No-Code – mobile Apps für Industrie

man holding gray steel frame

Angelika Methner

Top App-Design: Tipps & Ideen für mobile Apps

person writing on white paper

Borislav Kiprin

5 schnelle Excel-Tricks für Unternehmen zum App-Erstellen

two person standing on gray tile paving

Angelika Methner

Schatten-IT und ihre Folgen für Unternehmen

shadow it

Angelika Methner

Wie Sie Ihr Beratungsgeschäft mit Apps ausbauen

consulting business

Borislav Kiprin

Business Apps mit Google Sheets erstellen

Create an app with Google Sheets

Angelika Methner

Geschäftsdaten in der Dropbox aufräumen & organisieren

Organize Dropbox for business

Angelika Methner

Vertriebskalkulations-Apps stärken Ihr Verkaufsteam

Empower your sales team with calculation apps

Angelika Methner

SQL zu App: Nutzen Sie Ihre Daten effizienter

SQL to app

Borislav Kiprin

7 individuelle Vertriebsapps für starke Leistung im Vertrieb

sales meeting with custom apps

Angelika Methner

Erstellen Sie eine Finanzplan-App basierend auf Ihrer Datei

Financial Plan App

Angelika Methner

Die 5 Vorteile, wenn Sie Cloud-Daten als App teilen

Sharing cloud data app

Angelika Methner

Wie Unternehmen Industrie-Prozesse optimieren können

Manufacturing apps

Angelika Methner

Listen-Apps fördern die Datenerfassung & den Informationsfluss

List Apps Boosts Data Collection and Information Exchange

Borislav Kiprin

Verbessern Sie die Nutzung von Microsoft-Tools

microsoft

Let’s keep in touch!

Newsletter-Girl
Factory Acceptance Test per App

Alexandra Müller

Werksabnahme per App – das müssen Sie wissen

Arbeitszeiterfassung mit smarten Apps

Alexandra Müller

Pflicht zur Arbeitszeiterfassung – Umsetzung mit smarten Apps

Produktionsplanung mit Apps optimieren

Alexandra Müller

So können Sie Ihre Produktionsplanung mit Apps optimieren

Projektmanagement-Checkliste

Alexandra Müller

Projektmanagement: Wieso Sie nicht auf Checklisten verzichten können

Young urban professional man using smart phone in office building indoors. Businessman holding mobile smartphone using app texting sms message wearing suit jacket and bag.

Alexandra Müller

11 gute Gründe für eine Unternehmens-App

Checkliste für Baustellensicherheit – mit einer smarten App zu mehr Sicherheit

Alexandra Müller

Checkliste für Baustellensicherheit – mit einer smarten App zu mehr Sicherheit

Wie hoch sind die Kosten für die Entwicklung einer App?

Alexandra Müller

Wie hoch sind die Kosten für die Entwicklung einer App?

Digitales Bautagebuch mit Open as App erstellen

Alexandra Müller

Digitales Bautagebuch einfach erstellen

CRM-Systeme mit Excel erstellen

Alexandra Müller

CRM-Systeme mit Excel erstellen