Sopa de Pixels » Diseño interacción http://www.sopadepixels.com Thu, 05 Mar 2009 11:43:57 +0000 http://wordpress.org/?v=2.8 en hourly 1 40 recursos para la creación de layouts en CSS http://www.sopadepixels.com/40-recursos-para-la-creacion-de-layouts-en-css/ http://www.sopadepixels.com/40-recursos-para-la-creacion-de-layouts-en-css/#comments Mon, 28 Jul 2008 19:15:51 +0000 Oriol Boix http://www.sopadepixels.com/?p=21 De la forma en la que nos tiene habituados, en noupe.com han hecho una nueva recopilación.

Esta vez la recopilación consiste en 40 recursos para diseño de layouts con css.
Entre ellos encontramos tutoriales, tips y “best practices” para el diseño y diagramación de sites en (X)HTML y CSS.

Imprescindible en los favoritos de cualquier diseñador / maquetador web.

Vía: noupe.com

]]> http://www.sopadepixels.com/40-recursos-para-la-creacion-de-layouts-en-css/feed/ 0 Iconografía para el diseño de interacción y la arquitectura de la información http://www.sopadepixels.com/iconografia-para-el-diseno-de-interaccion-y-la-arquitectura-de-la-informacion/ http://www.sopadepixels.com/iconografia-para-el-diseno-de-interaccion-y-la-arquitectura-de-la-informacion/#comments Wed, 25 Jun 2008 19:16:14 +0000 Oriol Boix http://www.sopadepixels.com/?p=16 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 esquema de funcionamiento del site.

Wireframe: 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.

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.
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.

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.
Aquí varios enlaces interesantes sobre diagramación en papel

Tal vez los más usados son:

Os dejo otro enlace con más información sobre herramientas de prototipado

En cuanto a iconografía para blueprint, a mi me gusta especialmente la propuesta de Jesse James Garrett perfectamente traducida al castellano por Javier Velasco:

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.

En nosolousabilidad.com hay un interesante artículo sobre AI acompañado de buenos enlaces para encontrar, entre otras cosas, iconografía.

También son interesantes los iconos para diagramación en isométrico de Peter Van Dijck.

]]> http://www.sopadepixels.com/iconografia-para-el-diseno-de-interaccion-y-la-arquitectura-de-la-informacion/feed/ 3