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:

5 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:

9 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 Generator
  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).
7 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.

AdemĆ”s, en breve publicarĆ© un post con extensiones para Chrome que te recomiendo usar si eres emprendedor šŸ˜‰

Portada: shutterstock

Summary
Las mejores 45 aplicaciones y herramientas para diseƱo web
Article Name
Las mejores 45 aplicaciones y herramientas para diseƱo web
Description
En este artĆ­culo te muestro mis aplicaciones, recursos y herramientas para diseƱo web, organizadas en funciĆ³n del tipo de tarea que me permiten desarrollar.
Author
Publisher Name
Max CamuƱas
Publisher Logo
Share This