diseño ui/ux en ios

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


79,6%apps zombies


No hay una segunda oportunidad

para causar una buena primera impresin{ {


enorme competencia

HaY QUe DeStacar


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



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


Beneficios de la usabilidad

Una mayor probabilidad de...

Ventas o visitas o comentarios

Posicionamiento

Conversin/monetizacin

XITO


UX

UI

preguntas bsicas que deberas hacerte antes

de disear una app



QUHace mi app

entrenimiento? UtiliDaD?

A QUINSe Dirige la app

nioS aDUltoS



CMOSe USar mi app

enmovimiento?

De forma mS eSttica orelajaDa?

para Un USo mUY ocaSional o mS

intenSo?

en compaa?eS para DiSfrUtar

inDiviDUalmente?


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


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


el diseo visual

Flat designun diseo bsicoenFocado a las

animaciones y Funciones


Flat design

el contenidola claridad

centrar la atencin


3 pilares


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


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


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


simpliFicaes necesario?

esa pantalla, ese botn...etc


centra la atencinen el contexto

captando la atencinla proFundidad

las transiciones y animaciones


la proFundidad

los diFerentes planos de interaccin

enFocar la atencin


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


lOs gestossencillos

no abusar


el tamaos importa

iOS Human Interface Guidelines


en resumen


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


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?


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


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


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


evitar esto


Ilustracin: Igor fernndez

conseguir esto


Ilustracin: Igor fernndez


fin

izaskunsaez.esDiseo Grfico

[email protected]

@isaezdesign

Agradecimiento especial a Igor Fernndezpor las ilustraciones.

@igor_f_f

diseño ui/ux en ios

Design