Hace unos días tuvo lugar en Madrid el evento FrontFest 2020, reunión en la que el objetivo principal es el aprendizaje y puesta al día sobre tendencias de desarrollo front-end, así como compartir experiencias entre los asistentes.
El FrontFest 2020, uno de los encuentros más importantes del sector front-end en nuestro país, llegaba a su 4ª edición -desgraciadamente puede que la última-, y nos ofrecía una gran variedad de ponencias sobre las últimas tendencias en estas tecnologías, buenas prácticas y como siempre, también varias relacionadas con una de las áreas de trabajo dentro del Digital Business Assurance que desarrollamos en MTP: UX/UI. Las resumimos a continuación.
Arte generativo con CSS
En esta charla, Sonia Ruiz ofreció una perspectiva distinta para la que trabajar en CSS, crear patrones y diseños aleatorios generados con código basándose en el web component <css-doodle/>.
Su ‘utilidad’ se aleja totalmente de lo profesional, salvo para añadir alguna de estas creaciones en portfolios o landings muy visuales o productos cuyo objetivo sea evocar sensaciones puramente artísticas. En su intervención también nos habló de Yuan Chuan, uno de los referentes en el uso del CSS generativo.
Tipografías para front-ends
La tipografía es una parte fundamental del diseño y, sin embargo, seguimos sacándole poco partido, ya que como nos contó Elena Ramírez en su intervención, hay infinidad de matices tipográficos como el uso de fracciones, superíndices, subíndices, ligaduras…posibilidades que vienen incluidas en los ficheros de las fuentes y que pocas veces hacemos uso de ellos.
Hizo mención a la tipografía fluida, que varía su tamaño en función del dispositivo de salida; y también a los números tabulares que visualmente tienen funciones distintas a los números proporcionales. La importancia de los interlineados para que la legibilidad de los textos de nuestras apps y webs sea correcta, así como los anchos de párrafo, que también influyen en una buena legibilidad para que el usuario no se canse.
Por último terminó hablando de las variable fonts, fuentes cuyo fichero contiene todos los pesos tipográficos que se han diseñado para ella, ahorrando así en tamaño de archivo y que podemos variar de forma muy detallada y fácil en CSS.
Welcome… to the dark side?
La última charla que tuvo relación directa con el diseño fue la de James Heda Weng, que nos introdujo en la moda del dark pattern o el patrón de diseño oscuro, dándonos tips para diseñar correctamente un producto con dark mode, saber que tienen que tener nuestras apps o webs para que convenga aplicarlo y algún ejemplo de buena ejecución, como la del calendario de iOS. Quedó claro que con imágenes y gráficos funciona, pero no con texto, ya que el fondo blanco con letras negras es mucho más legible que su lado opuesto. También hay que tener en cuenta el resto de colores de la paleta que usemos ya que habrá que ajustarlos a este modo, no vale con cambiar el blanco por el negro. Retocar imágenes para oscurecerlas lo suficiente y baja la velocidad de las animaciones son también tareas a tener en cuenta a la hora de pasarnos… al lado oscuro.
En definitiva, un gran evento con grandes ponencias donde seguir actualizándote y aprendiendo con tus compañeros sobre experiencia de usuario (UX – User eXperience).
Jonathan Rueda
Analista de Accesibilidad Web y UX en MTP