Cómo se integró la labor del diseño en la creación de Interfaces y su relación con la experiencia de usuario.

1. HISTORIA Y EVOLUCIÓN DEL
DISEÑO DE INTERFACES VISUALES
CÓMO SE INTEGRÓ LA LABOR DEL DISEÑO EN LA CREACIÓN DE
INTERFACES Y SU RELACIÓN CON LA EXPERIENCIA DE USUARIO

2. ADRIANA ATZIMBA
De formación académica como Artista visual,
se ha desempeñado en el diseño gráfico
digital por casi 15 años.
Desde 2003 colabora en Radius Comunicación
Digital, como diseñadora Web.
Ha formado parte de comunidades e iniciativas
como Webmasters México y Estándares Web
México, entre otros.
De 2014 a 2017 fue docente en la Universidad
de Londres en asignaturas de Diseño Web para
las carreras de Diseño gráfico, Comunicación
Multimedia y Periodismo Digital.

3. EN EL PRINCIPIO…
SÓLO ERAN LETRAS NEGRAS Y AZULES SOBRE FONDO BLANCO

4. LIMITANTES DE DISEÑO DE LAS PRIMERAS INTERFACES VISUALES
PALETA LIMITADA DE COLOR
▸ 216 Web Safe Colors.
▸ Colores que se mostraban
con la menor variación en
diferentes entornos de
hardware, sistemas
operativos o diferentes
navegadores.

5. LIMITANTES DE DISEÑO DE LAS PRIMERAS INTERFACES VISUALES
IMÁGENES DE BAJA RESOLUCIÓN
▸ Sitios compuestos
principalmente por texto.
▸ Imágenes en formato GIF,
generalmente, que
pesaran poco ya que las
conexiones eran muy
lentas.
Primer imagen subida a internet en 1992 en
formato GIF, desde una Mac a color, utilizando la
primer versión de Adobe Photoshop.

6. LIMITANTES DE DISEÑO DE LAS PRIMERAS INTERFACES VISUALES
FUENTES DE SISTEMA
▸ Los navegadores web
solo podían presentar
el texto con las
tipografías instaladas
en cada equipo
dependiendo de su
sistema operativo.

7. LIMITANTES DE DISEÑO DE LAS PRIMERAS INTERFACES VISUALES
ESTRUCTURA BASADA EN TABLAS
▸ Estructuras
reticulares muy
rígidas.
▸ Estas estructuras
podían ser anidadas.
▸ Se trataba de evitar
lo más posible el
scroll.

9. ASÍ QUE…
¿Cómo podía involucrarse
el trabajo de un diseñador
en un área donde no se
podía aplicar?
Pero sobre todo,
¿para qué podría servir su
trabajo?

11. …NO, ESE NO

12. ESTE FLASH

13. USO DE FLASH EN LA CREACIÓN DE SITIOS WEB
FLASH
▸ Compensaba las limitaciones que presentaba HTML.
▸ Se podían incluir imágenes, tipografía, distribución de los
elementos.
▸ Inclusión de audio y video posterior.
▸ Inclusión de animaciones (intros animados)
▸ Se podían elaborar sitios completos o sólo algunos
elementos que se incluían dentro de una estructura de
tablas.

14. 2ADVANCED
WWW.2ADVANCED.COM

15. 2ADVANCED
WWW.2ADVANCED.COM

16. INFINITY ART STUDIO
WWW.INFINITYART.RO/

17. INFINITY ART STUDIO
WWW.INFINITYART.RO/

18. DESUSO DE FLASH
LIMITANTES DE FLASH
▸ Tecnología licenciada.
▸ Archivos muy pesados que implicaban mucho tiempo y
recursos para su descarga.
▸ Dificultad para trabajar con CMS.
▸ Dificultad para sitios con gran cantidad de contenido.

19. “HTML5 VS. FLASH” IS THE WRONG
DISCUSSION. “ACCESSIBLE RICH
MEDIA” IS THE RIGHT ONE.
Jeffrey Zeldman (via Twitter)
TEXT

20. DESUSO DE FLASH
¿QUÉ NOS ENSEÑÓ FLASH DE UX?
▸ Se hacían cosas porque “se podía” más que porque fuera
necesario.
▸ Intros animados eternos e innecesarios, además de repetitivos.
▸ Tipografía pequeña pero “cool”.
▸ Menús de navegación con posición “dinámica” (atrápame /
encuéntrame si puedes).
▸ Control de audio - video.
▸ Problemas relacionados con indexación en motores de búsqueda.

21. DESUSO DE FLASH
¿QUÉ NOS ENSEÑÓ FLASH DE UX?
▸ Tener una mejor comprensión de las necesidades de cada
sitio para cada usuario.
▸ Se observaba que el usuario se sentía perdido muy a
menudo en especial con diseños muy rebuscados.
▸ Que al final era importante la estructura y la arquitectura
de la información, los flujos y procesos dentro del sitio.

22. GRACIAS POR TODO FLASH…

23. TRABAJANDO CON ESTÁNDARES
¿QUÉ PASÓ DESPUÉS?

24. TRABAJANDO CON ESTÁNDARES
SKEWMORFISMO
▸ Del griego skeuos (herramienta) y
morphe (forma).
▸ Mantiene detalles del diseño del
objeto original con el objetivo de
hacerlo más familiar para el
usuario.
▸ Se buscaba hacer más cómoda la
experiencia de usuario ya que se
consideraba que de otro modo era
fría e impersonal.

25. TRABAJANDO CON ESTÁNDARES
SKEWMORFISMO
▸ A medida que se fue
generalizando el uso de
estándares, las interfaces
visuales, el skewmorfismo
se fue popularizando, era
cada vez más común ver
sitios con fondos con
texturas tratando de
emular texturas de
madera, tela o piel, las
imágenes e ilustraciones
se volvieron
excesivamente detalladas.

26. HASTA EL ÚLTIMO DETALLE
¿QUÉ NOS ENSEÑÓ EL SKEWMORFISMO DE UX?
▸ Las imágenes y el exceso de detalle que contenían
provocó que éstas aumentaran su peso y por ende los
recursos para su descarga.
▸ Las interfaces se sobresaturaron de elementos
provocando ruido visual y cobrando mayor importancia
que el contenido.

27. DISPOSITIVOS MÓVILES
Y DISEÑO WEB RESPONSIVO

28. DISPOSITIVOS MÓVILES
60%
POPULARIZACIÓN DEL USO DE DISPOSITIVOS MÓVILES
▸ De acuerdo al Estudio de
Consumo de Medios y
Dispositivos entre
Internautas Mexicanos,
de la IAB (Interactive
Advertising Bureau)
México, en su 9a Edición
de Marzo 2017, el 60%
de la población en
México posee un
Smartphone.

29. DISPOSITIVOS MÓVILES
DISEÑO WEB RESPONSIVO
▸ A partir del surgimiento y popularización de los
dispositivos móviles el diseño de interfaces visuales tuvo
que cambiar para adecuarse a las necesidades y retos que
esto implicaba.
▸ Las interfaces visuales dejaron de ser exclusivas de los
dispositivos de escritorio y empezaron a moverse con
nosotros.

30. DISEÑO WEB RESPONSIVO
DISEÑO WEB RESPONSIVO
▸ El término Web responsive fue acuñado por primera vez
en 2010 por el diseñador web Ethan Marcotte en su
artículo en A List Apart.

31. ACUÑANDO EL TÉRMINO
DISEÑO WEB RESPONSIVO
▸ En este artículo, describe la inquietud de los diseñadores
web para tener sitios que sean visibles en todos los
dispositivos.
▸ Así como la tecnología está en constante evolución, el
contenido en internet debe también adaptarse a la
creciente demanda de dispostivos.
▸ Por consiguiente, el contenido debe ser lo más accesible
posible para los usuarios.

32. DISEÑO WEB RESPONSIVO
¿QUÉ NOS ENSEÑÓ EL DISEÑO WEB RESPONSIVO DE UX?
▸ Diseño responsivo permite que un sitio web se ajuste al
dispositivo desde donde está siendo visto.
▸ Esto representa una experiencia óptima para los usuarios
sin importar si están usando un smartphone, una tableta,
una computadora o cualquier otro dispositivo.
▸ Relevancia al contenido sin importar el medio de
visualización

33. FLAT DESIGN
SIMPLIFICACIÓN A SU MÍNIMA EXPRESIÓN

35. ORÍGENES
FLAT DESIGN
▸ Windows 8
▸ Window Mobile
▸ iOS

36. CARACTERÍSTICAS
FLAT DESIGN
▸ Sombras largas, contrastantes y
cortantes
▸ Paleta de color limitada con tonos
brillantes y contrastantes
▸ Tipografía sencilla
▸ "Ghost button”
▸ Minimalismo

37. FLAT VS. REALISM
http://www.flatvsrealism.com

39. FLAT DESIGN
VENTAJAS
▸ Esta de moda
▸ Fácil de usar
▸ Carga rápida
▸ Integración con responsive
web design
▸ Tipografía legible
▸ Está de moda
▸ La excesiva simplicidad
puede llegar a ser confusa
▸ Diseños similares
▸ Puede llegar a ser aburrido
DESVENTAJAS

40. FLAT DESIGN
¿QUÉ NOS ENSEÑÓ EL FLAT DESIGN DE UX?
▸ Al eliminar el skewmorfismo se confió en la madurez del
usuario al que ya no era necesario proporcionarle
elementos visuales con un símil con la realidad.
▸ Ayudó a ordenar elementos y eliminar los que no eran
realmente necesarios.
▸ A pesar de ofrecer grandes ventajas demostró que ningún
esquema de diseño es perfecto y que es necesario
adaptarlo a cada proyecto para que el aspecto coincida
con la sensación y el tono del mensaje.

41. CARD DESIGN
TRABAJANDO CON GRANDES CANTIDADES DE
IMÁGENES Y CONTENIDO

42. POPULARIZADO PRINCIPALMENTE
POR PINTEREST

43. CARACTERÍSTICAS
CARD DESIGN
▸ Pequeños contenedores de
información que puede ser
imágenes, textos, enlaces, etc.
▸ También se le conoce como
container model.
▸ Facilidad para visualizar en
diferentes tamaños y dispositivos.
▸ Proporciona una interfaz más clara
y comprensible en la que es fácil
buscar contenido, de modo que el
usuario puede ir directamente al
tema que le interesa.

44. CARD DESIGN
¿QUÉ NOS ENSEÑÓ EL CARD DESIGN DE UX?
▸ Card Design nos brinda la oportunidad de ordenar
grandes contenidos de información en elementos
consistentes, tanto en el formato de la información como
en la parte visual.
▸ Es adecuado para visualizar en diferentes dispositivos,
tanto móviles como de escritorio.

45. PARALLAX Y SCROLLING
DEL NO SCROLL AL SCROLL

46. CARACTERÍSTICAS
SCROLL
▸ Anteriormente se evitaba que en la
navegación se tuviera que hacer
scroll, por lo que se procuraba
mantener la mayor cantidad de
información dentro del Fold.
▸ A raíz de la popularización de los
dispositivos móviles y del
movimiento natural que implica el
scroll la disposición del contenido
se modificó.

47. CARACTERÍSTICAS
SCROLL INFINITO
▸ Sistema alternativo al mecanismo de
paginación para mostrar listados de
resultados, que se ha puesto muy de
moda gracias a las redes sociales -
como Twitter, Facebook o Pinterest-
que emplean este sistema.
▸ Permite cargar y visualizar
progresivamente más contenido en
una página web a medida que se
avanza con el scroll, una acción que en
teórica no tiene fin: al llegar a la parte
de abajo de la web se carga y se
visualiza más contenido, de forma que
siempre podemos seguir bajando.

48. CARACTERÍSTICAS
PARALLAX SCROLL
▸ Efecto que al entrar en una web, hacer scroll el fondo parece moverse
a una velocidad distinta que el contenido.
▸ Ante el desuso de Flash, este recurso fue muy útil para dotar a los
sitios de cierto dinamismo y contrarrestar la planitud.

49. CARD DESIGN
¿QUÉ NOS ENSEÑÓ EL SCROLL, EL SCROLL INFINITO Y EL PARALLAX SCROLL DE UX?
▸ La popularización de diferentes dispositivos nos lleva a
poner atención en la manera que los usuarios están
visitando, navegando e interactuando con los contenidos.

50. SISTEMAS Y LENGUAJES DE DISEÑO
GUÍAS Y PATRONES PARA AGILIZAR PROCESOS

51. CARACTERÍSTICAS
SISTEMAS Y LENGUAJES DE DISEÑO
▸ Colección de componentes reutilizables, guiados por estándares
claros, que se pueden ensamblar para crear cualquier cantidad de
aplicaciones.
▸ Ayudan a mantener consistencia en el diseño.
▸ Reducen tiempos de desarrollo tanto visual como de interacciones.
▸ Para algunos, Sistemas de Diseño y Lenguaje de Diseño son
equivalentes, y la diferencia es sintáctica, sin embargo sí hay
diferencia de concepto

52. CARACTERÍSTICAS
SISTEMA DE DISEÑO
▸ Se refiere a cómo se ve una
interfaz.
▸ Sólo se refiere a la
implentación visual / gráfica
sobre cómo se ve, reacciona y
se mueve una interfaz, y se
hace en forma de guías
visuales, un brand book o una
guía de estilo.
LENGUAJE DE DISEÑO
▸ Se refiere al código para
implementar el design
language.
▸ Transforma el sistema de
diseño en código tangible
(HTML/CSS/Javascript, Java,
Swift o cualquier otro
framework) para usarlo en la
creación de sistemas reales.

53. EJEMPLOS: MATERIAL DESIGN
SISTEMA DE DISEÑO
https://material.io/guidelines/
LENGUAJE DE DISEÑO
https://material.io/components/

54. EJEMPLOS: MICROSOFT FLUENT
SISTEMA DE DISEÑO
https://material.io/guidelines/
LENGUAJE DE DISEÑO
https://material.io/components/

55. ADELE
REPOSITORIO DE SISTEMAS DE DISEÑO PÚBLICOS DISPONIBLES.

57. LENGUAJES DE DISEÑO
¿QUÉ NOS ENSEÑARON LOS LENGUAJES DE DISEÑO DE UX?
▸ Permite mantener consistencia en el diseño.
▸ Permite a los equipos construir mejores productos de más
rápida al hacer que el diseño sea reutilizable.

58. BRUTALISM
EN CONTRA DEL OPTIMISMO Y LA FRIVOLIDAD DEL DISEÑO WEB ACTUAL

59. EN CONTRA DEL OPTIMISMO Y LA FRIVOLIDAD DEL DISEÑO WEB ACTUAL
BRUTALISM
▸ Se basa en un diseño simple y austero con un código de
HTML bastante básico.
▸ Uso de la paleta de colores Web Safe y fuentes de sistema.
▸ Falta de preocupación sobre la usabilidad.
▸ Diseño modular similar a los realizados con tablas.

60. IN ITS RUGGEDNESS AND LACK OF CONCERN TO
LOOK COMFORTABLE OR EASY, BRUTALISM CAN
BE SEEN AS A REACTION BY A YOUNGER
GENERATION TO THE LIGHTNESS, OPTIMISM,
AND FRIVOLITY OF TODAY'S WEB DESIGN.
BRUTALISTWEBSITES

62. BRUTALISM
¿QUÉ NOS ENSEÑÓ EL BRUTALISMO DE UX?
▸ La historia y evolución del diseño de Interfaces Visuales
tiene muchas similitudes con la Historia del Arte y sus
movimientos, y como tales, tienden a contraponerse al
anterior inmediato, sin embargo, de igual forma en que
ocurre con la Historia del Arte, y la Historia en general, es
necesario conocerla y entender lo que nos ha llevado
hasta el punto actual para proponer mejoras y evitar
cometer errores posteriores.

63. EVERYTHING THAT I'VE DESIGNED IN MY CAREER IS PRETTY MUCH GONE,
AND EVERYTHING THAT I WILL DESIGN WILL FADE AWAY. BUT HERE'S
WHAT REMAINS: THE NEVER-ENDING THRILL OF BEING A PART OF
SOMETHING THAT IS SO BIG, YOU CAN HARDLY GET YOUR HEAD AROUND
IT, AND THE PROMISE THAT IT JUST MIGHT CHANGE THE WORLD.
Margaret Gould Stewart
TEXT

64. REFERENCIAS
▸ The History of the Web
https://thehistoryoftheweb.com
▸ Alyson Shontell, The First Email, The First Tweet, And 13 Other Famous Internet Firsts, Business Insider, Abril 22, 2013.
http://www.businessinsider.com/every-first-on-the-internet-2013-2#
▸ Estudio de Consumo de Medios y Dispositivos entre Internautas Mexicanos, 9a Edición, Marzo 2017
http://www.iabmexico.com/wp-content/uploads/2017/03/ECMYD_2016_Version_Prensa.pdf
▸ Ethan Marcotte, Responsive Web Design, A List Apart, Mayo 25, 2010.
http://alistapart.com/article/responsive-web-design
▸ Creating a Design System: The 100-Point Process Checklist
https://www.uxpin.com/studio/ebooks/create-design-system-guide-checklist/
▸ Lenguajes de Diseño Visual, Mauricio Angulo
https://www.slideshare.net/UXnights/02-ux-nights-cdmx-vol-xxxix-lenguajes-de-diseo-visual-mauricio-angulo-s
▸ Brutalist Websites
http://www.brutalistwebsites.com/
▸ Margaret Gould Stewart, How giant websites design for you (and a billion others, too), TED Talks, 2014
https://www.ted.com/talks/margaret_gould_stewart_how_giant_websites_design_for_you_and_a_billion_others_too?
utm_campaign=tedspread--b&utm_medium=referral&utm_source=tedcomshare
▸ Smashing Magazine
https://www.smashingmagazine.com
▸ SitePoint
https://www.sitepoint.com
▸ Design Shack
https://designshack.net

65. GRACIAS
atzimbatm@gmail.com
@Atzimba