Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Gadgets & Lifestyle

Adobe Proto: Mockups am Tablet erstellen

    Adobe Proto: Mockups am Tablet erstellen
Adobe Proto Logo

Mit Adobe Proto können Mockups von Webseiten auf iOS- und Android-Tablets erstellt und anschließend als bearbeitbarer Code zu Dreamweaver exportiert werden. Wir stellen euch die App kurz vor.

Adobe Proto funktioniert ähnlich wie das Online Tool Moqups, das wir euch vor einiger Zeit schon vorgestellt haben: Man wählt zunächst ein Layout-Modell wie das 960 Grid System und kann anschließend anfangen Elemente auf der Arbeitsfläche zu platzieren.

Mit Tap&Drop können Headlines, Absatz-Text, Divs, Bild- und Multimedia Platzhalter, Formular- und Navigationselemente schnell und einfach platziert werden. Nach einem Tap auf die jeweiligen Elemente können weitere Einstellungen wie Farbe, Schriftart und Ausrichtung vorgenommen werden. Außerdem können Unterseiten erstellt und untereinander verknüpft werden.

Screenshot von Adobe Proto
Adobe Proto Arbeitsfläche

Mockups zeichnen

Mit einer eingebauten Gestenerkennung bietet Adobe Proto eine Alternative zum Tap&Drop-Prinzip. So sollen Layouts intuitiv durch das Zeichnen von Symbolen entstehen können. So steht ein Kreuz für ein neues Bild, ein Rechteck für ein DIV, einfaches Gekrakel für eine Kopfzeile und ein Play-Symbol für ein Video.

Screenshot von Adobe Proto Gesten
Adobe Proto Gesten

 

Die Gestensteuerung ist zwar ein guter Grundgedanke, funktioniert aber in der Realität oft nicht. Die Eingaben werden zu schnell übernommen, sodass man einige der komplexeren Gesten nicht schnell genug aufzeichnen kann. Einige werden sehr oft nicht erkannt oder mit anderen verwechselt. Umso ärgerlicher ist dann der Umstand, dass einige Elemente wie Tabellen nur durch Gesten in das Mockup gebracht werden können. Hier muss Adobe auf jeden Fall noch nachbessern.

Vorschau und Export

Für Vorschau und Export bietet Proto eine Vollbildansicht an. Sie wird direkt mit Live Code realisiert - das heißtm man kann sich schon in der Preview durch die Seite klicken und auch die interaktiven Elemente wie Videos und Formularfelder ausprobieren.

Adobe Proto Vollbild Ansicht
Adobe Proto Vollbildansicht

Das gesamte Projekt kann dann als ZIP-File mit allen Codebestandteilen für Dreamweaver exportiert und zur Weiterverarbeitung und für das Styling genutzt werden. Für den Export stellt die App eine E-Mail-Funktion und die Anbindung an Tools wie Dropbox zur Verfügung. Creative-Cloud-Mitglieder können ihre Entwürfe im Speicher der Creative Cloud ablegen und von dort auf ihre Workstations laden. Ein PDF-Exporter zur Vorschau für Kunden und direkte Integration in Dreamweaver wäre hier noch wünschenswert gewesen.

Adobe Proto: Interessant aber ausbaufähig

Adobe Proto bietet eine interessante Möglichkeit, um schnell Prototypen von Webseiten zu skizzieren. Es liefert sofort nutzbaren Code und einige Exportmöglichkeiten. Am Bedienkonzept und weiteren Möglichkeiten für Export und Zusammenarbeit sollte Adobe aber in Zukunft auf jeden Fall noch feilen.

Adobe Proto ist derzeit für iOS und Android in den jeweiligen Stores für 8,99€ beziehungsweise 7,99€ erhältlich. Ein stolzer Preis, wenn man bedenkt, was Adobe noch aus dieser App hätte machen können. Für alle Creative-Cloud-Mitglieder könnte aber die Tatsache interessant sein, dass der Kauf von 3 Touch-Apps einen gratis Monat Creative Cloud mit sich bringt. Bei einem derzeitigen Preis von rund 62€ im Monat macht man so gesehen sogar ein Plus.

Über den Autor

Ilja bigIlja Zaglov ist selbstständiger Kommunikations- & Mediendesigner. Er unterstützt kleine und mittelständische Unternehmen bei der Erstellung von Online- und Offline-Medien. Neben Web-Gestaltung gehören Motion-Graphics und 3D-Inhalte zu seinen Spezialgebieten.

Finde einen Job, den du liebst

1 Reaktionen
tim
tim

Ist die App mittlerweile für Full HD-Tablets geeignet? Vor einigen Monaten war sie das noch nicht...

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen