Hier ist die Situation: Sie sind ein Entwickler und haben alle notwendigen Werkzeuge, um eine tolle App zu programmieren. Aber beim Design hapert es ein wenig. Wie können Sie eine mobile Anwendung entwerfen, die Ihr inneres Genie widerspiegelt, ohne die branchenüblichen Design-Tools wie Adobe Photoshop zu beherrschen? Wie erstellen Sie eine App, die sowohl visuell beeindruckend als auch für die Benutzer einfach zu bedienen ist?

Keine Sorge, es gibt gute Nachrichten. Du hast vielleicht nicht viel (oder gar keine) Erfahrung mit UX/Design, aber du brauchst sie auch nicht unbedingt, um ein visuell beeindruckendes Endprojekt zu erstellen. Diese Lösungen helfen Ihnen dabei, eine mobile App zu entwerfen – und jede einzelne erfüllt dieses Versprechen, ohne dass Sie dafür einen Cent bezahlen müssen.

Wie man eine mobile App entwirft

Wireframing beinhaltet die Erstellung eines Minimalprodukts, das im Wesentlichen das Skelett für das Design Ihrer App darstellt. Wenn Sie Ihre App mit einem Startup vergleichen, könnten Sie diese Entwurfsphase als das minimal lebensfähige Produkt bezeichnen (ein Konzept, das durch das Buch „The Lean Startup“ populär gemacht wurde).

Wireframing ist eine wichtige Phase bei der Entwicklung einer mobilen App, da es Ihnen erlaubt, die Struktur getrennt von den endgültigen Designelementen zu betrachten. Es ermöglicht Ihnen auch, Ihr Konzept allen relevanten Parteien – Mitarbeitern, Designern oder Investoren – effektiv zu vermitteln, ohne dass Sie persönlich über Design-Erfahrung verfügen müssen, um diese Ideen präzise auszudrücken.

Die folgenden Werkzeuge können bei diesem wichtigen grundlegenden Schritt des Designs einer mobilen App hilfreich sein.

Stift und Papier

Für diejenigen, die wirklich keinen Cent ausgeben wollen, ist der gute alte, zuverlässige Stift und Papier das Mittel der Wahl, um Ihre ersten App-Ideen als Rohentwurf für Ihr Design zu skizzieren. Manche ziehen es vor, direkt mit Photoshop oder einem Prototyping-Tool zu arbeiten, aber diese Methode ist ideal, um Ideen schnell festzuhalten, während sie entstehen. Ein zusätzlicher Bonus ist, dass Sie keine spezielle Ausbildung oder Tool-Kenntnisse benötigen, um das Beste aus dieser Wireframing-Methode herauszuholen.

Android- und/oder iOS-Skizzenpapier

Für diejenigen, die herausfinden möchten, wie man eine mobile App entwirft, gibt es ein spezielles Wireframing-Tool, das speziell auf Sie zugeschnitten ist. Zum günstigen Preis können Sie Punktrasterpapiere herunterladen, auf denen iPhones und iPads aufgedruckt sind. Dies ist die ideale Designlösung für Entwickler, die eine bessere Darstellung benötigen, als sie mit Stift und Papier möglich ist. Dieses iOS-Skizzenpapier ist auch ideal für das Storyboarding oder um die verschiedenen Zustände zu zeigen, wie Ihre App im Einsatz aussehen wird.

Dieses iOS-Skizzenpapier enthält Rasterlinien für alle Standard-UI-Elemente auf den oben genannten iOS-Geräten. Bei der Android-Version dieses Skizzenpapiers sind 8 Telefonmodelle aufgedruckt. Im Gegensatz zum iOS-Papier (das ein Punktraster hat) hat dieses Papier jedoch überhaupt keine Linien.

MockFlow

Wenn Sie nach einem etwas technischeren Tool für das Wireframing Ihrer mobilen App suchen, sollten Sie MockFlow in Betracht ziehen. Mockflow ist eine Online-Lösung für das Wireframing, mit der sich jede Art von Designprojekt bearbeiten lässt – egal, ob es sich um eine mobile oder eine Web-App handelt (oder etwas ganz anderes). Es gibt eine kostenlose Basisversion, mit der Sie jeweils an einem Projekt arbeiten können, bis zu 1 GB Speicherplatz und zwei Teammitglieder. Sie können zusätzliche Funktionen (mehr Projekte, Speicherplatz und Teammitglieder) freischalten, wenn Sie auf einen kostenpflichtigen Plan upgraden, der bei $14/Monat beginnt.

WireframeApp ist eine weitere Web-App-basierte Wireframing-Option, ähnlich wie MockFlow. Alle Pläne sind kostenpflichtig, aber Sie können oft ein erschwingliches Lifetime-Angebot (unter 49 $ insgesamt) finden, indem Sie sich für ihren E-Mail-Newsletter oder AppSumo anmelden.

Prototyping

Prototyping ist der nächste Schritt für das Design einer mobilen App, sobald Sie das Wireframing abgeschlossen haben. In dieser Phase geht es darum, eine praktikable Version des Entwurfs zu erstellen, die dem endgültigen Projekt ähnelt, das Sie sich vorstellen.

Die folgenden Tools eignen sich hervorragend, um eine mobile App zu entwerfen, ohne einen Cent zu bezahlen, da sie alle zu 100 % kostenlos sind!

Marvel

Marvel ist eine Webanwendung, die auch für iOS und Android verfügbar ist. Neben der Möglichkeit, auf dem Gerät zu entwerfen, mit dem Sie am besten zurechtkommen, macht es dieses Tool einfach, Ihre Skizzen in praktikable Prototypen zu verwandeln. Neben der Möglichkeit, grundlegende Designelemente hinzuzufügen, können Sie auch Entwürfe miteinander verknüpfen, um einen Fluss zu schaffen. Mit Marvel können Sie interaktive Hotspots und realistische Übergänge erstellen, und Sie können Aktionen wie Hovern, Klicken, Streichen, Auf- und Zuziehen und mehr auswählen. Dank zahlreicher Integrationen von Drittanbietern kann Marvel mit vielen anderen Tools, die Sie bereits verwenden, und den Mitarbeitern in Ihrem Team zusammenarbeiten.

InVision

InVision ist ähnlich wie Marvel ein kostenloses Tool für Web- und Mobilprototyping. Es ist ein perfektes Prototyping-Tool für Teams, dank der Funktionen, die eine einfache Kommentierung und Zusammenarbeit ermöglichen. Was es von vielen ähnlichen Tools abhebt, ist die Versionskontrolle, mit der Sie Ihre Änderungen bei Bedarf auf eine frühere Version zurücksetzen können.

InVision wird von innovativen Unternehmen wie Adobe, Zappos, AT&T, Dell und Sony sowie von schnell wachsenden Start-ups wie Prezi, Soundcloud und Evernote verwendet. Die Verwendung von InVision garantiert Ihnen zwar nicht deren Erfolg, aber die Vorteile einer Zusammenarbeit sind nicht von der Hand zu weisen!

Axure

Um Ihre Optionen für das Design einer mobilen App abzurunden, ohne einen Cent zu bezahlen, haben wir hier eine Option, die bei langfristiger Nutzung kostenpflichtig ist, aber während einer 30-tägigen Testphase völlig kostenlos genutzt werden kann. Axure ermöglicht ein einfaches App-Prototyping dank hochfunktionaler Designs (ähnlich wie die Übergänge bei Marvel). Wie die anderen Optionen in diesem Artikel bietet auch dieses Tool Funktionen für eine einfache Zusammenarbeit im Team.

Proto.io

Proto.io bewirbt sich selbst als ein Tool, mit dem Sie „Prototypen erstellen können, die sich real anfühlen.“ Für einen Entwickler einer mobilen Anwendung, der einen realistischen und funktionalen Prototyp erstellen möchte, ist das vielleicht Musik in den Ohren. Das Tool bietet Benutzern mehrere UI-Bibliotheken, Integrationen mit Drittanbietern (mit Partnern wie Dropbox) und sogar Benutzertests, um sicherzustellen, dass die Benutzererfahrung beim Start nahtlos ist. Mit einer kostenlosen Testversion haben Sie 15 Tage lang Zugriff auf begrenzte Funktionen, oder Sie haben die Möglichkeit, ein Upgrade auf ein voll funktionsfähiges Konto mit mehreren Projekten und Funktionen ab 24 $/Monat zu erwerben.

Wenn Sie das perfekte Wireframing- oder Prototyping-Tool noch nicht gefunden haben, finden Sie bei Developer Drive einige weitere allgemeine Optionen, die Sie in Betracht ziehen sollten.

Wenn dies natürlich das Ausmaß Ihres Interesses und Ihrer Fähigkeiten in Sachen App-Design ist, müssen Sie jemanden bezahlen, der Ihr einfaches Wireframe oder Ihren Prototyp auf die nächste Stufe hebt. Aber wenn Sie mit einem grundlegenden Plan kommen, können Sie im Vorfeld Zeit und Geld sparen. Je besser Sie einem Designer Ihre Vision vermitteln können, desto einfacher wird es sein, sie zu verwirklichen, und desto weniger Geld werden Sie für Designversionen verschwenden, die nicht mit Ihrer Vision übereinstimmen.

Visuelles Design

Ob Sie nun nach einer Anleitung suchen, wie man eine App für das iPhone oder eine Android-App entwirft, diese kostenlosen Tools können Ihnen dabei helfen, das perfekte Design für beide mobilen Betriebssysteme zu finden.

Manchmal kann ein wenig Inspiration helfen, eine kreative Blockade zu beseitigen, und wenn man sich in einem Design-Tutorial verliert, kann man herausfinden, wie man das Projekt ganz alleine fertigstellen kann.

Laudable Apps

Laudable Apps ist eine kostenlose Website/App-Galerie, die sich speziell darauf konzentriert, schöne iOS 7 Designs zu präsentieren. Es gibt keinen Text oder andere Ablenkungen, sondern nur Designs, die ohne Kommentare präsentiert werden.

Wenn Sie gerade über iOS nachdenken, sollten Sie sich auch die Zeit nehmen, die strengen Einreichungsrichtlinien des Apple App Store zu lesen. Da es dort keine Ausnahmen gibt, sollten Sie diese Richtlinien im Hinterkopf behalten, wenn Sie entscheiden, wie Sie eine mobile App entwerfen wollen. So können Sie beim ersten Mal alles richtig machen und langfristig Zeit und Geld sparen.

Android-Muster

Ob Sie nun ausschließlich für ein Android-Gerät entwerfen oder zwei Versionen Ihrer mobilen App erstellen (eine davon für den Apple App Store), Sie sollten sich mit den Vor- und Nachteilen des Designs für ein Android-Gerät vertraut machen. Es wird Sie vielleicht überraschen, dass sich die Designstandards für iOS-Apps deutlich von denen für Android-Geräte unterscheiden (und deutlich weniger streng sind). Es kann hilfreich sein, die Einreichungsunterlagen des Google Play Store durchzulesen, z. B. diese Start-Checkliste.

Sie können auch Android Patterns als Crash-Kurs in Android-Design verwenden. Diese Website ist eine Bibliothek von Android-Interaktionsmustern, die Sie bei der Erstellung Ihres Designs verwenden können. Die Interaktionsmuster sind nach App-Typ geordnet und umfassen Aktionen wie Navigation, Benachrichtigungen und Bildschirminteraktionen. Während diese Muster für einen neuen Designer einer mobilen App hilfreich sein können, sollten sie als Leitfaden, aber nicht als absolute Regeln angesehen werden.

Icons

Wenn Sie Ihren visuellen Elementen eine gewisse Dimension verleihen, kann dies dazu beitragen, dass Ihr Prototyp der endgültigen Ausgabe so nahe wie möglich kommt. Icons8 bietet eine Bibliothek mit über 53.800 Icons, die Sie völlig kostenlos nutzen können. Zusätzlich zu dieser gigantischen kostenlosen Ressource sollten Sie sich auch diese Tools für das Design von Benutzeroberflächen ansehen, um verschiedene Möglichkeiten für die Suche und Verwendung von Icons zu finden, wenn Sie überlegen, wie Sie eine mobile App entwerfen wollen.

Adobe Kuler

Adobe bietet viele Ressourcen für diejenigen, die eine mobile App entwerfen wollen, vom Anfänger bis zum fortgeschrittenen Designer. Kuler hilft Designern und Nicht-Designern gleichermaßen bei der Auswahl von Farbschemata auf der Grundlage des Farbkreises und verschiedener Farbregeln: monochromatisch, komplementär, Dreiklang usw. Sie können ein Farbschema anhand eines Bildes erstellen oder sich von den Farbschemata anderer Designer inspirieren lassen.

Mobile Design Inspiration

Laut CSSWinner ist Mobile Design Inspiration die dichteste Inspirationsgalerie für das Design mobiler Apps, mit Design-Inspirationen für iPhone, Android, Apple Watch und iPad, die speziell nach diesen Kategorien geordnet sind. Wöchentlich werden neue Designs hinzugefügt, und der Abschnitt „Creative Fields“ kann zusätzliche Inspiration bieten, wenn Sie auch an einem App-Logo arbeiten.

Tuts+

Wenn Sie wirklich wissen wollen, wie man eine mobile App gestaltet, ohne einen Cent zu bezahlen, sollten Sie in Erwägung ziehen, Ihre Zeit in die Aneignung neuer Fähigkeiten zu investieren. Wenn Sie lernen, wie Sie Ihre eigene App entwerfen, anstatt jemanden damit zu beauftragen, können Sie Geld sparen UND sich wertvolle Fähigkeiten aneignen, die Sie später zu Geld machen können.

Es gibt mehrere Websites, die ausgezeichnete Online-Kurse im Bereich Design anbieten (Treehouse ist eine großartige, kostenpflichtige Ressource), aber Tuts+ bietet eine Menge fundiertes Wissen, und das völlig kostenlos, ohne Abstriche bei der Qualität. Neben hilfreichen Artikeln gibt es dort auch zusätzliche umfangreiche Ressourcen zum Thema Design, z. B. Ebooks.

Wie man eine mobile App entwirft, ohne einen Cent zu bezahlen

Sie müssen wirklich keinen Designer beauftragen, um Ihre mobile App zu entwerfen, vor allem nicht in den frühen Phasen des Wireframing und Prototyping. Nehmen Sie sich etwas Zeit, um Ihre App auf einer grundlegenden Ebene so zu gestalten, dass sie Ihren Vorstellungen entspricht. Selbst wenn Sie dann einen Designer beauftragen, wird das Projekt nicht so tiefgreifend (und teuer) sein.

Mit diesen Design-Tools für mobile Apps können Sie selbst herausfinden, wie Sie eine mobile App gestalten können, und sich dabei einige neue Fähigkeiten aneignen. Stellen Sie sich die Einstellungsmöglichkeiten für eine Person vor, die ihre Fähigkeiten sowohl bei der Gestaltung als auch bei der Entwicklung einer App unter Beweis stellen kann!

Welche Tipps oder Tools würden Sie dieser Liste hinzufügen, um eine mobile App zu gestalten, ohne einen Cent zu bezahlen? Wir würden uns freuen, Ihre Gedanken zu hören! Twittern Sie Ihre Erkenntnisse an @icons8, und wir werden unsere Favoriten teilen.

Über die Autorin
Maddy Osman liebt WordPress und das Schreiben. Wenn sie nicht gerade damit beschäftigt ist, das WordCamp Denver zu organisieren, teilt sie ihre besten Content-Marketing/SEO-Tipps auf ihrem Blog www.the-blogsmith.com. Halten Sie sich über ihre neuesten Artikel im Web auf Twitter auf dem Laufenden: MaddyOsman.