Pre trabajo UX
1.0.0
1.0.0
  • Bienvenida
  • Aprender a aprender
    • Introducción
    • El secreto del éxito es el aprendizaje permanente
    • Actividad 1 Habilidades complemetarias
      • Entrega 1
    • Malentendidos del aprendizaje
    • Actividad 2 Metacognición
      • Entrega 2
    • Técnicas Efectivas de Aprendizaje
    • Flujo para desarrollar habilidades
    • Escribe para aprender
    • Actividad 3: Instagram en Figma
    • Entrega 3
  • Intro a UX
    • Introducción
    • Reto
    • UX Design
    • El proceso de diseño
    • Entendimiento del usuario
    • Entrega 1 UX
    • Quiz
    • El segundo diamante
    • Entrega 2 UX
Con tecnología de GitBook
En esta página
  • Intro
  • Sketching
  • Wireframes de alta fidelidad
  • Tareas

¿Te fue útil?

  1. Intro a UX

El segundo diamante

AnteriorQuizSiguienteEntrega 2 UX

Última actualización hace 4 años

¿Te fue útil?

Intro

Para seguir el proceso de diseñar una mejor experiencia de compras de supermercado online, pasaremos al segundo diamante. La etapa de construir un producto que sea fácil de usar.

Mira el siguiente video sobre este diamante.

Sketching

Un sketch es uno o varios dibujos en los que plasmas las ideas que tienes para el producto que vas a construir. Piensa en un sketc como un esquema simplificado de baja fidelidad de tu producto. Este al ser rápido y "barato" (solo usas papel y lápiz).

Elementos que puedes incluir

  • Distribución de espacios

  • Priorización del contenido

  • Funciones disponibles

  • Acciones deseables

  • Relación entre pantallas

Elementos que NO debería tener un sketch

  • Colores

  • Imágenes actuales

  • Fonts

  • Logos

Los sketches son el punto de partida de una diseñadora UX para trabajar en la estructura, contenido y jerarquía. Esta herramienta nos provee de una visión simple en bloques de cómo debe estar organizado el espacio para imágenes y contenido. Estos sketches nos sirven para poder testear rápidamente con usuarios nuestras ideas y ver si es que entienden lo que estamos intentando expresar con nuestros diseños.

Wireframes de alta fidelidad

Un wireframe de alta fidelidad tiene contenido real y dimensiones exactas en imágenes y elementos. Puede ser diseñado usando tonos de grises para representar el contraste al momento de usar color. Sirven de puente entre wireframes y los prototipos de alta fidelidad.

En este archivo de la comunidad de Figma puedes ver cómo es un wireframe. Y también puedes usar los elementos de ese archivo para construir el tuyo.

Tareas

En este video te contamos las tareas que tendrás que realizar para esta parte:

Low-fidelity wireframe
High-fidelity wireframe