01 UXN CDMX XXXIX - Historia y evolución del diseño de interfaces visuales - Adriana Atzimba
47
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
Transcript of 01 UXN CDMX XXXIX - Historia y evolución del diseño de interfaces visuales - Adriana Atzimba
HISTORIA Y EVOLUCIÓN DEL DISEÑO DE INTERFACES VISUALESCÓMO SE INTEGRÓ LA LABOR DEL DISEÑO EN LA CREACIÓN DE INTERFACES Y SU RELACIÓN CON LA EXPERIENCIA DE USUARIO
EN EL PRINCIPIO…
SÓLO ERAN LETRAS NEGRAS Y AZULES SOBRE FONDO BLANCO
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.
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.
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.
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.
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?
…NO, ESE NO
ESTE FLASH
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.
“HTML5 VS. FLASH” IS THE WRONG DISCUSSION. “ACCESSIBLE RICH MEDIA” IS THE RIGHT ONE.
Jeffrey Zeldman (via Twitter)
TEXT
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.
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.
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.
GRACIAS POR TODO FLASH…
TRABAJANDO CON ESTÁNDARES¿QUÉ PASÓ DESPUÉS?
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.
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.
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.
DISPOSITIVOS MÓVILESY DISEÑO WEB RESPONSIVO
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.
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.
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.
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.
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
FLAT DESIGNSIMPLIFICACIÓN A SU MÍNIMA EXPRESIÓN
ORÍGENES
FLAT DESIGN
▸ Windows 8
▸ Window Mobile
▸ iOS
CARACTERÍSTICAS
FLAT DESIGN
▸ Sombras largas, contrastantes y cortantes
▸ Paleta de color limitada con tonos brillantes y contrastantes
▸ Tipografía sencilla
▸ "Ghost button”
▸ Minimalismo
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
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.
BRUTALISMEN CONTRA DEL OPTIMISMO Y LA FRIVOLIDAD DEL DISEÑO WEB ACTUAL
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.
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
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.
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
REFERENCIAS
▸ The History of the Webhttps://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, 2014https://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 Magazinehttps://www.smashingmagazine.com
▸ SitePointhttps://www.sitepoint.com
▸ Design Shack https://designshack.net
