• Haupt / Rat

Mobile App Design: Ein Leitfaden für Anfänger

Sie haben sich also für das Design mobiler Apps entschieden, sind sich aber nicht sicher, wo Sie anfangen sollen. Keine Sorge, wir haben Sie abgesichert. In diesem Artikel werden fünf Dinge beschrieben, die Sie wissen müssen, um den Einstieg in das Design mobiler Apps zu erleichtern.

Dieser Leitfaden richtet sich an Anfänger im Design mobiler Apps. Wenn Sie bereits über einige Fähigkeiten verfügen, werfen Sie einen Blick auf unsere Zusammenfassung der Tutorials, die Sie durch verschiedene Aspekte von führen wie man eine App macht , im Detail.

Was ist mobiles App-Design?

Um es ganz allgemein auszudrücken: App-Designer sind dafür verantwortlich, dass eine App gut aussieht, während Entwickler dafür sorgen, dass sie richtig funktioniert. Das Design mobiler Apps umfasst sowohl die Benutzeroberfläche (UI) als auch die Benutzererfahrung (UX). Designer sind für den Gesamtstil der App verantwortlich, einschließlich des Farbschemas, der Schriftauswahl und der Arten von Schaltflächen und Widgets, die der Benutzer verwenden wird. Also, wo fängst du an? Am Anfang.

Für welche Plattform soll ich entwerfen?

Abhängig von Ihren Gründen für das Entwerfen mobiler Apps wissen Sie möglicherweise bereits, mit welcher Plattform Sie arbeiten möchten und warum. Aber wenn Sie gerade erst anfangen und nicht sicher sind, welches für Sie das Richtige ist, dann entscheiden Sie sich für das, mit dem Sie am besten vertraut sind.

Wenn Sie ein Android-Telefon verwenden, entwerfen Sie für Android. Wenn Sie ein iOS-Gerät verwenden, starten Sie dort. Alternativ können Sie sich für ein Design für beide entscheiden, aber es ist am besten, nicht mehr abzubeißen, als Sie kauen können - zumindest nicht am Anfang.

Welche Tools soll ich verwenden?

Sobald Sie wissen, für welche Plattform Sie entwerfen, müssen Sie im nächsten Schritt die richtige auswählen Webdesign-Tools um die Arbeit zu erledigen. Die gute Nachricht beim Entwerfen mobiler Apps ist, dass Sie unabhängig von der Plattform im Allgemeinen dieselben Tools für beide verwenden können.

Beliebte Optionen für das App-Design sind Adobe Photoshop, Adobe XD und Sketch. Es gibt viele, viele mehr, aber das sind die Schlagmänner in der Branche. Melden Sie sich hier für die Adobe Creative Cloud an .

Sie denken vielleicht, dass Photoshop die beste Option für das Design mobiler Apps ist - insbesondere, wenn Sie es für andere Arten von Designarbeiten verwendet haben. Wenn Sie jedoch mobile Apps entwerfen, sind Sie mit Adobe XD oder Sketch besser dran. Trotzdem wird Sketch hier als De-facto-Standard angesehen, obwohl Adobe XD in einem starken Wettbewerb steht kürzlich hinzugefügte Designsysteme .

Einer der Hauptgründe für die Verwendung von Adobe XD oder Sketch über Photoshop ist, dass diese beiden Tools für Design und Prototyping entwickelt wurden. Sie helfen bei der Optimierung Ihrer Design-Workflows und richten sich an UI- und UX-Designer, während Photoshop eher für die Bildbearbeitung gedacht ist.

Ein wichtiger Hinweis hier: Wenn Sie eine plattformübergreifende Entwicklung oder Unterstützung planen, ist Adobe XD hier der klare Gewinner, da Sketch nur unter macOS verfügbar ist.

Richtlinien für das OS-Design

Bevor Sie mit dem Entwerfen beginnen, müssen Sie zunächst die Vor- und Nachteile Ihrer Plattform verstehen. Im Allgemeinen weist das Design mobiler Apps einige Ähnlichkeiten zwischen den verschiedenen Betriebssystemen auf, z.

• Zielorientiertes Design
• Halte es einfach (weniger ist mehr)
• Halten Sie den Fluss aufrecht
• Lesbarkeit ist der Schlüssel
• Respektieren Sie die Plattform

Das letzte, 'Respektiere die Plattform', ist wichtiger als Sie vielleicht denken. Wenn Benutzer eine App herunterladen und auf ihr Gerät installieren, erwarten sie, dass sie sich auf eine Weise verhält, die ihnen vertraut und intuitiv ist. Sie stützen ihre Meinung auf das, was sie wissen. Wenn eine App gegen 90 Prozent der betriebssystemspezifischen Entwurfsregeln verstößt, werden sie wahrscheinlich von Benutzern gelöscht.

Sie müssen nicht nur die unterschiedlichen Navigationsmuster von iOS und Android berücksichtigen, sondern auch über Schaltflächen, Schriftartenauswahl und Platzierung von UI-Objekten nachdenken, die je nach Plattform unterschiedlich sind.

Die gute Nachricht ist, dass Sie nicht raten müssen, was akzeptabel ist. Sowohl Apple als auch Android verfügen über eine Reihe von Designrichtlinien, die Sie überprüfen können, bevor Sie beginnen (und während Sie aktiv entwerfen):

• Richtlinien für die Benutzeroberfläche von iOS
• Android-Designrichtlinien

Wireframes und App-Flow

Bevor Sie das Erscheinungsbild einer App entwerfen, müssen Sie unbedingt an deren Flusskontrolle und -struktur arbeiten. Hier kommen Wireframes ins Spiel. Mithilfe von Wireframes können Sie verstehen, wie Benutzer eine App navigieren und verwenden. Sie sind im Allgemeinen in ihrem Design vereinfacht, sodass der Fokus auf Fluss und Benutzerfreundlichkeit liegt.

Zwar gibt es viele engagierte Drahtgitterwerkzeuge Es ist nicht ungewöhnlich, dass Designer einfach Stift und Papier verwenden. Wenn Sie jedoch nach mehr High-Tech und Zusammenarbeit suchen (was besonders wichtig ist, wenn Sie mit einem Remote-Team arbeiten), sollten Sie Ihre Drahtmodelle in Sketch oder Adobe XD erstellen. Der Vorteil der Verwendung dieser Tools für das Wireframing besteht darin, dass Sie Ihre Low-Fidelity-Wireframes relativ einfach in High-Fidelity-Vorschauen umwandeln können.

Hinweis: Mit Adobe XD Sie können sich sogar einige kostenlose Kits schnappen, um den Einstieg zu erleichtern.

Modelle und Prototypen

Sobald Sie Ihre Wireframes durchgearbeitet und sie dem Entwicklungsteam und / oder Ihrem Kunden zur Diskussion und Genehmigung zur Verfügung gestellt haben, ist es Zeit, einige Modelle und Prototypen zu erstellen.

Dieser Schritt ist im Allgemeinen einfacher, wenn Sie dasselbe Design-Tool verwendet haben, um sowohl Ihre Wireframes als auch Ihr Design für mobile Apps zu erstellen. Wenn Sie dies nicht getan haben, dauert es möglicherweise etwas länger, bis Sie Ihr Design-Tool aufgefüllt haben. Sobald Sie dies getan haben, sind Sie auf einem guten Weg. Viele Tools, einschließlich UXPin (das in Sketch integriert ist), bieten Möglichkeiten, Ihre Wireframes mit den detaillierten Informationen zu versehen, die von Entwicklern benötigt werden, um Rätselraten zu vermeiden.

Während Sie am Design der App arbeiten, ist ein guter Zeitpunkt, um mit dem Aufbau einer gemeinsam genutzten Bibliothek von Assets zu beginnen. Beispielsweise können sich Standardschaltflächen, -symbole und andere Elemente, die Sie hier erstellen, in anderen von Ihnen entworfenen Apps als nützlich erweisen. Speichern Sie sie daher unbedingt.

Weitere Informationen zu diesem Schritt finden Sie in unserem Artikel: 4 verschiedene Möglichkeiten zum Erstellen von Website- und App-Modellen .

Übergabe an die Entwicklung

Designer sind auch dafür verantwortlich, diese Elemente und visuellen Elemente dem Entwickler bereitzustellen. Dinge wie Symbole, Hintergründe, Logos und sogar Schriftarten sind alles Dinge, die ein Designer an einen Entwickler weitergeben kann.

Sobald der Entwickler alles hat, was er braucht, ist es seine Aufgabe, dieses Design - und seine verschiedenen Teile - zu übernehmen und es zum Laufen zu bringen. Manchmal versteht ein Designer jedoch nicht die Einschränkungen, mit denen ein Entwickler konfrontiert ist. Und wenn das passiert, bricht die Hölle los.

Als Designer für mobile Apps sind Sie könnten Ignorieren Sie den Entwickler und den Entwicklungsprozess insgesamt, aber es ist besser, die Herausforderungen zu verstehen, denen sich ein Entwickler gegenübersieht, sei es mit den von ihm verwendeten Tools oder den Einschränkungen des Betriebssystems und / oder der Geräte, auf denen Ihre Apps ausgeführt werden. Mit diesem Wissen können Sie mobile Apps effizienter gestalten, ohne dass Ihr Entwickler sie zurückdrängen muss, und gleichzeitig eine kollaborativere Umgebung fördern.

Weiterlesen:

• So erstellen Sie eine App mit Vue.js.
• Machen Sie sich mit dem Onboarding von mobilen Apps vertraut
• Top Sketch Plugins zum Ausprobieren