Los diseñadores "digitales" (UX, UI, de interacción, de producto, etc) tenemos procesos y entregables diferentes a los editoriales o gráficos ¿En qué consisten estas diferencias? Charla de 2018 para el equipo de diseño de marca e identidad corporativa de la agencia Saffron.

1. ¡Hola!

2. Soy Jimena
piensaenpixels.com
@subidubi
jimena.catalina@gmail.com

5. Diseño UX/UI
Diseño de interfaz
Diseño visual
Diseño de producto
Dirección de arte digital

7. ¿Qué cambia?

8. ¿Cómo trabajamos?
¿Para quien?
“Lo digital”
Al final del proyecto

9. ¿Cómo trabajamos?

10. Equipos
Cuentas
Jefe proyecto
Product owner
Research
AI
UX
Copy
UI
Visual
Front end
Android
iOS
Back end
Analítica · SEO · Social/Comunicación

12. Software

13. ¿Para quien?

14. Datos

15. Datos
tú
usuario

17. Usabilidad

20. Accesibilidad

21. “Lo digital”

22. Estructura

23. Estructura

24. ¡El espacio
es gratis!

26. Affordance

27. Affordance
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus hendrerit.
Pellentesque aliquet nibh
nec urna. In nisi neque,
aliquet vel, dapibus id,
mattis vel, nisi. Sed pretium,
ligula sollicitudin laoreet
viverra, tortor libero sodales
leo, eget blandit nunc tortor
eu nibh. Nullam mollis. Ut
justo. Suspendisse potenti.
Enviar
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus hendrerit.
Pellentesque aliquet nibh
nec urna. In nisi neque,
aliquet vel, dapibus id,
mattis vel, nisi. Sed pretium,
ligula sollicitudin laoreet
viverra, tortor libero sodales
leo, eget blandit nunc tortor
eu nibh. Nullam mollis. Ut
justo. Suspendisse potenti.
Enviar
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus hendrerit.
Pellentesque aliquet nibh
nec urna. In nisi neque,
aliquet vel, dapibus id,
mattis vel, nisi. Sed pretium,
ligula sollicitudin laoreet
viverra, tortor libero sodales
leo, eget blandit nunc tortor
eu nibh. Nullam mollis. Ut
justo. Suspendisse potenti.
Enviar
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus hendrerit.
Pellentesque aliquet nibh
nec urna. In nisi neque,
aliquet vel, dapibus id,
mattis vel, nisi. Sed pretium,
ligula sollicitudin laoreet
viverra, tortor libero sodales
leo, eget blandit nunc tortor
eu nibh. Nullam mollis. Ut
justo. Suspendisse potenti.
Enviar

29. ¡clic!

30. Respuesta

31. Estados

32. Resoluciones
27’’
2.560px
1.440px
5’’
2.560px
1.440px

34. Resoluciones
PÍXEL
RASTER
DP
VECTOR
vs

35. Al final del proyecto

36. No hay artes finales

38. Sistema

39. Prototipo

40. Assets
iOS 1x iOS 2x iOS 3x
Android mdpi Android hdpi Android xhdpi Android xxhdpi Android xxxhdpi

41. ¿Quien mantiene esto?

42. ¿Preguntas?
piensaenpixels.com
@subidubi
jimena.catalina@gmail.com

43. Magia digital
(pasen y vean)

44. Google Material Design guidelines
Ahora mismo LA REFERENCIA (sí, con
mayúsculas) en sistemas de diseño digitales. Una
vez superada la paja de la presentación, toda
una lección de qué debe definirse en unas
guidelines para diseño digital.
No hay semana que no me tenga que pasar por
su sección de Componentes y Patrones a
empollarme algo para aplicarlo a un proyecto.

45. IBM Design Language
Casi mejor ejemplo que la anterior, ya que es
una guía que podríamos desarrollar los seres
humanos normales.
Mucho más cercano a lo que podría necesitar
cualquiera de las marcas para las que trabajáis.

46. Inclusive design at Microsoft
Hay que reconocerlo, las normas de
accesibilidad del W3C son un dolor. De leer y de
entender.
No es que la guía de Microsoft las explique
mejor o las haga más amenas. Es más, ni las
menciona. Pero sí consigue que entiendas por
qué es importante meterse en este fregao, y que
encuentres la motivación para lidiar con ello
durante todo el proyecto.

47. AirBnB design system
Se crean un sistema de uso interno para el
diseño de sus webs/apps y luego van y le
explican al mundo cómo lo han hecho. Si es que
son todo amor.
Este tipo de artículos además son muy prácticos
para enviarlos a tu jefe cuando te pide que te
hagas un sistema de diseño tú solo en una tarde.

48. Gov UK
Cómo se hacen las cosas cuando se hacen bien
en las administraciones públicas. Aunque a nivel
visual sea espartano es el proyecto soñado de
cualquier diseñador digital ¿Se puede tener más
impacto en la población que diseñando los
servicios digitales del gobierno?
Además tienen unos criterios para desarrollar
servicios digitales que son para enmarcar y un
blog de diseño donde van explicando cómo
trabajan.

49. Density-independent Pixels
Todo el berenjenal de las resoluciones, los DP y
los píxeles explicado en detalle. El artículo tiene
unos años (de cuando iPhone solo tenía 2
resoluciones) y es muy extenso, pero cuando lo
terminas lo ves todo claro como el cristal.
(Que conste que aún no he oído hablar a ningún
diseñador en SP para los tamaños de texto,
decimos directamente pixels o puntos y entre
nosotros nos entendemos)

50. Area17
Están en esta lista porque son mi agencia digital
europea favorita y punto. Todos sus proyectos
salen online tal cual los diseñaron, francamente
no sé cómo lo hacen.
Pero es que además mantienen un archivo con
todas y cada una de las pantallas que diseñan y
entregan a cliente. Es un lujo poder ver el trabajo
de otros a este detalle.