12 Jun 2018
9 comentariosCrear 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:
#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:
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:
#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:
#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:
- Escoger y comprar una plantilla cuyo diseño te guste y puedas adaptar a tu proyecto.
- 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:
- 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:
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:
#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).
#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:
- 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.
- 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.
- 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.
- Medidores de velocidad de carga. Conocer los datos y tiempos de carga de tu web es fundamental para optimizarlos y mejorar así el SEO.
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.
Me gustan las personas que comparten su conocimiento, es de sabios compartirlo pues el mismo se multiplica.
Muchas gracias Silvia 🙂
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!
Me encanto tu entrada Max, una gran recopilacion de herramientas a la hora de trabajar en una Web! Enhorabuena ??
Sencillamente eres una muy BUENA PERSONA al compartir tus conocimientos, eso Habla mucho del profesionalismo de la persona e incluso de su personalidad.
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.
Hola Eduardo,
Muy buena opción también.
Gracias por pasarte y comentar!
¿Que opinión te merece trabajar con bootstrap?
Hola Andrés,
No lo he probado, así que no te puedo decir.
Sorry!