Adriana Atzimba hace una retrospección sobre la historia y evolución del diseño visual de interfaces para web, desde las primeras páginas en hypertexto, pasando por los layouts de tablas y Flash hasta las tendencias más modernas de diseño basadas en estándares web.

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. EN EL PRINCIPIO…
SÓLO ERAN LETRAS NEGRAS Y AZULES SOBRE FONDO BLANCO

3. 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.

4. 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.

5. 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.

6. 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.

8. 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?

10. …NO, ESE NO

11. ESTE FLASH

12. 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.

13. 2ADVANCED
WWW.2ADVANCED.COM

14. 2ADVANCED
WWW.2ADVANCED.COM

15. INFINITY ART STUDIO
WWW.INFINITYART.RO/

16. INFINITY ART STUDIO
WWW.INFINITYART.RO/

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

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. 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.

20. 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.

21. GRACIAS POR TODO FLASH…

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

23. 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.

24. 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.

25. 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.

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

27. 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.

28. 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.

29. 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 List Apart.

30. 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.

31. 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

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

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

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

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

38. 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

39. 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.

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

41. 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.

42. 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
TEXT

44. 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.

45. 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

46. 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
▸ 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
▸ Brutalist Websites
http://www.brutalistwebsites.com/
▸ Smashing Magazine
https://www.smashingmagazine.com
▸ SitePoint
https://www.sitepoint.com
▸ Design Shack
https://designshack.net

47. GRACIAS
atzimbatm@gmail.com
@Atzimba