WIREFRAMES clase 02

DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014

INTRODUCCIÓN

PRESENTACIÓNHola, soy Rodrigo Vera, y bienvenidos al taller de Wireframes.

RODRIGO VERA YERKO PEZZOPANEDiseñador Gráfico

Diseñador UX Diseñador UX

@rots @ypezzopane

RODRIGO VERA YERKO PEZZOPANEDiseñador Gráfico

Diseñador UX Diseñador UX

@rots @ypezzopane

LO QUE VEREMOS HOYRepresentación ¿Qué es un Wireframe? Características y Ventajas Malas Prácticas Otros Usos Herramientas para hacer WF Referencias!

REPRESENTACIÓN

DIAGRAMACIÓNEl primer paso en el diseño de objetos o procesos es la representación mediante diagramas de su estructura, funcionamiento y comportamiento, concretando así las primeras ideas abstractas.

DIAGRAMACIÓNEn el caso de productos interactivos con interfaz, como por ejemplo los sitios web, esta interfaz también es objeto de diagramación, especificando cuál será la organización y estructuración visual de los diferentes elementos.

DIAGRAMACIÓNLos diagramas se deben realizar a partir de la información recogida durante las etapas de investigación de la audiencia, en las que se estudia a los usuarios con el objetivo de crear un producto que satisfaga sus necesidades. !http://www.nosolousabilidad.com/articulos/diagramacion.htm#sthash.x7e0bp0o.dpuf

REPRESENTACIÓN EN LA AI

http://www.nosolousabilidad.com/articulos/diagramacion.htm

QUÉ ES UN WIREFRAME

UN POCO DE HISTORIA…

¿UN BOCETO?Un boceto es un dibujo hecho a mano alzada, utilizando lápiz, papel y goma de borrar, realizado generalmente sin instrumentos de dibujo auxiliares.

Puede ser un primer apunte del objeto ideado que aún no está totalmente definido. Es un dibujo rápido de lo que luego llegará a ser un dibujo definido o la obra de arte final en sí.

UN POCO DE HISTORIA…

Bocetos Da Vinci 1495 - 1497

UN POCO DE HISTORIA…

Bocetos Da Vinci 1495 - 1497

UN POCO DE HISTORIA…

Bocetos Da Vinci 1495 - 1497

UN POCO DE HISTORIA…

Planos Da Vinci

DIBUJO TÉCNICOEl dibujo técnico es un sistema de representación gráfica de diversos tipos de objetos, con el propósito de proporcionar información suficiente para facilitar su análisis, ayudar a elaborar su diseño y posibilitar su futura construcción y mantenimiento. Suele realizarse con el auxilio de medios informatizados o, directamente, sobre el papel u otros soportes planos.

UN POCO DE HISTORIA…

Blueprint

UN POCO DE HISTORIA…

Blueprint

UN POCO DE HISTORIA…

Blueprint

MODELADO 3DWireframe (marco o malla de alambre) es un algoritmo de renderización del que resulta una imagen semitransparente, de la cual solo se dibujan las aristas de la malla que constituye al objeto (de ahí su nombre).

Casi nunca se emplea en la representación final de una imagen, pero sí en su edición, debido a la escasa potencia de cálculo necesaria (comparada con otros métodos).

UN POCO DE HISTORIA…

Wireframes 3D

UN POCO DE HISTORIA…

Wireframes 3D

LOS WIREFRAMES SON…

En interfaces digitales, un wireframe es una representación esquemática de una pantalla, sin elementos gráficos, que muestran contenido y comportamiento de las páginas.

LOS WIREFRAMES SON…

Es la metodología que permite hacer diseños simplificadosdetallando su estructura y los elementos relevantes que se incorporarán para atender a las “personas” que llegan a visitar el sitio web o espacio digital que se desarrolla.

LOS WIREFRAMES SON…

Mediante esta forma de trabajo se obliga a los participantes en el desarrollo, a definir en forma anticipada los elementos que se deben incorporar en la interfaz, colaborando de modo eficaz a la toma de las decisiones más relevantes acerca del contenido y la interacción, junto con establecer la ubicación de dichas zonas en la pantalla.

LOS WIREFRAMES SON…

Adicionalmente el hecho de utilizar wireframes en el diseño, permite llevar a cabo pruebas tempranas de las interfaces y determinar si cumplen con los objetivos que se espera conseguir a través de ellas

LOS WIREFRAMES SON…

LOS WIREFRAMES SON…

LOS WIREFRAMES SON…

LOS WIREFRAMES SON…

RELACIÓN CON AIUn proyecto de interfaz digital, tiene a lo menos 4 etapas fundamentales: Estrategia, Arquitectura de Información, Diseño de Interfaz y Desarrollo.

RELACIÓN CON AI

El Wireframe es el paso intermedio entre Arquitectura de Información y Diseño, pasa de la “mentalidad estructural” de un

mapa de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Interfaz.

ESTRATEGIA AI UI DESARROLLLOWIREFRAMES

REPRESENTACIÓN EN LA AI

http://training.ayerviernes.com/

WIREFRAMES

++ COMUNICACIÓNSirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.

++ COMUNICACIÓN

UTILIDADOfrece una perspectiva basada principalmente en la arquitectura del contenido Ayudan a que el proyecto no se retrase por falta de definición Son imprescindibles para definir los comportamientos en la interacción

TIPOS DE WIREFRAME

ALTAAlta fidelidad: Los wireframes de alta fidelidad son usados a menudo para documentar, porque ellos incorporan un nivel de detalle que se acerca más al diseño final de una página web, pero toma más tiempo para ser creado.

ALTA

BAJABaja fidelidad: Caracterizado por un dibujo en bruto o un boceto rápido, los wireframes de baja fidelidad tienen menos detalles y son rápidos de producir. Ayudan a un equipo de proyecto a colaborar más efectivamente debido a que son más abstractos, usando rectángulos y etiquetas para representar el contenido. Muestra o contenido simbólico son utilizados para representar datos cuando el contenido real no está disponible.

BAJA

CARACTERÍSTICAS Y VENTAJAS

CARACTERÍSTICAS

CARACTERÍSTICAS

Se utilizan en la creación de todas las interfaces digitales (web, móviles, ATM, etc.).

CARACTERÍSTICAS

Se diseñan sólo las páginas tipo (plantillas).

Home

Verduras Jugos y Bebidas Comida no Perecible Fiambres y Quesos Artículos de Aseo

Lechugas

Tomates

Cebollas

Jugos Watts

Bebidas

Coca Cola

Sprite

Fanta

Arroz

Fideos

Conservas

Jamón

Quesos

Chanco

Cabra

Gauda

Papel Higiénico

Útiles de Aseo

Útiles de Cocina

Redes Sociales Ubicación Doña Juana ContactoLogin/Registro

Sociabilizar en Redes Imprimir Comentar Agregar a

FavoritosDescarga

PDF

Funcionalidades Generales

CARACTERÍSTICAS

Pueden ser dibujados a mano o creados con alguna aplicación computacional.

CARACTERÍSTICAS

Son simples y no tienen distracciones visuales tales como color o imágenes.

CARACTERÍSTICAS

Siempre van acompañados de una explicación acerca de las zonas e interacciones.

ventajas

VENTAJAS

Las correcciones son objetivas, basadas en contenidos y funcionalidad, no en diseño.

VENTAJAS

Se reducen los tiempos de trabajo y gastos involucrados en el proyecto.

VENTAJAS

Permite la comunicación fluida entre el equipo de trabajo y el cliente.

VENTAJAS

Como es una estructura simple y enfocada en los contenidos, permite al diseñador tener plena libertad al momento de diseñar la interfaz.

VENTAJAS

Permiten visualizar interacciones y flujos.

VENTAJAS

Permiten identificar problemas que puedan presentarse más adelante.

MALAS PRÁCTICAS

MALAS PRÁCTICAS

Uso de color e imágenes.

MALAS PRÁCTICAS

Mezcla con interfaz real.

MALAS PRÁCTICAS

Wireframes muy complejos, mezclando formas y colores.

MALAS PRÁCTICAS

Wireframes muy simples.

OTROS USOS

MAPA DE DIVS

MAPA DE DIVS

MAPA DE DIVS

HERRAMIENTAS PARA DISEÑAR WIREFRAMES

HERRAMIENTAS PARA DISEÑAR WIREFRAMES

Lápiz y papel.

HERRAMIENTAS PARA DISEÑAR WIREFRAMES

Lápiz y papel.

1024 960 800 1024960800

HERRAMIENTAS PARA DISEÑAR WIREFRAMES

Lápiz y papel.

HERRAMIENTAS PARA DISEÑAR WIREFRAMES

Prototipos en papel: Es ideal para hacer los primeros esbozos del funcionamiento de una futura aplicación constituyéndose en un elemento de testado y debate rápido (económico) que evitará futuros y costosos errores en fases posteriores de desarrollo.

HERRAMIENTAS PARA DISEÑAR WIREFRAMES

https://www.youtube.com/watch?v=GrV2SZuRPv0

HERRAMIENTAS PARA DISEÑAR WIREFRAMES

Herramientas digitales: Es la manera para crear wireframes detallados y de alta calidad.

Omnigraffle Visio Axure Balsamiq Fireworks Keynote

Apliaciones escritorio

Apliaciones web

Prototyper Hotgloo iplotz Balsamiq Cacoo

REFERENCAS!

PARA LEER

Parte III - Wireframes (Pags. 307 - 313)

INFORMATION ARQUITECTURE FOR DE WORLD WIDE WEB (Morvile & Rosenfield)

PARA VER

Chapter 6 - The Skeleton Plane (Pags. 128-131)

THE ELEMENTS OF THE USER EXPERIENCE (Jesse James Garret)

PARA VER

THE GUIDE TO WIREFRAMING (Chris Bank)

http://uxpin.com/guide-to-wireframing.html

PARA VER

http://www.wireframeshowcase.com/

https://www.flickr.com/groups/ilovewireframes/

http://moobileframes.tumblr.com/

FIN CLASE 02