Insights
Herramientas online para diseñadores web
Desde elementos fundamentales para un diseño web —como imágenes, iconos o tipografías— a generadores de código CSS pasando por conversores de medidas o validadores. Las herramientas de diseño nos ayudan con algunas de las tareas más habituales a la hora de realizar sitios web e Internet está repleto de ellas. A continuación te enumeramos algunas de nuestras favoritas: las hemos escogido por ser gratuitas, estar bien diseñadas y resultar muy útiles.
1. Unsplash
¿Te imaginas un catálogo con miles de imágenes de gran calidad y a alta resolución? ¿Te imaginas que además fueran libres de derechos de autor? ¿Y te imaginas que además fueran totalmente gratuitas? Pues deja de imaginar y visita Unsplash.
2. Compressor
¿Sabías que el peso de las imágenes influye muy negativamente en la carga de tus páginas web? Es el culpable de aproximadamente casi la mitad del tiempo de carga. Con Compressor puedes reducir significativamente los kilobytes de tus imágenes sin que pierdan ni una gota de calidad. Así tu site cargará más rápido y tus usuarios estarán más contentos.
3. Squoosh
Puestos a optimizar el peso de tus imágenes: ¿has probado a sustituir los tradicionales ficheros JPG y PNG por nuevos formatos mucho más ligeros? En Squoosh puedes convertir tus fotos a WebP y AVIF fácilmente. ¿Todavía no conoces los beneficios de trabajar con este tipo de ficheros? Echa un vistazo a nuestro artículo ‘WebP y AVIF, los nuevos formatos de imagen que deberías usar en tu web’ donde te lo explicamos todo.
4. Coolors
Una buena paleta cromática es un elemento indispensable para dar personalidad a tus sitios web. Con Coolors podrás crear tus propias paletas de color para tus proyectos o si lo prefieres dejarte inspirar por las que ya han creado otros diseñadores. Simple pero muy útil.
5. Color Contrast
Además de impactantes, tus webs tienen que ser accesibles. Asegurarte de que tus textos son legibles para todo el mundo y que cumplen con las recomendaciones WCAG es muy sencillo gracias a herramienta online como Color Contrast. Sencilla, elegante y útil. ¿Qué más se puede pedir?
6. Lorem Ipsum
LoremIpsum.io es uno de los muchos generadores de texto falso online que existen en la Red, aunque debido a su diseño es sin duda nuestro favorito. Esta herramienta nos proporciona la cantidad necesaria de texto para rellenar nuestros diseños a falta de los textos definitivos y lo hace a partir del célebra pasaje Lorem ipsum, un texto ficticio que se utiliza en la industria tipográfica desde el siglo XV.
7. Google Fonts
Con más de mil fuentes totalmente gratuitas, el catálogo tipográfico de Google Fonts es el paraíso de los diseñadores gráficos. Todas las tipografías pueden usarse libremente, tanto descargándolas directamente como usándolas en tu web a través del CDN de Google. ¡Ahora lo difícil es decidirse entre tantas!
8. CSS Gradient
Este sitio web te permite crear degradados de color de una forma muy intuitiva: solo tienes que arrastrar los cursores hasta crear la composición perfecta y automáticamente tendrás el código CSS para copiar y usar en tu web.
9. Smooth Shadows
Basada en el mismo concepto de CSS Gradient Smooth Shadows es una herramienta online gratuita que sirve para crear elegantes efectos de sombreados en CSS.
10. Easings
Easings es una colección de elegantes transiciones para tus animaciones con CSS. Puedes escoger entre animaciones ya creadas o atreverte a diseñar las tuyas propias tirando de curvas de Bézier.
11. Page Speed
¿Crees que tus páginas cargan lo suficientemente rápido? ¿Puedes hacer algo para mejorarlas? Descubre la respuesta con Page Speed Insights la herramienta de Google que todo desarrallodor debería usar. Introduce una URL y automáticamente obtendrás una puntuación de velocidad de carga para dicho site, además de un listado de sugerencias para hacer que tu sitio web funcione como una flecha.
12. Can I Use?
Constantemente aparecen nuevos avances en HTML o CSS que facilitan el diseño de páginas web. Sin embargo, no siempre pueden usarse tranquilamente, ya que estas mejoras no se implementan al mismo tiempo en todos los navegadores web. Can I Use? proporciona datos actualizados de compatibilidad de tecnologías front-end con los distintos navegadores web, tanto de escritorio como de dispositivos móviles. Realmente útil.
13. Neko Calc
Aunque puede parecer algo muy sencillo, transformar medidas en píxeles a rems y viceversa a veces es un verdadero tormento. Olvídate de las reglas de tres con esta herramienta que funciona como una simple calculadora.
14. Pattern Pad
Este sitio web es ideal si quieres dar un toque original a los fondos de tus webs con divertidos patrones geométricos. También lo puedes usar para tus presentaciones o incluso para tus publicaciones en redes sociales.
15. Icon Monstr
Si necesitas una librería de iconos sencilla, en Icon Monstr encontrarás una completa colección de ellos totalmente gratuita. Puedes descargarlos en formato vectorial y también puedes usarlos en tus webs como fuentes.
¿Te ha parecido interesante? ¡Compártelo!
Seguro que a tus contactos le gusta leerlo.
