Diseño de Wireframes y Mockups para UX

PROTOTIPADO
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2015
WIREFRAMES Y MOCKUPS
CLASE 01

PRESENTACIÓN
Hola, soy Rodrigo Vera, y bienvenidos
al taller de prototipos

¿Diseñadores?
¿Periodistas?
¿Ingenieros?
¿Bibliotecarios?

Es un conjunto de factores, cuyo resultado es la
creación de un producto o servicio.

No depende sólo de factores de diseño, sino
también de las emociones y sentimientos que
genera una marca en los usuarios.
USER EXPERIENCE

Para hacer UX hay que entender el producto, la
situación, el contexto y los hábitos de uso de un
determinado grupo de personas.

USER EXPERIENCE

https://www.youtube.com/watch?v=m9R9z7P1eME
USER EXPERIENCE

https://vimeo.com/19131028I<3 UX DESIGN (PARTE I)
UX DESIGN
https://vimeo.com/19131028

https://vimeo.com/21691333I<3 UX DESIGN (PARTE II)
UX DESIGN

U S E R
E X P E R I E N C E
( U X )
E T H O S
S E R V I C I O
I N T E R FA Z
USER EXPERIENCE
ETHOS: La forma común de vida o de comportamiento que adopta un
grupo de individuos que pertenecen a una misma sociedad

U S E R E X P E R I E N C E
U S A B I L I D A D
D I S E Ñ O
A C C E S I B I L I D A D
M A R K E T I N G
O P T I M I Z A C I Ó N E R G O N O M Í A
H C I
O P E R A C I Ó N
USER EXPERIENCE

Henry Dreyfuss, autor del libro Designing for people (1955) popularizó la concepción del diseño
como proceso a partir de sus diseños de teléfonos de la serie 500 para Bell Telephones. Este
diseñador industrial, pionero del diseño centrado en el usuario, estudió cómo se construían los
teléfonos, cómo se percibían y eran utilizados por las personas. Sus conclusiones fueron aplicadas a
un nuevo diseño donde se corregían aspectos como la forma, el tamaño, las proporciones o el color
http://www.nosolousabilidad.com/manual/3.htm
DISEÑO CENTRADO EN EL USUARIO

INTERACCIÓN HUMANO
COMPUTADOR (HCI)

INTERACCIÓN HUMANO COMPUTADOR (HCI)
Es la disciplina que estudia el intercambio de
información mediante software entre las personas
y las computadoras.

Se encarga del diseño, evaluación e implementación
de los aparatos tecnológicos interactivos con el objetivo
de que el intercambio sea más eﬁciente: minimizar
errores, incrementar la satisfacción, disminuir la
frustración y, en deﬁnitiva, hacer más productivas las
tareas que rodean a las personas y los computadores.

Lo primero y principal es la persona, el usuario

que utiliza el sistema.

El buen diseño ayuda a la gente a hacer

cosas que nos importan.

El mal diseño es frustrante.

El mal diseño es frustrante e incluso cuesta vidas.

…e incluso cuesta vidas.

A veces, las mejores interfaces
se convierten en invisibles
para nosotros, cuando
pasamos de manipular la
interfaz, a realizar tareas.

7 PRINCIPIOS DEL
DISEÑO UNIVERSAL

7 PRINCIPIOS DEL DISEÑO UNIVERSAL
1. Igualdad de uso
El diseño debe ser fácil de usar y adecuado para todas las personas
independientemente de sus capacidades y habilidades.

1. Igualdad de uso
El diseño debe ser fácil de usar y adecuado para todas las personas
independientemente de sus capacidades y habilidades.

2. Flexibilidad
El diseño debe poder adecuarse a un amplio rango de preferencias

y habilidades individuales.

3. Simple e intuitivo
El diseño debe ser fácil de entender independientemente de la experiencia, los
conocimientos, las habilidades o el nivel del usuario.

4. Información fácil de percibir
El diseño comunica de manera eﬁcaz la información necesaria para el usuario.

5. Tolerante a errores
El diseño debe minimizar las acciones accidentales o fortuitas que

puedan tener consecuencias fatales o no deseadas.

6. Escaso esfuerzo
El diseño debe poder ser usado eﬁcazmente y con el mínimo esfuerzo posible.

7. Dimensiones apropiadas
Los tamaños y espacios deben ser apropiados para el alcance, manipulación y uso
por parte del usuario, independientemente de su tamaño, posición, y movilidad.

PROTOTIPO
Un prototipo es un ejemplar o primer molde en que
se fabrica una ﬁgura u otra cosa.

PROTOTIPO
Un prototipo también se puede referir a cualquier
tipo de máquina en pruebas, o un objeto diseñado
para una demostración de cualquier tipo.

PROTOTIPO
Un prototipo o prototipado puede ser un modelo del
ciclo de vida del software, tal como el desarrollo en
espiral o el desarrollo en cascada.

WIREFRAME MOCKUP
https://www.youtube.com/watch?v=zNoBmjg-NnQ

Bocetos Da Vinci
UN POCO DE HISTORIA…

Planos Da Vinci

Blueprint

Wireframes 3D

LOS WIREFRAMES SON…
En interfaces digitales, un wireframe es una
representación esquemática de una pantalla, sin
elementos gráﬁcos, que muestran contenido
jerarquizado y comportamiento de las páginas.

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

COMUNICACIÓN
Herramienta de comunicación y discusión entre arquitectos de
información, programadores, diseñadores y clientes.

ELEMENTOS ESENCIALES
Un Wireframe debería, al menos, contar con elementos de:
•navegación
•información
•interacción
•apoyo.

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 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 Video
One morning, when Gregor Samsa
woke from troubled dreams, he
found himself transformed... More...
0:00 / 4:59
URL
Embed

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 de apoyo: Explicaciones e instrucciones.

FUNDAMENTACIÓN Y ENTREGABLES
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 Mobile
Copyright 2010 LG ELECTRONICS.
TODOS LOS DERECHOS RESERVADOS
Foro Comunidad
Lorem Ipsum dolor sit amet, consectetur.
Descargas
Equipos
Smartphones
Código QR

WIREFRAMES = DISEÑO/
Un Wireframe no es el aspecto ﬁnal del
sitio, sino una mera representación
gráﬁca de su contenido.

UTILIDAD
Ofrece una perspectiva basada
principalmente en la arquitectura
del contenido
Ayudan a que el proyecto no se
retrase por falta de deﬁnición
Son imprescindibles para deﬁnir
los comportamientos en la
interacción

CARACTERÍSTICAS
DE LOS WIREFRAMES

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
Favoritos
Descarga
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
Las correcciones son objetivas, basadas en contenidos y
funcionalidad, no en diseño.

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

Permite la comunicación ﬂuida 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 ﬂujos.
VENTAJAS

Permiten identiﬁcar problemas que puedan
presentarse más adelante.
VENTAJAS

MALAS PRÁCTICAS
Uso de color e imágenes.

Mezcla con interfaz real.
MALAS PRÁCTICAS

Wireframes muy complejos, mezclando formas y colores.
MALAS PRÁCTICAS

Wireframes muy simples.
MALAS PRÁCTICAS

HERRAMIENTAS PARA
DISEÑAR WIREFRAMES

Lápiz y papel.
HERRAMIENTAS PARA DISEÑAR WIREFRAMES

1024 960 800 1024960800
Lápiz y papel.

Lápiz y papel.

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.

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

Herramientas digitales: Es la manera para crear wireframes
detallados y de alta calidad.
Omnigrafﬂe
Visio
Axure
Balsamiq
Fireworks
Keynote
Apliaciones
escritorio
Apliaciones
web
Prototyper
Hotgloo
iplotz
Balsamiq
Cacoo
Invision
Marvelapp

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!
• Deﬁne 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

CONSIDERACIONES DEL PROYECTO
Los antecedentes del proyecto son claves para
la deﬁnición y diseño de los wireframes. Es
importante tener presente las deﬁniciones
provenientes del Brief, Estrategia, Benchmark,
Investigación de Usuarios y AI.

CONSIDERACIONES DEL PROYECTO
Consideraciones del Proyecto: Brief, Estrategia, Benchmark,
Investigación de Usuario y AI.
BRIEF ESTRATEGIA BENCH
INVESTIGA
CIÓN
USUARIOS
AI
WIREFRAMES

EL PROCESO
Debemos deﬁnir 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

Es importante saber leer y distinguir distintas profundidades de
contenido en un mapa de contenidos para poder traspasar a una
adecuada jerarquía.
Home
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
Sociabilizar
en Redes
Imprimir Comentar
Agregar a
Favoritos
Descarga
PDF

Comúnmente se diseñan los wireframes para las pantallas más
importantes, complejas y recurrentes a lo largo de la interfaz.
Home
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
Sociabilizar
en Redes
Imprimir Comentar
Agregar a
Favoritos
Descarga
PDF

DEFINICIÓN DE ÁREAS
La deﬁnició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 deﬁnida 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.

• 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 al usuario.

• Reducir la complejidad de las tareas.

• Diseñar a prueba de errores.

CONSIDERACIONES DEL
DISEÑO DE INTERACCIÓN

PARTITURAS DE INTERACCIÓN
Una vez creado el mapa de contenidos podemos
representar, gráﬁcamente, las interacciones complejas
en Mapas de Interacción y Partituras 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.

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

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
ACTIVIDAD

ACTIVIDAD
• Reunirse en grupos.
• Crear supuestos de entrevistas, benchmark, etc.

• Discutir estrategia.

• Crear un wireframe.

• Exponer supuestos

• Exponer estrategia

• Presentar wireframe
ACTIVIDAD PARTE 2

• Evaluar trabajos de compañeros

• Comparar trabajo propio y los revisados

• Listar comparativo (pseudo benchmark)

• Crear en drive carpeta del grupo (con los apellidos)

• Subir a drive registro propio de wireframes (fotos)

• Subir a drive supuestos y comparativo (texto)
ACTIVIDAD PARTE 3

Diseño de Wireframes y Mockups para UX

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Diseño de Wireframes y Mockups para UX

Ähnlich wie Diseño de Wireframes y Mockups para UX (20)

Mehr von Rodrigo Vera

Mehr von Rodrigo Vera (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Diseño de Wireframes y Mockups para UX