Claudio Adrian Michieli - Diseño ui / ux más que estética
-
Upload
claudio-adrian-natoli-michieli -
Category
Design
-
view
196 -
download
0
Transcript of Claudio Adrian Michieli - Diseño ui / ux más que estética
-
diseo ui/uxms que esttica
@isaezdesign
izaskunsaez.esDiseo Grfico
-
izaskun sez velascodiseadora ui/ux.
diseo on line-off linedesde 2006
diseadora grfica autnoma (o freelance, que suena mejor)
izaskun sez @isaezdesign
-
por qu es tanimportante el
diseo en una app?
www.izaskunsaez.es @isaezdesign
-
apps disponibles en el apple store
-
1.252.777apps en el apple store
www.izaskunsaez.es @isaezdesign
-
79,6%apps zombies
www.izaskunsaez.es @isaezdesign
-
No hay una segunda oportunidad
para causar una buena primera impresin{ {
www.izaskunsaez.es @isaezdesign
-
enorme competencia
HaY QUe DeStacar
-
www.izaskunsaez.es @isaezdesign
cual es el papel del diseador?
-
cmo seinteractuar
con ella?
cul sersu aspecto/
estilo?
diseo de apps
UX
Experiencia de usuario
UI
Diseo de interfaces
www.izaskunsaez.es @isaezdesign
-
www.izaskunsaez.es @isaezdesign
Es el que se encarga de decidir/investigar QU debe mostrar un interface al usuario.
UX
diseador
Es el que se encarga de decidir CMO se debe mostrar un interface al
usuario.
UI
diseador
-
Qu aspecto tiene, qu transmite, a quien va dirigida,
identidad de marca
Cmo es la interaccin..., la
fluidez y facilidad de uso, si cumple con lo que promete
Look & FeelUI
Qu es el diseo?
-
UsabilidadUn atributo de calidad que mide lofciles 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
www.izaskunsaez.es @isaezdesign
-
Beneficios de la usabilidad
Una mayor probabilidad de...
Ventas o visitas o comentarios
Posicionamiento
Conversin/monetizacin
XITO
www.izaskunsaez.es @isaezdesign
-
UX
-
UX
-
UX
UI
-
preguntas bsicas que deberas hacerte antes
de disear una app
www.izaskunsaez.es @isaezdesign
-
www.izaskunsaez.es @isaezdesign
QUHace mi app
entrenimiento? UtiliDaD?
-
A QUINSe Dirige la app
nioS aDUltoS
www.izaskunsaez.es @isaezdesign
-
www.izaskunsaez.es @isaezdesign
CMOSe USar mi app
enmovimiento?
De forma mS eSttica orelajaDa?
para Un USo mUY ocaSional o mS
intenSo?
en compaa?eS para DiSfrUtar
inDiviDUalmente?
-
www.izaskunsaez.es @isaezdesign
DNDESe USara principalmente
la app
De nocHe?De Da?
en lUgareS con mUcHa gente?
en privaDo?
en ambienteSrelajaDoS? al aire libre?
en Una DiScoteca?
en pblico?
en SitioS con conexin wifi o
3g?
-
empecemospor el principio
www.izaskunsaez.es @isaezdesign
-
los mockups
-
Plasmar las interacciones y funcionalidades de la app.
los mockups
-
pantalla inicial:nombre + profesinconocimientos destacadosbreve presentacin escritabotn de contacto destacado
men lateral:acceso al men lateral donde encontraremos las secciones.botn de contacto destacado
pantalla experiencia laboral:imagen + texto, son secciones desplegablesbotn de contacto destacado
pantalla experiencia laboral:visin desplegada
-
www.izaskunsaez.es @isaezdesign
el diseo visual
-
Flat designun diseo bsicoenFocado a las
animaciones y Funciones
www.izaskunsaez.es @isaezdesign
Flat design
-
el contenidola claridad
centrar la atencin
www.izaskunsaez.es @isaezdesign
3 pilares
-
www.izaskunsaez.es @isaezdesign
el contenidoes el rey
-
el contenido es el protagonista
enFoque en la tipograFa e imgenes
coloresbsicos
-
el color
-
Paleta de colores reducida
-
usa el color para destacar elementos
el color no debe distraer del contenido
-
colores neutros
coloresdestacados
-
www.izaskunsaez.es @isaezdesign
tipograFa
-
el texto puede llegar a ocupar del 50% al 90% de la pantalla
-
elegir unaFuente legible
con buencontraste Fondo-texto
dejar quetodo respire
-
el tamao del textotitulares 50-100 pxsubttulo 30-50 pxcprrafo 26-40 px
-
www.izaskunsaez.es @isaezdesign
la claridads obvio
-
haz las cosas obviasdnde pulsarel contenido
las posibilidades de interaccin
-
los estados de los iconos ayudan asaber qu est activado y qu no
-
usa iconos obvios
-
utiliza el color, el tamao del texto y la disposicin de los elementos para destacar las diferentes acciones o secciones
-
www.izaskunsaez.es @isaezdesign
simpliFicaes necesario?
esa pantalla, ese botn...etc
-
www.izaskunsaez.es @isaezdesign
centra la atencinen el contexto
-
captando la atencinla proFundidad
las transiciones y animaciones
-
www.izaskunsaez.es @isaezdesign
la proFundidad
-
los diFerentes planos de interaccin
-
enFocar la atencin
-
www.izaskunsaez.es @isaezdesign
las animacionesdeben 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
-
https://designcode.io/iosdesign-animations
-
duracin ptima entre 0.3 y 0.5 segundos
-
www.izaskunsaez.es @isaezdesign
lOs gestossencillos
no abusar
-
www.izaskunsaez.es @isaezdesign
el tamaos importa
-
iOS Human Interface Guidelines
-
www.izaskunsaez.es @isaezdesign
en resumen
-
www.izaskunsaez.es @isaezdesign
Qu quiere un usuario?
Menos pasos pararealizar una accin
Mayor y mejorvisibilidad
de los elementos
Elementos tctiles fcilmente
seleccionables
Que me muestren lainformacin
necesaria nicamente
-
www.izaskunsaez.es @isaezdesign
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 (imgenes/iconos - textos) bien relacionados?
4. hay que dar muchos pasos para realizar una accin?
5. Ves claramente donde estn los elementos de navegacin e info.?
6. Sigue una lgica con lo que se espera de la app?
-
www.izaskunsaez.es @isaezdesign
las resolucionespreparar el diseo para varias pantallas
-
640 x 960 640 x 1136 750 x 1334 1242 x 2208iPhone 4 iPhone 5 iPhone 6 iPhone 6 plus
-
www.izaskunsaez.es @isaezdesign
el icono
-
PORQUE ES NUESTRA TARJETA DE
PRESENTACIN
PORQUE ACTA COMO PEQUEORECORDATORIO
PARA QUE UTILICE LA APP
Soy una
App
que molo mucho
!
eh!estoy aqu!
-
pocos elementos
-
rotundo
-
El icono de una app aporta unainformacin inicial al usuario
un diseo correctovisualmente y atractivo
un mejor funcionamiento de la app y ms fiabilidad
se percibe como
-
www.izaskunsaez.es @isaezdesign
el trabajo del diseador no acaba aqu
-
testeo y ajustes actualizacionesde la app
diseo landingo web de la app
diseocomunicacin +
marketing
propio de la app
-
todo para conseguir...una experiencia
inolvidable
www.izaskunsaez.es @isaezdesign
-
evitar esto
www.izaskunsaez.es @isaezdesign
-
Ilustracin: Igor fernndez
-
Ilustracin: Igor fernndez
-
Ilustracin: Igor fernndez
-
conseguir esto
www.izaskunsaez.es @isaezdesign
-
Ilustracin: Igor fernndez
-
Ilustracin: Igor fernndez
-
www.izaskunsaez.es @isaezdesign
fin
-
izaskunsaez.esDiseo Grfico
@isaezdesign
Agradecimiento especial a Igor Fernndezpor las ilustraciones.
@igor_f_f