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

Post on 27-Jan-2015

117 views 5 download

Tags:

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 mvp@koombea.com for additional information or questions and we will get back to you shortly.

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

klm.com

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 mvp@koombea.com

/koombea

#UXLearn