+100 herramientas gratuitas online para diseño web

Si eres diseñador/a web, gestionas alguna página o tienes que elaborar creatividades para redes sociales… vamos a presentarte herramientas que te serán muy útiles. Hemos hecho una gran selección de recursos, utilidades y aplicaciones gratuitas para usar exclusivamente online desde un navegador web.

Incluimos bancos de imágenes libre de derechos, iconos, herramientas de edición de imágenes o de videos, de diseño gráfico, gráficos vectoriales, paletas de colores, analizadores de la velocidad de tu sitio, comprobaciones para poder mejorar su rendimiento, etc.

¡Seguro que muchos de estos recursos y herramientas te son muy útiles!

Paletas y combinaciones de colores

• Coolors: crea tus paletas de colores o explora las tendencias para encontrar inspiración.
• Adobe Color: puedes crear paletas de colores que combinen bien en tu web, o explorar las tendencias y paletas escogidas por categorías y temáticas en otros proyectos.
• Color Hunt: explora paletas de colores que combinan bien para tu próximo proyecto (sitio web, presentación, infografía, etc.).
• Design Seeds: otro sitio donde encontrar inspiración para escoger colores primarios y complementarios de tu proyecto.
• Color contrast checker: puedes indicar un color frontal y otro de fondo, y saber si el contraste entre ambos cumple con los distintos niveles de accesibilidad WCAG definidos por el W3C.

Imágenes y recursos gráficos gratuitos

Imágenes

• Pixabay: buena cantidad de fotografías, ilustraciones y vectores listos para descargar. Varios filtros de búsqueda disponible. Muchas de los recursos sólo requieren que indiques la atribución del autor para poder utilizarlo.
• Freeimages: banco de imágenes libre de derechos, de diversos temas/categorías y un buen filtro para afinar con tu búsqueda.
• Stocksnap: banco de imágenes de dominio público, aunque sin muchas facilidades para afinar la búsqueda.
• Unsplash: miles de fotografías de alta resolución libre de derechos.
• Pexels: banco de imágenes y de clips de videos para usar gratuitamente.
• Magdeleine: puedes buscar imágenes por categoría y gama cromática. Cada imagen tiene su propia licencia, pudiendo requerir o no de atribución.
• Gratisography: imágenes creativas y diferentes en alta resolución para usar libremente en tu sitio web.
• Libreshot: imágenes de gran calidad, libre de derechos, sin necesidad de atribución, creadas por Martin Vorel.
• Negative Space: imágenes libres de atribución para usar en tu proyecto. Puedes buscar por etiquetas y también por gama cromática.
• Morguefile: otro conocido banco de imágenes con cientos de miles de fotografías listas para usar en tus proyectos.
• Flickr: puedes buscar entre miles de fotografías de usuarios que no han puesto restricciones en los derechos de uso.
• Picography: no dispone de una gran cantidad de fotos, pero son de buena calidad, especialmente las de paisajes, y no requieren de atribución.
• Picjumbo: imágenes de buena calidad, con buena composición. Dispone de una suscripción premium para acceder a un mayor número de imágenes de calidad superior.
• Vecteezy: banco de imágenes y vectores libres para usar en tu proyecto. También contiene clips de video (de pago).

Ilustraciones (vectores)

• unDraw: banco de ilustraciones gratuitas descargables en SVG para utilizar en cualquier proyecto.
• Blush: ilustraciones descargables en PNG o SVG, que puedes personalizar, libre de derechos.
• Storyset: proyecto de Freepik, que presenta esta librería de ilustraciones libres para usar en cualquier proyecto bajo atribución, que puedes descargar en PNG o SVG.
• Isometric: ilustraciones gratuitas en perspectiva isométrica, descargables en SVG, libres para usar en sitios web, aplicaciones y otros proyectos.
• DrawKit: packs de ilustraciones temáticas descargables en diversos formatos. Algunos packs son gratuitos y otros de pago.
• ManyPixels gallery: galería de ilustraciones descargables en PNG o SVG que puedes usar en cualquier proyecto sin necesidad de indicar la atribución.
• PixelTrue packs: paquetes de ilustraciones descargables. Hay ilustraciones gratuitas y otras de pago, todas de buena calidad.
• Vector.me: ilustraciones, vectores e iconos para descargar en diversos formatos (SVG, AI, EPS, CDR).
• Illustrations.co: más de 120 ilustraciones libre de derechos para descargar en AI, SVG, PNG, EPS…

Iconos

• Flaticon: banco de iconos que podrás descargar en diversos formatos y tamaños. Muchos son libres, bajo atribución. Otros requieren de una suscripción premium. Es un proyecto de Freepik.
• Iconfinder: miles de iconos para descargar en PNG, SVG e incluso en formatos como AI. Algunos iconos son libres y otros requieren de una suscripción premium.
• Iconsax: más de 1.000 iconos en 6 estilos diferentes que puedes descargar libremente en gran cantidad de formatos como SVG, AI, FIG, XD, CSS…
• Boxicons: colección de más de 1.500 iconos para desarrolladores y diseñadores web. Puedes usarlos como web component, fuente, SVG, PNG…
• OpenMoji: más de 3.000 emojis para poder usar libremente en cualquier tipo de proyecto, descargables en SVG y PNG.

GIF animados

• Giphy: el banco de gifs animados más grande y utilizado. Miles de gifs gratuitos con derechos de autor (atribución).
• Tenor: biblioteca de gifs animados creados por usuarios, similar a Giphy.
• Reaction gifs: miles de gifs animados con reacciones y expresiones de personas.
• MotionElements: más de 3.000 gif animados gratuitos libre de derechos.

Herramientas de imágenes

Edición y tratamiento de imágenes

• Photopea: editor avanzado de imágenes con una interfaz similar a la del Adobe Photoshop. Permite la edición de imágenes mediante capas y editar ficheros PSD, RAW y otros formatos de imágenes habituales.
• BeFunky: editor de imágenes que permite, por un lado, trabajar sobre una imagen ya existente con funciones como recortar, redimensionar, rotar, efectos de luz, colores, etc.; y por otro crear composiciones, collages y diseños para distintos formatos de imprenta y redes sociales. Con la versión gratuita tendrás acceso a las funcionalidades más básicas. Con la suscripción de pago podrás emplear capacidades y características más avanzadas.
• Pixlr: sencillo editor online de fotos, con herramientas básica de selección, recorte, ajustes de parámetros (brillo, luz, contraste) o añadir textos. Dispone de una versión de pago más avanzada con funcionalidades y herramientas de edición más potentes. Permite abrir ficheros PSD (Photoshop), SVG (vectores) y otros formatos de imagen típicos.

Edición y tratamiento de SVG

• Vecta: editor de ficheros vectoriales como SVG, con el que podrás modificar ilustraciones o crear diagramas. Podrás exportar tu trabajo a varios formatos de imagen y SVG.
• Method Draw Vector Editor: un editor online de imágenes vectoriales SVG.
• SVG Editor online: editor gratuito y sencillo de imágenes vectoriales. Permite tanto importar como exportar en formato JPG, PNG y SVG.
• SVG Arista: crea sencillas animaciones en ficheros SVG como logos, iconos o ilustraciones.

Diseño gráfico (composiciones, collages…)

• Canva: herramienta centrada en crear diseños para distintos formatos de redes sociales, presentaciones, flyers… Permite utilizar plantillas prediseñadas, cargar tus propias imágenes o usar librerías, añadir textos, efectos, animaciones, etc.
• Snappa: con miles de plantillas en su versión gratuita, podrás crear piezas gráficas para redes sociales, infografías, imágenes para acompañar tus entradas de blog, etc.
• Fotor: otro popular editor que por un lado permite retocar imágenes, y por otro crear diseños para redes sociales y otros medios digitales. Como es habitual, puedes acceder gratuitamente a funciones básicas, y contratando suscripción premium acceder a un mayor abanico de características y recursos para tus diseños.
• Piktochart: aplicación web con plantillas prediseñadas para crear infografías, presentaciones, gráficos e informes. Con la versión gratuita podrás descargar tus diseños, pero sin poder eliminar el logotipo de la aplicación.
• Crello: aplicación online, gratuita y con versión de pago, para la creación de posters, carteles, e imágenes de diversos formatos para las distintas redes sociales.
• Genial.ly: herramienta online para la creación de presentaciones e infografías sencillas. Cuenta con una versión gratuita en la que podrás usar algunas plantillas y herramientas, aunque no podrás eliminar el logo de la aplicación.
• Infogram: aplicación online para crear infografías y pequeños informes con gráficos.

Optimización de imágenes

• Free image resizer: sube una imagen y redimensiónala fácilmente. Puedes crear a la vez varios tamaños de tu imagen para utilizarla en distintas redes sociales.
• Squoosh: aplicación online para optimizar imágenes. Permite cambiar el tamaño (redimensionarla), comprimirla usando distintos algoritmos y grado de calidad, convertirla a formatos de nueva generación como WebP o AVIF…
• Tinypng: herramienta para optimizar automáticamente el tamaño de la imagen que subas, ya sea JPG, PNG o WebP.
• ShortPixel: con el plan gratuito podrás optimizar hasta 100 imágenes al mes. También está disponible como plugin para WordPress.
• compressimage.io: otro compresor de imagen online gratuito de imágenes JPG y PNG. Permite además guardar tu imagen en formato WebP.
• avif.io: convierte a formato AVIF cualquier imagen en formato GIF, JPG, PNG o WebP.

Creación de diagramas y esquemas online

• Draw.io: aplicación online fácil de usar para la creación de diagramas. Ofrece plantillas para distintos tipos de diagramas, que podrás exportar a diferentes formatos de imagen o vectorial, y almacenar en la nube mediante Google Drive, Dropbox, OneDrive…
• GitMind: herramienta de creación de diversos tipos de diagramas y mapas conceptuales. Puedes editarlo online y guardar tu proyecto en JPG, PNG o PDF.
• LucidChart: aplicación online que cuenta con una versión gratuita con 100 plantillas, suficiente para crear diagramas y esquemas simples. Podrás exportar tu diagrama a JPG, PNG, SVG o PDF.

Favicons

• Favicon generator: a partir de una imagen o logotipo, genera el icono para tu sitio web o aplicación móvil.
• Favicon generator for real: aparte de poder generar el icono de tu aplicación o sitio web, podrás comprobar el estado actual de tu favicon y ver si puede mejorarse.
• Favicon.io: permite generar tu favicon a partir una imagen, texto o emoji (por si no dispones de logotipo o imagen).

Generación de patrones, fondos y divisores SVG

• Curved page dividers: generador de ondas en SVG para usar como separador de página.
• Shapedivider.app: generador de formas SVG personalizable, para usar como divisor de página.
• Get Waves: generador de ondas SVG para usar en tus diseños.
• Decent patterns: colección de patrones SVG para usar de fondo, con colores personalizables.
• Hero patterns: generador de patrones SVG. Elige el patrón, el color, la opacidad…
• Easy gradient generator tool: generador de degradados de color, exportables en SVG y CSS, para usar en tu proyecto.
• Squircley: genera formas (círculos, cuadrados…) con cambios de rotación, color, curvatura, exportables a SVG.

Herramientas de video

• WeVideo: uno de los mejores editores online de video. En su versión gratuita permite editar como máximo vídeos de 1GB, 5 min. de duración y con una resolución máxima de 480p.
• Animoto: popular editor de videos online. Fácil de usar, permite combinar clips de video, imágenes y audio, añadir textos y transiciones para elaborar tu video final. La versión gratuita añade una marca de agua a tu video.
• Movie maker online: editor básico y gratuito que permite combinar videos, imágenes y audio. No inserta marcas de agua, pero sí que tendrás que soportar algo de publicidad mientras trabajas online.
• Clipchamp: editor de vídeos online fácil de usar. Dispone de una base de clips y recursos que puedes usar para crear rápidamente videos para redes sociales. Con la versión gratuita podrás exportar a una resolución máxima de 480p.
• AVPress: optimiza y comprime videos MP4, WEBM o GIF directamente desde tu navegador.

Herramientas de Fuentes y estilos CSS

Tipografías y fuentes

• Google Fonts: biblioteca de fuentes tipográficas para incluir en tu sitio web, ya sea descargándolas o incluyéndolas directamente como URL externa.
• Dafont: descarga fuentes gratuitas creadas por otros usuarios, que podrás usar para tus diseños o proyecto web.
• Whatfontis.com: permite identificar la tipografía utilizada en la imagen que subas.
• Font identifier (Font Squirrel): al igual que la herramienta anterior, identifica las tipografías utilizadas en la imagen que indiques.
• WhatFont: extensión de Chrome para identificar las tipografías de una página web determinada.
• FontForge: aunque no se trata de una herramienta online, este software libre disponible para Windows, iOS y Linux, te permitirá diseñar y crear tus propias fuentes tipográficas.
• Typetester: esta web permite que puedas seleccionar varias fuentes con propiedades distintas, y ver visualmente como quedaría cada una de ellas de forma simultánea, para ayudarte a elegir más fácilmente la fuente a emplear en tu sitio web.

Estilos CSS

• CSS Minifier: herramienta online para «comprimir» y reducir el tamaño de tu código CSS. Podrás ahorrar varios KB en la carga de tu web.
• The Ultimate CSS generator: herramienta para ayudarte a generar código CSS compatible con varios navegadores. Puedes generar código para efectos de bordes, redondeo de bordes, sombras de cajas y textos, opacidad, filtros en imágenes de brillo, contraste…
• CSS3 Button Generator: generador de estilos CSS para botones. Puedes indicar varios aspectos como colores, espaciado, sombras, bordes, redondeos… la aplicación generará el código CSS que deberás utilizar.
• PurifyCSS: herramienta que te ayuda a identificar aquellos estilos CSS de tu web que no se están usando, y que por tanto podrías eliminar para reducir tamaño y complejidad.
• PXtoEM: utilidad para facilitar la conversión de unidades en CSS entre px, pt y em.
• CSS Validation: comprueba online si tu código CSS cumple es correcto y cumple con los estándares del W3C.
• CSS Sprite Generator: una forma de optimizar una web es combinar varios logos o iconos en una única imagen, y mostrar el logo o la parte parcial que se quiera mediante CSS (esto se conoce como CSS image sprite). Esta aplicación online te ayuda y simplifica a crearlo.

Herramientas de JavaScript

• JavaScript Obfuscator Tool: codifica el código JS para hacerlo ilegible, difícil de copiar y de interpretar por las personas.
• JSCompress: comprime y minimiza el código JS para ahorrar espacio y acelerar la carga de tu web.
• JSHint: herramienta online para detectar errores de sintaxis y posibles problemas de comportamiento en tu código fuente JS.
• RexEx Pal: utilidad para comprobar y probar online expresiones regulares de JavaScript.
• JSBin: un editor online útil para depurar el código y el comportamiento de tu programación JavaScript.
• JS beautifier: hace más legible el código JS, introduciendo colores, retornos de carro, identación… ideal si tu código está mal formateado.

Herramientas de análisis de velocidad y seguridad

Análisis de velocidad

• Pingdom: analiza la velocidad de carga de tu sitio web desde diversos continentes y puntos del planeta.
• WebPageTest: mide la velocidad de un sitio web desde diversas partes y usando diversos tipos de navegador o dispositivo móvil.
• web.dev: herramienta de Google para auditar diversos aspectos de un web (rendimiento, usabilidad, SEO…), con recomendaciones sobre como corregir los fallos detectados.

Análisis y comprobaciones de seguridad

• Security check & malware scanner: detecta virus y malware en un sitio web, así como si ha tenido algún problema reciente de seguridad.
• Security headers: comprueba los encabezados de seguridad HTTP de un sitio web, informa de cuales se están usando, los que faltan y recomendaciones para emplearlos.
• SSL checker: para comprobar el estado del certificado SSL instalado en un sitio web y su información básica.
• Blacklist check: comprobar si una IP o sitio web determinado se encuentra en alguna lista negra.

Otras comprobaciones específicas

• GZIP compresion checker: comprueba si un sitio web está usando compresión GZIP.
• DNS propagation check: muy útil si se modifican registros DNS, para poder comprobar el estado de la propagación de los mismos a lo largo del mundo.
• Check HTTP/2: comprueba si un sitio web soporta el protocolo HTTP/2.
• What CMS: comprueba que gestor de contenidos está usando un sitio web.

Documentación, sitios de referencia y consulta

• DevDocs: puedes encontrar información de referencia de muchas tecnologías (CSS, HTML, JS, diversos lenguajes de programación, frameworks…), de forma ordenada y clasificada.
• CSS tricks: sitio de consulta, casos y ejemplos de CSS en el que encontrar respuestas y mejorar tus conocimientos de CSS.
• Can I use: comprueba cuánto de soportado y extendido está por diversos dispositivos y navegadores una determinada tecnología relacionada con CSS, HTML, imágenes…

---

Si conoces alguna utilidad o aplicación web gratuita que eches en falta, indícalo en los comentarios o escríbenos mediante el formulario de contacto. La consideraremos para incluirla.

¿Buscas más herramientas y recursos? Te recomendamos que visites TinyTools.site, el sitio web que hemos desarrollado a partir de esta publicación, para recopilar todo tipo de recursos gratuitos relacionados con el diseño web.

---

Ilustración de Storyset