Blog de Aula CM

Community Manager, Marketing de Contenidos, Blogs y SEO

herramientas-diseno-web-blog.png

20 herramientas geniales para el diseño de páginas web y blogs

¿Quieres crear la mejor página web del mundo? Ya sea para potenciar tu marca personal o para darle mayor visibilidad a tu negocio, a la hora de construir un sitio web, es imprescindible conocer las mejores herramientas de diseño de páginas web y blogs para poder obtener un resultado totalmente profesional.

Pero no solo eso, sino que también te ayudarán a tardar menos tiempo en el proceso de creación y ser más eficiente en todos tus proyectos.

Y lo mejor de todo es que no importa si utilizas WordPress, Joomla, Prestashop u otro CMS de creación de sitios web, ya que muchas de las herramientas citadas a continuación las podrás utilizar en cualquier proyecto.

¡Vamos con ellas!

 

Herramientas de diseño de páginas web y blogs

2 12Colorzilla

Quizás te haya pasado alguna vez. Entras en una web con una combinación de colores que te gusta tanto que quieres comenzar a utilizarla tú también en tu sitio web. El problema es que a veces no es fácil descubrir el código de color exacto aunque miremos el CSS. ¿O sí?

Para conocer el código de color exacto de cualquier elemento de una web hay una herramienta que te facilita mucho esta tarea. Hablo de Colorzilla.

ColorZilla es una extensión para navegadores como Google Chrome y Mozilla Firefox muy sencilla de utilizar. Basta con que selecciones el cuentagotas que aparece al lado de la barra de direcciones y pases el ratón por encima del elemento del que quieres averiguar el color.

Cuando lo tengas, ya solo tienes que copiar el código y llevártelo a los elementos de tu web que quieras colorear.

 

12Adobe Color CC

La elección de las tonalidades de tu web no debes tomarla a la ligera. Es uno de los pilares fundamentales de tu proyecto, ya que cada combinación de colores transmite una primera impresión distinta. Por eso, y porque combinar colores no siempre es fácil, Adobe Color CC es una de las herramientas de diseño de páginas web y blogs que todo diseñador web debe conocer.

Se trata de una plataforma en la que podrás ver miles de combinaciones que han sido realizadas por profesionales del sector y que puedes ordenar por su popularidad. De este modo, nunca te equivocarás en la elección de la paleta de tu web.

 

Ideas Plan Contenidos BlogGoogle Fonts

¿Cansado de las clásicas tipografías? Si quieres destacar por encima de tu competencia, diferénciate escogiendo una buena fuente. Olvida las típicas que todo el mundo utiliza y sé original cuando vayas a elegirlas.

Lo mejor es que pongas a los títulos una tipografía y a los contenidos otra distinta para que hagan contraste y así facilitar la lectura de tus textos. No hace falta que sean muy distintas una de la otra, aunque sí es recomendable que una sea con serifa y otra sin ella.

¿Y cuál es la mejor herramienta para ello? Sin duda alguna, Google Fonts.

Se trata de una de las mayores bases de tipografías gratuitas del mundo en la que podrás encontrar fuentes de cualquier estilo: Monospace, Handwriting, Display, Sans Serif y Serif. No importa qué estilo quieras darle a tu página web, con Google Fonts siempre encontrarás una tipografía que se adapte a ello. Para Aula CM, esta son las mejores Google Fonts que te servirán para mejorar el diseño de tu web.

 

24 10WhatFont

Navegando por internet, o quizás leyendo algún blog, puede que hayas encontrado una tipografía que te ha gustado mucho y que quieres utilizar en tus diseños. No obstante, no sabes su nombre y quieres averiguar de qué fuente se trata.

No te preocupes porque en este listado de herramientas de diseño de páginas web y blogs te traigo una para darle solución a este pequeño problema. Se trata de WhatFont.

WhatFont es una extensión de Google Chrome que te permitirá seleccionar un texto y saber qué tipografía está utilizando el autor. Tan simple como activar la extensión y hacer clic en un texto.

 

16 31Page Ruler

Por si no lo sabías, de cara a mejorar la velocidad de tu web, es muy importante que subas las imágenes al tamaño exacto al que luego se van a mostrar.

Si tus imágenes las vas a mostrar en unas dimensiones de 800x500px y las subes a 1600x1000px, estás haciendo trabajar más al navegador y a la vez que aumentas el peso de las imágenes. Esto hace que tu web cargue de forma más lenta afectando a la experiencia de usuario y, por tanto, empeorando tu posicionamiento SEO.

Para que esto no ocurra, lo mejor es medir cada imagen antes de subirla. Por ejemplo, si tenemos un blog y queremos saber cuál es el espacio destinado a las imágenes de cabecera de nuestras entradas, con Page Ruler podremos saber exactamente las dimensiones y ahorrarnos unos cuantos kb por el camino.

 

Lector copywritingMockFlow

MockFlow es una de las herramientas de diseño de páginas web más utilizada en las primeras fases de cualquier proyecto. Gracias a ella, podrás crear borradores de la estructura que quieres que tengan tus páginas, pudiendo presentar varios bocetos al cliente antes de comenzar con el diseño de la web.

De este modo, si alguna vez te topas con algún cliente que no tiene claro cómo quiere el diseño de su página, podrás hacer con él un pequeño borrador y así luego diseñar sobre una estructura ya definida.

Pero MockFlow no solo sirve para crear bocetos de cara al cliente, también es muy útil cuando quieres reestructurar los contenidos y páginas de tu sitio web. Antes de ponerte a cambiar las cosas sin estrategia, lo mejor es construir un pequeño borrador para optimizar la estructura y potenciar las conversiones de tu web.

 

Fotos BlogPixabay

Si hay algún elemento que haga que una página web fracase y tenga un aspecto mediocre, ese es el relacionado con las imágenes.

No importa que tengas una buena estructura y unos colores muy bien elegidos, si las imágenes que has escogido no van en consonancia con el resto de la web o su calidad es mala, la impresión que se llevarán los usuarios será la de una web amateur.

¿Y dónde puedes descargar imágenes de calidad para tu web de manera gratuita? En Pixabay.

banco de imagenes gratis pixabay

Pixabay es una de las plataformas con mayor número de fotos de todo internet. Tiene una amplia colección de fotografías gratuitas de todos los estilos y sectores, por lo que te resultará sencillo encontrar la foto que buscas.

 

15 20Canva

Si tienes un blog, debes que saber que las imágenes de cabecera para tus entradas son muy importantes.

Es lo primero que verán los usuarios cuando entren en tu blog, por lo que es imprescindible causar una buena impresión. Además, si alguien comparte alguna de tus entradas en redes sociales, la imagen que aparecerá será la que hayas subido como imagen destacada. Por tanto, si es llamativa, obtendrás muchos más visitas.

Para realizar buenas imágenes para tus artículos no hace falta utilizar herramientas como Adobe Illustrator o ser experto en diseño gráfico. Existe una herramienta muy útil a la hora de crear contenidos para tu web o blog, que es gratuita y online. Se llama Canva.

Al entrar en la herramienta lo primero que verás es un enorme listado con plantillas predeterminadas. Una vez elegida, llegarás a un lienzo con las dimensiones escogidas en el que podrás arrastrar y soltar diversos elementos para ir diseñando la pieza: fondos, iconos, ilustraciones, fotografías, títulos, sellos, etc. Tendrás un sinfín de posibilidades para hacer que las imágenes de tu web o blog sean únicas y marquen la diferencia con tu competencia.

 

23 9Tinypng

Siguiendo con las herramientas de diseño de páginas web enfocadas a las imágenes, ahora vamos con una imprescindible a la hora de su optimización: Tinypng, un compresor que disminuirá el peso de tus contenidos gráficos.

Es muy sencilla de utilizar, ya que solo hay que arrastrar las imágenes al recuadro que aparece en pantalla y Tinypng las optimizará automáticamente. Sin duda, toda una ventaja que tus usuarios y Google agradecerán.

 

Contenido indexado y rastreadoIconfinder

Una de las mejores formas de presentar los servicios que ofreces en la página de inicio de tu web es mediante un icono y una breve descripción. Queda muy profesional, aporta cercanía y es mucho más fácil de leer.

Los iconos también son muy útiles a la hora de darle un toque de creatividad a tus contenidos del blog. Puedes ponerlos junto a los títulos para romper la monotonía del texto o para ser más original cuando escribas entradas con muchos puntos a tratar.

¿Y cuál es la mejor fuente de iconos gratuitos? Iconfinder.

Se trata de una base de iconos enorme en la que podrás encontrar todos los iconos del mundo en varios formatos y colores. Y lo mejor de todo es que dispone de un buscador que te permitirá filtrar los iconos por el estilo o la tipología. De tipo flat, 3d, handdrawn, de tipo cartoon, etc.

 

7 10Stylebot

Si quieres iniciarte en la personalización de tu web mediante código CSS pero no te atreves a modificarlo directamente, Stylebot es una de las mejores herramientas de diseño de páginas web y blogs para que pierdas el miedo a ello.

Es una extensión para tu navegador con la que podrás modificar visualmente cualquier web a tu antojo, y luego sacar el código CSS de dicha modificación. De este modo, luego solo tendrás copiar dicho código que se ha generado y pegarlo en la hoja de estilos de tu página web.

 

Posicionamiento WebSublime Text

Si eres desarrollador y quieres crear tu página web con lenguajes de etiquetas y programación como HTML, CSS y JavaScript, tu herramienta se llama Sublime Text.

Sublime Text es un editor de código sencillo de utilizar que está concebido para programar sin distracciones. Tiene una interfaz muy intuitiva con muchas opciones y la posibilidad de configurar los documentos en multitud lenguajes de etiquetas y programación.

Una de las ventajas es que Sublime Text te marcará cada etiqueta, atributo, valor, etc, en un color distinto para que puedas identificar más rápido todos los elementos y tu código esté más organizado.

Además, es posible configurar la herramienta en varios colores oscuros para cuidar los ojos y cansar menos la vista durante esas largas jornadas de desarrollo web.

Sin duda, es otra de las grandes herramientas de diseño de páginas web que existen en la actualidad.

 

Definir Canales Plan Contenidos BlogNotepad++

Al igual que Sublime Text, Notepad++ es una de las mejores herramientas de diseño de páginas web para programadores que quieren crear páginas sin la necesidad de utilizar un CMS como WordPress o Joomla.

Algunas de las características que lo convierten en una buena herramienta es su sistema de sintaxis y coloreado. Notepad++ es capaz de identificar las expresiones propias del lenguaje utilizado y resaltarlas en una combinación de colores que facilitan la lectura y el escaneo por parte del ojo humano.

 

14 29GTMetrix

Si bien no es una herramienta de diseño de páginas web y blogs como tal, sí que es muy útil a la hora de optimizar una web tras acabar su diseño.

GTMetrix te permite analizar el tiempo de carga de tu web para que sepas exactamente lo que tarda en mostrarse. Y lo mejor de todo, es que te dice que es lo que está causando que tu web cargue lentamente y te da una serie de recomendaciones para mejorarla.

Como norma general, tu sitio web debe cargar en el menor tiempo posible, siendo 4 segundos el tiempo máximo deseado.

¿Y por qué es tan importante que tu web sea veloz? Principalmente por dos razones.

Por un lado, es importante que tu web cargue rápidamente porque los usuarios nos hemos vuelto algo impacientes y, si vemos que algo tarda en cargar, volvemos atrás y nos vamos a otra página.

Por otro lado, de un tiempo a esta parte, Google toma muy en cuenta la velocidad de carga de tu web a la hora de posicionarte en su listado de resultados. Por tanto, cuanto menos tarde en cargar, mejor posicionamiento SEO tendrás.

gtmetrix es una de las herramientas de diseño de páginas web

 

Herramientas de diseño de páginas web y blogs para WordPress

11 37Visual Composer

Si utilizas WordPress como principal herramienta de diseño de páginas web, Visual Composer es tu mejor aliado.

Visual Composer es un plugin de maquetación visual que te permite elegir entre multitud de elementos creativos que puedes incrustar en cualquier lugar de tu página para dotarla de un diseño totalmente profesional con unos pocos clics.

Dispone de una interfaz muy intuitiva y te proporciona un enorme listado de opciones como bloques de texto, imágenes, iconos con texto, contadores dinámicos, pestañas, mapas interactivos de Google Maps, botones, y un largo etcétera.

Por su versatilidad, y porque es el maquetador visual más usado y extendido de WordPress, sin duda es la mejor elección a la hora de crear páginas web.

 

11 17Bloom

¿Te has fijado en esos formularios de suscripción tan chulos que están de moda últimamente? Sirven para captar usuarios a los que les haya gustado el contenido de la web y poder luego avisarles de que hay nuevos contenidos y traerlos de vuelta. También para enviarles ofertas y cupones de descuento en caso de ser un ecommerce.

Antes de que existiera WordPress y los plugins, realizar un formulario de suscripción a una lista de correo o newsletter era una tarea algo tediosa. Había que crear el código HTML, luego modificar el aspecto mediante código CSS y posteriormente realizar la vinculación a servicios de email marketing vía programación. Hoy en día, con WordPress + Bloom, es posible crear formularios de suscripción totalmente personalizados con un par de clics.

Bloom te permite diseñar formularios de suscripción combinando imágenes, bloques de texto, pequeñas animaciones y todo lo que se te pueda ocurrir. Después de diseñarlo podrás vincularlo fácilmente con todas las plataformas de email marketing como Mailchimp y colocarlo en cualquier sitio de la web.

Personalmente, creo que es una de las grandes herramientas de diseño de páginas web y blogs del momento.

 

19 5Ninja Forms

Ya sea para contratar algún servicio, comprar algún producto o para informar sobre algún problema o sugerencia de tu página, es imprescindible que haya un buen formulario de contacto que cree una vía de comunicación con tus usuarios. Si utilizas WordPress para diseñar tus páginas, una de las mejores opciones es Ninja Forms.

ninja fomrs herramienta de diseño de páginas web y blogs

Es un plugin que facilita mucho el diseño y la inserción de formularios de contacto.

Podrás insertar formularios con todos los campos que se te puedan ocurrir, desde los típicos inputs de correo electrónico, teléfono y nombre, hasta los más avanzados como listas de opciones con desplegables, checkbox con selecciones múltiples e incluso campos para adjuntar documentos (por ejemplo, para que los usuarios quieran adjuntar su CV si dispones de sección “Trabaja con nosotros”).

 

2 36Contact Form 7

El clásico entre los clásicos. Contact Form 7 es el plugin de formularios de contacto para WordPress más utilizado en el mundo. Tanto es así, que viene por defecto en muchas plantillas.

Al igual que Ninja Forms, podrás crear formularios de contacto con todos los campos que quieras e incrustarlo en cualquier página o entrada mediante un shortcode que se genera automáticamente cuando creas un formulario.

 

Plan Twitter Galería ArtePlantillas o temas premium

Si utilizas WordPress para crear tus páginas web, una de las grandes ventajas que tiene respecto a cualquier otro CMS es la enorme cantidad de plantillas disponibles. Éstas permiten crear una página web bien estructurada, con los colores muy bien escogidos y con contenido de demostración que puedes aprovechar para que el proceso de creación de tu web sea rápido y el resultado sea totalmente profesional.

Las plantillas WordPress son las que determinan la estructura y apariencia que va a tener tu página web. Normalmente traen varias diseños predeterminados para puedas escoger el que más se ajuste a lo que quieres transmitir en tu sitio web. Gracias a las plantillas, podrás diseñar una página web completa en cuestión de horas.

 

3 26WordPress Theme Detector

Seguramente te haya pasado en algún momento. Entras a una web hecha en WordPress que te gusta tanto que quieres saber qué plantilla y qué plugins está utilizando para implementar algunos de esos elementos y funcionalidades en tu web. No obstante, si no conoces al propietario de esa página, quizás te de corte preguntar o simplemente el diseñador no te lo quiera decir para que no le copies. Pero no te preocupes, porque tengo la herramienta definitiva: WordPress Theme Detector.

Tan solo tienes que insertar la web que quieres analizar y dejar que la herramienta trabaje por tí. Tras unos segundos, aparecerá el tema y los plugins que utiliza la web siempre y cuando esté realizada sobre WordPress. Sencillamente impresionante.

 

¿Conoces más herramientas de diseño de páginas web y blogs?

Si utilizas alguna adicional a las aquí expuestas, déjanos en un comentario cuáles son las que más utilizas en tus proyectos. De este modo, podremos aumentar el listado para convertirlo en la mejor recopilación de herramientas de diseño de páginas web y blogs del mundo. ¿Te animas?

20 herramientas geniales para el diseño de páginas web y blogs
5 (100%) 13 votos
Artículos relacionados

4 casos reales de WPO y optimización de una página web en WordPress

En una situación como la actual donde los usuarios y Google priman la velocidad de carga de las
2018-04-12 17:20:00
christian-leis

10

Análisis y detección de problemas SEO de una página web, con MJ Cachón

La primera edición del PRO Marketing DAY,
2018-02-22 17:57:36
milena

10

19 claves de Diseño Web para hacer la Landing Page perfecta

En este post te voy a dar un montón de consejos útiles y herramientas prácticas para que consigas
2017-11-16 17:37:44
ernesto

10

Sobre el Autor 

Diseñador web WordPress y apasionado del SEO. Me gusta aprender y enseñar diseño web y SEO en mi blog y en mi canal de YouTube. Miembro del equipo de AulaCM.

    Más en:
  • linkedin
  • twitter
  • youtube
Javier Balcázar20 herramientas geniales para el diseño de páginas web y blogs

25 comentarios

Únete a la conversación
  • Pablo Moreno Acevedo - 9 mayo, 2017 responder

    Muy buenas, Javier.

    No conocía MockFlow. Qué interesante. Habrá que echarle un vistazo.

    Yo no creo que a día de hoy sea recomendable usar Visual Composer, a no ser que venga integrado en la plantilla y no tengas otra opción. Elementor es, sin duda, el mejor editor visual para WordPress y la versión Pro es la bomba. Te animo a probarlo.

    Un abrazo.

    Javier Balcázar - 10 mayo, 2017 responder

    Hola Pablo,

    Me alegro que te haya resultado interesante. La verdad es que MockFlow te puede ayudar mucho cuando los clientes no saben cómo organizar su proyecto. En cuanto a Elementor, es otro buen constructor sin duda alguna, al igual que DIVI Builder por ejemplo. No obstante, Visual Composer sigue siendo otra de las grandes alternativas por su enorme versatilidad, cantidad de addons, información en internet, etc.

    ¡Un saludo y gracias por tu comentario!

  • Roberto - 10 mayo, 2017 responder

    Excelente artículo como todos los que hace aula cm, gracias a ellos y sus conocimientos, tengo una web siguiendo todos sus consejos.

    Javier Balcázar - 11 mayo, 2017 responder

    ¡Muchas gracias por tu comentario Roberto!

  • Andrés - 16 mayo, 2017 responder

    Muy bueno el post. No conocía muchas de las herramientas mencionadas y algunas parecen bastante útiles.

    Javier Balcázar - 16 mayo, 2017 responder

    Gracias Andrés, me alegro que te haya gustado 😉

  • ordenador - 19 mayo, 2017 responder

    Gracias Javier, herramientas muy útiles que ayudaran mucho a todo el tema
    Buen aporte, nada más que decir.

    Javier Balcázar - 24 mayo, 2017 responder

    Me alegro que sean de utilidad 😉

  • Ux Web - 21 mayo, 2017 responder

    Muy completo listado de recursos, se nota que este contenido lo ha desarrollado una persona con amplios conocimientos que trabaja desarrollando webs. No conocía tinyPng me parece interesante para optimizar las imágenes rápido aunque personalmente utilizo jpegoptim desde la misma terminal en caso de que tenga acceso SSH. gracias

    Javier Balcázar - 24 mayo, 2017 responder

    Sea como sea, optimizar imágenes es vital de cara al SEO de una web ya que afecta directamente a la experiencia del usuario, haciendo que los sitios sin optimizar carguen mucho más lento.
    Gracias por tu comentario, me alegro de que hayas podido conocer una nueva herramienta debido al post.

  • Piano Marketing - 23 mayo, 2017 responder

    Excelentísimo aporte Javier. Enhorabuena.
    Creo que no te has dejado ninguna herramienta…jejeje
    Por aportar algo, Balsamiq Mockup es otra gran herramienta, que bien puede estar ahí listada.
    Saludos.

    Javier Balcázar - 24 mayo, 2017 responder

    Muchas gracias. La verdad es que las herramientas de Mockups son muy útiles y a veces esenciales antes de enfrascarnos en el proyecto. La que comentas es otra de esas herramientas excelentes para ello.

  • Yointic - 24 mayo, 2017 responder

    Todas son muy interesantes. La que más utilizamos es Visual Composer y la verdad es que nos facilita mucho el trabajo de diseño web. Pixabay también nos ayuda mucho. Muchas gracias por el post. Saludos.

    Javier Balcázar - 26 mayo, 2017 responder

    La verdad es que Visual Composer facilita mucho el diseño de páginas web. En un momento puedes montar una buena landing e incluso una web entera.

  • alejandra - 28 mayo, 2017 responder

    me parece muy interesante,gracias.

  • Natalia de la Peña (@momo29ndf) - 31 mayo, 2017 responder

    ¡Genial recopilación, Javier! Conozco y utilizo muchas de estas herramientas, pero Mock Flow y Bloom son nuevas para mí. ¡Habrá que echarles un vistazo!

    Comparto el post, son recursos útiles. ¡Gracias y saludos!

  • venta de basculas industriales - 5 junio, 2017 responder

    Muy buen resumen. Algunas heramientas ya utilizco, pero algunas ni siquiera conocido. Gracias por informacion completa.

  • Ángeles Coterillo - 14 junio, 2017 responder

    Genial el post. Tiene muchas herramientas que voy a probar. Un saludo.

  • Alicia - 18 junio, 2017 responder

    ¡Qué montón de herramientas útiles! Gracias Javier por el aporte. Conocía algunas. De otras, no tenía ni la menor idea. Me encantó Stylebot porque si bien entiendo algunos conceptos, no se nada de programación. Busco a veces código aquí y allá, así que una herramienta como esta viene genial. Un saludo ?

  • diseño web - 20 junio, 2017 responder

    gracias por publicar este tipo de aportes, con tanta información!!

  • Asdeideas - 11 julio, 2017 responder

    Muy buen post! La verdad es que parecen herramientas muy útiles, habrá que probarlas!

  • Diseño web Madrid - 1 febrero, 2018 responder

    Buen artículo, gracias por el aporte.

  • David - 22 marzo, 2018 responder

    Muy bueno, no conocía StyleBot, ahora voy a probarlo. Yo sigo fiel al firebug, tanto que hasta tengo el Firefox sin actualizar para poder usarlo.
    Gracias.

  • Diseñador Web en Manta - 30 marzo, 2018 responder

    Muy buena lista amigo, muchas no las conocía. Gracias por compartir. Saludos.

  • Diseño web - 11 abril, 2018 responder

    Gracias por compartir, para quienes estamos incursionando hacia el MD es muy funcional estas herramientas.

Únete a la conversación