<?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>Sopa de Pixels &#187; AI</title>
	<atom:link href="http://www.sopadepixels.com/category/ai/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.sopadepixels.com</link>
	<description></description>
	<lastBuildDate>Thu, 05 Mar 2009 11:43:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Iconografía para el diseño de interacción y la arquitectura de la información</title>
		<link>http://www.sopadepixels.com/iconografia-para-el-diseno-de-interaccion-y-la-arquitectura-de-la-informacion/</link>
		<comments>http://www.sopadepixels.com/iconografia-para-el-diseno-de-interaccion-y-la-arquitectura-de-la-informacion/#comments</comments>
		<pubDate>Wed, 25 Jun 2008 19:16:14 +0000</pubDate>
		<dc:creator>Oriol Boix</dc:creator>
				<category><![CDATA[AI]]></category>
		<category><![CDATA[Diseño interacción]]></category>

		<guid isPermaLink="false">http://www.sopadepixels.com/?p=16</guid>
		<description><![CDATA[Podemos dividir la tarea de prototipado y defenición de la funcionalidad de un site en dos grandes bloques consecutivos:

Blueprint
Wireframe

Blueprint: En el diseño de interacción y la arquitectura de la información entendemos por blueprint (o arquitecture map) el diagrama que muestra la relación entre las distintas páginas o acciones del sistema que estamos creando. Es el [...]]]></description>
			<content:encoded><![CDATA[<p>Podemos dividir la tarea de prototipado y defenición de la funcionalidad de un site en dos grandes bloques consecutivos:</p>
<ul>
<li>Blueprint</li>
<li>Wireframe</li>
</ul>
<p><strong>Blueprint:</strong> En el diseño de interacción y la arquitectura de la información entendemos por blueprint (o arquitecture map) el diagrama que muestra la relación entre las distintas páginas o acciones del sistema que estamos creando. Es el esquema de funcionamiento del site.</p>
<p><img class="alignnone size-full wp-image-18" title="Blueprint example" src="http://www.sopadepixels.com/wp-content/uploads/2008/06/0003_blueprint.png" alt="" width="560" height="304" /></p>
<p><strong>Wireframe:</strong> El wireframe (o mockup, o maqueta) nos permite definir como se estructuran los elementos en la interfaz y la relación entre ellos. Es el esqueleto de la página.</p>
<p><img class="alignnone size-full wp-image-17" title="Wireframe example" src="http://www.sopadepixels.com/wp-content/uploads/2008/06/0002_wireframe.png" alt="" width="560" height="482" /></p>
<p>Hay distintas propuestas gráficas para llevar a cabo estas tareas pero ninguna de ellas definitiva. Lo mejor es trabajar con lo que te interese de cada propuesta y, finalmente, tener la tuya propia.<br />
Lo importante es que sea fácil de entender, de explicar y que cubra nuestras necesidades. Al fin y al cabo los sistemas de prototipado son, ante todo, una herramienta de comunicación con nosotros mismos y con el resto del equipo.</p>
<p>Hay mucho y variado software para realizar estas tareas y, de hecho, cualquiera nos sirve. Podemos realizar-las hasta en papel, que a mi me parece una buena opción para plasmar nuestra primera estructura mental y para empezar a desarrollar en las primeras fases del proyecto, pero floja para hacer una diagramación detallada y comunicable.<br />
<a class="externo" title="Prototipos de papel" href="http://www.usolab.com/wl/2008/03/prototipos-de-papel.php">Aquí varios enlaces interesantes sobre diagramación en papel</a></p>
<p>Tal vez los más usados son:</p>
<ul>
<li><a class="externo" title="microsoft visio" href="http://office.microsoft.com/es-es/visio/FX100487863082.aspx">Microsoft Visio</a> (Windows): aquí una <a class="externo" title="Storyboarding Rich Internet Applications with Visio" href="http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio">interesante review</a></li>
<li><a class="externo" title="Omnigraffle" href="http://www.adobe.com/es/products/fireworks/">Omnigraffle</a> (Mac): mi favorito para Blueprint</li>
<li><a class="externo" title="Fireworks" href="http://www.adobe.com/es/products/fireworks/">Fireworks</a> (Windows / Mac): mi favorito para Wireframe. Aquí una <a class="externo" title="Wireframing with Fireworks CS3" href="http://www.adobe.com/devnet/fireworks/articles/wireframing.html">interesante review</a></li>
</ul>
<p>Os dejo otro enlace con <a class="externo" title="Algunas herramientas para el prototipado" href="http://qweos.net/blog/2006/08/14/algunas-herramientas-para-el-prototipado/">más información sobre herramientas de prototipado</a></p>
<p>En cuanto a iconografía para blueprint, a mi me gusta especialmente la propuesta de <a class="externo" title="Jesse James Garrett" href="http://www.jjg.net/">Jesse James Garrett</a> perfectamente traducida al castellano por <a class="externo" title="Mantruc" href="http://www.mantruc.com/">Javier Velasco</a>:</p>
<ul>
<li><a class="externo" title="Vocabulario visual" href="http://www.jjg.net/ia/visvocab/spanish.html"> Un vocabulario visual para describir arquitectura de información y diseńo de interacción</a></li>
</ul>
<p>En cuanto a wireframe, fireworks ya tiene por defecto la mayoría de elementos que necesitaremos. De todas formas, por la red encontramos muchas otras alternativas para ésta y para las otras herramientas.</p>
<p>En <a class="externo" title="No solo usabilidad" href="http://www.nosolousabilidad.com">nosolousabilidad.com</a> hay un <a class="externo" title="Diagramación" href="http://www.nosolousabilidad.com/articulos/diagramacion.htm">interesante artículo</a> sobre AI acompañado de buenos enlaces para encontrar, entre otras cosas, iconografía.</p>
<p>También son interesantes los <a class="externo" title="Iconografía isométrica" href="http://petervandijck.com/iabook/template.htm">iconos para diagramación en isométrico</a> de Peter Van Dijck.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sopadepixels.com/iconografia-para-el-diseno-de-interaccion-y-la-arquitectura-de-la-informacion/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
