Diseño UX apps

diseño ui/ux
más que estética
@isaezdesign
izaskunsaez.es
Diseño Gráfico

izaskun sáez velasco
diseñadora ui/ux.
diseño on line-off line
desde 2006
diseñadora gráfica autónoma (o freelance, que suena mejor)
izaskun sáez @isaezdesign

¿por qué es tan
importante el
diseño en una app?
www.izaskunsaez.es @isaezdesign

apps disponibles en el apple store

1.252.777
apps en el apple store

79,6%
apps zombies

No hay una
segunda oportunidad
para causar una
buena primera impresión{ {

enorme
competencia
HAY QUE
DESTACAR

¿cual es el papel
del diseñador?

diseño de apps
UX
Experiencia de usuario
UI
Diseño de interfaces

Es el que se encarga
de decidir/investigar
QUÉ debe mostrar un
interface al usuario.
UX
diseñador
Es el que se encarga de
decidir CÓMO se debe
mostrar un interface al
usuario.
UI
diseñador

Qué aspecto tiene,
qué transmite, a
quien va dirigida,
identidad de marca…
Cómo es la
interacción..., la
fluidez y facilidad de
uso, si cumple con
lo que promete…
Look & Feel
UI
¿Qué esel diseño?

Usabilidad
“Un atributo de calidad que mide lo
fáciles de usar que son las interfaces web”
Jakob Nielsen 2013
“Encontrar lo que necesitan, entender lo
que encuentran y actuar apropiadamente…
dentro del tiempo y esfuerzo que ellos
consideran adecuado para esa tarea”
Janice C. Redish.

facilidad de uso

Beneficios de la usabilidad
Una mayor probabilidad de...
Ventas o visitas o comentarios
Posicionamiento
Conversión/monetización
ÉXITO

preguntas básicas que
deberías hacerte antes
de diseñar una app

QUÉhace mi app
¿entrenimiento? ¿utilidad?

A QUIÉN
se dirige la app
niños adultos

CÓMOse usará mi app
¿en
movimiento?
¿de forma más
estática o
relajada?
¿para un uso muy
ocasional o más
intenso?
¿en compañía?
¿es para disfrutar
individualmente?

DÓNDEse usaría principalmente
la app
¿de noche?
¿de día?
¿en lugares con
mucha gente?
¿en privado?
¿en ambientes
relajados? ¿al aire libre?
¿en una discoteca?
¿en público?
¿en sitios con
conexión wifi o
3g?

empecemos
por el principio

Plasmar las interacciones y
funcionalidades de la app.
los mockups

PANTALLA INICIAL:
nombre + profesión
conocimientos destacados
breve presentación escrita
botón de contacto destacado
MENÚ LATERAL:
acceso al menú lateral donde
encontraremos las secciones.
botín de contacto destacado
PANTALLA EXPERIENCIA
LABORAL:
imagen + texto, son secciones
desplegables
botín de contacto destacado
PANTALLA EXPERIENCIA
LABORAL:
visión desplegada

el diseño visual

FLAT DESIGN
un diseño básico
enfocado a las
animaciones y funciones
FLAT DESIGN

el contenido
la claridad
centrar la atención
3 PILARES

EL CONTENIDO
es el rey

el contenido es el protagonista
enfoque en la
tipografía e
imágenes
colores
básicos

usa el color para destacar elementos
el color no debe distraer del contenido

COLORES
NEUTROS
COLORES
DESTACADOS

TIPOGRAFÍA

el texto puede llegar a ocupar
del 50% al 90% de la pantalla

elegir una
fuente legible
con buen
contraste fondo-texto
dejar que
todo respire

el tamaño del texto
titulares 50-100 px
subtítulo 30-50 px
cpárrafo 26-40 px

LA CLARIDAD
sé obvio

haz las cosas obvias
dónde pulsar
el contenido
las posibilidades de interacción

los estados de los iconos ayudan a
saber qué está activado y qué no

utiliza el color, el tamaño del texto y la disposición de los
elementos para destacar las diferentes acciones o secciones

SIMPLIFICA
¿es necesario?
esa pantalla, ese botón...etc

centra la atención
en el contexto

captando la atención
la profundidad
las transiciones y animaciones

la profundidad

los diferentes planos de interacción

las animaciones
deben proporcionar una
experiencia inmersiva

las buenas animaciones mejoran la experiencia,
las malas distraen.

https://designcode.io/iosdesign-animations

no solamente el paso de
una pantalla a otra

duración óptima entre
0.3 y 0.5 segundos

lOs gestos
sencillos
no abusar

el tamaño
sí importa

iOS Human Interface
Guidelines

EN RESUMEN

¿Qué quiere un usuario?
Menos pasos para
realizar una acción
Mayor y mejor
visibilidad
de los elementos
Elementos táctiles
fácilmente
seleccionables
Que me muestren la
información
necesaria únicamente

hazte estas preguntas:
1. ¿Se reconocen las principales acciones de la app?
2. ¿Hay algo que pueda distraer de ese contenido
importante y que no sea relevante?
3. ¿Está el contenido (imágenes/iconos - textos) bien
relacionados?
4. ¿hay que dar muchos pasos para realizar una acción?
5. ¿Ves claramente donde están los elementos de
navegación e info.?
6. ¿Sigue una lógica con lo que se espera de la app?

las resoluciones
preparar el diseño para varias pantallas

640 x 960 640 x 1136 750 x 1334 1242 x 2208
iPhone 4 iPhone 5 iPhone 6 iPhone 6 plus

el icono

PORQUE ES NUESTRA
TARJETA DE
PRESENTACIÓN
PORQUE ACTÚA
COMO PEQUEÑO
RECORDATORIO
PARA QUE UTILICE LA
APP
¡Soy una
App
que molo mucho!
¡eh!
¡estoy aquí!

El icono de una app aporta una
información inicial al usuario
un diseño correcto
visualmente y atractivo
un mejor funcionamiento
de la app y más fiabilidad
se percibe
como

el trabajo del diseñador
no acaba aquí

testeo
y ajustes
actualizaciones
de la app
diseño landing
o web de la app
diseño
comunicación +
marketing
propio de la app

todo para conseguir...
una experiencia
inolvidable

evitar esto

conseguir esto

FIN

izaskunsaez.es
Diseño Gráfico
hola@izaskunsaez.es
@isaezdesign
Agradecimiento especial a Igor Fernández
por las ilustraciones.
@igor_f_f

Diseño UX apps

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (14)

Similar a Diseño UX apps

Similar a Diseño UX apps (20)

Más de Izaskun Saez

Más de Izaskun Saez (6)

Último

Último (20)

Diseño UX apps