Vorheriger Artikel Nächster Artikel

Adobe Proto: Mockups am Tablet erstellen

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

Adobe Proto: Mockups am Tablet erstellen
Adobe Proto Logo
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 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 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.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von tim am 01.11.2012 (11:03 Uhr)

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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Adobe
Verschlüsselter Text- und Voice-Chat: Das kann BitTorrent Bleep
Verschlüsselter Text- und Voice-Chat: Das kann BitTorrent Bleep

BitTorrent Bleep verbindet P2P-Technologie mit Verschlüsselung zu einer sicheren Möglichkeit zur Kommunikation. Der Messenger ermöglicht den Austausch von Text-Nachrichten und lässt euch … » weiterlesen

Starter-Guide Android: Apps, Einstellungen, Tipps und Zubehör für frisch gebackene Smartphone- oder Tablet-Besitzer
Starter-Guide Android: Apps, Einstellungen, Tipps und Zubehör für frisch gebackene Smartphone- oder Tablet-Besitzer

Du hast ein neues Android-Smartphone oder -Tablet zu Weihnachten bekommen? Unser Starter-Guide informiert dich in Windeseile über die wichtigsten Apps und erleichtert dir den Einstieg in Googles … » weiterlesen

Blappsta wandelt WordPress-Blogs kostenlos in iOS- und Android-Apps
Blappsta wandelt WordPress-Blogs kostenlos in iOS- und Android-Apps

Mit Blappsta kann auf einfache Art und Weise aus einem bestehenden WordPress-Blog eine Standalone-App für iOS und Android generiert werden. Die Nutzung des Tools ist für Blog-Betreiber kostenlos. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen