clase práctica wireframes

WIREFRAMES clase 03

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

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…

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

Un Wireframe debería, al menos, contar con:

Elementos de navegación, información, interacción y de apoyo.

ELEMENTOS ESENCIALES

ELEMENTOS ESENCIALES

Elementos de navegación: menúes, breadcrumbs e hipervínculos.

Estas en : Inicio / Lorem Ipsum / Lorem Ipsum / detalle

TabTabTabTabTab

Nulla facilisi. Nullam quis turpis sem, ut egestas lectus.

ELEMENTOS ESENCIALES

Elementos de información: contenidos de texto, imágenes, audio y video.

Sed vestibulum, ipsum lacinia vulputate vulputate, arcu nisi iaculis risus, sed auctor quam augue id odio.

Cras hendrerit blandit nulla sed volutpat. Vestibulum sollicitudin quam sed lectus fringilla blandit.

Quisque ut enim in erat tincidunt convallis.

16:9

This is the Title of the VideoOne morning, when Gregor Samsa woke from troubled dreams, he found himself transformed... More...

0:00 / 4:59

URL

Embed

ELEMENTOS ESENCIALES

Elementos de interacción: botones, formularios, tooltips, sliders, etc.

Done or Cancel

Error message goes here. Error message goes here.Message goes here.

Message goes here.Message goes here.Message goes here.

Comentar

ELEMENTOS ESENCIALES

Elementos de apoyo: validaciones y alertas.

Your XXX has been saved.View in XXX.

* Campo requerido

WIREFRAME = DISEÑOUn Wireframe no es el aspecto final del sitio, sino una mera representación gráfica de su contenido.

/

WIREFRAMES = DISEÑO/

WIREFRAMES = DISEÑO/

WIREFRAMES = DISEÑO/

WIREFRAMES = DISEÑO/

WIREFRAMES = DISEÑO/

WIREFRAMES = DISEÑO/

WIREFRAMES = DISEÑO

WIREFRAMES = DISEÑO

GUÍAS VISUALES

GUÍAS VISUALES

Son estructuras simples conformados principalmente de líneas y cajas.

GUÍAS VISUALES

Están diseñados en escala de grises.

GUÍAS VISUALES

Todos los elementos que lo componen están representados de forma esquemática.

GUÍAS VISUALES

Se utiliza una sola familia tipográfica.

1234567890¿? abcdefghijklmnñopqrstuvwxyz

GUÍAS VISUALES

Se debe usar contenido real.

Lorem ipsum

¿o no?...

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

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

10 CONSEJOS ESENCIALES

10 CONSEJOS ESENCIALES

• Simple sobre todas las cosas • Usa la mayor cantidad de contenido real posible • Siempre trabaja en escala de grises • Evita usar imágenes, logos e iconografía • No te limites a usar una aplicación digital, ¡dibuja! • Define muy bien la estrategia y los contenidos antes de empezar • Siempre haz wireframes antes de diseñar • Explica las zonas e interacciones • Discute los wireframes con tu equipo de trabajo • Corrige problemas detectados en wireframes, no en diseño

CÓMO CREAR UN WIREFRAME

Los antecedentes del proyecto son claves para la definición y diseño de los wireframes. Es importante tener presente las definiciones provenientes del Brief, Estrategia, Benchmark, Investigación de Usuarios y AI.

CONSIDERACIONES

CONSIDERACIONES DEL PROYECTO

Consideraciones del Proyecto: Brief, Estrategia, Benchmark, Investigación de Usuario y AI.

BRIEF ESTRATEGIA

BENCH INVESTIGACIÓN

USUARIOSAI

WIREFRAMES

Una vez creado el mapa de contenidos podemos representar, gráficamente, las interacciones complejas en Mapas de Interacción y Partituras de Interacción.

CONSIDERACIONES DEL DISEÑO DE INTERACCIÓN

PARTITURAS DE INTERACCIÓN

Acá, se pueden definir el número de páginas y elementos de la interfaz para un flujo de interacción en la misma partitura. Un ejemplo práctico, es la definición de un flujo de formulario.

PASAR DE LA AI AL WF

EL PROCESO

Debemos definir que es lo mas importante que queremos representar en nuestra página.

INTERPRETACIÓN DEL MAPA DE CONTENIDO

Es importante saber leer y distinguir distintas profundidades de contenido en un mapa de contenidos para poder traspasar a una adecuada jerarquía.

INICIO

No Perecibles Fiambres y QuesosJugos y Bebidas

Nivel Auxiliar

Marca

Ubicación

Primer Nivel

Verduras Artículos de Aseo

Doña Juana Contacto

Jugos Bebidas

Segundo Nivel

Arroz Fideos Jamones Quesos Hortalizas Tubérculos Útiles de Baño Útiles de Cocina

Tercer Nivel

Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha

Preguntas Frecuentes

INTERPRETACIÓN DEL MAPA DE CONTENIDO

Es importante saber leer y distinguir distintas profundidades de contenido en un mapa de contenidos para poder traspasar a una adecuada jerarquía.

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

PÁGINAS TIPO

Comúnmente se diseñan los wireframes para las pantallas más importantes, complejas y recurrentes a lo largo de la interfaz.

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

DEFINICIÓN DE ÁREAS

La definición de áreas es el primer paso para la creación de un wireframe. Acá, se jerarquizan las áreas de contenido, tales como header, main, sidebar o footer, según su importancia.

HEADER

MAIN SIDEBAR

FOOTER

JERARQUIZACIÓN DE CONTENIDOS

Una vez definida las áreas, debemos ordenar y jerarquizar los contenidos de éstos, donde es muy importante contar con la totalidad de los contenidos para crear wireframes más reales posibles.

ALGUNOS PRINCIPIOS BÁSICOS DE DISEÑO

• Similitud entre elementos.• Recuerdo mejor que memoria.• Realce de elementos.• Preferir siempre lo simple. Siempre mostrar la información

necesaria.• Considerar el patrón de lectura del usuario.• Facilitar la navegación a tu usuario.• Reducir la complejidad de las tareas.• Diseñar a prueba de errores.

FUNDAMENTACIÓN Y ENTREGABLES

La fundamentación tiene como objetivo explicar, de forma detallada, cada decisión de diseño dentro de cada wireframe.

FUNDAMENTACIÓN Y ENTREGABLES

La fundamentación tiene como objetivo explicar, de forma detallada, cada decisión de diseño dentro de cada wireframe.

Carrier 12:00 PM

f ConnectPara participar debes iniciar Sesión

Comunidad LG Mobile

ComparteComunidad LG MobileCopyright 2010 LG ELECTRONICS.TODOS LOS DERECHOS RESERVADOS

Foro ComunidadLorem Ipsum dolor sit amet, consectetur.

DescargasLorem Ipsum dolor sit amet, consectetur.

EquiposLorem Ipsum dolor sit amet, consectetur.

SmartphonesLorem Ipsum dolor sit amet, consectetur.

Código QRLorem Ipsum dolor sit amet, consectetur.

ACTIVIDAD

ACTIVIDAD

La señora Juana tiene un negocio de abarrotes, y resulta que le hablaron de internet y quiere que su comunidad que es en la mayoría un barrio universitario ingrese a la “página web” de su negocio para saber que productos tiene y los precios que maneja Ella nos contó que quiere que su negocio se instale en internet y le ayude a llegar a muchos mas usuarios de los que puede llegar hoy en día. En su local ella vende:!• Verduras• Jugos y Bebidas• Comida no Perecible• Fiambres y quesos• Artículos de Aseo !

ACTIVIDAD

v

INICIO

No Perecibles Fiambres y QuesosJugos y Bebidas

Nivel Auxiliar

Marca

Ubicación

Primer Nivel

Verduras Artículos de Aseo

Doña Juana Contacto

Jugos Bebidas

Segundo Nivel

Arroz Fideos Jamones Quesos Hortalizas Tubérculos Útiles de Baño Útiles de Cocina

Tercer Nivel

Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha

Preguntas Frecuentes

http://www.raincreativelab.com/paperbrowser/

http://960.gs/

DESCARGAS

FIN CLASE 03