Empezar un proyecto siempre requiere tiempo. Más del que habías pensado generalmente, debido a que no solo tienes que emplear parte de ese tiempo en la lógica de la aplicación, sino que tienes que elegir muchos de los aspectos visuales y crear o buscar botones, iconos, animaciones, etc. En este artículo te dejo un montón de recursos disponibles como herramientas para tipografía, layout o disposición, iconos (muchos iconos) y separadores listos para copiar y pegar tu proyecto web. Es el primer post de una lista de muchos (espero) que iré subiendo.
Tienes disponible una segunda entrega de esta colección de Recursos para tu web en la que hablamos de Animaciones CSS.
Empecemos por la tipografía
La tipografía (o fuente tipográfica para ser exactos) es básicamente el estilo que tienen las letras y caracteres en tu página web: no todos escribimos la letra "A" de la misma forma. Pues eso mismo le pasa a las webs, dependiendo de si quieres un aire moderno o clásico deberás elegir una u otra tipografía.
Generalmente, una misma web tiene dos o más tipografías: una para títulos y fragmentos importantes de texto y otra para el texto en general. Lamentablemente, no todas las tipografías se llevan bien entre sí. Y para solucionar esto, te traigo esta maravillosa herramienta: https://fontjoy.com/
iFontJoy es una inteligencia artificial que intenta elegir fuentes que combinen bien juntas. Puedes ir generando aleatoriamente fuentes hasta que encuentres una combinación que te enamore. O bien, generas opciones aleatoriamente hasta encontrar una que te guste, la bloqueas desde el menú izquierdo y, después, vuelves a generar aleatoriamente el par correspondiente.
¡Genial! Ya tienes una tipografía que te enamora y estás ya pensando en los textos que vas a introducir, pero... empieza el siguiente problema: el tamaño. "En móvil se ve muy grande", "en ordenador no se ve" y ese tipo de frases suele escucharse mucho cuando estás en la fase de diseño. Antiguamente, se establecía un tamaño fijo para cada dispositivo, pero esto está cambiando gracias a las modernidades de CSS: la tipografía dinámica, que permite establecer una relación matemática entre el tamaño de la pantalla y el tamaño de la letra.
Y para solucionar este problema te traigo https://www.fluid-type-scale.com/ . Una herramienta que se encarga de la matemática y CSS que hay detrás de los cálculos para una escala tipográfica modular. Tú solo le indicas el mínimo y máximo del viewport y de la fuente y esta te genera el CSS que tienes que copiar y pegar en tu web. Además, te permite ver cómo queda a diferentes tamaños e introducir fallbacks por si el navegador del visitante fuese antiguo y no soportase CSS moderno.
¡Ya tienes fuente y tamaño! Ahora sigamos con el siguiente punto ... el layout.
Layout: disposición de los elementos
El Layout se refiere al esquema visual o la distribución que siguen los elementos dentro de un componente o documento. En otras palabras: dónde va el header, qué esquema siguen los elementos en móvil o desktop, o cómo se muestran las opciones de favoritos y compartir dentro de una tarjeta.
Con la llegada de CSS 3, llevamos un par de años diseñando layouts utilizando principalmente dos funcionalidades increíbles de CSS: flexbox y grid. Estas nos permiten, de forma sencilla, decirle al navegador cómo aprovechar los espacios tanto en móvil como en ordenador. Aunque según el diseño elegido, pueden ser un poco complicadas las propiedades css que tenemos que usar.
Pero por suerte tenemos herramientas que nos permiten copiar y pegar los típicos layout o al menos los más usados y más comunes. Una de estas herramientas es https://1linelayouts.glitch.me/, que nos muestra dos columnas: el layout elegido y el código CSS listo para utilizar en nuestra web. Es genial para ahorrar tiempo en el diseño de los componentes más frecuentes.
Por otro lado, las posibilidades de Flexbox son casi infinitas. Podemos componer un montón de layouts utilizando únicamente este tipo de diseño. Y para demostrarlo está la herramienta https://flexboxpatterns.com/, que recoge los patrones más comunes y más curiosos que puedes llegar a implementar usando únicamente CSS y Flexbox: desde tabs, headers, side bars o las genéricas cards. No dejes de echarle un ojo para profundizar en esta genial técnica de diseño.
¡Genial! Tenemos tipografía y cómo queremos mostrar los elementos. Ahora toca elegir qué botones vamos a utilizar.
Iconos: una imagen vale más que mil palabras
Los iconos son imprescindibles en una web: le indican en un golpe de vista al usuario una acción o una notificación: que si hace clic aquí es que le gusta una publicación, que hay una alerta o que ha recibido un mensaje. La mayoría de iconos son más o menos estándar, pero hay diferentes funciones que pueden necesitar un icono propio.
Una de las librerías de iconos más desconocida, pero que más material contiene es https://www.svgrepo.com/, un repositorio con más de 300.000 iconos en SVG listos para seleccionar, descargar e importar en tu proyecto. ¿Necesitas el icono de un cocodrilo, un coche eléctrico, iconos que parezcan a mano alzada, a todo color, monocromo? En SVGRepo lo tienes casi seguro.
Por otro lado, tenemos https://iconoir.com/, una librería con 1185 iconos disponibles en el momento de escribir estas líneas, completamente gratis y preparados para su uso en tu proyecto. El funcionamiento es parecido a la anterior herramienta: buscas el icono que necesitas, seleccionas el tamaño y grosor y, o bien lo copias generando un tag SVG para pegar en el HTML, o bien te descargas el SVG como fichero externo. Adicionalmente, también puedes descargar toda la librería usando npm i iconoir y ya los tienes todos descargados y listos para usarlos. Aquí tienes la documentación de Iconoir
import Iconoir from 'iconoir/icons/iconoir.svg'Otra herramienta que deberías conocer es https://heroicons.com/, de los creadores de Tailwind. Esta tiene "tan solo" 292 iconos en este momento, pero te permite buscar el icono que necesitas y elegir si lo quieres outline, sólido o mini. Como la mayoría de herramientas, permite instalarlo mediante npm, pero me convenció el detalle de que permite tanto descargar el SVG como copiarlo y pegarlo directamente en HTML. Esto último es genial como apaño si únicamente necesitas usar el icono en pocos sitios y no vas a descargar muchos más. Otra de las cosas interesantes que tiene es que puedes emplearlos directamente en Figma, por lo que muchos diseñadores estarán bastante contentos.
Y por último, un proyecto que me sorprendió bastante, ya que todos los iconos que tiene son logotipos de marcas. Estoy hablando de https://simpleicons.org/. Los responsables han creado un repositorio con casi 2400 iconos SVG de marcas. Están Ryanair, SanDisk, SAP e incluso Yamaha. Los iconos son en blanco y negro originalmente, pero también se adjunta el color HTML oficial de la marca. Esta página es ideal sobre todo en ecommerce, pues puedes buscar la marca del fabricante del producto y añadirlo en la ficha del producto o en los listados. Adicionalmente, también puedes descargarte la librería entera usando NPM.
Separadores para las secciones
Las páginas con muchas secciones o que requieren diferenciar bien los contenidos necesitan un buen separador que, por un lado, permita diferenciar un contenido de otro, pero que a la vez no rompa la estética del proyecto. Normalmente, se incrustaban imágenes enormes (que ocupaban bastante) y tenían que adaptarse a todos los tamaños.
Sin embargo, hoy en día, podemos generar separadores bastante atractivos tan solo usando un par de líneas CSS. La herramienta que te traigo para generar estos atractivos separadores con CSS es CSS Section Separator Generator | wweb.dev. Esta herramienta te permite seleccionar el tipo de separador (una línea, circulares, ovalados, en sierra), configurar algunos parámetros como la redondez o el ángulo y te genera un CSS listo para copiar y pegar en tu proyecto.
Conclusión
Todos sabemos que una cosa es la lógica de la aplicación (qué va a hacer y cómo) y otra cosa es cómo la queremos mostrar a nuestro público. La primera requiere tiempo, pero la segunda (a los que no somos expertos en diseño) mucho más. Así que los desarrolladores en ocasiones nos da un poco de pereza cuando tenemos que empezar un nuevo proyecto, por hobby me refiero.
Pero gracias a estas herramientas es más sencillo generar UI atractivas sin apenas conocimiento previo, o al menos, no empleando tiempo en los aspectos gráficos. Sobre todo, para una primera beta o prototipo.
Espero haberte ayudado y haberte dado un empujoncito para que te sea más fácil comenzar tu próximo proyecto o darle un aire más moderno y profesional al proyecto con el que estés ahora.
¡Qué tengas un feliz coding!
