UX DESIGN

Instructor:
JORGE LUQUE CHAMBI
UX DESIGN

Diseñar prototipos de páginas web

 Contenido
Diseñar interacciones UI
01 • ¿Qué es un prototipo?

02 • Sketching

03 • Arquitectura de información

04 • Wireframes

05 • Prototipo de baja fidelidad

06 • Testing

07 • Prototipo de alta fidelidad

08 • UI Testing
09 • Prototipando con Adobe XD

Instructor: JORGE LUQUE CHAMBI

Diseñar prototipos de páginas web
Instructor: JORGE LUQUE CHAMBI
Diseñar prototipos de páginas web
¿Qué es un prototipo?

Un prototipo es una simulación del producto final. Es como una

maqueta interactiva cuyo objetivo principal es probar si el flujo de
interacción es el correcto o si hace falta corregirlo.
Los prototipos dan vida a cualquier diseño y proporcionan una
gran cantidad de información sobre la interacción del usuario en
varios niveles.

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
¿Qué es un prototipo?

¿Cómo se crean los prototipos?

Normalmente se tiende a diseñar prototipos de baja fidelidad
porque, siempre y cuando un prototipo simule el flujo de
interacción deseado y de la sensación de que estamos usando el
producto final, será aceptable.
Elementos como el diseño visual pueden quedarse en un segundo
plano por el momento. Y, además, se tarda mucho menos tiempo
y requiere menos esfuerzo construir un prototipo de baja
fidelidad. Diseñar prototipos de páginas web
Instructor: JORGE LUQUE CHAMBI
Sketching

El sketching, generalmente, hace referencia a un boceto. Es un

primer apunte de un diseño de producto que se llevará a cabo más
adelante de manera más concienzuda y detallada.
Eso sí, estos primeros trazos tienen que transmitir la idea general
del dibujo de manera sencilla, para conseguir que quien lo vea
pueda hacerse una idea con rapidez de lo que se pretende
representar.

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Sketching

Pero este no es su único significado, ya que la palabra sketching

también hace referencia al acto de resumir en frases breves, o en
un esquema, una idea. Todo con el objetivo de poder transmitirla
después a una audiencia o a otra persona de forma rápida y
sencilla.
Sin artificios ni elementos superfluos, ni otros puntos de los que es
más apropiado hablar en una fase más avanzada, una vez se haya
aprobado el proyecto o decidido comenzar a darle vida.
Diseñar prototipos de páginas web
Instructor: JORGE LUQUE CHAMBI
Sketching

Menos errores en los diseños

El uso del sketching tiene otra ventaja adicional: la reducción de
errores en el proceso de diseño.
Dado que se puede utilizar para recoger opiniones, decisiones de
cambio, consejos, cambios de ideas o matices en el punto en el
que se celebra una reunión sobre el diseño de un producto, se
reduce la posibilidad de fallar que sí puede darse si se espera para
anotar todo.
Diseñar prototipos de páginas web
Instructor: JORGE LUQUE CHAMBI
Sketching

Menos errores en los diseños

Esto es así tanto para su fase de prototipado como para el diseño
final, aunque sobre todo en el primero de los casos. También se
consigue ahorrar dinero, puesto que un menor nivel de errores
puede llevar a que el producto no tenga que repetirse en la fase de
prototipado. O lo que es peor, cuando ya se ha llevado a
producción.

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Arquitectura de información

¿Qué es la arquitectura de información?

La arquitectura de la información no es…

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Arquitectura de información

¿Qué es la arquitectura de información?

La arquitectura de la información es…

Estructurar, organizar y clasificar información en base a las

necesidades del usuario facilitando su navegación y
comprensión del sitio web

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Arquitectura de información

¿Qué beneficios obtenemos con la arquitectura de información?

• Experiencia de uso, eliminado el costo de frustración del
usuario.
• Evitar el costo de mantenimiento del sitio web.
• Posicionamiento en buscadores
• Evitar el costo de asistencia a los usuarios.

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Arquitectura de información

¿Cuáles son las tareas de un arquitectura de información?

• Inventariar contenidos
• Definir taxonomías o jerarquizar categorías
• Sistematizar el rotulado
• Estructurar la información. Mapa de estructura
• Diseñar sistemas de navegación y búsqueda
• Definir esquemas de ordenación de la información
• Diseñar wireframes o prototipos
Diseñar prototipos de páginas web
Instructor: JORGE LUQUE CHAMBI
Arquitectura de
información

¿Qué
documentos
genera el
arquitecto de
información?

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Arquitectura de información

Blueprints / Estructuras y navegación

• Inventario o matriz de contenidos
• Mapa de arquitectura / mapa de sitio

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Arquitectura de información

Inventario o matriz de contenidos

• El inventario de contenidos web es un documento en el que
reúnes todas las páginas que llevan al contenido de tu sitio web,
es decir, organizar todo en forma ordenada para darle sentido y
continuidad a tu blog.
• El tipo de organización depende exclusivamente de ti y de las
características de tu proyecto. Puedes hacerlo en hojas de
cálculo de Excel o en cualquier otra herramienta de Microsoft
Office. Diseñar prototipos de páginas web
Instructor: JORGE LUQUE CHAMBI
Arquitectura de información

Inventario o matriz de contenidos

• Lo importante es decidir qué contenido sirve, qué no y cuáles
son los que se pueden arreglar para ayudarte a posicionar en
buscadores, indexarte más rápidamente en Google, optimizar
tu sitio web y ganarte el reconocimiento dentro de la web.

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Arquitectura de información

Ventajas de un inventario de contenido web

• Mejora la visibilidad de la búsqueda orgánica.
• Mejora el SEO.
• Determinar problemas de contenido.
• Mejora la estructura de información, el contenido de sitio web.
• Cuentas con una herramienta para evaluar la calidad del
contenido que tienes en tu sitio web.
Diseñar prototipos de páginas web
Instructor: JORGE LUQUE CHAMBI
Arquitectura de información

Ventajas de un inventario de contenido web

• Encontrar vacíos en tu contenido.
• Uso adecuado de palabras clave.
• Una excelente herramienta o estrategia para la reutilización de
contenidos que pueden indexarse rápidamente.
• Mejora la usabilidad de tu sitio web.
• Ayuda a realizar y complementar contenido efectivo.
Diseñar prototipos de páginas web
Instructor: JORGE LUQUE CHAMBI
Arquitectura de información

Pasos para crear un inventario de contenidos web exitoso

• Establecer objetivos claros: ¿para qué o porque estas realizando este
inventario?
• Tener claro que vas a recuperar, desechar o mejorar.
• Filtrar el contenido en la auditoria o inventario.
• Mantener un seguimiento periódico para no perder los avances.
• Conocer la línea de tiempo de tu contenido para su optimización.
• Enfocar todo el contenido a tu mapa de palabras clave principales o nicho.
Diseñar prototipos de páginas web
Instructor: JORGE LUQUE CHAMBI
Wireframes

Son esquematizaciones de
la interfaz, documentos en
los que se representa como
deberá ser la distribución,
ordenación y relación de
los diferentes elementos en
cada una de las paginas del
sitio web.

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Wireframes

Wireframes de baja
identidad

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Wireframes

Wireframes de baja identidad

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Wireframes

Wireframes de alta
identidad

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Wireframes

Wireframes para móviles

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Wireframes

Wireframes para tablets

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Wireframes

Wireframes para
Sitios web

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Wireframes

Wireframes para
Sitios web

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
Wireframes

Herramientas más usadas para diseñar Wireframes

• Balsamiq
• Axure
• Pencil 1.3

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI
 “Documentar
la arquitectura de información
es diseñar experiencia de usuario”

Diseñar prototipos de páginas web

Instructor: JORGE LUQUE CHAMBI