simple steps to ux/ui web design- español

31
Presented by Ellie Cachette, VP of Product Marketing, @ecachette #UXLearn Simple Steps to UX/UI web design

Upload: koombea

Post on 27-Jan-2015

124 views

Category:

Design


5 download

DESCRIPTION

Your guide to picking the right User Interface (UI) and creating the best User Experience (UX) in just a short amount of time. Learn how to quickly create mockups, landing pages, and build mock integrations that turn into large ideas. Have more questions about UX/UI? Contact [email protected] for additional information or questions and we will get back to you shortly.

TRANSCRIPT

Page 1: 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

Page 2: Simple Steps to UX/UI Web Design- Español

Agenda

• Problema• UX vs UI• Objetivos del UX• Objetivos del UI• Herramientas de Diseño• Resumen

Page 3: Simple Steps to UX/UI Web Design- Español

¿Cuál es el problema?

Page 4: Simple Steps to UX/UI Web Design- Español

Koombea flow process

Page 5: Simple Steps to UX/UI Web Design- Español

UI es como luce

UX/UI

UX es como funciona y como se siente

Page 6: Simple Steps to UX/UI Web Design- Español

- Crispetas - Descongelar - 30 segundos

Page 7: Simple Steps to UX/UI Web Design- Español
Page 8: Simple Steps to UX/UI Web Design- Español
klm.com
Page 9: Simple Steps to UX/UI Web Design- Español

UX – Experiencia de Usuario

UX, o experiencia de usuario, mide la facilidad y el placer que tienen los usuarios al navegar por un sitio.

Page 10: Simple Steps to UX/UI Web Design- Español

*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

Page 11: Simple Steps to UX/UI Web Design- Español

¿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  

Page 12: Simple Steps to UX/UI Web Design- Español

Componentes del UX 1.  Definición de Usuario 2.  Mapas del Sitio 3.  Flujo de Usuario 4.  Wireframes

Page 13: Simple Steps to UX/UI Web Design- Español

Definición de Usuario

Page 14: Simple Steps to UX/UI Web Design- Español

Arquitectura de la Información

Page 15: Simple Steps to UX/UI Web Design- Español

Flujo de Usuario

Page 16: Simple Steps to UX/UI Web Design- Español

Wireframes

Page 17: Simple Steps to UX/UI Web Design- Español

Koombea flow process

Page 18: Simple Steps to UX/UI Web Design- Español

“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.

Page 19: Simple Steps to UX/UI Web Design- Español

UX No es UI

http://www.uxisnotui.com/downloads/a4.pdf

Page 20: Simple Steps to UX/UI Web Design- Español

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

Page 21: Simple Steps to UX/UI Web Design- Español

UI  

Branding

Color, Esquemas: fuentes, Logo,

Estilos

Wireframing

Page 22: Simple Steps to UX/UI Web Design- Español

•  Adquisición de Usuario •  Marca •  Generar confianza

Propósito detrás del UI Interfaz de usuario

Page 23: Simple Steps to UX/UI Web Design- Español

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!

Page 24: Simple Steps to UX/UI Web Design- Español

Qué NO hacer:

Page 25: Simple Steps to UX/UI Web Design- Español

Herramientas de diseño fáciles de usar

Page 26: Simple Steps to UX/UI Web Design- Español

HotGloo Hotgloo.com

Page 27: Simple Steps to UX/UI Web Design- Español

Balsamiq Balsamiq.com

Page 28: Simple Steps to UX/UI Web Design- Español

Invision invisionapp.com

Page 29: Simple Steps to UX/UI Web Design- Español

La diferencia entre UX/UI Freelance vs Agency

Page 30: Simple Steps to UX/UI Web Design- Español

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

Page 31: Simple Steps to UX/UI Web Design- Español

@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