{"id":3284,"date":"2015-03-05T11:50:14","date_gmt":"2015-03-05T09:50:14","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=3284"},"modified":"2017-12-03T11:06:19","modified_gmt":"2017-12-03T09:06:19","slug":"prototyping-meine-erfahrungen-mit-adobe-muse","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2015\/03\/prototyping-meine-erfahrungen-mit-adobe-muse\/","title":{"rendered":"Prototyping &#8211; meine Erfahrungen mit Adobe Muse"},"content":{"rendered":"<p>In letzter Zeit habe ich mich, das muss ich gestehen, immer mehr davon verabschiedet noch gro\u00df angelegte Prototypes zu erstellen. Der Aufwand war mir, gemessen am eher fragw\u00fcrdigen Ergebnis, einfach zu hoch. Also habe ich zugesehen, dass ich, mit einer Testinstallation, m\u00f6glichst schnell unter realen Bedingungen arbeiten kann.<\/p>\n<p>Das hat sich bei einem gerade aktuellem Projekt ge\u00e4ndert, weil ich mit Adobe Muse schon vor einem Jahr sympathisiert hatte und schon damals dachte, dass das noch was werden k\u00f6nnte, wenn es sich so rasant weiterentwickelt. Inzwischen hat sich eine Menge getan und ich habe mit Muse vor ein paar Tagen meine ersten Prototypes erstellt. \u00dcber meine Erfahrungen dazu berichte ich in diesem Beitrag.<\/p>\n<h2>Was ich bisher verwendet habe um Prototypes herzustellen<\/h2>\n<p><strong>Corel Draw<\/strong> &#8211; ein f\u00fcr mich immer noch sehr gutes und intuitiv bedienbares Vektorprogramm<br \/>\n<strong>Fireworks<\/strong> &#8211; punktet durch die umfangreiche Bibliothek von Design-Elementen<br \/>\n<strong>Photoshop<\/strong> &#8211; nicht wirklich<br \/>\n<strong>Axure<\/strong> &#8211; gut gemacht, aber manchmal etwas umst\u00e4ndlich in der Bedienung<br \/>\n<strong>InDesign<\/strong> &#8211; kaum zu glauben, aber geht auch<\/p>\n<p>Alle diese Tools k\u00f6nnen aber z.B. nicht zeigen was ein Slider tut, wenn er slidet oder einen Parallax-Effekt darstellen.<\/p>\n<h2>Adobe Muse ist mehr als nur ein Prototyping-Tool<\/h2>\n<p>Mit Muse lassen sich echte Webseite erstellen, html5 valide (!!) und damit ist Muse mehr als nur ein Prototyping Tool. Es ist im Grunde ein riesengro\u00dfer WYSIWYG Editor, mit dem sich vollwertige Webseiten erstellen lassen ohne auch nur einmal im Code oder im CSS arbeiten zu m\u00fcssen.<\/p>\n<h2>Adobe Muse lernen<\/h2>\n<p>Inzwischen ist der Umgang mit dem Programm sehr gut dokumentiert. Es gibt Adobe TV, die umfangreiche online-Hilfe und dar\u00fcberhinaus viele tolle Video-Anleitungen bei youtube. Man findet zu jedem Problem relativ schnell eine L\u00f6sung.<\/p>\n<h2>Master &amp; Slave<\/h2>\n<p>In Muse legt man Seiten in einer Art Flussdiagramm an und hat so auch optisch immer einen guten \u00dcberblick \u00fcber die Hierarchie und die Verkn\u00fcpfungen der Seiten untereinander. Das was bei z.B. Contao Seitenvorlagen sind, sind in Muse Masterseiten, \u00e4hnlich wie bei z.B. Powerpoint auch. Auf den Masterseiten werden die Elemente eingef\u00fcgt, die jede Seite verwendet.<\/p>\n<h2>Templates &amp; Widgets<\/h2>\n<p>Das Tolle an Muse ist, dass es inzwischen sehr viele und auch gestalterisch sehr ansprechend gemacht Templates gibt, die alle nicht die Welt kosten. Es lohnt sich ein gutes Template zu kaufen und daran zu lernen wie z.B. ein Slider eingebaut wird oder eine sch\u00f6ne Bildergalerie. Dar\u00fcberhinaus gibt es auch viele Widgets, die es z.B. erm\u00f6glichen selbst gehostete Webfonts einzusetzen.<\/p>\n<h2>Einarbeitungszeit<\/h2>\n<p>Die Lernkurve ist moderat, da kommt einem das Programm schon sehr entgegen. Ich habe knappe 3 Tage gebraucht um eine onepage-Webseite (mit 3 Varianten) zu erstellen. Zum Einsatz kamen dabei Navigationselemente, Parallax, ein Slider und eine interaktive Galerie. Einschr\u00e4nkend muss ich allerdings sagen, dass ich in Sachen Webdesign ein einigerma\u00dfen erfahrener Anwender bin. Von meiner jetzigen Warte aus kann ich mir nicht gut vorstellen, wieviel Zeit ein Anwender brauchen w\u00fcrde, um sich einzuarbeiten, der keinerlei Vorerfahrungen hat. Das d\u00fcrfte an manchen Stellen heikel werden.<\/p>\n<h2>Mobil und Responsive<\/h2>\n<p>Mit Muse ist es m\u00f6glich f\u00fcr die Nutzung mit mobilen Endger\u00e4ten an die Breite angepasste Layouts zur Verf\u00fcgung zu stellen. Das sind dann mobile Ausfertigungen der Webseiten, aber das ist nicht responsive. Letzeres kann Muse derzeit noch nicht, jedenfalls nicht wirklich. Es gibt zwar inzwischen Templates, die sich responsive nennen und die auch Elemente fluid gestalten, aber das ist, so weit ich das richtig beobachtet habe, bisher nur\u00a0 mit ein paar Tricks und Workarounds m\u00f6glich. Wer es besser wei\u00df, darf mich an dieser Stelle gern korrigieren. Allerdings kann ich mir gut vorstellen, dass sich in dieser Richtung ganz sicher noch etwas tun wird.<\/p>\n<h2>Export in html<\/h2>\n<p>Die Source Datei des Programms ist eine Datei mit der Endung .muse. Diese kann vom Programm in eine reine html-Seite exportiert werden. Das Ergebnis l\u00e4sst sich in Nullkommanix auf jedem Server via FTP hochladen und dann als Prototype betrachten.<\/p>\n<h2>Hasenf\u00fcsse<\/h2>\n<p>W\u00fcnschenswert w\u00e4re, wenn man das von Muse geschriebene CSS direkt in ein CMS weiterverwenden k\u00f6nnte. Jedenfalls gibt es Fundstellen im Netz, bei denen Adobe auf Knien gebeten wird, ein in Muse erstelltes Design in WordPress umsetzen zu k\u00f6nnen. \u00d6hm &#8212;\u00a0 nun ja, ich kann mich irren, aber wer immer sich so etwas w\u00fcnscht, diesbez\u00fcglich sehe ich keinen Weg und glaube auch nicht, dass da was kommen wird. CMS wie WordPress und Contao sind ganz anders aufgebaut als eine mit Muse erstellte Webseite. Aber gut, man hat ja auch schon Pferde &#8230; lassen wir das.<\/p>\n<p>Das CSS von Muse verwendet ziemlich kryptisch Klassenbezeichnungen und bevor man herausgefunden hat, was zu wem geh\u00f6rt, setze ich ein Layout h\u00e4ndisch 3 mal schneller um. Au\u00dferdem : Muse verwendet in den Widgets zwar an vielen Stellen die opensource Bibliothek jquery, aber eben nicht nur. In den Export-Dateien ist auch Adobe propriet\u00e4res Javascript enthalten. Da ist hinsichtlich Copyright und der \u00dcberf\u00fchrung in andere CMS ganz gewiss Vorsicht geboten.<\/p>\n<p>F\u00fcr z.B. ein Kontaktformular oder eine Shopfunktion wird eine echte Programmiersprache wie PHP gebraucht. Solche Dinge funktionieren mit Muse aber nur, wenn man die Seite auf Business-Catalyst hochl\u00e4dt. Der kostenpflichtige Dienst Business Catalyst hostet dann die Seite und stellt die Funktionen zur Verf\u00fcgung. Das Ganze sieht einfach und vielversprechend aus. U.a. kann man mit BC dann auch einen shop erstellen und es soll auch m\u00f6glich sein, den Kunden ein Frontend-Editing zur Verf\u00fcgung stellen zu k\u00f6nnen. Ob und wenn ja, wie gut das alles funktioniert, dazu kann ich an dieser Stelle aber nichts sagen, weil ich es nicht (noch nicht) ausprobiert habe. Aber so wie ich mich kenne, wird es nicht lange ein Geheimnis bleiben &#8230; ;-)<\/p>\n<h2>Mein Fazit<\/h2>\n<p>Derzeit ist Muse f\u00fcr mich als hochwertiges Prototyping-Tool im Einsatz. Ich bin von den M\u00f6glichkeiten begeistert und kann meinen Kunden wirklich ansprechende und realistische Protoypen zeigen. Es macht Spa\u00df mit Muse umzugehen und sich so ganz auf die Gestaltung konzentrieren zu k\u00f6nnen. Allerdings muss man, wenn man sp\u00e4ter das Ganze z.B. in Contao umsetzen will, nat\u00fcrlich schon wissen, was man tut und nicht irgendetwas entwerfen, was nachher nur umst\u00e4ndlich und viel Aufwand nachzubauen oder sogar neu zu erfinden w\u00e4re.<\/p>\n<p>Wenn sich Muse so gut wie bisher weiterentwickelt, stellt es f\u00fcr mich, zumindest im Bereich von kleinen Budgets, eine echte Alternative zu Baukastensystemen dar.\u00a0Gro\u00dfe Webseiten w\u00fcrde ich jedoch, nach wie vor, mit Contao umsetzen.<\/p>\n<p>Als Haken an der Sache empfinde ich den Business-Catalyst. Wie bei den Baukastensystem, so auch bei Muse, gef\u00e4llt es mir nicht, dass die Seite nicht auf meinem Server gehostet werden kann, zumindest nicht, wenn ich ein Kontaktformular oder andere Dinge, die PHP ben\u00f6tigen, brauche. W\u00fcnschenswert w\u00e4re es aus meiner Sicht ein erweitertes Gesch\u00e4ftsmodell in der Form, dass man den Business-Catalyst-Paket kaufen oder mieten und auf dem eigenen Server isntallieren k\u00f6nnte. Mit BC entsteht sonst f\u00fcr Kunden eine Abh\u00e4ngigkeit zu einem weit, weit entfernten Hoster. Wer wei\u00df, was mit einer Seite passiert, wenn ein Kunde z.B. den Anbieter wechseln m\u00f6chte?\u00a0 Alle neu macht der Mai? Mit propriet\u00e4ren L\u00f6sungen sind schon andere vor die Wand gefahren.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mit Adobe Muse habe ich schon vor einem Jahr sympathisiert und dachte so bei mir, dass das noch was werden k\u00f6nnte, wenn es sich so rasant weiterentwickelt. Inzwischen hat sich eine Menge getan und ich habe mit Muse vor ein paar Tagen meine ersten Prototypes erstellt. \u00dcber meine Erfahrungen dazu berichte ich in diesem Beitrag.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[465],"yst_prominent_words":[],"class_list":["post-3284","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-prototyping"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3284"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3284\/revisions"}],"predecessor-version":[{"id":4000,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3284\/revisions\/4000"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3284"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}