Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

SeedingUp | Digital Content Marketing


Interaktive Prototypen mit Framer!

Ahadesign News

framer-logoFür Webdesign und App-Entwicklung kommen oft Prototyping-Tools zum Einsatz. Damit ist es normalerweise einfacher, Ideen für das Verhalten einer App und für Screendesign auszuprobieren, noch bevor programmiert wird. Mittlerweile sind zahlreiche solcher Tools verfügbar. Einen interessanten Weg geht das kürzlich in einer neuen Version erschienene Framer, wofür es auch zahlreiche gute Tutorials gibt.

Alles in Einem für den Design-Ablauf!

app-entwicklung

Framer ist ein Werkzeug zum Erstellen von Prototypen und zum Austauschen von Projekten zwischen Teams. Laut Entwickler kombiniert es die visuelle Bearbeitung mit flexiblem Code und erlaubt den kompletten Arbeitsablauf innerhalb einer einzigen Oberfläche.

Interessant ist Framer auch wegen der guten Unterstützung. Es gibt einige Tutorials direkt auf der Framer-Seite, welche für den ersten Start sehr hilfreich sind. Aber auch an manchen anderen Stellen im Internet sind gute Anleitungen und Beispiele für den optimalen Umgang mit dem Prototyping-Tool zu finden.

Es gibt ein ausführliches Framer-Tutorial bei Toptal.com, welches auf die Erstellung von interaktiven Prototypen eingeht. Nach dem Lesen der Anleitung, wird man in der Lage sein, sofort mit Framer loszulegen, wie der Autor dort verspricht. Es wird auf die neuen Möglichkeiten hingewiesen, welche Design, Code und Zusammenarbeit vereinen. Es kann also ein Prototyp in Framer erstellt und dort zusätzlich mit voller Funktionalität entwickelt werden. Zusätzliche Software und Programmierkenntnisse werden nicht benötigt.

Das Tutorial vermittelt die Kombination aus Design und Code für die Erstellung von animierten und interaktiven Prototypen. Zunächst wird der neue Design-Modus vorgestellt und in wenigen Schritten drei Prototypen für eine App mit Schaltflächen, Hintergrund usw. damit erstellt. Die Arbeit in diesem Modus soll genauso ablaufen, wie in Sketch oder Figma. Es lassen sich also Vektorebenen erstellen, Bilder importieren und Textebenen erstellen und bearbeiten.

Zu den beschreibenden Texten bietet das Tutorial animierte Bilder, um die Anleitungen gut nachvollziehen zu können. Auch ein wenig Code wird gelistet, welcher aber recht einfach zu verstehen ist und keine großartigen Skills in der Programmierung voraussetzt.

In weiteren Schritten wird ein interaktiver Button für Feedback erstellt. Das funktioniert ganz einfach mit wenigen Klicks in Framer. Und auch beim Hinzufügen einer Animation für das Event über den Animation-Editor, wird es nicht schwieriger. Notwendiger Code wird automatisch von Framer hinzugefügt.

In weiteren Erläuterungen wird erklärt, wie sich die Arbeit in Framer mit zusätzlichen Komponenten wie z.B. der Scrolling-Component beschleunigen lässt.

Framer tritt als Tool für Profis an und ist leider nicht kostenfrei zu haben. 15 Dollar im Monat oder 159 Dollar pro Jahr, möchten die Entwickler schon haben. Allerdings kann eine kostenfreie Trial-Version für den Mac und nach Anmeldung auch für Windows unter oben genanntem Link heruntergeladen werden. Wer viel mit Prototypen arbeitet und alles in einer einzigen Applikation erledigen möchte, kann mit diesen Umständen sicher leben.

Kommentar schreiben