Anzeige
Anzeige
UX & Design

iOS-Prototyping: Tools und Tutorials für den Einstieg in die App-Entwicklung

Vor dem Programmieren der eigenen App für iOS sollte man diese in der Regel mit Mockups visualisieren. Das hilft nicht nur dem Entwickler, sondern auch potenziellen Auftraggebern. Auch ein interaktiver Prototyp kann in der Anfangsphase nicht schaden. Zum Thema iOS-Prototyping gibt es viele nützliche Tools und Tutorials, von denen wir euch einige kurz vorstellen.

Von Sébastien Bonset
7 Min.
Artikel merken
Anzeige
Anzeige

Voraussetzungen für iOS-Prototyping

Der Vorteil am Einsatz eines Prototyping-Tools besteht generell in der Tatsache, dass man auf diese Weise geplante Features und Interaktionen für die eigene App vorab visualisieren kann. Das erleichtert die Planung und damit auch die folgende Programmier-Arbeit ungemein. Entwickler, die bisher noch nicht auf iOS-Prototyping setzen, sollten ein Tool auswählen, das sich schnell erlernen lässt – je schneller man nämlich Mockups der geplanten App erstellen kann, desto schneller kann man auch mit der eigentlichen Entwicklung loslegen.

Mit Storyboards hat man bereits direkt in Xcode die Möglichkeit, Prototypen zu erstellen. (Screenshot: Apple Developer Website)

Mit Storyboards hat man bereits direkt in Xcode die Möglichkeit, Prototypen zu erstellen. (Screenshot: Apple Developer Website)

Anzeige
Anzeige

Prototyping-Tools gibt es sowohl als App als auch als Desktop-Software oder Online-Dienst. Viele dieser Helfer sind kostenlos oder zumindest kostengünstig erhältlich. Bei der Auswahl des entsprechenden Werkzeugs sollten iOS-Entwickler darauf achten, dass dieses Stencils, Screen-Elemente und Objekte beinhaltet, die auf iOS abgestimmt sind. Das ist zwar kein Muss, aber man kann sich die eigene App leichter vorstellen, wenn die Mockups möglichst nah am Design der Plattform sind, für die man entwickelt.

Offizielles iOS-Prototyping mit Storyboard in Xcode

Seit Version 4.2 und dem iOS-5-SDK bietet Xcode mit Storyboard ein neues Feature, mit dem man einen Prototyp seiner App erstellen kann. Storyboards erleichtern das Gestalten des Interface immens. Mussten Entwickler zuvor auf .xib-Dateien für das Interface zurück greifen, benötigt man beim Einsatz von Storyboard lediglich eine einzige Datei für die Gestaltung des kompletten Interface.

Anzeige
Anzeige

Eine Sammlung von Tutorials rund um Xcode Storyboard inklusive iOS-Prototyping findet sich beispielsweise auf ManiacDev. Ein umfangreiches deutschsprachiges Grundlagen-Tutorial zu Storyboard bietet iOsDevGermany.

Anzeige
Anzeige

Blueprint

(Screenshot: Blueprint)

Blueprint ermöglicht iOS-Prototyping direkt auf dem iPad. (Screenshot: Blueprint)

Blueprint ist nur für das iPad erhältlich und kostet rund 18 Euro – eine kostenlose Lite-Version findet sich aber ebenfalls im App Store. Das Interface von Blueprint erinnert stark an Apple iWork. Wer die entsprechenden Apps also nutzt, dürfte sich schnell zurecht finden. Innerhalb der App lassen sich Projekte sowohl für iPad als auch iPhone anlegen – horizontal wie auch vertikal ausgerichtet. Alles in allem macht Blueprint einen sehr guten Eindruck und bietet alle für das Erstellen eines Prototyp nötigen Funktionen.

Groosoft, der Anbieter von Blueprint, hat auf seiner Website eine ganze Reihe an nützlichen Tutorials für die iPad-App zusammengestellt.

Anzeige
Anzeige

Briefs

Die Mac-App Briefs ist eine der teureren Varianten für iOS-Prototyping. (Screenshot: Giveabrief)

Die Mac-App Briefs ist eine der teureren Varianten für iOS-Prototyping. (Screenshot: Giveabrief)

Briefs ist als App für den Mac erhältlich, mit rund 180 Euro jedoch alles andere als günstig. Dieses Tool für iOS-Prototyping richtet sich damit auch eher an professionelle Entwickler, die Live-Prototypen erstellen und testen wollen. Mit Hilfe einer entsprechenden iOS-App lassen sich Prototypen auch direkt auf iPhone und iPad testen. Briefs ist überaus mächtig, aber daher auch nicht so leicht zu erlernen. Wer einen ersten Einstieg in iOS-Prototyping sucht, sollte daher eher eine der anderen hier vorgestellten Lösungen wählen.

Wer sich einen Überblick zu Briefs verschaffen will, kann dies beispielsweise mit einem circa 15-minütigen Video-Walkthrough.

Flinto

Bei Flinto handelt es sich um eine Web-App. (Screenshot: Flinto)

Bei Flinto handelt es sich um eine Web-App. (Screenshot: Flinto)

Flinto ist eine nützliche Web-App für iOS-Prototyping, mit der sich statische Bilder miteinander verbinden lassen. Dabei lassen sich sowohl erste Entwürfe als auch fertige Layouts verwenden. Das Tool bietet unter anderem visuell ansprechende Transitions und findet eine ausgewogene Mischung aus schnellem Prototyping und Realismus. Die Mockups laufen auch auf iPhone und iPad, und Flinto kann 30 Tage kostenlose getestet werden. Danach werden zehn US-Dollar pro Monat fällig. Weitere Informationen finden sich in einem entsprechenden Artikel auf t3n.de.

Anzeige
Anzeige

Ein übersichtliches Tutorial zu iOS-Prototyping mit dem webbasierten Flinto findet sich auf Meng To. Dieser Artikel richtet sich als Feature-Überblick explizit an Einsteiger.

Fluid UI

Fluid UI ist nicht auf iOS beschränkt. (Screenshot: Fluid UI)

Fluid UI ist nicht auf iOS beschränkt. (Screenshot: Fluid UI)

Fluid UI eignet sich nicht nur für iOS-Entwickler, sondern auch für Android-Developer. Das Tool beinhaltet unter anderem Widget-Sets und ermöglicht dem Nutzer darüber hinaus, eigene Bilder hochzuladen. Außerdem kann man seine Prototypen mit Touch-Gesten und animierten Transitions versehen. Mit Hilfe von QR-Codes lassen sich die Designs auch auf entsprechenden Endgeräten testen.

Eine Sammlung von Demos und Tutorials zu Fluid UI findet sich auf der Website des Anbieters.

Anzeige
Anzeige

Framer.js

(Screenshot: Framer.js)

(Screenshot: Framer.js)

Framer.js eignet sich besonders für Designer, die mit PSD-Dateien arbeiten. Das Tool vereinfacht es, klickbare Prototypen mit JavaScript zu erstellen. Der integrierte PDS-Exporter arbeitet nämlich automatisch und zuverlässig. Der größte Nachteil an Frame besteht in der Tatsache, dass man nur jeweils an einer Ansicht arbeiten kann.

Ein kurzes Video auf Vimeo verdeutlicht die Frame-Integration in Photoshop.

InVision

InVision ermöglicht Entwicklern das Erstellen von interaktiven Wireframes und Prototypen. Das Tool bietet eine ganze Menge nützlicher Funktionen und eignet sich sowohl für Wireframes und Sketches als auch für ausgewachsene Design. Besonders überzeugend sind die Möglichkeiten zur kollaborativen Bearbeitung von Projekten. Der Dienst kann in vollem Funktionsumfang für 30 Tage kostenlos getestet werden. Danach richten sich die Kosten nach der Anzahl aktiver Projekte. Das kleinste Bundle für drei aktive Projekte kostet acht US-Dollar im Monat.

Anzeige
Anzeige

Wer sich ein Bild davon machen möchte, wie InVision in Aktion aussieht, erhält in folgendem Video einen guten Überblick:

Keynotopia

Keynotopia bietet eine Reihe von kostenpflichtigen Templates für das Prototyping mit Präsentationssoftware. (Screenshot: Keynotopia)

Keynotopia bietet eine Reihe von kostenpflichtigen Templates für das Prototyping mit Präsentationssoftware. (Screenshot: Keynotopia)

Bei Keynotopia handelt es sich weder um einen Dienst noch um ein Tool. Vielmehr ist Keynotopia eine Sammlung von kostenpflichtigen Templates, die sich mit OpenOffice, Keynote oder PowerPoint nutzen lassen, um die entsprechende Präsentationssoftware in ein Prototyping-Tool zu verwandeln.

Anzeige
Anzeige

Ein Guide auf der Seite des Anbieters zeigt Schritt für Schritt, wie man mit Hilfe von Keynote interaktive Prototypen erstellen kann.

Simples und geniales iOS-Prototyping mit Pop

Entwürfe auf Papier erstellen, fotografieren und mit der App Pop miteinander zu einem interaktiven Prototypen verknüpfen – simpel und elegant. (Screenshot: Popapp)

Entwürfe auf Papier erstellen, fotografieren und mit der App Pop miteinander zu einem interaktiven Prototypen verknüpfen – simpel und elegant. (Screenshot: Popapp)

Pop steht für Prototyping on Paper und es handelt sich dabei um eine kostenlose App für das iPhone. Die Idee hinter Pop? Stift und Papier sind trotz moderner Lösungen für viele Designer unersetzbar und in frühen Phasen eines Projekts sogar das am besten geeignete Werkzeug. Wer seine Ideen im wahrsten Sinne des Wortes zu Papier bringt, kann diese mit Pop und seinem iPhone fotografieren und dann beispielsweise einzelne Buttons auf den Entwürfen in der App miteinander verlinken. Auf diese Weise erhält man aus seinen analogen Skizzen ein funktionierendes digitales Mockup. Dieses kann man dann auch über unterschiedliche Kanäle direkt aus der App mit anderen teilen.

Proto.io

Bei Proto.io handelt es sich um eine webbasierte Lösung. (Screenshot: proto.io)

Bei Proto.io handelt es sich um eine webbasierte Lösung. (Screenshot: proto.io)

Mit dem webbasierten Proto.io lassen sich schnell interaktive App-Prototypen erstellen. Der Dienst simuliert unter anderem interaktive Touch-Gesten, Transitions und Animationen. Als besonders hilfreich erweist sich das Drag&Drop-User-Interface, das es auch Einsteigern ermöglicht, eigene Mockups zu erstellen. Neben iPhone und iPad lässt sich Proto.io auch für Android-Geräte, Spielkonsolen und Smart TVs nutzen.

Anzeige
Anzeige

Eine Reihe von Tutorials für iOS-Prototyping mit Proto.io finden sich auf der Website des Anbieters.

Prototypes

Die Mac-App Prototypes verwandelt in Photoshop, Fireworks, Illustrator oder anderen Programmen angelegte Mockups in klickbare Prototypen, die auf einem iOS-Gerät laufen. Die App kostet rund 36 Euro und ermöglicht dem Entwickler, seine Prototypen mit anderen Nutzern zu teilen, um so wertvolles Feedback zu erhalten.

Prototypr

Prototypr steht für rund 15 Euro im Mac App Store zur Verfügung. Eine App zum betrachten erstellter Prototypen ist außerdem für iOS erhältlich. Prototypr ermöglicht unter anderem das Importieren von Photoshop-Dateien, das Verlinken einzelner Screens und den Prototyp-Upload auf iOS-Geräte via WiFi.

Ratchet

(Screenshot: Ratchet/github)

(Screenshot: Ratchet/github)

Ratchet ermöglicht schnelles und einfaches iOS-Prototyping mit CSS, HTML und JavaScript. Das Framework beinhaltet viele grundlegende Elemente einer App und simuliert native iOS-Bausteine wie Buttons, Schalter, Navigationsleisten und Listen. Wer über grundlegende HTML-Kenntnisse verfügt, dürfte mit Ratchet problemlos funktionierende Prototypen erstellen können. Für das Anlegen stark angepasster eigener Designs eignet sich Ratchet hingegen weniger. Mehr Informationen zu dem Framework finden sich in einem entsprechenden Artikel auf t3n.de.

Eine hübsch gemachte Website im One-Page-Design nimmt den Nutzer für die ersten Schritte mit Ratchet bei der Hand und eignet sich damit als erster Einstieg in das Prototyping mit Ratchet.

WireframeSketcher

WireframeSketcher ist als Software für Mac, Windows und Linux erhältlich. (Screenshot: WireframeSketcher)

WireframeSketcher ist als Software für Mac, Windows und Linux erhältlich. (Screenshot: WireframeSketcher)

WireframeSketcher bietet unter anderem Stencils für iOS-Apps. Die schlanke Software ist für Windows, Mac und Linux erhältlich und ermöglicht das Bündeln einzelner Screens in einem Storyboard sowie das Erstellen von klickbaren Prototypen. Eine Einzel-Lizenz kostet 99 US-Dollar. Im Preis enthalten sind ein Jahr Support und Updates.

Alle Tools inklusive Links
WireframeSketcher ist als Software für Mac, Windows und Linux erhältlich. (Screenshot: WireframeSketcher)

1 von 14

Weiterführende Links

  • Flinto: Online-Editor für iOS-Prototyping ist da – t3n News
  • Ratchet: Rapid iOS-Prototyping für Apps – t3n News

 

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare (4)

Community-Richtlinien

Sébastien Bonset

Da hast Du Recht, Daniel ;) Einige der hier aufgeführten Helferlein lassen sich allerdings auch für Android-Apps nutzen.

StrangeDays

Antetype für OSX fehlt

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige