Tool Time: Balsamiq in Interaktion mit Invision

Nach einem kleinen Workaround habe ich gelernt was Assets in Balsamiq sind, wurde daran erinnert Projekte statt nur Bilder zu speichern, habe etwas zur Invision Philosophie gelernt und habe, wenn auch nicht ganz sauber gelöst, mein Ziel erreicht einem eigenen Balsamiq Mockup mit Invision Interaktion zu verleihen.

Invision schluckt wohl keine Balsamiq Files. Dafür Sketch-, Photoshop- und Bild-Dateien. Meine ursprüngliche Vorstellung, dass bei einem File-Import in Invision die Felder oder Icons des Mockups weiterhin als einzelne Elemente weiterverwendet werden können, muss ich anpassen. Invision arbeitet wohl tatsächlich mit „fertigen“ Bilddateien als Hintergrund. Was für mich nur halbwegs Sinn macht, weil nach jeder Interaktion ein ganzer Screen neu geladen werden muss.

Durch den Fehler bedingt, mein Balsamiq Mockup nur als Bild statt als Projekt abgespeichert zu haben, hatte ich nicht mehr die Möglichkeit mein Mockup in Balsamiq für Invision zurechtzulegen. Ich habe keine Bildbearbeitungsmöglichkeiten in Balsamiq gefunden. Aus der Not musste ich auf ein Drittprogramm zurückgreifen und das Bild dort zurecht schneiden. Glücklicherweise war das Mockup bereits im richtigen Pixelverhältnis und ich musste nur noch das iPhone Wireframe wegschneiden und Duplikate erstellen über die ich neue Balsamiq-Icons gelegt habe. Photoshop wäre für den Zuschnitt die elegantere Lösung gewesen, es geht aber auch mit einem Paint auf Windows oder einem Paintbrush auf Mac.

Nächstes Mal speichere ich mein Mockup schön brav als ganzes Projekt ab und bin damit direkter am Ziel. Der Zwischenschritt mit Paint/Paintbrush fällt damit weg und die Bildauflösung bleibt gut.

Ich schneide also das Bild am PC zurecht und importiere in Balsamiq, treffe noch besagte Icon-Anpassungen und ziehe die sechs .png Files nach Invision.

Hier verteile ich Interaktionen auf die Bildbereiche, was recht schnell geht.

Auch wenn nicht ganz sauber gelöst, habe ich doch einem selbst erstellen Mockup Interaktionen zugewiesen. Yippie Yah Yei! 🙂

 

Balsamic Invision Login.gif

Ansatz eines Mini-Prototypen anhand selbst erstellten Mockups.

 

 

 

 

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s