<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Comazine &#187; Tools</title>
	<atom:link href="http://www.comander.de/comag/tools/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.comander.de</link>
	<description>Der Blog der coma ag – der creativ orientierten münchner agentur!</description>
	<lastBuildDate>Thu, 09 Jun 2011 17:58:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Wireframe Tools im Test</title>
		<link>http://www.comander.de/2010/05/31/wireframing-tools-im-test/</link>
		<comments>http://www.comander.de/2010/05/31/wireframing-tools-im-test/#comments</comments>
		<pubDate>Mon, 31 May 2010 08:25:13 +0000</pubDate>
		<dc:creator>mah</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Kreativer]]></category>
		<category><![CDATA[flairbuilder]]></category>
		<category><![CDATA[iplotz]]></category>
		<category><![CDATA[pidoco]]></category>
		<category><![CDATA[protoshare]]></category>
		<category><![CDATA[test]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[vergleich]]></category>
		<category><![CDATA[wireframes]]></category>
		<category><![CDATA[wireframing]]></category>

		<guid isPermaLink="false">http://www.comander.de/?p=1012</guid>
		<description><![CDATA[Interaktion, Videocontent, Einbindung von Social Media Plattformen usw. unsere Projekte werden immer komplexer und vernetzter. Eine Herausforderung, die schon in der Konzeptionsphase beginnt. Mit welchem Tool lassen sich Wireframes einfach erstellen und effektiv abstimmen?]]></description>
			<content:encoded><![CDATA[<p>Interaktion, Videocontent, Einbindung von Social Media Plattformen usw. unsere Projekte werden immer komplexer und vernetzter. Eine Herausforderung, die schon in der Konzeptionsphase beginnt. <strong>Mit welchem Tool lassen sich Wireframes einfach erstellen und effektiv abstimmen?</strong></p>
<p>Auf der Suche nach einem geeigneten Tool war es uns nicht nur wichtig, dass dieses einfach zu bedienen sein sollte, es sollte weitere <strong>Kriterien erf&#252;llen</strong>:</p>
<p>Das Ergebnis sollte klickbar sein, f&#252;r den Kunden sollte es m&#246;glichst einfach sein, sein Feedback abzugeben, das Tool sollte bestenfalls automatisch einen Strukturbaum generieren, auch mal umfassenden Inhalten auf einer Seite Platz bieten und Textformatierung erm&#246;glichen.</p>
<p>Die F&#252;lle an Programmen und Tools machte es uns nicht leicht. Wir pickten uns einige Tools heraus, die wir genauer unter die Lupe nehmen wollten.</p>
<p><span id="more-1012"></span></p>
<p>Bei einem ersten Praxistest fielen dabei gleich einige raus, entweder, weil sie wie Adobe Fireworks zu komplex f&#252;r unsere Zwecke waren, oder wie Balsamiq Mockups f&#252;r umfangreichere Projekte und Websites dann doch zu wenig Funktionalit&#228;ten bieten und nicht professionell genug wirken.</p>
<p><strong>Vier Favoriten haben wir nach der Vorauswahl genauer getestet:</strong></p>
<p><strong>Hier schon mal ein kleiner &#220;berblick:</strong></p>
<table style="width: 100%; border: 1px solid #ffffff;" border="0">
<tbody>
<tr style="background:#333333">
<td style="border-right:1px solid #ffffff;padding-left:10px;"></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Pidoco</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>FlairBuilder</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>iPlotz</strong></td>
<td style="padding-left:10px;"><strong>ProtoShare</strong></td>
</tr>
<tr>
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Anwendung</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">online</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">Desktop</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">Desktop/online</td>
<td style="padding-left:10px;">online</td>
</tr>
<tr style="background:#333333">
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Export</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">html, Word</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">(coming soon: html)</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">html, png, jpg, pdf</td>
<td style="padding-left:10px;">html, Word</td>
</tr>
<tr>
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Sitemap</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="padding-left:10px;">ja</td>
</tr>
<tr style="background:#333333">
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Strukturbaum</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">&#8212;</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">&#8212;</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">&#8212;</td>
<td style="padding-left:10px;">automatisch generiert, klickbar</td>
</tr>
<tr>
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Masterfunktion</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="padding-left:10px;">ja</td>
</tr>
<tr style="background:#333333">
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Dateiupload</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="padding-left:10px;">ja</td>
</tr>
<tr>
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Textformatierung</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="padding-left:10px;">ja</td>
</tr>
<tr style="background:#333333">
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Notizfunktion</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">ja</td>
<td style="padding-left:10px;">ja</td>
</tr>
<tr>
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Animationen</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">&#8212;</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">&#8212;</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">&#8212;</td>
<td style="padding-left:10px;">ja</td>
</tr>
<tr style="background:#333333">
<td style="border-right:1px solid #ffffff;padding-left:10px;"><strong>Kundenaccount</strong></td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">&#8212;</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">&#8212;</td>
<td style="border-right:1px solid #ffffff;padding-left:10px;">&#8212;</td>
<td style="padding-left:10px;">ja</td>
</tr>
</tbody>
</table>
<p>Und jeweils mehr zum &#8220;Testergebnis&#8221;:</p>
<p><strong>PIDOCO</strong></p>
<p>Dabei hat sich <a href="http://www.pidoco.com" target="_blank">Pidoco</a> leider nicht bew&#228;hrt. Wirkte es zwar erst vielversprechend, so stellte sich beim Testen heraus, dass es gar nicht so selbsterkl&#228;rend funktioniert. Das zugrundeliegende Ebenen-/Layer-Prinzip erschwert unserer Ansicht nach die Erstellung von Wireframes. Zwar kann man das Ergebnis nicht nur als html exportieren, sondern auch als Word-Datei, aber hierbei listet das Programm  auch alle Metainformationen mit auf. Das macht das Dokument als Grundlage f&#252;r die Abstimmung eher unbrauchbar. Dies und die Tatsache, dass das Arbeiten damit keinen Spa&#223; macht, lie&#223; Pidoco f&#252;r uns ausscheiden.</p>
<div id="attachment_1098" class="wp-caption alignnone" style="width: 580px"><img class="alignnone size-large wp-image-1118" title="screenshot_pidoco_oberfl&#228;che" src="http://www.comander.de/wp-content/uploads/2010/05/screenshot_pidoco_oberfl&#228;che-570x384-custom.jpg" alt="screenshot_pidoco_oberfl&#228;che" width="570" height="384" /> <p class="wp-caption-text">Beispiel: Pidoco im Test</p></div>
<p><img class="alignnone size-large wp-image-1123" title="screenshot_pidoco" src="http://www.comander.de/wp-content/uploads/2010/05/screenshot_pidoco2-595x419-custom.jpg" alt="screenshot_pidoco" width="595" height="419" /></p>
<p><strong>FLAIRBUILDER</strong></p>
<p>Die Desktopanwendung <a href="http://www.flairbuilder.com" target="_blank">FlairBuilder</a> gefiel uns eigentlich auch auf den ersten Blick sehr gut. Intuitive Bedienung, einfache und klare Benutzeroberfl&#228;che, ein schlichtes und nicht zu skizzenhaftes Design – ein Tool, mit dem es wirklich Spa&#223; macht, Wireframes zu erstellen. Gro&#223;er Wehrmutstropfen: Die Abstimmung mit dem Kunden wird einem hier nicht leicht gemacht. Zwar gibt es schon die Option, sich das Ergebnis mit einem Online-Viewer anzusehen, ohne sich FlairBuilder auf dem Rechner zu installieren. Aber wir sahen keine anst&#228;ndige M&#246;glichkeit f&#252;r Kunden oder auch unsere Kollegen, die Wireframes zu kommentieren. Auch wenn das Tool an sich viele Funktionen bietet und gut zu bedienen ist, ist es somit f&#252;r uns keine Option.</p>
<div id="attachment_1091" class="wp-caption alignnone" style="width: 586px"><img class="size-large wp-image-1091" title="screenshot_flairbuilder" src="http://www.comander.de/wp-content/uploads/2010/05/screenshot_flairbuilder_021-576x343-custom.jpg" alt="Beispiel: FlairBuilder im Test" width="576" height="343" /><p class="wp-caption-text">Beispiel: FlairBuilder im Test</p></div>
<p><strong>iPLOTZ</strong></p>
<p>Ob webbasiert oder als Desktopanwendungen, <a href="http://www.iplotz.com" target="_blank">iPlotz</a> hat es ganz weit nach vorne in unserem Test geschafft. Das Tool bietet so ziemlich alles, was wir uns w&#252;nschten: Intuitive Bedienung, Abbildung der Sitemap, Masterfunktion, flexible Seitengr&#246;&#223;e, verschiedene Designs, Export als html und pdf und vieles mehr. Auch f&#252;r die interne Abstimmung eignet sich das Tool dank seiner Kommentarfunktion gut. Schwierig wurde es erst, als wir unser Testprojekt exportierten: Die Navigation war verschoben, Seiten mit viel Content wurden nicht vollst&#228;ndig angezeigt (weder im pdf- noch html-Export). Und auch hier wieder: als problematisch stellt sich die Frage nach der Abstimmung mit Kunden heraus. Denn auch das exportierte pdf kann nur unter bestimmten Voraussetzungen und mit neueren Versionen des Acrobat Readers kommentiert werden. Also auch wenn iPlotz wirklich gut abgeschnitten hat, was Bedienbarkeit und Fuktionalit&#228;t angeht, leider hat es sich auch in Sachen Abstimmung mit Kunden nicht bew&#228;hrt.</p>
<div id="attachment_1101" class="wp-caption alignnone" style="width: 592px"><img class="size-full wp-image-1101" title="screenshot_iplotz" src="http://www.comander.de/wp-content/uploads/2010/05/screenshot_iplotz-582x438-custom.jpg" alt="Beispiel: iPLOTZ im Test" width="582" height="438" /><p class="wp-caption-text">Beispiel: iPLOTZ im Test</p></div>
<p><strong>PROTOSHARE</strong></p>
<p>Schon das Demo-Video von <a href="http://www.protoshare.com" target="_blank">ProtoShare</a> wirkt sehr &#252;berzeugend. Wie der Name ProtoShare schon impliziert, bietet die webbasierte Anwendung wirklich alles, was zur Erstellung von Prototypen, zur internen und externen Abstimmung n&#246;tig ist. Das Tool kann eigentlich sogar noch mehr, als wir uns gew&#252;nscht hatten. Denn auch die Entwicklung des Projekts von einfachen Wireframes hin zu Designentw&#252;rfen l&#228;sst sich hier nachzeichnen.</p>
<p>Bei der Erstellung der Wireframes hat uns gut gefallen, dass sich sowohl das Men&#252; als auch der Strukturbaum automatisch generieren lassen. Neben der Masterfunktion k&#246;nnen auch Elemente, sogenannte Clippings erstellt und global verwendet werden. Auf diese „Library“ kann man auch bei folgenden Projekten wieder zugreifen. Auch Metatags f&#252;r die Suchmaschinenoptimierung k&#246;nnen direkt abgespeichert werden.</p>
<p>Zudem lassen sich mit ProtoShare ganz leicht interaktive Elemente wie Pop-Ups usw. erstellen. Auch die Abstimmung l&#228;sst sich mit ProtoShare gut regeln. Ob Kollegen oder Kunden, man kann entsprechende Accounts anlegen und Benutzerrechte vergeben. So k&#246;nnen alle Beteiligten ihr Feedback abgeben und Themen diskutieren. Zus&#228;tzlich kann auch ein Word-Dokument exportiert werden. Hier kann man selektieren, was darin enthalten sein soll (Bereiche, Metatext, Notizen usw.)</p>
<p><strong>ProtoShare hat uns soweit &#252;berzeugt, dass wir damit ein Projekt erstellen werden und hoffen, dass es sich auch in der Praxis bew&#228;hrt!</strong></p>
<div id="attachment_1109" class="wp-caption alignnone" style="width: 621px"><img class="size-large wp-image-1109" title="screenshot_protoshare" src="http://www.comander.de/wp-content/uploads/2010/05/screenshot_protoshare1-611x315-custom.jpg" alt="Beispiel: Protoshare im Test" width="611" height="315" /><p class="wp-caption-text">Beispiel: Protoshare im Test</p></div>
<div id="attachment_1110" class="wp-caption alignnone" style="width: 624px"><img class="size-large wp-image-1110" title="screenshot_protoshare_view_design" src="http://www.comander.de/wp-content/uploads/2010/05/screenshot_protoshare_view_design-614x313-custom.jpg" alt="Beispiel: Protoshare Review Modus " width="614" height="313" /><p class="wp-caption-text">Beispiel: Protoshare Review Modus </p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.comander.de/2010/05/31/wireframing-tools-im-test/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Maussteuerung via Kopf</title>
		<link>http://www.comander.de/2009/05/12/154/</link>
		<comments>http://www.comander.de/2009/05/12/154/#comments</comments>
		<pubDate>Tue, 12 May 2009 17:04:52 +0000</pubDate>
		<dc:creator>joh</dc:creator>
				<category><![CDATA[Techniker]]></category>
		<category><![CDATA[erweiterung]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[software]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://www.comander.de/?p=154</guid>
		<description><![CDATA[Die Jungs von eyetwig haben eine Software ver&#246;ffentlicht, die es einem erm&#246;glicht, dass der Mauszeiger den nat&#252;rlichen Kopfbewegungen folgt. Und das funktioniert &#252;berraschender Weise schonmal ausgesprochen gut. Wer Lust (und einen Mac) hat, kann die Software auf der oben genannten Webseite runterladen und einmal selbst testen. (Webcam notwendig).]]></description>
			<content:encoded><![CDATA[<p><img class="size-full wp-image-158 alignnone" title="mausmitdemkopf1" src="http://www.comander.de/wp-content/uploads/2009/05/mausmitdemkopf1.jpg" alt="mausmitdemkopf1" width="392" height="380" /></p>
<p>Die Jungs von <a href="http://www.eyetwig.com/" target="_blank">eyetwig</a> haben eine <a href="http://www.eyetwig.com/php/blog/pivot/entry.php?id=15#body" target="_blank">Software ver&#246;ffentlicht</a>, die es einem erm&#246;glicht, dass der Mauszeiger den nat&#252;rlichen Kopfbewegungen folgt. Und das funktioniert &#252;berraschender Weise schonmal ausgesprochen gut. Wer Lust (und einen Mac) hat, kann die Software auf der oben genannten Webseite runterladen und einmal selbst testen. (Webcam notwendig).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.comander.de/2009/05/12/154/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

