TOP 35 herramientas imprescindibles de diseño de páginas web [2022]

Montar una web puede parecer algo sencillo en un primer momento para cualquier persona.

Existen herramientas para el diseño de páginas web que facilitan mucho el trabajo, tanto a gente que quiere dedicarse al diseño web de manera profesional como a emprendedores que han decidido montarse su propia web.

Aunque la realidad es que, si quieres un resultado profesional, no esperes que ocurra si la haces tú mismo o tu primo, que sabe algo de código.

Para eso están los diseñadores web.

Aún así, tanto si te dedicas a esto como si te interesa para tu proyecto, en este post voy a ayudarte a escoger las herramientas de diseño web que mejor te pueden ir.

Son herramientas que a mí como diseñador me ayudan muchísimo y forman parte de la navaja suiza que utilizo a diario para diseñar las webs de mis clientes.

Pero espera.

Llegados a este punto, tengo que desvelar mi identidad, pues puede que ya te hayas dado cuenta de que no soy Miguel Florido.

Ya lo siento.

Antes de seguir, me presento, que hay que ser educado 🙂

¡Hola, estimado lector del blog de Marketing and Web!

Mi nombre “comercial” es Edu Rubianes, aunque mi madre me llamaba Eduardo (remarcando mucho la R) cuando dejaba mis manos sucias marcadas por las paredes del pasillo de casa al volver de jugar al fútbol con los amigos.

Soy diseñador de páginas web y mi proyecto personal se llama Refrescando Negocios.

En él intento ayudar a emprendedores y empresas a tener una página web totalmente optimizada para generar tráfico, leads y clientes. Me gusta pensar que lo consigo.

Muchas gracias a Miguel Florido por darme la oportunidad de aportar mi granito de arena a la extensa comunidad de Marketing and Web, uno de los blogs más potentes y leídos del marketing digital de habla hispana por méritos propios.

Dicho esto, voy a pasar ya directamente al contenido del post.

Espero que te guste y te sirva 🙂

¿Cuáles son las mejores herramientas de diseño web?

Vamos a ver cuáles son las herramientas que más te van a ayudar a la hora de plantear cualquier trabajo de diseño web:

 

Herramientas de diseño web para coger ideas e inspiración

herramientas de diseño web para coger ideas

A la hora de plantear cualquier proyecto web es bueno estar inspirado, por eso es muy positivo tener a mano repositorios de plantillas web para coger ideas.

Estas son algunas de las que utilizo yo habitualmente:

 

➡️ Be Theme

‘Be’ es un tema para WordPress que tiene un repositorio de plantillas muy interesante, con más de 650 opciones.

En su web podrás encontrar diseños muy modernos y variados que te ayudarán a coger ideas.

 

➡️ Envato

El repositorio de Envato Elements es brutal.

En él dispondrás de miles y miles de ideas, las cuales incluso puedes filtrar por tipo de maquetador visual, por compatibilidad con diversas herramientas y plugins, por temas y otros filtros.

 

➡️ Nicepage

Nicepage es un constructor de páginas web en cuya web -valga la redundancia– podrás encontrar infinidad de ideas de diseño, tanto para páginas completas como para bloques.

 

Herramientas de diseño web: creación de paletas de colores

herramientas de diseño web para paletas de colores

Uno de los aspectos que mejor debemos estudiar antes de ponernos a diseñar es cómo escoger y combinar los colores para una web, los cuales deben estar alineados con la imagen de marca y con las sensaciones que se desean transmitir a los visitantes.

Aquí te dejo tres de las mejores herramientas para crear una paleta de colores según mi humilde criterio:

 

➡️ Adobe Color

Adobe Color es sin duda la herramienta por excelencia para la creación de paletas de colores.

Creada por la archiconocida empresa de software de diseño Adobe, en la herramienta podrás crear tu paleta de colores (en la herramienta se llama ‘Rueda Cromática’) sobre la base de 10 reglas de armonía, podrás extraer los colores de cualquier imagen para crear tu paleta y podrás aprovechar paletas ya creadas por otros usuarios.

 

➡️ Coolors

Con Coolors podrás generar tu propia paleta de colores o inspirarte en otras ya existentes.

A diferencia de Adobe Color, Coolors genera paletas de manera aleatoria, sin utilizar reglas establecidas.

Podrás indicar tu color principal y a partir de él, se generan paletas de manera automática.

 

➡️ HTML Color Codes

Con esta herramienta podrás añadir un color principal y originar paletas empleando hasta 8 reglas diferentes de color.

Luego podrás descargártelas a tu equipo para trabajar con ellas.

 

Herramientas de diseño web: repositorios de tipografías

herramientas de diseño web para tipografias

Otra de las patas más importantes en el diseño web son las tipografías.

El uso que hagamos de ellas puede suponer una mejor o peor experiencia de usuario, así que es crucial escogerlas debidamente.

Aquí te dejo tres opciones muy útiles para añadir a tu kit de herramientas:

 

➡️ Google Fonts

Que Google tenga una plataforma para escoger tipografías es muy bueno.

Y si encima los mejores temas y maquetadores web para WordPress están totalmente integrados con ella, como así sucede, nos va a facilitar mucho el trabajo, ya que no tendremos la necesidad de descargarlas y subirlas a la web.

La herramienta te permitirá realizar diferentes filtros por categoría (Serif, Sans Serif, Display…), tipo de idioma (latín, cirílico, griego…), por propiedades (estilos, grosor…) y varias opciones adicionales.

Sin duda, una herramienta imprescindible.

 

➡️ Adobe Fonts 

Otra herramienta de Adobe muy útil, en Adobe Fonts podrás filtrar las tipografías por diferentes parámetros hasta dar con la que se adapte a tus necesidades.

Unos de los aspectos más destacados de Adobe Fonts es que dispone de tipografías de un montón de creadores externos, incluido el propio Google Fonts.

 

➡️ Font Pairings

En Font Pairings podrás escoger la tipografía principal y secundaria para tu página web y compararlas entre ellas para ver si casan bien.

La herramienta además posee una opción muy interesante de combinaciones ya creadas que funcionan genial entre ellas.

 

Herramientas de diseño web: bancos de imágenes

herramientas de diseño web para imagenes

Otro de los aspectos de gran relevancia de una página web es el uso que hagamos de las imágenes.

Debemos escogerlas bien para que la web luzca atractiva a la vez que profesional.

En los siguientes bancos de imágenes encontrarás un montón de ideas para descargar y utilizar libremente:

 

➡️ Pexels

Uno de los mejores bancos de imágenes gratuitos que hay con +100.000 imágenes de muy buena calidad que se sale de las típicas estampas demasiado “forzadas” y con poses antinaturales.

 

➡️ Pixabay

Quizá el más conocido y utilizado banco de imágenes para diseño.

En Pixabay encontrarás miles de imágenes muy buenas, aunque también tienen otras que están algo pasadas de moda.

Si sabes cómo diferenciarlas, sin duda le sacarás mucho partido.

 

➡️ Unsplash

Unsplash es para mí el mejor repositorio de imágenes que hay.

En él hay más de 2.000.000 fotografías de grandísima calidad muy frescas y naturales.

 

Herramientas de diseño web: bancos de iconos

herramientas de diseño web para iconos

Junto a las imágenes, los iconos te ayudarán a alimentar el aspecto visual de una web.

Son muy importantes y útiles para destacar listados, servicios o características, por ejemplo.

Los iconos son muy interesantes, pues además de ayudar a organizar y estructurar parte de los contenidos, sobrecargan muy poco la web en lo que a peso se refiere, ya que son muy ligeros.

Te enseño varias webs tanto de iconos estáticos como de iconos animados -formato Lottie– donde podrás descargarlos:

 

➡️ Flaticon

Flaticon es el repositorio de iconos más extenso que existe -hasta donde yo sé– con más de 6.200.000 vectores disponibles, tanto gratuitos como de pago.

En su web podrás descargar iconos en varios formatos, dependiendo de si eres un usuario gratuito o dispones de una cuenta premium. La opción gratuita solo te permite descargarlos en formato PNG.

 

➡️ Iconfinder

Otro amplio repositorio donde encontrar infinidad de iconos e ilustraciones vectoriales, con +200.000 opciones gratuitas y +6.000.000 en sus opciones de pago.

Iconfinder -de momento– te permite descargar iconos gratuitos también en formato SVG.

 

➡️ Fontello

Fontello dispone de una buena lista de iconos para diseño web, aunque no es un repositorio del estilo de Flaticon o Iconfinder con un montón de estilos y colores diferentes.

En Fontello encontrarás iconos monocromáticos y, digamos, con un aspecto más funcional que visual (iconos de email, favoritos, compartir, usuario, buscar…). Sé que me entiendes 😉

 

➡️ LottieFiles

En LottieFiles podrás encontrar iconos animados para añadir a tu web.

Son iconos muy ligeros generados con código -formato JSON- que pueden aportar mucha creatividad a cualquier diseño.

Están totalmente integrados en WordPress y podrás añadirlos directamente a una web con maquetadores como Elementor.

Además, en su propia web puedes personalizar varios aspectos de los archivos, como el color de los elementos, la velocidad de reproducción, añadir interactividad y otras opciones muy chulas.

 

➡️ Lordicon

Esta web de iconos animados me encanta porque son iconos muy sencillos pero bastante personalizables.

👉 Puedes escoger los iconos animados en formato Lottie, modificar algunos parámetros como el color o el grosor y luego descargártelos para utilizar en tu web.

¡La verdad es que está muy interesante!

 

Herramientas de diseño web: bancos de vídeos

herramientas de diseño web para videos

Aunque no conviene abusar de ellos por la tremenda influencia que tienen sobre la velocidad de carga, en ocasiones nos vemos en la necesidad de utilizar algún vídeo como recurso de diseño web.

Aquí te dejo tres opciones muy buenas para descargarte vídeos libres de derechos:

 

➡️ Pixabay

Pixabay, como ya te he comentado, tiene un enorme repositorio de imágenes… pero también de vídeos.

En su web encontrarás miles de opciones.

 

➡️ Pexels

También en Pexels te ofrecen la posibilidad de descargar vídeos de mucha calidad para que puedas emplear en cualquier página web sin tener que pagar por la licencia.

 

Herramientas de diseño web para optimizar imágenes

herramientas de diseño web para comprimir imagenes

Más arriba te hablé de varios repositorios de imágenes para usar en tu página web.

Ahora quiero hablarte de la importancia que tiene comprimir y optimizar las imágenes para insertar en una web, ya que son quizá los elementos que más impactan en la velocidad de carga.

Por eso las siguientes herramientas te vendrán de perlas para preparar tus imágenes antes de subirlas a la web:

 

➡️ Image Resizer

Hace tiempo realicé en mi propio blog un análisis objetivo de varias herramientas de compresión de imágenes, en el que comparaba el porcentaje de compresión versus la calidad de imagen resultante.

Image Resizer fue la herramienta triunfadora de aquel análisis por ser la que mejor comprime sin apenas pérdida de calidad.

 

➡️ I love IMG

De las tres herramientas de este apartado, esta es la que más utilizo en mi día a día.

Además de generar optimizaciones muy buenas, tiene otras herramientas adicionales muy interesantes, como la de redimensionamiento y recorte. Un todo en uno imprescindible, sin duda.

 

➡️ Image Smaller

Image Smaller no le quedó a la zaga a las otras dos herramientas anteriores en relación compresión vs. calidad, pero tiene una limitación que le quita puntos y es que solo permite optimizar una imagen cada vez, mientras las otras dos, hasta 20.

 

Herramientas de diseño web para crear prototipos

herramientas de diseño web para prototipar webs

Existen diseñadores web que a la hora de afrontar un trabajo se lanzan directamente a crear la web en el propio entorno final (WordPress, por ejemplo).

Otros -como el que te escribe- prefieren trabajar primero con un prototipo o mockup antes de hacer la web “en real”, algo que puede ayudar a avanzar más rápido en la maquetación final, aparte de otros beneficios, como evitar malos entendidos con el cliente o detectar nuevas necesidades que puedan trastocar el desarrollo de la web.

Si tú eres de los que prefieren realizar prototipos, aquí te dejo tres opciones que te van a venir genial:

 

➡️ Balsamiq Wireframes

Los wireframes son bocetos en los que se genera la estructura de una web. Vienen siendo como el esqueleto de un edificio sobre el cual luego pondremos los ladrillos, el tejado y demás elementos que darán el aspecto final.

Existen varias herramientas en el mercado muy válidas para realizar wireframes, pero sin duda Balsamiq es una de las mejores.

Te permitirá añadir cualquier  elemento que simulará el contenido de una web: secciones, filas, columnas, cuadros de imagen, cuadros de texto, cuadros de vídeo, botones, etc.

 

➡️ MockFlow

Al igual que Balsamiq, MockFlow te permitirá crear wireframes, no obstante su gran potencial se encuentra en la capacidad de prototipar con un aspecto idéntico cualquier página de una web, pudiendo añadir los objetos reales tal cual se mostrarán después en la maquetación real.

 

➡️ Adobe Photoshop o Illustrator

¡Qué decir de estas dos herramientas!

Cualquiera que esté metido en el mundillo del diseño conoce estas dos potentísimas herramientas de Adobe (incluso Photoshop es conocido por cualquier persona “de a pie”).

Con cualquiera de ellas podrás generar prototipos, maquetas y mockups del diseño final de una web. De hecho yo siempre utilizo Illustrator.

 

Herramientas de diseño web: maquetadores visuales (page builders)

herramientas de diseño web para maquetar webs

Y para cerrar este listado de herramientas útiles para todo el proceso de creación de una web, he dejado para el final las herramientas donde daremos forma y sentido a todo lo que ya hemos visto: los maquetadores visuales o page builders.

👉 Gracias a los maquetadores visuales, hoy en día es más fácil que nunca diseñar una página web de manera creativa sin necesidad de tener conocimientos técnicos.

Vamos a ver los más conocidos y utilizados:

 

➡️ Elementor

Elementor Page Builder es el maquetador visual más extendido en WordPress con +5.000.000 instalaciones activas de su versión gratuita.

Desde su aparición en mayo de 2016 en el ecosistema WordPress, su evolución y crecimiento ha sido imparable.

Gracias a este maquetador podrás construir páginas web fácilmente con su sistema de arrastrar y soltar y su entorno amigable pensado para cualquier tipo de usuario.

Con Elementor podrás maquetar toda la estructura de una web (header, footer, páginas de archivo, single posts…).

Además, existen un montón de desarrolladores externos que han creado nuevos widgets y herramientas para Elementor que lo hacen una herramienta de crecimiento ilimitado.

 

➡️ Divi Builder

Divi es un tema para WordPress que incluye un maquetador visual llamado Divi Builder, aunque funciona también con cualquier otro tema.

Además del sistema de arrastrar y soltar ya tan extendido en el mundo web, uno de los fuertes de Divi Builder es su amplio sistema de estructuras por filas y columnas, que permiten generar prácticamente cualquier tipo de maquetación.

Por si fuera poco, Divi tiene alrededor de 1.800 plantillas listas para cargar directamente en la web. De esta manera, podrás montar webs profesionales en cuestión de minutos.

El único “pero” que tiene Divi Builder es que no tiene versión gratuita.

 

➡️ Gutenberg

Gutenberg es la apuesta de WordPress para adentrarse en el mundillo de los maquetadores visuales.

👉 Lanzado oficialmente en la versión 5.0 del CMS en el año 2018, este plugin se postuló como un competidor -también como posible sustituto– de los maquetadores visuales ya existentes en el mercado, como Elementor, Divi o Beaver Builder.

Gutenberg es un sistema basado en bloques con el que se pueden construir webs de manera bastante sencilla e intuitiva.

Además, uno de sus fuertes es que afecta muy poco al rendimiento de la web, lo que lo hace una apuesta segura en busca de la optimización.

Aunque le queda bastante recorrido para “pelearse” con otros constructores visuales más potentes, Gutenberg ha llegado para quedarse y algunos desarrolladores que antes creaban herramientas y widgets únicamente para Elementor, ahora ya se están centrando también en Gutenberg, lo que lo hará un candidato cada vez más destacado.

 

 

Otras herramientas muy útiles para un diseñador web: Extensiones para Google Chrome

herramientas de diseño web extensiones chrome

Todas las herramientas que hemos visto hasta ahora son muy importantes para darle forma a una web completa, desde su concepción inicial hasta su lanzamiento.

Te muestro ahora algunas extensiones para Google Chrome que yo mismo utilizo en mi día a día y que me ayudan un montón:

 

➡️ Colorpick Eyedropper

En muchas ocasiones necesitamos saber qué colores se están utilizando en una web.

Esta extensión te ayudará a seleccionar y mostrar la información de cualquier color con solo poner el cursor sobre cualquier color.

 

➡️ Page Ruler Redux

Otra de las acciones que más realizamos los diseñadores web es la de medir cualquier distancia o tamaño de objetos para conocer sus dimensiones en píxeles.

Gracias a Page Ruler podrás visualizar una regla en pantalla y un selector con el que medir cualquier elemento de una web.

 

➡️ Window Resizer

Cualquier página web debe estar preparada hoy en día para visualizarse en cualquier resolución y dispositivo.

Gracias a esta extensión, podrás adaptar tu navegador a las resoluciones más empleadas en el mercado (móviles, tablets, portátiles y escritorio).

 

➡️ LightShot

Efectuar y guardar capturas de pantalla es algo cotidiano a la hora de diseñar páginas web.

LightShot te permite hacer capturas y guardarlas en formato JPG y PNG.

 

➡️ WhatFont

¿Cuántas veces has visitado una web, te ha gustado una tipografía y has deseado saber cuál es?

Bien, pues con esta extensión podrás saber el nombre de la tipografía con solo poner el cursor de tu ratón sobre un texto donde esté presente.

 

➡️ LanguageTool

LanguageTool es una extensión de corrección ortográfica y gramatical.

👉 Aunque no está pensada únicamente para diseño web, es muy útil para generar mejores textos, ya que detecta errores, repetición de palabras y te propone incluso sinónimos y expresiones para enriquecer cualquier contenido.

 

➡️ WordPress Theme Detector and Plugin Detector

Esta extensión es gloria bendita para cualquier diseñador web que quiera conocer lo que una web WordPress lleva instalado.

👉 Lo único que tendrás que hacer es visitar una web WordPress y clicar en el icono de la extensión para que te muestre un listado de las herramientas instaladas junto a su información (autor, versión, web del desarrollador, descripción, etc.).

 

¿Conocías alguna de estas herramientas de diseño web?

Como ves, existen un montón de opciones para crearte una buena navaja suiza si te dedicas al diseño web o si simplemente lo utilizas para tus proyectos personales.

Evidentemente, hay muchísimas herramientas más, pero no era plan hacer un post eterno (que ya tiene bastante chicha).

🤔 ¿Cuántas de estas herramientas de diseño web conocías? ¿Hay alguna que eches en falta y que te gustaría añadir?

Deja aquí abajo un comentario y estaré encantado de comentarlo contigo.

Y hasta aquí mi aportación al blog de Marketing and Web.

Mil gracias de nuevo a Miguel Florido y su equipo por la oportunidad brindada.

¡Espero haber estado a la altura y no haberte defraudado! 🙂

Un fuerte abrazo.

¡Fuerza y honor!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Artículos que pueden interesarte...

Eduardo Rubianes
Eduardo Rubianes
Soy diseñador freelance de páginas web con Wordpress. En otras palabras, ayudo a emprendedores y empresas a tener una web moderna y fresca para mejorar su imagen online y sus ventas. Puedes encontrarme en refrescandonegocios.com

12 comentarios

  1. Muchísimas gracias a Miguel y resto de equipo de M&W!!! Espero que a vuestros lectores les mole el contenido del post y dejen sus impresiones…

  2. Wordpress and buen theme y saber CSS y HTML es la manera mas rapida y mas economica para los clientes de crear paginas bonitos a precios asequibles.

  3. ¡Qué sorpresa! Empiezo a seguir a Miguel Florido y me encuentro este post de mi profe Edu, jeje.
    Muy buen aporte. Algunas las conocía, pero otras muchas no. Me pongo manos a la obra, a investigar y probar.
    Saludos a los dos.

    1. Hola Mercedes!!!

      Qué sorpresa encontrarte por aquí!!! Haces muy bien en seguirle la pista a Miguel, es uno de los mejores profesionales del marketing digital y aprenderás un montón con él!!! 🙂

      Un abrazo fuerte!!!

      1. Sí, Edu. De tanto investigar una va conociendo poco a poco a los referentes del mundo digital. Al final nos conoceremos todos jaja. Abrazos!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable: Miguel Ángel Florido Robledo
Finalidad: Gestión de los comentarios de las publicaciones
Legitimación: Consentimiento del interesado
Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. Los boletines electrónicos o newsletter están gestionados por entidades cuya sede y servidores se encuentran dentro del territorio de la UE
Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.

Hola, soy Miguel Florido, consultor de Marketing Digital y Social Media.

Creador del Blog Marketing and Web, un blog humilde y sencillo que poco a poco se ha abierto un hueco entre los blogs de referencia del marketing digital en España.

EVENTO DE MARKETING DIGITAL

En directo. Más de 20 horas.

EVENTO DE MARKETING DIGITAL

GRATIS Y EN DIRECTO

24, 25, y 26 de mayo