<?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>Viva el Pixel &#187; Wireframes</title>
	<atom:link href="http://www.vivaelpixel.com/tag/wireframes/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.vivaelpixel.com</link>
	<description>Blog sobre Tecnologia y marketing online</description>
	<lastBuildDate>Thu, 02 Sep 2010 20:57:19 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Creación de wireframes</title>
		<link>http://www.vivaelpixel.com/2009/12/creacion-de-wireframes/</link>
		<comments>http://www.vivaelpixel.com/2009/12/creacion-de-wireframes/#comments</comments>
		<pubDate>Sat, 26 Dec 2009 13:56:24 +0000</pubDate>
		<dc:creator>Andy Kaiser</dc:creator>
				<category><![CDATA[Diseño]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Usabilidad]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Wireframes]]></category>
		<guid isPermaLink="false">http://www.vivaelpixel.com/?p=79</guid>
		<description><![CDATA[En los procesos de creación de una página web la primera fase debería ser siempre la creación del website wireframe, incluso antes del diseño gráfico de la página web . Básicamente, un wireframe es una guía visual, que se suele utilizar en el diseño de interfaces, que sugiere la estructura de un sitio web y [...]]]></description>
			<content:encoded><![CDATA[<p>En los procesos de creación de una página web la primera fase debería ser siempre la creación del <em>website wireframe,</em> incluso antes del diseño gráfico de la página web . Básicamente, un <em>wireframe </em>es <span id="result_box"><span style="background-color: #ffffff;" title="A website wireframe (also &quot;web wire frame&quot;, &quot;web wireframe&quot;, &quot;web wireframing&quot;) is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">una guía visual, que se suele utilizar en el diseño de interfaces, que sugiere la estructura de un sitio web y las relaciones entre sus páginas. </span><span style="background-color: #ffffff;" title="A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Es un ejemplo de la disposición de los elementos fundamentales en la interfaz/página web.</span></span></p>
<p>Aunque estas practicas no están extendidas lo que deberían, existen múltiples herramientas que permiten crear <em>wireframes </em>de una manera rápida e intuitiva (tanto versiones <em>Cloud Computing &amp; Saas</em>. como programas para diferentes plataformas):</p>
<h3><a href="http://gomockingbird.com/" target="_blank" class="liexternal">1. Mockingbird (Online/Saas)</a></h3>
<p>Es una herramienta online de creación de <em>wireframes </em>(Wireframing-Tool). Al estar programada sobre el Framework &#8220;Cappuccino&#8221; la interacción es como en un programa de escritorio. Los wireframes se crean de una manera sencilla mediante Drag &amp; Drop de elementos comunes en el diseño de páginas web. El resultado puede descargarse o enviarse por email.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-85" title="mockingbird" src="http://www.vivaelpixel.com/wp-content/uploads/2009/12/mockingbird.gif" alt="mockingbird" width="430" height="235" /></p>
<h3><a href="http://www.evolus.vn/Pencil/" target="_self" class="liexternal">2. Firefox Pencil (Mac/Windows)</a></h3>
<p style="text-align: center;">Esta herramienta está basada en el <a href="http://es.wikipedia.org/wiki/Gecko_%28motor_de_renderizado%29" target="_blank" rel="nofollow" class="liwikipedia"><em>Geckoengine</em></a> del navegador Firefox, y se instala como un complemento (plugin). Por lo tanto es una buena solución para esquemas rapidos e independientes de la plataforma. Los wireframes se pueden exportar en formato png. En su contra, el uso es, a veces, un poco más lento debido a que no dispone de atajos de teclado. Pero su escaso tamaño (&lt; 450 KB) y ser una herramienta gratuita la hacen una muy buena elección.<br />
<img class="aligncenter size-full wp-image-88" title="pencil" src="http://www.vivaelpixel.com/wp-content/uploads/2009/12/pencil.jpg" alt="pencil" width="430" height="301" /></p>
<h3><a href="http://www.evolus.vn/Pencil/" target="_self" class="liexternal">3. Iplotz (Online/Saas)</a></h3>
<p>Es una herramienta online que permite crear <em>wireframes</em> clickables. Además incluye funcionalidades básicas de gestión de proyectos, como por ejemplo asignar tareas, por lo que es posible colaborar con otros usuarios en la creación de los <em>wireframes</em>. Aunque sea un servicio Saas, existe una versión descargable programada en AIR. Finalmente, hay múltiples planes que se adaptan a diversos usuarios, desde una versión gratuita (1 proyecto limitado a 5 pantallas) a versiones corporativas (múltiples usuarios y proyectos ilimitados)</p>
<p><img class="aligncenter size-full wp-image-130" title="iplotz" src="http://www.vivaelpixel.com/wp-content/uploads/2009/12/iplotz.png" alt="iplotz" width="430" height="229" /></p>
<h3><a href="http://www.balsamiq.com/" target="_blank" class="liexternal">4. Balsamiq (Mac/Windows)</a></h3>
<p>Balsamiq es una herramienta programada en Flex y la creación de <em>wireframes</em> es muy intuitiva y permite crearlos de una manera rápida. Las plantillas, con un estilo pintado a mano, facilitan que al presentar los prototipos no se malinterpreten con versiones finales. En la web de balsamiq se puede probar la herramienta de manera gratuita y exportar los <em>wireframes</em> a png (con marca de agua). Y en el caso de utilizar la herramienta habitualmente existe una versión de pago, además de una versión onlines/saas en el futuro. Por ultimo al basarse en archivos xml, es posible integrar la herramienta con otros programas como por ejemplo gestores de proyectos.</p>
<p><img class="aligncenter size-full wp-image-132" title="balsamiq" src="http://www.vivaelpixel.com/wp-content/uploads/2009/12/balsamiq.jpg" alt="balsamiq" width="430" height="228" /></p>
<h3><a href="http://www.omnigroup.com/applications/omnigraffle/" target="_blank" class="liexternal">5. Omnigraffle Pro (Mac)</a></h3>
<p>Esta herramienta permite crear rápidamente <em>wireframes</em>, diagramas de proceso y <em>sitemaps</em>. Las características más interesantes de <a href="http://www.omnigroup.com/applications/omnigraffle/" target="_blank" class="liexternal">Omnigraffle</a> es que permite crear capas como en Photoshop y usar plantillas predefinidas, que pueden descargarse de internet &#8211; por ejemplo de <a href="http://graffletopia.com" target="_blank" class="liexternal">Graffletopia</a>. Estas plantillas permite crear fácilmente <em>wireframes</em> de aplicaciones de Facebook y Iphone, Elementos Ajax, Formatos publicitarios o elementos de Social Media Webs. También es posible crear prototipos clickables al poder definir zonas interactivas que al exportarse a pdf clickables dan cierta interacción (aunque no pueden sustituir a prototipos en html)</p>
<p><img class="aligncenter size-full wp-image-134" title="omnigraffle" src="http://www.vivaelpixel.com/wp-content/uploads/2009/12/omnigraffle.png" alt="omnigraffle" width="430" height="263" /></p>
<h3><a href="http://www.axure.com/" target="_blank" class="liexternal">6. Axure (Windows)</a></h3>
<p>En comparación con otras herramientas Axure permite crear prototipos interactivos en html/javascript. La creación de prototipos interactivos es muy util tanto para presentaciones como para pruebas de usuarios y poder hacerse una idea de la futura web. Otra funcionalidad interesante es la posibilidad de crear comentarios en los documentos que luego pueden exportarse a formato Word, para crear la documentación conceptual de un proyecto. Como en otras herramientas es posible cargar plantillas para agilizar la creación de los <em>wireframes</em>.</p>
<p><img class="aligncenter size-full wp-image-135" title="axure" src="http://www.vivaelpixel.com/wp-content/uploads/2009/12/axure.jpg" alt="axure" width="430" height="251" /></p>
<h3><a href="http://www.axure.com/" target="_blank" class="liexternal">7. Adobe FlashCatalyst (Mac/Windows)</a></h3>
<p>Este programa desarrollado por Adobe aun se encuentra en su fase de desarrollo. Aunque solo este disponible una versión beta, la herramienta es muy solida. Al ser un producto Adobe permite cargar archivos de otras herramientas Adobe como por ejemplo Photoshop o Illustrator. Lo más destacable de FlashCatalyst es que permite añadir interacción a los elementos de diseño hasta el punto de crear animaciones avanzadas como por ejemplo scroll, fundidos, etc. Por ello FlashCatalyst es, seguramente, la herramienta ideal para la creación de prototipos con animaciones complejas, ya que es algo limitada para wireframes estáticos.</p>
<p><img class="aligncenter size-full wp-image-137" title="adobe flash catalyst" src="http://www.vivaelpixel.com/wp-content/uploads/2009/12/adobe-flash-catalyst.jpg" alt="adobe flash catalyst" width="430" height="262" /></p>
<h3>Otras referencias</h3>
<p>En resumen, actualmente existen múltiples herramientas para crear <em>wireframes</em> estáticos y prototipos clickables. Puedes encontrar una amplia tabla resumen en en este <a href="http://www.adaptivepath.com/blog/2009/09/16/rapid-prototyping-tools-revisited/" target="_blank" class="liexternal">articulo de Dan Harrelson</a>.</p>
<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-knowledge">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Creaci%C3%B3n+de+wireframes+-+http://b2l.me/cjtbz&amp;source=shareaholic" rel="nofollow" class="external" title="&iexcl;Comp&aacute;rtelo en Twitter!">&iexcl;Comp&aacute;rtelo en Twitter!</a>
		</li>
		<li class="shr-meneame">
			<a href="http://meneame.net/submit.php?url=http://www.vivaelpixel.com/2009/12/creacion-de-wireframes/" rel="nofollow" class="external" title="Enviar a Meneame">Enviar a Meneame</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.vivaelpixel.com/2009/12/creacion-de-wireframes/&amp;title=Creaci%C3%B3n+de+wireframes&amp;summary=En%20los%20procesos%20de%20creaci%C3%B3n%20de%20una%20p%C3%A1gina%20web%20la%20primera%20fase%20deber%C3%ADa%20ser%20siempre%20la%20creaci%C3%B3n%20del%20website%20wireframe%2C%20incluso%20antes%20del%20dise%C3%B1o%20gr%C3%A1fico%20de%20la%20p%C3%A1gina%20web%20.%20B%C3%A1sicamente%2C%20un%20wireframe%20es%20una%20gu%C3%ADa%20visual%2C%20que%20se%20suele%20utilizar%20en%20el%20dise%C3%B1o%20de%20interfaces%2C%20que%20sugiere%20la%20estructura&amp;source=Viva el Pixel" rel="nofollow" class="external" title="Compartir con LinkedIn">Compartir con LinkedIn</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://www.vivaelpixel.com/2009/12/creacion-de-wireframes/&amp;title=Creaci%C3%B3n+de+wireframes" rel="nofollow" class="external" title="&iexcl;Comp&aacute;rtelo con Digg!">&iexcl;Comp&aacute;rtelo con Digg!</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://www.vivaelpixel.com/2009/12/creacion-de-wireframes/&amp;title=Creaci%C3%B3n+de+wireframes" rel="nofollow" class="external" title="Compartir con del.icio.us">Compartir con del.icio.us</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://www.vivaelpixel.com/2009/12/creacion-de-wireframes/&amp;t=Creaci%C3%B3n+de+wireframes" rel="nofollow" class="external" title="Compartir con Facebook">Compartir con Facebook</a>
		</li>
		<li class="shr-bitacoras">
			<a href="http://bitacoras.com/anotaciones/http://www.vivaelpixel.com/2009/12/creacion-de-wireframes/" rel="nofollow" class="external" title="Enviar a Bitacoras">Enviar a Bitacoras</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.vivaelpixel.com/2009/12/creacion-de-wireframes/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
