En este artículo te ayudaremos a tardar menos tiempo en el proceso de creación y ser más eficiente en tus proyectos para las distintas webs y plataformas
Si piensas potenciar tu marca personal o darle una mayor visibilidad a tu negocio a la hora de construir un sitio web, deberías de estar informado de las tendencias que el mundo digital ofrece. Cada día se crean espacios, aplicativos, bots, entre otros, en el mundo digital. Es imprescindible conocer las mejores herramientas de diseño de páginas web y blogs para poder obtener un resultado totalmente profesional.
PUEDES LEER: 3 Formas de mejorar tu ecommerce
En este artículo te ayudaremos a tardar menos tiempo en el proceso de creación y ser más eficiente en tus proyectos para las distintas webs y plataformas; ya sea, WordPress, Joomla, Prestashop y 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.
Herramientas de diseño de páginas web y blogs
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.
Adobe 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.
Google 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.
WhatFont
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.
Page 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.
MockFlow
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.
Pixabay
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.
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.
Canva
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.
Tinypng
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.
Iconfinder
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.
Stylebot
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.
Sublime 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.
Notepad++
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.
GTMetrix
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.
Herramientas de diseño de páginas web y blogs para WordPress
Visual 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.
Bloom
¿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.
Ninja 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.
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”).
Contact 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.
Plantillas 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.
WordPress 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?
Fuente: Aula CM
Error: Formulario de contacto no encontrado.
