{"id":585,"date":"2019-07-01T18:00:16","date_gmt":"2019-07-01T16:00:16","guid":{"rendered":"https:\/\/www.logic-joe.com\/blog\/?p=585"},"modified":"2019-10-07T14:10:17","modified_gmt":"2019-10-07T12:10:17","slug":"zack-bumm-einhorn-und-feenstaub-prototypes-mit-sketch-und-anima","status":"publish","type":"post","link":"https:\/\/www.logic-joe.com\/blog\/zack-bumm-einhorn-und-feenstaub-prototypes-mit-sketch-und-anima\/","title":{"rendered":"Zack, Bumm, Einhorn & Feenstaub! Prototypes mit Sketch und Anima"},"content":{"rendered":"

Die digitale Welt entwickelt sich immer schneller. Unternehmenseiten, Anwendungen, Plattformen und Shops wird immer mehr abverlangt. Interaktion beschr\u00e4nkt sich schon lange nicht mehr nur auf das Klicken eines Buttons. Aber wie visualisiert man im Projekt dem Kunden und Unternehmen besondere animative und interaktive Abl\u00e4ufe noch w\u00e4hrend der Konzeptions-Phase? Das Stichwort ist Prototyping<\/strong>. Hierf\u00fcr gibt es heute eine Vielzahl an Tools und Plug-Ins, welche die Erstellung stark vereinfachen sollen. Eines dieses Tools ist Anima, welches ich euch hier gerne einmal vorstellen m\u00f6chte\u2026<\/p>\n

Was ist Anima?<\/h2>\n

Anima ist ein PlugIn f\u00fcr Sketch, welches kostenlos schon sehr umfangreich genutzt werden kann und in der Bezahl-Version noch einige andere angenehme Features zur Verf\u00fcgung stellt, aber dazu sp\u00e4ter mehr.
\nMit Anima kann man innerhalb des Sketch-Dokuments einen Prototyp erstellen, hochladen und mit anderen teilen. Das geteilte Ergebnis wird automatisch in einem Browser aufgerufen und kann, wenn man andere Breakpoints angelegt hat, sogar responsiv sein. Es ist m\u00f6glich Interaktionen und Animationen abzubilden, Buttons k\u00f6nnen MouseOver-Effekte bekommen, Seitenwechsel sowie Scrollen mit Animationen versehen und Inputfelder ausf\u00fcllbar werden. Das sind nur ein paar kleine Beispiele des Funktionsumfangs von Anima. F\u00fcr Interaktionen und Animationen gibt es hierbei auch eine kleine Bibliothek mit vorgefertigten Beispielen, die man w\u00e4hlen kann. Oder man programmiert die CSS-Transitions einfach selbst ein.<\/strong> Das geht?! Ja! Super!<\/p>\n

\"Hover

Hier sieht man einige vordefinierte Hover Effekte, aus denen man w\u00e4hlen kann. Alternativ kann man auch direkt im Feld darunter eigene CSS Definitionen einf\u00fcgen.<\/p><\/div>\n

Previews, Exporte, Kundenkommunikation<\/h2>\n

Gehen wir zun\u00e4chst weiter auf die kostenfreien Punkte ein. Neben Prototyping und der Erstellung responsiver Layouts, sollten auch das Preview und der Export nicht au\u00dfer Acht gelassen werden.<\/p>\n

Jedes Artboard in Sketch stellt eine eigene Seite dar. Diese Seiten k\u00f6nnen untereinander nat\u00fcrlich verlinkt, und dann auf verschiedenste Arten weiterbehandelt werden. Z.B. mit der Preview Funktion. Diese wird ganz einfach durch Knopfdruck gestartet \u2013 dieser l\u00e4dt das Projekt (also nur die Artboards die z.B. \u201everlinkt\u201d sind) auf einen Server, der automatisch \u00fcber den Sketch Nutzeraccount eingerichtet wird. Sobald der Upload erfolgreich war, kann man diesen schon fertigen Protptypen anderen Projektbeteiligten zur Verf\u00fcgung stellen, darunter auch Personen, die keinen eigenen Anima Account haben. Ein Account ist \u00fcbrigens kostenfrei.<\/p>\n

Ohne Account kann man nur den eigentlichen Prototypen ansehen, sprich durchklicken. Mit Account hat man \u00e4hnliche Features wie bei Zeplin und Invision: das Kommentieren, die M\u00f6glichkeit grafische Assets herunterzuladen und den \u201eUntersuchen\u201d-Modus, wo z.B. Abst\u00e4nde, Farben und Schriftdefintionen abgelesen werden k\u00f6nnen. Die einzelnen Steps des Prototypen kann man dabei auch als einzelne Layout-Seite betrachten, mit dem Developer-Tool sieht man, dass die Sketch-Datei tats\u00e4chlich in einfaches HTML umgewandelt wurde. Um diesen Code aber auch nutzen zu k\u00f6nnen muss man dann tats\u00e4chlich bezahlen.<\/p>\n

Mit einem Bezahl-Account kann man den kompletten Prototyp als HTML und CSS exportieren. Dieser ist f\u00fcr HTML-Klickdummies und automatisch generierten Code ganz passabel, sollte aber nur daf\u00fcr verwendet werden. Eine direkte Weiterverwendung im Frontend-Code des finalen Projekts empfiehlt sich nicht.<\/p>\n

Hier ein kleines Beispiel f\u00fcr einen Anima Prototyp<\/a><\/p>\n

Fazit<\/h2>\n

Mich hat begeistert, dass Anima einfach zu bedienen ist und man damit sehr schnell und unkompliziert sch\u00f6ne und recht umfangreiche Prototypes erstellen kann. Die Interaktionsm\u00f6glichkeiten die man sich einfach zusammenklicken (oder selbst coden!) kann gehen dabei \u00fcber einfache Screenwechsel hinaus, es sind unter Anderem auch animative Transitions, Hovereffekte und „echte“ Form Elemente easy machbar.<\/p>\n

Die Dokumentation ist knapp gehalten und deckt zwar alle grundlegenden Bereiche ab, behandelt diese aber nur an der Oberfl\u00e4che. Gerade in Sachen Animationen liefert diese nur die grundlegenden Informationen zur Bedienung des Tools. Es lohnt sich, selbst zu experimentieren und – wer das beherrscht – mit CSS eigene Effekte zu coden. Anima hat den wirklich gro\u00dfen Vorteil, dass es als Plug-In innerhalb von Sketch genutzt wird. Dadurch hat man keine Importe mehr n\u00f6tig wie es z.B. beim Zusammenspiel von Sketch und InVision App der Fall ist, sondern kann alles mit einem Programm abdecken. Anima verf\u00fcgt wie oben bereits erw\u00e4hnt dar\u00fcber hinaus noch \u00fcber die mittlerweile zu erwartenden Kommentar-, Inspector- und Asset-Funktionen. Damit ist Anima eine gelungene Runduml\u00f6sung mit Potenzial die wir sehr gerne in unseren Projekten zum Einsatz bringen.<\/p>\n

Ich empfehle w\u00e4rmstens, sich dieses Tool einmal genauer anzuschauen, viel Spa\u00df dabei!<\/h4>\n","protected":false},"excerpt":{"rendered":"

Einh\u00f6rner und Feenstaub, Sketch und Anima. So einfach kann es sein, spannende Web-Prototypen zu erstellen. Wir haben uns das Tool einmal n\u00e4her angeschaut. <\/p>\n","protected":false},"author":5,"featured_media":604,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/585"}],"collection":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/comments?post=585"}],"version-history":[{"count":16,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/585\/revisions"}],"predecessor-version":[{"id":587,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/585\/revisions\/587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/media\/604"}],"wp:attachment":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/media?parent=585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/categories?post=585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/tags?post=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}