45 aplicaciones y herramientas para diseño web

 
Las mejores 45 aplicaciones y herramientas para diseño web

Crear una página web no es una tarea sencilla. Requiere de organización y planificación, así como de contar con una serie de herramientas para diseño web.

Para diseñar una página web se necesitan una serie de herramientas de diferente tipo: diseño gráfico, colores, optimización, plugins, plantillas, etc.

De modo que, si quieres saber cuáles son los materiales que utilizo en mi día a día como diseñador web, quédate a leer este post.

¡Te voy mostrar mi caja de aplicaciones y herramientas para diseño web!

9 tipos de recursos y herramientas para diseño web


A la hora de enumerar todas las herramientas que utilizo, me ha costado encontrar la forma adecuada de ordenarlas sin que te vuelvas loco.

Tras darle varias vueltas, he optado por organizar las aplicaciones para diseño web en función de su temática

De modo que, te presento mis recursos habituales en función del tipo de tarea que me permiten desarrollar.

Espero que quede claro 🙂

#1 Diseño gráfico

Como ya he contado en varios artículos, lo primero que hago cuando empiezo una página web en WordPress es diseñar toda la parte gráfica: logo, banners, cabeceras, etc.

Mi herramienta favorita para todo lo que tiene que ver con diseño gráfico es Photoshop. Es la que uso cada día para diseñar logotipos, banners, portadas de posts o creatividades.

Otra del paquete Adobe, pero que requiere conocimientos más avanzados es Illustrator, programa que uso cuando tengo que trabajar con Vectores.

Si no tienes grandes conocimientos en diseño gráfico, puedes probar otras como Canva, una opción realmente interesante para crear diseños de forma rápida y sencilla:

19 herramientas de diseño alternativas a PhotoshopLEER AHORA

#2 Paletas y combinaciones de colores

Una tarea estrechamente relacionada con el diseño gráfico es la creación de la paleta de colores del sitio web.

Para crear combinaciones de colores también utilizo Phososhop, aunque que recurro a otras páginas y herramientas para buscar inspiración:

20 herramientas con las que crear paletas de colores para diseño webLEER AHORA

De todas ellas, mis dos favoritas a la hora de inspirarme son: Design SeedsColor Hunt.

Como ya sabes si eres lector de esto blog, siempre recomiendo escoger un color principal y dos o tres complementarios.

Aquí puedes ver a qué me refiero en mi propia paleta de colores:

Herramientas, recursos y aplicaciones para diseño web
paleta de colores de esta web

#3 Tipografías

Otra de las tareas relacionadas con la identidad y la parte visual de la web son las tipografías.

Como en el caso de la paletas de colores, para las tipografías también recomiendo crear combinaciones sencillas: una fuente para el cuerpo de texto y otra (dos como mucho) para los elementos destacados de la web (botones, títulos, subtítulos, llamadas a la acción, etc).

De hecho, la dificultad de las tipografías no está en elegirlas, sino en combinarlas correctamente, pues hay miles de opciones diferentes y a veces es complicado.

La herramienta que más utilizo para buscar tipografías es Google Fonts, aunque hay otras que también me gustan:

Tipografías para web: herramientas + consejos para combinarlasLEER AHORA

#4 Plantilla y maquetador visual

Una vez tienes lista toda la parte gráfica del sitio web, es el momento de escoger la plantilla y/o maquetador visual que vas a usar.

En este punto tienes dos opciones:

  1. Escoger y comprar una plantilla cuyo diseño te guste y puedas adaptar a tu proyecto.
  2. Trabajar con un editor visual y maquetar tu web desde cero.

Si optas por la primera opción, puedes encontrar plantillas muy interesante en Theme Forest, un marketplace que cuenta con miles de temas premium para WordPress.

Mis plantillas favoritas de todas las que he probador a lo largo de estos años: Divi, Salient, Bridge, RedWood y SimpleMag.

Si prefieres tener un diseño exclusivo y tienes conocimientos más avanzados, te recomiendo trabajar con un maquetador visual en tu web.

En cuanto a maquetadores para WordPress, hay varios en el mercado (Divi, Elementor, Visual Composer). Solo tienes que ver cuál es el que mejor se adapta a tus necesidades.

Ya sabes que Divi es mi favorito y el que siempre uso en mis diseños.

#5 Plugins

Fundamental a la hora de hacer una página web en WordPress, es utilizar los mejores plugins (tanto gratuitos como de pago).

Como en el mercado de plugins existen varios miles de opciones, quiero compartir contigo cuáles son los fundamentales que utilizo en mis diseños:

15 tipos de plugins para WordPress que necesitas en tu webLEER AHORA
  • 404page - your smart custom 404 error page. Plugin para personalizar la página de error 404.
  • Antispam Bee para evitar spam en los comentarios.
  • Bloom para la captación de suscriptores a través de Email Marketing.
  • GDPR Cookie Consent para mostrar que la web cumple con la Ley de cookies de la UE (GRPD).
  • Limit Login Attempts. Plugin de seguridad para evitar posibles ataques.
  • Monarch para compartir entradas y páginas en redes sociales.
  • Redirection para crear redirecciones personalizadas.
  • WP Smush para comprimir y optimizar imágenes.
  • Table of Contents Plus para mostrar una tabla de contenidos en los artículos.
  • TinyMCE Advanced para añadir funcionalidades extras en el editor de WordPress.
  • WordPress Related Posts para mostrar entradas relacionados al final de los posts.
  • WP Rocket. Plugin premium para la WPO, caché, carga, base de datos...
  • Yoast SEO, plugin universal para los temas de SEO.

Por supuesto, utilizo más plugins, pero esos son mis imprescindibles.

#6 CSS

Otra tipo de herramientas para diseño web son las que ayudan a generar código CSS y crear elementos del diseño diferentes a los que vienen por defecto.

Para esta tarea te recomiendo un par de herramientas online:

  1. CSS3 Maker
  2. CSS Code Generators

Y para crear botones personalizados, te recomiendo CSS Button Generator, un recurso que utilizo cuando quiero botones más exclusivos.

Aquí puedes ver un ejemplo:

herrmamientas para diseño web: css button generator

#7 Bancos de imágenes, iconos y recursos visuales

En los proyectos en los que el cliente no dispone de imágenes propias o no tiene recursos para contratar a un fotógrafo, trabajo con varios bancos.

En estos bancos busco imágenes, vídeos, vectores e iconos. Los cuatro que utilizo son:

  • Shutterstock. Es un banco de pago en el que tengo cuenta y que utilizo para encontrar imágenes, vídeos, vectores e ilustraciones con mucha calidad.
  • Unsplash. Se trata de un banco donde puedes encontrar imágenes con muchísima calidad de forma gratuita. Es el recurso que utilizo cuando quiero buscar fotografías más exclusivas y que no estén tan vistas.
  • Freepik. Es el banco que utilizo para buscar y descargar vectores.
  • Flaticon. Herramienta que uso para encontrar iconos cuando necesito algo diferente a los que trae por defecto la plantilla.

#8 Comprimir y optimizar imágenes

Otra de las tareas imprescindibles a la hora de diseñar una web es la de comprimir y optimizar todas las imágenes que subo para aligerar su peso y ganar en velocidad de carga.

Para esta tarea utilizo varias herramientas:

  • Photoshop. La funcionalidad «guardar para web» es mi preferida.
  • Compressor.io es la aplicación web que utilizado para comprimir imágenes sin perder calidad.
  • El plugin Smush para ajustar los tamaños de las imágenes en WordPress (ya lo he mencionado cuando he hablado de plugins).
16 herramientas para optimizar imágenes en WordPressLEER AHORA

#9 Herramientas complementarias

Por último, no son herramientas para diseño web como tal, pero te quiero mencionar una serie de herramientas y servicios complementos en todo proyecto web.

La mayoría son servicios que necesitas dar de alta y vincular con tu página web; otros son plataformas para mejorar tu sitio.

Te cuento más sobre todos ellos:

  1. Analytics. Es la herramienta de Google que permite medir analizar los datos y estadísticas de una web: visitas, usuarios, tecnología, procedencia del tráfico, etc.
  2. Search Console. Otra herramienta de Google para administradores de sitios web. Permite analizar una página a ojos de Google, conocer su estado de indexación, eliminar errores, agregar redirecciones o subir un sitemap, entre otras opciones.
  3. Keyword Planner de AdWords. Se trata de una herramienta más de Google. Sirve para buscar palabras clave, así como su nivel de competencia y dificultad de posicionamiento. Fundamental para los artículos del blog.
  4. Medidores de velocidad de carga. Conocer los datos y tiempos de carga de tu web es fundamental para optimizarlos y mejorar así el SEO.
Claves para mejorar el SEO y la velocidad de carga de WordPressLEER AHORA

Antes de terminar, te dejo un vídeo en el que te muestro cada una de estas aplicaciones y herramientas para diseño web, un total de 45.

Hasta aquí mi repaso por las herramientas para diseño web que utilizo en mi día a día. Seguro que hay alguna más que me he dejado en el tintero.

Por último, quiero recordarte que, si necesitas ayuda con tu sitio, puedes consultar mi servicio de diseño web.

Summary
🛠 45 aplicaciones, recursos y herramientas para diseño web
Article Name
🛠 45 aplicaciones, recursos y herramientas para diseño web
Description
Te muestro mis aplicaciones, recursos y herramientas para diseño web favoritas en función del tipo de tarea que me permiten desarrollar.
Author
Publisher Name
Max Camuñas
Publisher Logo

Shutterstock Darko1981

9 Comments

  1. Silvia López

    Me gustan las personas que comparten su conocimiento, es de sabios compartirlo pues el mismo se multiplica.

    Reply
    • Begoña

      Parece que me has leído la mente.
      Una recopilación de todos tus post, con directrices enfocadas a la producción de todo el proceso de desarrollo de una web.
      Muchas gracias por compartir!

      Reply
  2. Laura Martín Corchón

    Me encanto tu entrada Max, una gran recopilacion de herramientas a la hora de trabajar en una Web! Enhorabuena ??

    Reply
  3. Josbert Blanquez

    Sencillamente eres una muy BUENA PERSONA al compartir tus conocimientos, eso Habla mucho del profesionalismo de la persona e incluso de su personalidad.

    Reply
  4. Eduardo

    Gracias por compartir tus conocimientos compañero, para diseño vectorial suelo usar Inkscape, gratuito, de fácil manejo y con resultados aceptables. Un saludo.

    Reply
    • Max Camuñas

      Hola Eduardo,

      Muy buena opción también.

      Gracias por pasarte y comentar!

      Reply
  5. Andrés Roselló

    ¿Que opinión te merece trabajar con bootstrap?

    Reply
    • Max Camuñas

      Hola Andrés,

      No lo he probado, así que no te puedo decir.

      Sorry!

      Reply

Submit a Comment

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

[Información Básica sobre Protección de Datos] Responsable: Máximo Camuñas Fernández. Finalidad: moderar y responder comentarios. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en [email protected] así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.