Conocer sobre UX y UI, cuando somos desarrolladores es fundamental, en este caso hablaría específicamente sobre el desarrollo frontend, en la que tenemos que tomar varios aspectos a considerar sobre el diseño para poder tener en cuenta en nuestros proyectos y sobre a qué tenemos que poner atención.
No es del todo necesario que como desarrollador hayas estudiado diseño, pero si es fundamental entender y estar enterado de algunas tendencias y de cómo lo están haciendo otras aplicaciones y proyectos para poder mejorar los nuestros, muchas veces no se trata de reinventar todo cuando tenemos ejemplos que funcionan.
Lo necesario: Responsive Design
Lo que sí o si tenemos que tener en el desarrollo web frontend, es responsive design, esto es fundamental tenerlo en cuenta, en un momento hablaremos de accesibilidad, pero si un usuario entra a nuestro sitio desde un dispositivo móvil y no puede disfrutar de la experiencia completa o peor si hablamos de adquirir un producto o servicio y no lo puede realizar, si ese usuario está solo interesado en lo que ofrecemos pues no tendrá de otra que ir al sitio web en un computador, pero si no es así podemos perder una venta o un cliente, este concepto seguramente lo has oído por todos lados, ya que es una obligación.
Accesibilidad Web
Pero esto no lo es todo, ahora hablemos sobre accesibilidad, sobre accesibilidad, se puede hacer una materia entera, pero nos referiremos a lo mismo que hemos hablado anteriormente, no tenemos que perder de vista que, nuestro sitio deben poderlo usar todos los usuarios sin importar,si usa, por ejemplo, un lector de pantallas, en caso de usuarios con una discapacidad visual, o que todo nuestro sitio dependa de iconos que pueden llegar a confundir sobre el uso de estos, el sitio debe ser intuitivo, es decir, ahorrarle el trabajo a nuestros usuarios, llevarlos a donde quieren y debe ser accesible, independientemente del usuario o del dispositivo que use.
Animaciones y Transiciones
Vamos a hablar de animaciones y del diseño, cuando agregamos animaciones o tansiciones, si bien es cierto que puede agregar una capa de diferenciación frente a nuestra competencia, esta agrega también elementos que pueden afectar el rendimiento, el peso, y cómo nuestros usuarios pueden ser afectados en cuanto a la experiencia. Ya que si la experiencia depende totalmente de tener animaciones por todos lados, vamos al caso anterior que tenemos un usuario usando un lector de pantallas o que simplemente su dispositivo sea más antiguo, o con una mala conexión, esto puede resultar en una mala experiencia, por eso revisar estos puntos antes siquiera implementar este tipo de cosas es de observar.
Esto no quiere decir que no tengas que usar animaciones o transiciones, solo tenemos que pensar en todos los usuarios que pueden usar nuestra aplicación y que podemos hacer para que todos disfruten de nuestro sitio.
¿Cuánto tiempo tienes para desarrollar el proyecto?
Y si preocuparse por implementar correctamente todo esto va a costar tiempo de desarrollo, aquí tenemos otra complejidad para pensar, estudie administración, y en ciertas cátedras, cuando pensábamos en planeación, podemos ser profesionales que solo planeamos, pero no ejecutamos al final nada si pensamos demasiado, por lo que podemos perder muchas oportunidades de negocio si sobre planeamos. Cuando vamos a lanzar una nueva función, o un MVP, no tenemos mucho tiempo, lo que tenemos que hacer es lanzar e iterar rápido, cuando pensamos en rendimiento, primero tenemos que tener que medir que es lo que se puede mejorar, entonces si implementamos, y después vemos que es una funcionalidad querida por nuestros usuarios, ahora si podemos ponernos a optimizar el sitio, por supuesto que no siempre vamos a tener todo completo, puede ser hasta un tema de deuda técnica, pero recordar siempre que las iteraciones se pueden realizar poco a poco.
Hace tiempo platicaba con una diseñadora sobre esto, y me mostraba sitios que en teoría eran nuevos, y lo que vi es que muchos de sus elementos no eran seleccionables para navegar con el teclado, esto quiere decir que nadie se puso a pensar en estos aspectos, en otra, nada del contenido se podía seleccionar y tenían una sección en esta aplicación dirigida exclusivamente para accesibilidad, pero lo mismo, no eran seleccionables ni siquiera en esta sección.
Hacer caso a las nuevas actualizaciones y herramientas
Vamos a retomar el tema del rendimiento, hace tiempo hicimos un artículo sobre mantenerse actualizado en CSS, y quise escribir sobre este tema, debido a que, muchas veces queremos implementar librerías y librerías aumentando el peso de nuestra aplicación, un tema de moda que son las view transitions , antes podías implementar una librería para hacerlas o usar JS para realizar ciertas acciones, ahora solamente necesitas CSS, y esto es porque nuestras herramientas van evolucionando, y tenemos que estar al tanto de que podemos usar para mejorar el rendimiento, como te mencionaba, no se trata que no utilices transiciones y animaciones, es solo buscar los mejores opciones para mejorar el uso de nuestras aplicaciones.
Hay una burla en redes sobre que cada semana tenemos 10 nuevos frameworks de JS, y si, nuevas tecnologías están tomando relevancia en el sector, hablamos mucho de Angular, Vue y React, ahora ya debiste hacer escuchado de Next js, Qwik, suelte kit o Astro, muchas de estas ofrecen soluciones en rendimiento o herramientas que podemos usar para realizar por ejemplo servir side rendering.
Sobre Next JS hemos hablado de su última actualización la versión 13, mientras que para Qwik también le hemos dedicado un espacio, y pronto estaremos probado más de estas herramientas en este blog.
Es importante estar al tanto de todo lo nuevo que sale, y te recalco que no debes implementar todo, depende de que estés construyendo el tipo de tecnología de la que puedes disponer para usar, un blog, por ejemplo puedes usar HTML, CSS y JS vanilla tal vez, hacer uso de web components, o una librería ligera, al tratarse de un sitio más sencillo, o usar una herramienta ya construida como lo es WordPress.
Porque esto es importante, de nuevo rendimiento y como nuestros usuarios pueden usar nuestro sitio, comentaba con esta diseñadora acerca de que el equipo de diseño sería óptimo que conocieran algo de HTML y CSS, viendo así que puede ser mejor para implementar y no sobrecargar nuestro sitio.
Igualmente, conocer sobre diseño nos va a permitir entender por qué un elemento tiene que ir en cierto sitio, o preocuparnos por nuestros usuarios u facilitarles el trabajo, la cantidad de veces que me he frustrado porque en un formulario se reinicia cuando hago clic en un modal de la página es hasta a veces para salirme del sitio, debemos preocuparnos por que nuestro sitio le facilite la vida a los usuarios, que sea intuitivo, que mantengan siempre el control sobre él y que puedan seguir navegando, el usuario siempre tiene que tener algo que hacer cuando entra a nuestras aplicaciones
Igualmente, recordar que lo que implementamos, por más innovador que sea, puede pasar de moda rápida, y que perdamos esa pequeña ventaja competitiva si la queremos ver así, por lo que tenemos igualmente que estar al tanto de qué es lo que predomina en otros sitios y que los usuarios aman de nuestro sitio y otros sitios.
Si estás trabajando en un proyecto personal espero que esto te haya sido útil, y que hay que tomar en cuenta para construir nuestras aplicaciones, si tienes otro consejo es totalmente bienvenido en los comentarios, y en qué podemos mejorar. Lo último de te dejaré sobre esto es que tomes en cuenta que a veces menos es más cuando hablamos de sencillez, para nos sobrecarga a nuestros queridos usuarios
Para terminar, además de esto te dejaré una pagino que me servía cuando estudiaba sobre psicología del color, un tema fundamental en el diseño, y otro sobre paletas de colores, al mismo tiempo, los principios de WCAG, que hablan sobre la accesibilidad en la web y qué es lo que podemos hacer para mejorar nuestros sitios con un estándar sobre esto.
Si vas comenzando, te dejaré el inicio de herramientas que puedes tomar como los son los cursos:
Si vas más avanzado tenemos:
Aprende Javascript, HTML5, CSS3 y NodeJS desde cero, y
React – Guía definitiva: hooks, router, redux, next + Proyectos para aprender sobre esta librería y con una introducción a Next JS
Te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, y además te invitamos al siguiente enlace donde vas a poder obtener un descuento en tu primer año a sólo $49.90 usando el cupón PRIMERA_VEZ al momento de realizar tu pago
O igualmente puedes optar por cada curso de manera individual en Udemy.
Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter, Instagram y Tiktok, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.
¡Hasta la próxima!, y chao mundo
Deja un comentario