Wireframe de la teoría a la práctica - DrupalCamp2011

WIREFRAMES de la teoría a la prácticaByron Corrales Rivas@byroncorbyroncorrales.blogspot.combyroncorrales@gmail.comlicencia Creative Commons Atribución-CompartirIgual 3.0 Unported. Servicio de Información Mesoamericano sobre Agricultura Sostenible www.simas.org.ni

4 Sitios webs1 Planeta1 Grupos de trabajo SIMAS y DRUPAL

CONTEXTO

El cliente casi nunca tiene la razón :(Tenemos que ayudarle :)

www.theoatmeal.com

➔ Incremento de costos➔ Aumento en los tiempos de diseño y desarrollo➔ Frustrada relación con el cliente➔ Problemas de comunicación con el equipo CONSECUENCIAS

Definir claramente el árbol de contenidos, secciones, niveles,contenidos relacionados, etc.Definición de sistema de navegación, elementos concretos,tales como menús, guías, botones y otros elementos que debenser claramente distinguibles dentro de la interfazARQUITECTURA DE LA INFORMACIÓN

El Card Sorting es una técnica sencilla en el diseño de laexperiencia del usuario, donde se guía a un grupo de "expertos"o de usuarios, pero sin tener experiencia alguna de diseño demapa de sitio; ésta técnica es utilizada para generar un árbol decategorías.Es un enfoque útil para eldiseño de la arquitectura deinformación, flujos de trabajo,la estructura del menú, o rutasde navegación del sitio.Tipos: Abiertas y Cerradas CARD SORTING

WIREFRAMES

Básicamente, un wireframe esuna guía visual que se sueleutilizar para definir laestructura de un sitio web ylas relaciones entre sus páginas,siendo una base que determinala disposición de los elementosfundamentales en la interfaz dela webGráficamente, son estructurasmuy simples y estánenfocados a visualizar ladistribución de los contenidosdentro de una pantalla

➔ Definen qué quiere tu cliente y cuáles son sus objetivos.➔ Permite la comunicación fluida entre el equipo de trabajo y el cliente➔ Las correcciones son objetivas, basadas en contenidos y funcionalidad.➔ Se evitan las discusiones gráficas.➔ Se reducen los tiempos de trabajo y costos.➔ Permiten visualizar interacciones y flujos.➔ Se pueden identificar problemas de Interacción, Usabilidad, accesibilidad.➔ Como es una estructura simple y enfocada en los contenidos, permite aldiseñador tener plena libertad al momento de diseñar la interfaz VENTAJAS

CARACTERÍSTICAS

Simples y sin distracciones visuales

Se pueden hacer a mano

Explicación de secciones

Escala de Grises

1234567890¿?abcdefghijklmnñopqrstuvwxyz Una tipografía

EJEMPLOS

EYE TRACKING

MALAS PRÁCTICAS

Mezcla de imágenes y colores

Mezcla con interfaz real

Sobrecargar

HERRAMIENTAS

FREEMIND

www.wireframeshowcase.com

http://speckyboy.com/2010/07/14/a-collection-of-printable-web-browser-sketching-and-wireframe-templates/

PENCIL PROJECT

http://cursorlibre.com/2010/09/coleccion-de-widgets-para-la-creacion-de-wireframes-en-inkscape/ INKSCAPE

GOOGLE DOCS

CACOO.COM

Gracias aGráficoshttp://deleket.deviantart.com/theoatmeal.comhttp://www.gracesmith.co.uk/an-interview-with-sketchnote-king-mike-rohde/Fuenteshttp://www.slideshare.net/ypezzopane/taller-de-wireframes-5543793http://www.dinamiclearning.es/diseno/uso-de-wireframeshttp://www.nosolousabilidad.com/articulos/cardsorting_unicauca.htmhttp://www.polargeek.net/mejora-tu-desarrollo-con-wireframes/http://es.scribd.com/doc/50614286/Usabilidad-de-Sitios-Web

Byron Corrales Rivas @byroncor byroncorrales.blogspot.com byroncorrales@gmail.comPREGUNTAS Experiencias LUNCH TIME !!!!

http://byroncorrales.blogspot.com	401
http://www.ubuntu.org.ni	157
http://ubuntu.org.ni	13
http://byroncorrales.blogspot.com.es	9
http://byroncorrales.blogspot.mx	8
http://byroncorrales.blogspot.com.ar	3
http://www.byroncorrales.blogspot.com	3
http://ubuntu.isi.edu.ni	3
http://translate.googleusercontent.com	2
http://byroncorrales.blogspot.fr	1
http://es.flavors.me	1
http://byroncorrales.blogspot.co.nz	1

Wireframe de la teoría a la práctica - DrupalCamp2011

by byroncorrales on Jun 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 602

Statistics

Wireframe de la teoría a la práctica - DrupalCamp2011 — Presentation Transcript