30 herramientas de Diseño Web

Descubre más de 30 herramientas de Diseño Web para mejorar tu imagen de marca, crear una página web y sus contenidos, publicarla y analizarla. ¡Imprescindibles!

Si has llegado a esta clase es que tienes que diseñar cosas. Y en 2024 esas cosas seguramente se publicarán en Internet. En esta clase te presentamos más de 30 herramientas de Diseño Web para que puedas mejorar tu imagen de marca, crear y gestionar una página web, publicarla, crear contenidos y analizarla.

Diseño Gráfico

Empezamos con las herramientas de diseño gráfico. Y a lo mejor me dices: Noe, yo no quiero hacer diseño gráfico, quiero hacer diseño web. ¡Mentira! ¿Quieres que tu web quede como un churro o quieres hacer un diseño coherente y molón?. Si no tienes un buen logo, tipografía y colores corporativos, tu web no será memorable. Y si tu web no es memorable toda tu estrategia de diseño web se irá a la porra (y la de Marketing Digital también, pero eso es de otras clases).

Canva

Si quieres empezar puede ser una buena opción, aunque no sea la más profesional. Muchos diseñadores están en contra de Canva y prefieren las herramientas del paquete Adobe, pero para muchos proyectos pequeños que tienen que salir del paso me parece una excelente opción. De hecho, la he recomendado muchas veces para proyectos en PYMEs que no pueden permitirse a un diseñador o, incluso, pagar el paquete Adobe.

Es modelo freemium y la parte free te será suficiente para empezar a crear un logo, imágenes para web, iconos, publicaciones para redes sociales, etc. No es la herramienta que tenga más opciones pero seguramente sí sea la más fácil de utilizar. Eso sí, selecciona bien tu tipografía y colores corporativos.

Herramientas de diseño web: Canva
Canva

Illustrator

Illustrator es el programa de diseño vectorial de Adobe. Te permite crear logos, iconos, ilustraciones y tipografías escalables sin perder calidad.

Herramientas de diseño web: Illustrator
Illustrator

Además, ofrece herramientas para crear wireframes y mockups, que pueden servir para previsualizar el diseño de una web antes de su desarrollo. No obstante, creemos que es mejor crear un prototipo interactivo con herramientas de UX y no la terminamos de recomendar para este uso.

La curva de aprendizaje de cualquier herramienta de Adobe puede ser compleja. Nosotros seguimos teniendo el Creative Cloud porque hace muchos años que utilizamos herramientas como Illustrator, Photoshop o Premiere pero es cierto que hay que tener ordenadores relativamente potentes y pasar por caja.

Photoshop

Normalmente, utilizamos Photoshop para la edición profesional de fotografía y la creación de imágenes para web. Personalmente, la utilizo para la creación de miniaturas de YouTube aunque últimamente la combino con una herramienta de IA que se llama Midjourney, de la que te hablaré un poco más adelante.

Herramientas de diseño web: Photoshop
Photoshop

Para que os hagáis una idea del proceso de creación, le pido a la IA las imágenes que podría necesitar. En el caso de esta miniatura, una camisa con corbata por un lado y un fondo de conexiones y luces por otro:

Herramientas de diseño web: Photoshop
Imágenes creadas con Midjourney

Luego con Photoshop combino ambas imágenes. En este caso le añado el fondo de luces con conexiones a la corbata:

Herramientas de diseño web: Photoshop
Edición de imágenes creadas con IA

Lo guay de la última versión de photoshop es que además puedes editar con inteligencia artificial, lo cual facilita bastante algunas acciones, como la generación automática de fondos.

Herramientas de diseño web: Photoshop
Creando fondos con IA

Y ya solo me queda añadir otros elementos, como el texto o los logos de las redes sociales, para conseguir el resultado final:

Herramientas de diseño web: Photoshop
Resultado final

No considero que las inteligencias artificiales me estén ahorrando demasiado tiempo pero sí que me permiten crear imágenes que no podría crear por mi misma, mejorando los resultados finales.

Herramientas de diseño web: Photoshop
Miniaturas creadas con IA y Photoshop

Diseño Web

Ahora que ya tienes tu imagen gráfica apañada, vamos con las herramientas de diseño web per se. Tenemos: Herramientas de UX, el planificador de palabras clave de Google Ads, editores de texto y CMS. Terminaré esta sección haciendo una mención especial a WordPress y hablando de sus temas, editores visuales y plugins.

Herramientas de UX

Las herramientas de UX te pueden ayudar a crear páginas web intuitivas, fáciles de utilizar y que sean percibidas de forma positiva por los usuarios. Se trata de iniciar el proceso de diseño web pensando en los usuarios, en cómo van a navegar y qué percepciones van a tener sobre el proyecto.

Es cierto que son utilizadas principalmente en proyectos grandes que necesitan desarrollos a medida. Es decir, si nos vamos a dejar un buen dinero en desarrollo es importante tener la parte de UX bien antes de empezar a programar. Puede que tu proyecto sea modesto y empieces directamente con WordPress y una plantilla, pero no está de más que conozcas otras posibilidades, por si el proyecto crece y necesitas desarrollo a medida.

Figma puede ser un buen punto de partida para empezar con la UX. Permite crear prototipos interactivos de forma rápida y se puede trabajar en equipo para mejorar el flujo de trabajo.

Herramientas UX
Figma

Penpot es otra digna alternativa de prototipado y además es made in Spain.

Herramientas UX
Penpot

Si quieres ver más herramientas, puedes repasar la clase de introducción al UX/UI que nos dió Montse Morales ¡Imprescindible!

Planificador de palabras clave de Google Ads

A lo mejor estás pensando: Ya está Noe metiendo el SEO por todo, como siempre. Pero vamos a ver ¿Tú para qué haces la web? ¿Para que sólo la visite tu madre? ¿O la haces para conseguir más usuarios y ventas? Si es para esto último tendrás que hacer SEO, y si no tienes la arquitectura, no tienes SEO.

La arquitectura de la web ha de hacerse antes del diseño de la web o durante ese mismo proceso. Un buen diseñador web ha de entender bien el proyecto y, si es de captación de usuarios, recomendar que antes se haga SEO. Y, ¿Cual es el buscador más importante? Google. Y ¿Qué herramienta tiene Google para conocer las búsquedas de los usuarios? El planificador de palabras clave de Google Ads.

Planificador de palabras clave de Google Ads
Planificador de palabras clave

Los datos que te interesan son las palabras clave y las búsquedas:

Planificador de palabras clave de Google Ads
Datos de búsqueda

Todo esto deberás anotarlo en un documento excel y cuando tengas la lista completa de productos y servicios ordenarlos de forma coherente en un menú web.

Planificador de palabras clave de Google Ads
Creando un arquitectura web

Recuerda que tienes la clase completa y la plantilla en el Curso de SEO en nuestra academia.

Editores de texto

Si lo tuyo es picar el código a mano puedes hacerlo desde 2 herramientas totalmente gratuítas: Notepad++ y Sublime Text. Personalmente prefiero esta última porque tiene colorines que ayudan muchísimo a personas que (como yo) tienen pocos conocimientos de programación.

Herramientas de diseño web: Editores de texto
Sublime Text

CMS

CMS significa Content Management System (en castellano, sistema de gestión de contenidos). Los CMS son programas que nos permiten gestionar contenidos, normalmente en páginas web.​ Para crear webs los más populares son: WordPress, Wix, Joomla! y Drupal. Para tiendas online podremos optar por WordPress con el plugin WooCommerce, Shopify, Magento y PrestaShop.

Si te soy sincera, yo uso WordPress para todo. Mis motivos:

  • Es lo mejor para proyectos pequeños
  • Es Open Source
  • Es la mejor opción para SEO que he encontrado
  • Hay plugins para casi todo lo que te puedas imaginar
  • Se puede construir casi cualquier tipo de web
  • Tiene una comunidad en Castellano inmensa y activa

No obstante, WordPress tiene las siguientes desventajas:

  • Fácil de hackear
  • Se ha de actualizar cada poco tiempo
  • Nunca terminas de aprenderlo

Diseñar y desarrollar proyectos a medida cuesta muchísimo dinero, cada vez más. Tanto diseñadores web como programadores son perfiles caros que pueden generar proyectos increíblemente chulos, pero cobran dinero, y no poco. Que no se te olvide: yo soy gestora de proyectos de Marketing Digital. La pasta que se va en diseño y desarrollo no se destina a SEO, redes sociales orgánico o campañas. Es decir, que si todo tu presupuesto se va en diseño y desarrollo, ya me dirás de dónde vas a traer el tráfico.

Dicho esto, voy a explicar un poco más WordPress, porque además de ser la solución más económica también es la que considero mejor para hacer SEO.

WordPress

Tenemos un curso exclusivo de WordPress tanto gratis como en la academia (con contenidos exclusivos) pero no está de más hacer una pequeña introducción a este CMS. Primera cuestión, no confundas WordPress.org con WordPress.com. WordPress.org es el CMS de código abierto, WordPress.com es una empresa de hosting. WordPress.com es de uno de los creadores de WordPress pero no es el proyecto WordPress.

Lo que te interesa es contratar un dominio y hosting e instalar WordPress (el WordPress de WordPress.org). Para diseñar tu web con este CMS necesitarás 3 cosas:

  • Temas
  • Editores visuales
  • Plugins

Los temas te ayudarán a gestionar el diseño de tu web en WordPress. Los hay gratuítos y de pago y yo recomiendo GeneratePress (gratis) o su versión Pro (enlace de afiliados y disponible en la academia para nuestros alumnos), ya que ahorra mucho tiempo.

Los editores visuales son el sistema de maquetación, hay gratuitos y de pago. Yo recomiendo el gratis que viene por defecto en WordPress: Gutenberg.

Bloques de Gutenberg
Bloques de Gutenberg

Con los plugins de WordPress podrás añadir funcionalidades a tu instalación. Hay plugins para cualquier cosa que te puedas imaginar. No obstante, has de seleccionarlos con cuidado ya que añadirán peso a tu instalación. Mi recomendación es que intentes instalar cuantos menos plugins sea posible, aunque hay algunos que para mi son imprescindibles:

  • 1 plugin de SEO
  • Plugin de formulario de contacto
  • Otros plugins para que el usuario convierta
  • Plugins para mejorar la velocidad
  • Plugins para instalar herramientas de analítica

No voy a explicar todo WordPress porque no terminaríamos nunca. Si queréis aprender tenéis el curso completo.

Dominio y Hosting

Un dominio es una dirección que nos ayuda a acceder a una página web desde un navegador (por ejemplo, escribiendo seosve.com en la barra de navegación de Chrome). Un alojamiento o hosting es un espacio que alquilamos en un ordenador que contiene todos los archivos de dicha página web. Ese ordenador estará siempre encendido y conectado a Internet para que cualquier persona pueda acceder al contenido.

Para tener una página web profesional es necesario seleccionar tanto nuestro hosting como nuestro dominio de forma correcta.

Y me dirás: Noe, esto no son herramientas. Y yo te digo… Bueno, si has optado por WordPress es posible que te toque aprender el panel de Control de tu hosting para instalarlo, por lo que técnicamente, sí que son herramientas. Por ejemplo, nuestro patrocinador Raiola (enlace de afiliados) cuenta con CPanel. A mi personalmente me gusta mucho, ya que no soy desarrolladora y considero que me facilita muchísimo la vida al hacer cualquier configuración.

Herramientas de diseño web: Hosting y dominio
CPanel

Una vez entremos al panel de control podemos bajar hasta Applications y desde ahí seleccionar WordPress:

Herramientas de diseño web: Hosting y dominio
Aplicaciones que puedes instalar

Llegaremos entonces al panel de instalación, donde simplemente debemos hacer click en “Instalar esta aplicación”.

Herramientas de diseño web: Hosting y dominio
Instalando WordPress

Después podremos seleccionar opciones de ubicación, versión y otros temas relacionados con la configuración de WordPress ¡Muy fácil!

Herramientas de diseño web: Hosting y dominio
Opciones al instalar

Creación de contenido

Si ya tienes la parte de diseño gráfico, solucionada tu arquitectura, tu navegación, el sistema con el que vas a crear la web, el dominio y el hosting te queda llenarla de contenido. Esta es (o era) sin lugar a dudas una de las tareas que más horas nos costaba. Y es que ahora tenemos herramientas que teóricamente nos facilitan bastante el trabajo aunque no siempre ahorran tiempo, tal y como hemos visto al inicio de la clase.

Textos

Los textos generados por Ias IA cantan más que una almeja, pero es cierto que puedes ahorrarte algo de tiempo. Aquí algunas herramientas gratis o modelo freemium:

Imágenes

Podemos sacar imágenes de bancos de imágenes gratis o herramientas IA. Con respecto a los bancos de imágenes, Pexels es nuestra preferida sin duda. En el caso de las herramientas IA hay muchísimas pero cada vez son más de pago. Podéis encontrar estas gratis o en modelo freemium (en el momento de redactar estas líneas):

Nosotras utilizamos Midjourney porque es la que mejores resultados nos está dando pero todo cambia tan rápido que para cuando veas este vídeo igual hemos cambiado de parecer.

Vídeo

Nosotros utilizamos Premiere y After Effects para nuestros vídeos pero entendemos que para algunos proyectos es posible que no haya presupuesto para la licencia. Os pasamos algunas opciones gratuitas interesantes:

No olvidéis pegarle un repaso a la clase de Ferran donde os habla de IAs de vídeo (aunque aún están un poco verdes)

Herramientas de análisis web [Exclusivo academia]

Trabaja en el sector del Marketing Digital desde 2007 y cuenta con estudios reglados de marketing digital, educación, diseño gráfico-web y branding. Actualmente se dedica a gestionar proyectos, dar clases y estudiar un Doctorado en Tecnologías de la Información.

Espacio para dudas y comentarios

Nuestra Newsletter mola