Simple Steps to UX/UI Web Design- Español
description
Transcript of Simple Steps to UX/UI Web Design- Español
Presented by Ellie Cachette, VP of Product Marketing, @ecachette
#UXLearn
Simple Steps to UX/UI web design
Agenda
• Problema• UX vs UI• Objetivos del UX• Objetivos del UI• Herramientas de Diseño• Resumen
¿Cuál es el problema?
Koombea flow process
UI es como luce
UX/UI
UX es como funciona y como se siente
- Crispetas - Descongelar - 30 segundos
UX – Experiencia de Usuario
UX, o experiencia de usuario, mide la facilidad y el placer que tienen los usuarios al navegar por un sitio.
*Cumplir con los objetivos del negocio
1. Adquisición de usuario
2. Activación de usuario
3. Retención de usuario
Propósito detrás del UX Experiencia de Usuario
¿Cómo el UX resuelve problemas?
Diseño de Interacción
Usabilidad
Arquitectura de La Información
Diseño Visual
Estrategia de Contenido
Investigación del Usuario
UX
Componentes del UX 1. Definición de Usuario 2. Mapas del Sitio 3. Flujo de Usuario 4. Wireframes
Definición de Usuario
Arquitectura de la Información
Flujo de Usuario
Wireframes
Koombea flow process
“Todo empieza con empatía. Diseñamos para sus clientes ante todo”.
- Diego Coronado, Director Creativo.
La tecnología es ineficaz sin una interfaz que logre llegar a la gente de una manera significativa. Por ende el diseño
necesita ser más humano, no solamente pixeles.
UX No es UI
http://www.uxisnotui.com/downloads/a4.pdf
UI- Interfaz de Usuario
Un hábil diseñador de interfaces entiende la importancia de proporcionar al usuario una
solución a un problema definido
UI
Branding
Color, Esquemas: fuentes, Logo,
Estilos
Wireframing
• Adquisición de Usuario • Marca • Generar confianza
Propósito detrás del UI Interfaz de usuario
Cómo llegamos al UI?
1. El problema ha sido definido 2. Flujos de usuario e historias han sido creadas 3. Experimentos para validar personas 4. Wireframes y bocetos 5. Mockups con UI incluida pueden ser realizados 6. Prueba de Usuario 7. Es tiempo de codificar la interfaz – UI Design!
Qué NO hacer:
Herramientas de diseño fáciles de usar
HotGloo Hotgloo.com
Balsamiq Balsamiq.com
Invision invisionapp.com
La diferencia entre UX/UI Freelance vs Agency
Freelancer Agencia In-house
Pros
Flexibilidad Creatividad Armonía de Marca
Perfectiva nueva
Acceso a las últimas
técnologías
Acceso a “recursos”
Cambios rápidos Expertos
Cons
Especialidades limitadas Costos Falta de
creatividad
La “Marca” puede varias
Cambios rápidos pueden
varias Burocracia
@koombea
386 Park Ave South, 10th Floor
New York, NY 10016
625 2nd St., Suite 280
San Francisco, CA 94107
Cra 53 # 79-01 L-301
Barranquilla, Colombia
¿Alguna Pregunta?
Podemos ayudarte.
Mándanos un correo a [email protected]
/koombea
#UXLearn