Aprende sobre las diferentes herramientas que puedes usar para crear tus mockups, wireframes de tus aplicaciones y así generar un mejor y profesional User Experience

Introducción

Utilizando Balsamiq Mockups

• Balsamiq Mockups
• Añadiendo elementos
• Alineando elementos
• Modificando el contenido de un elemento
• Actualizando las propiedades de un elemento
• Utilizando Capas
• Reto - Añadir un campo de búsqueda
• Solución - Añadir un campo de búsqueda

Trabajando con texto

• Agregando un encabezado
• Utilizando texto como marcador de posición
• Formateando los tipos de control
• Reto - Crear una tabla comparativa de productos a traves de formatos de texto
• Solución - Crear una tabla comparativa de productos a través de formatos de texto

Creando assets reusables

• Creando un símbolo
• Reutilizando símbolos en diferentes mockups
• Agregando tipos de control a través de Mockups to go
• Utilizando iconos dentro de un asset reusable
• Reto - personalizar un símbolo descargado
• Solución - personalizar un símbolo descargado

Añadiendo interactividad

• Creando enlaces entre mockups
• Creando áreas enlazadas
• Reto - Añadir interactividad al mockup de un juego
• Solución - Añadir interactividad al mockup de un juego

Mockups de diseño responsive

• Creando una versión para tablet
• Creando una versión para teléfono inteligente
• Reto - Crear una pantalla de inicio para un iphone
• Solución - Crear una pantalla de inicio para un iphone

Exportando mockups para revisión

• Cambiando el aspecto general del mockup
• Exportando como PNG
• Exportando como PDF

Trabajando con photoshop

• Photoshop y UX
• Creando un nuevo documento en photoshop
• Utilizando guías
• Utilizando la cuadrícula

Creando formas

• Explorando los errores de los píxeles
• Creando formas con la herramienta rectángulo
• Preservando el ancho de un trazo a través de efectos de capa

Trabajando con texto

• Agregando estilo a nuestro texto
• Texto como marcador de posición en un wireframe

Organizando el contenido

• Organizando el trabajo a través del panel de capas
• Utilizando carpetas de capas
• Creando composiciones de capa
• Reto - Crear una superposición de video
• Solución - Crear una superposición de video

Creando assets reusables

• Creando y guardando formas personalizadas
• Agrupando y reutilizando contenido dentro de objetos inteligentes
• Almacenando estilos gráficos
• Utilizando kits gratuitos de creación de wireframes
• Creando nuestro propio kit de creación de wireframes

Exportando nuestros diseños

• Utilizando el diálogo guardar para web
• Exportando múltiples estados

Conclusión