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¬†aplicaciones 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 herramientas y aplicaciones para dise√Īo web!

 

9 tipos de recursos y aplicaciones 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 Seeds y Color 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 montar 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:

  • 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¬†aplicaciones 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:

Herramientas, recursos y aplicaciones para dise√Īo web

 

#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 aplicaciones:

  • 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 WP 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¬†aplicaciones 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 herramientas y¬†aplicaciones para dise√Īo web, un total de 45.

 

Hasta aqu√≠ mi repaso por las aplicaciones 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

Share This