Die Erstellung einer mobilen App mit dem ON AIR App-Builder ist abgeschlossen. And it works exactly how you want, but something’s still missing. It doesn’t look nice as you had imagined it. In this article we won’t discuss the technical reasons for this. Da Sie kein professioneller Programmierer oder UI-UX-Designer sind, lassen Sie uns stattdessen einige grundlegende visuelle Designprinzipien durchgehen, um Ihre App zum Leben zu erwecken.
Bevor wir die Designprinzipien durchgehen, lassen Sie uns betrachten, was genau mit Ihrem Design schief läuft.
Warum funktioniert Ihr App-Design nicht?
Es gibt viele Artikel, die darüber sprechen, dass visuelles Design subjektiv ist, aber es gibt einige allgemeine Prinzipien, die die Bausteine für jedes effektive visuelle Design sein können.
- Hierarchie
- Konsistenz + Einfachheit
- Weißraum
- Farbton der Marke
Eine Hierarchie einrichten
Die visuelle Hierarchie gibt dem Benutzer vor, in welcher Reihenfolge er die Elemente auf einer Seite betrachten soll. Dies kann durch die Anordnung der Komponenten auf dem Bildschirm, die visuelle Gewichtung, die relative Größe und kontrastierende Farben erreicht werden. Ein gelungenes Layout balanciert diese Eigenschaften aus und kann dem Benutzer visuell zeigen, was er zuerst betrachten soll.
- Standort:In einigen Ländern lesen wir von links nach rechts und von oben nach unten. Dieser Trick kann Ihnen helfen, Ihre Elemente in einem Layout zu organisieren, indem Sie die wichtigsten Elemente oben links und die unwichtigsten oder letzten Elemente unten anordnen. Bei der Gestaltung der UX einer App können Sie diesen Trick auch berücksichtigen, wenn Sie Schaltflächen zum Vorwärts- und Rückwärtsgehen hinzufügen.
- Größe: Je größer, desto besser, oder? Nicht immer. Ein großes Element kann zwar auf ein wichtigeres Objekt hinweisen, es kann aber auch die Elemente auf einer Seite erdrücken, wenn es mit anderen Teilen Ihres visuellen Designs kollidiert.
- Gewichtung: Anstatt Komponenten größer zu machen, um ihre Bedeutung zu verdeutlichen, sollten Sie stattdessen ihr Gewicht verändern. Gewicht kann man erzeugen, indem man eine Schriftart fetter oder dunkler macht. Umgekehrt kann man die visuelle Bedeutung eines Untertitels durch Aufhellen der Schriftfarbe verringern. Oder verwenden Sie eine dünnere Schrift. Nicht alle Schriftarten müssen schwarz sein – verwenden Sie Farbtöne, um visuelles Gewicht zu erzeugen.
- Farbe: Die Helligkeit und Sättigung einer bestimmten Farbe kann die Aufmerksamkeit auf ein Objekt auf Ihrer Seite lenken. Rot weist oft auf Gefahr hin, Gelb auf eine Warnung und Grün auf Erfolg. Versuchen Sie daher, Ihre Seite zunächst ohne Farbe zu gestalten, um zu sehen, ob Ihre Hierarchie funktioniert, und fügen Sie dann später Farbe hinzu, um die visuelle Attraktivität zu erhöhen.
Konsistenz + Einfachheit
Eine fehlende App-Hierarchie kann dazu führen, dass sich eine App unübersichtlich anfühlt; ebenso kann der Mangel an Übersichtlichkeit und Konsistenz dazu führen, dass sich Ihre App unordentlich anfühlt. Schlechte Ausrichtung, zu viele Stile und niedrig aufgelöste Bilder sind die Top 3 Dinge, die zu einem unordentlichen App-Look beitragen.
Schlechte Ausrichtung: Haben Sie sich jemals diese Fotos von Gegenständen angesehen, die in einem Raster angeordnet sind? Sie wirken sehr befriedigend, nicht wahr? Das liegt daran, dass sich das menschliche Auge nach Ordnung und Mustern sehnt. Wenn wir Objekte in einer Reihe sehen, fühlen sie sich vollständig an. Sobald wir jedoch Dinge sehen, die nicht geordnet sind, rufen sie uns auf den Plan und lenken die Aufmerksamkeit auf das Chaos. Wir nutzen die Ausrichtung im Design, um Struktur auf einer Seite zu schaffen.
Zu viele Stilrichtungen: Denken Sie über den Stil wie über die Zusammenstellung eines passenden Outfits. Wenn zu viele Muster und Farben miteinander kollidieren, kann ein Outfit unordentlich aussehen. Das soll nicht heißen, dass kontrastierende Muster nicht möglich sind. In der Welt des Schnittstellendesigns bedeutet dies, dass man über die Eigenschaften der Komponenten nachdenken sollte und wie man sich an sie halten kann. Wenn Sie sich für einen Stil entschieden haben, versuchen Sie, dass sich alle Ihre Schaltflächen gleich anfühlen.
Bilder mit niedriger Auflösung: Früher, als die Monitore noch nicht so scharf waren, konnten wir mit Bildern mit niedriger Auflösung auskommen, weil fast alles im Internet mit 72 ppi nicht sehr scharf aussah. Mit der Verbesserung der Bildschirme und Monitore verbessern sich jedoch auch unsere Bilder. Das Apple-Retina-Display kann 226 ppi anzeigen und das neue Super-Retina-Display 458 ppi.
Weißraum
Ist der Abstand zwischen zwei Objekten zu groß und der Raum wirkt leer? All diese Gefühle, die wir in physischen Räumen bekommen, lassen sich auch sehr gut auf digitale Räume übertragen. Es wird ein System festgelegt, bei dem alle Abstände ein Vielfaches von 8 sind – kleine Elemente sind 8 px voneinander entfernt, mittlere Elemente können 16 px oder 32px sein, größere Zwischenräume und Ränder können 64px sein usw. Es ist gut, dieses System zu befolgen, denn wie bereits erwähnt, ist Konsistenz der Schlüssel zu einer sauberen Benutzeroberfläche.
Farbton der Marke
Um den Markenton einfach zu halten, sollten wir uns nicht mit den Feinheiten der Markenentwicklung befassen und uns stattdessen darauf konzentrieren, die App konsistent und sauber zu gestalten. Die beste Faustregel dafür ist:
- Definieren Sie eine kleine Gruppe von Grautönen für die Verwendung
- Definieren Sie 1 Primärfarbe
Wenn Sie alle oben genannten Punkte befolgen, sieht Ihre App gar nicht so übel aus. Wir gewinnen zwar keine Preise, aber sie ist klar, sauber und viel benutzerfreundlicher als die, mit der Sie angefangen haben!
4 Schlüssel zum Design einer großartigen mobilen App
Um mit der Entwicklung Ihrer perfekten App zu beginnen, besuchen Sie den ON AIR Appbuilder! Wir sind die No-Code-Entwicklungsplattform, mit der die Entwicklung nativer mobiler Apps einfach und unterhaltsam ist. Starte jetzt!
