Desarrollar una buena UI

Para nosotros los desarrolladores que venimos de hacer backend suele ser un poco confuso el cómo desarrollar buenas interfaces de usuario, en mi caso personal, me costaba entender qué pasos seguir para lograr una meta en específico y ello va desde la maquetación, los estilos, el responsive design, la implementación de los assets, las fuentes, la paleta de colores, y qué tipo de formato usar para imágenes o íconos. Además el SEO: cómo configurarlo de forma correcta.

El 100% de los proyectos en los cuales participé y tuve la tarea de desarrollar la UI seleccioné Bootstrap como framework porque en mi desconocimiento e incluso algo de miedo, buscaba un atajo para hacer algo decente. Y si, como pueden suponer, los resultados pocas veces fueron buenos.

Todo esto también se debe a que pocas veces he trabajado en oficina, con personas buenas haciendo UI entonces es difícil entender cómo comenzar, qué tener en cuenta o cómo ayudarse. Esto sumado al poco interés que tenía por esta materia, ya que estando en esos momentos trabajando solo en el backend me tenia conforme.

Luego de esa larga introducción ahora si, entremos en materia:

Arquitectura el website: Esto aplica para todo tipo de proyecto, en este caso, al desarrollar una buena UI necesitas entender cómo se va comportar el proyecto para que puedas distribuir de una forma adecuada los items que vas a crear. Este blog está desarrollado con puro Html, Css y Javascript, no he usado ningún framework para ello, mi idea es migrar a Gatsby luego pero eso es otro tema, el punto es que esta aplicación es una web estática y la finalidad de la misma es desplegar el proyecto rápido, ahorrando tiempo, por ende la arquitectura que estoy usando puede no ser muy escalable pero por los momentos cubre lo que necesito. Además, al montar un website que va implementar SEO se debe tener en cuenta que, las SPA no funcionan para ello. Por esto es que es IMPORTANTE saber la finalidad del website, si se va implementar SEO o no y si los requerimientos del equipo de diseño son los adecuados para esto (por algo se los digo)

Herramientas a usar: Si tienes conocimiento de diseño gráfico o diseño de interfaces tal vez se te haga fácil poder configurar una paleta de colores para cada sección y los assets adecuados pero, ¿qué sucede con los developers que no tenemos este conocimiento? entendí que es importante apoyarse en herramientas que nos ayudan en varios puntos:

UIGRADIENTS: Tienes una buena alternativas de gradientes para usar en tu sitio web.

WEBGRADIENTS: Otra buena herramienta para que puedas seleccionar los gradientes para tu website.

FLATUICOLORS: Permite seleccionar paleta de colores.

BENNETTFEELY: Permite simular en base a coordenadas la funcion clip-path de css para aplicarlo a nuestro sitios.

FONTAWESOME: Este lugar es famoso, puedes bajar los mejores iconos para tu website.

GOOGLE FONTS: Algo que no puede faltar, seleccionar fuentes adecuadas para nuestro sitio.

La calidad de los assets: ¿Te han dado assets en un documento de word? ¿te han dado imágenes gigantes y muy pequeñas para colocar en una sola sección que tiene relación? De los assets depende en gran pante el rendimiento de nuestro website al cargar por primera vez, debes tener en cuenta lo siguiente:

Intenta en lo posible que las imágenes, logos e iconos sean SVG: es un tipo de imágen digital formada mediante gráficos vectoriales, es decir, las imágenes que se guardan en este formato deben poder ser representada como gráficos vectoriales y funciones matemáticas, a diferencia de lo que ocurre con las imágenes de mapa de bits (JPG, PNG, etc) donde cada pixel de la imágen tiene su propia información.

Cuando tenemos una imágen de mapa de bits y la ampliamos podemos apreciar una pérdida notable de calidad, llegando incluso a ser totalmente borrosa si la ampliamos demasiado. Esto se debe a que al hacer zoom sobre una imagen con mapa de bits estamos ampliando cada pixel de forma individual, lo que genera una pérdida de calidad.

Por el contrario, al hacer zoom a una imágen vectorial, gracias a las propiedades matemáticas de los vectores, la imagen vuelve a dibujarse de nuevo multiplicando su vector por el valor del zoom que estemos realizando. De esta manera, la imágen se redibuja desde cero con una calidad del 100% y sin ningún tipo de pérdida.

El tamaño de las imágenes deben ser las adecuadas para cada sección: Si tienes que usar Css para redimensionar una imágen en tu website estás cometiendo un error (yo debo arreglar ese detallito en un punto en este website) NO es una buena práctica, daña el rendimiento del sitio.

Si no es posible que una imágen sea formato SVG entonces optimiza dicha imágen para la web: Existen algunas herramientas online que permite esto, solo debes subir dicho asset y descargarlo optimizado.

Las tecnologías a implementar: Aprende Flexbox y CssGrid. no intentes usar un framework porque pareciera ser un "atajo" para maquetar por la distribución de los grids, la mayoría de veces esas configuraciones no cumplen las expectativas de los proyectos que tenemos que desarrollar, no la cagues como yo xD.

Bueno amigos, espero que les sirva este post, estoy feliz porque al fin creo que soy bueno haciendo UI y eso me abre la mente para entender otras cosas importantes que tal vez no tiene que ver mucho con código ¿de qué sirve montar un website si no hace dinero? se las dejo por ahí. Saludos!