20 herramientas geniales para el diseño de páginas web y blogs
¿Quieres crear la mejor página web del planeta? Así sea para potenciar tu marca personal o para darle mayor visibilidad a tu negocio, en el momento de construir un sitio web, es imprescindible conocer las
mejores herramientasde diseño de páginas web y weblogs para poder obtener un resultado plenamente profesional.
Pero no solo eso, sino también te ayudarán a tardar menos tiempo en el proceso de creación y ser más eficaz en todos tus proyectos.
Y lo mejor de todo es que no importa si utilizas WordPress, Joomla!, Prestashop o bien otro CMS de creación de sitios, en tanto que muchas de las herramientas citadas a continuación las podrás usar en
cualquier proyecto.
¡Vamos con ellas!
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 empezar a utilizarla tú también en tu sitio web. El problema es que en ocasiones 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 webhay una herramienta que te facilita mucho esta tarea. Hablo de Colorzilla.
ColorZilla es una extensión para navegadores como Chrome y Mozilla Firefox Firefox muy sencilla de utilizar. Basta con que escojas el cuentagotas que aparece a la vera de la barra de direcciones y pases el ratón por encima del elemento del que deseas averiguar el color.
Cuando lo tengas, ya solo tienes que copiar el código y llevártelo a los elementos de tu página web que quieras colorear.
Adobe Color CC
La elección de las tonalidades de tu web no debes tomarla a la ligera. marketing y publicidad online pilares esenciales de tu proyecto, ya que cada combinación de colores transmite una
primera impresión distinta. Por eso, y pues combinar colores no siempre y en toda circunstancia es fácil, Adobe Color CC es una de las herramientas de diseño de páginas web y weblogs 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 ámbito y que puedes ordenar por su popularidad. De esta forma, nunca te equivocarás en la elección de la paleta de tu web.
¿Cansado de las clásicas tipografías? Si deseas destacar sobre tu competencia, diferénciate eligiendo una buena fuente.
Olvida las típicasque todo el mundo utiliza y sé original cuando vayas a seleccionarlas.
Lo mejor es que pongas a los títulos una tipografía y a los contenidos otra distinta a fin de que hagan contraste y así facilitar la lectura de tus textos. No hace falta que sean muy distintas una de la otra, si bien sí es recomendable que una sea con serifa y otra sin ella.
¿Y cuál es la mejor herramienta para ello? Sin ningún género de dudas, Google Fonts.
Se trata de una de las mayores bases de tipografías
gratuitasdel planeta en la que podrás localizar fuentes de cualquier estilo: Monospace, Handwriting, Display, Sans Serif y Serif. No importa qué estilo desees darle a tu página web, con Google Fonts siempre y en toda circunstancia encontrarás una tipografía que se adapte a ello. Para Aula CM, esta sonque te servirán para mejorar el diseño de tu web.
Navegando por la red, o quizás leyendo algún weblog, es posible 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 inconveniente. Se trata de WhatFont.
WhatFont es una extensión de Google Chrome que te permitirá seleccionar un texto y
saber qué tipografíaestá usando el autor. Tan simple como activar la extensión y hacer clic en un texto.
Por si no lo sabías, de cara a, es fundamental que subas las imágenes al
tamaño exactoal que entonces se marchan a mostrar.
Si tus imágenes las vas a enseñar 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 página web cargue de forma más lenta afectando a la experiencia de usuario y, por tanto, empeorando tu posicionamiento web en buscadores.
Para que esto no ocurra, lo mejor es medir cada imagen ya antes de subirla. Por servirnos de un ejemplo, si tenemos un blog y deseamos 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 varios kb por el camino.
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 deseas que tengan tus páginas, pudiendo
presentar varios bocetosal cliente del servicio ya antes de comenzar con el diseño de la web.
De este modo, si alguna vez te topas con algún usuario que no tiene claro cómo quiere el diseño de su página, podrás hacer con él un pequeño boceto y así luego diseñar sobre una estructura ya definida.
Pero MockFlow no solo sirve para crear bocetos de cara al cliente del servicio, también es muy útil cuando quieres remodelar los contenidos y páginas de tu sitio. Antes de ponerte a mudar las cosas sin estrategia, lo mejor es construir un pequeño borrador para
optimizar la estructuray fortalecer las conversiones de tu web.
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 forma gratuita? En Pixabay.
Pixabay es una de las plataformas con mayor número de fotografías de todo internet. Tiene una amplia colección de fotografías gratuitas de todos los estilos y campos, con lo que te resultará fácil encontrar la fotografía que buscas.
Si tienes un blog, debes que saber que las
imágenes de cabecerapara tus entradas son muy importantes.
Es la primera cosa que verán los usuarios cuando entren en tu weblog, por lo que es indispensable ocasionar 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 lo tanto, si es llamativa, obtendrás muchos más visitas.
Para efectuar buenas imágenes para tus artículos no hace falta usar herramientas como Adobe Illustrator o bien ser experto en diseño gráfico. Existe una herramienta muy útil a la hora de crear contenidos para tu web o bien blog, que es
gratuita y on-line.Se llama Canva.
Al entrar en la herramienta lo primero que verás es un enorme listado con plantillas predeterminadas. Una vez escogida, llegarás a un cuadro con las dimensiones elegidas en el que podrás arrastrar y soltar distintos elementos para ir diseñando la pieza: fondos, iconos, ilustraciones, fotografías, títulos, sellos, etcétera Tendrás un sinfín de posibilidades para hacer que las imágenes de tu web o weblog sean únicas y marquen la diferencia con tu competencia.
Siguiendo con las herramientas de diseño de páginas web enfocadas a las imágenes, ahora vamos con una imprescindible en el momento de su optimización: Tinypng, un
compresorque disminuirá el peso de tus contenidos gráficos.
Es sencillísima de utilizar, ya que solo hay que arrastrar las imágenes al recuadro que aparece en pantalla y Tinypng las optimizará automáticamente. Indudablemente, toda una ventaja que tus usuarios y Google agradecerán.
Una de las mejores maneras de presentar los servicios que ofreces en la página de inicio de tu web es a través de 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 en el momento de darle un
toque de creatividada tus contenidos del weblog. 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 gratis? Iconfinder.
Se trata de una base de iconos enorme en la que podrás localizar todos y cada uno de los iconos del mundo en varios formatos y colores. Y lo mejor 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.
Si quieres empezarte en la personalización de tu web mediante código CSS mas no te atreves a modificarlo de forma directa, Stylebot es de las mejores herramientas de diseño de páginas web y weblogs para que pierdas el miedo a ello.
Es una extensión para tu navegador con la que podrás
modificar visualmentecualquier web a tu antojo, y después
sacar el código CSSde dicha modificación. De esta manera, luego solo tendrás copiar dicho código que se ha generado y pegarlo en la hoja de estilos de tu página web.
Si eres desarrollador y deseas crear tu página web con lenguajes de etiquetas y programación como HTML, CSS y JavaScript, tu herramienta tiene por nombre Excelente Text.
Sublime Text es un editor de código fácil de utilizar que está pensado 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 y cada uno de 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 fatigar menos la vista a lo largo de 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.
comprar textos web , Notepad++ es de las mejores herramientas de diseño de páginas web para programadores que desean crear páginas sin la necesidad de utilizar un Content Management System como WordPress o bien 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 usado y resaltarlas en una combinación de colores que facilitan la lectura y el escaneo por la parte del ojo humano.
Si bien no es una herramienta de diseño de páginas web y blogs como tal, sí que es muy útil en el momento de optimar una web tras terminar su diseño.
GTMetrix te deja analizar el
tiempo de carga de tu webpara que sepas precisamente lo que tarda en mostrarse. Y lo mejor de todo, es que te dice que es lo que está ocasionando que tu web cargue de manera lenta y te da una serie de recomendaciones para mejorarla.
Como norma general, tu sitio web debe cargar en el menor plazo posible, siendo cuatro segundos el tiempo máximo deseado.
¿Y por qué es tan esencial que tu página web sea veloz? Eminentemente 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 marchamos a otra página.
Por otro lado, últimamente, Google toma muy en cuenta la velocidad de carga de tu página web a la hora de posicionarte en su listado de resultados. Por tanto, cuanto menos tarde en cargar, mejor posicionamiento web en buscadores tendrás.
Herramientas de diseño de páginas web y blogs para WordPress
Si utilizas Wordpress como principal herramienta de diseño de páginas web,es tu mejor aliado.
Visual Composer es un complemento de
maquetación visualque te deja escoger entre multitud de elementos creativos que puedes incrustar en cualquier sitio de tu página para dotarla de un diseño completamente profesional con unos pocos clicks.
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, indudablemente es la mejor elección a la hora de crear páginas web.
¿Te has fijado en esos formularios de suscripción tan chulos que están de tendencia últimamente? Sirven para
captar usuariosa los que les haya gustado el contenido de la página web y poder entonces avisarles de que hay nuevos contenidos y traerlos de vuelta. También para mandarles ofertas y códigos de descuento de ser un ecommerce.
Antes de que existiese WP y los plugins, realizar un formulario de suscripción a una lista de correo o bien newsletter era una labor algo tediosa. Había que crear el código HTML, entonces alterar el aspecto a través de código CSS y más tarde realizar la vinculación a servicios de email marketing vía programación. El día de hoy en día, con Wordpress + Bloom, es posible crear formularios de suscripción completamente adaptados con dos clics.
Bloom te deja diseñar formularios de suscripción combinando imágenes, bloques de texto, pequeñas animaciones y todo lo que se te pueda acontecer. Después de diseñarlo podrás vincularlo fácilmente con todas y cada una de las plataformas de e-mail marketing como Mailchimp y ponerlo en cualquier lugar de la web.
Personalmente, creo que es una de las grandes herramientas de diseño de páginas web y weblogs del instante.
Ya sea para contratar algún servicio, comprar algún producto o para informar sobre algún problema o bien 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 usas WP 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 escojas múltiples e inclusive campos para anexar documentos (por ejemplo, para que los usuarios deseen adjuntar su CV si dispones de sección “Trabaja con nosotros”).
El clásico entre los clásicos. Contact Form siete es el complemento de formularios de contacto para WP más usado en el planeta. Tanto es así, que viene por defecto en muchas plantillas.
empresas de publicidad en madrid , podrás crear formularios de contacto con todos los campos que desees e incrustarlo en cualquier página o entrada a través de un shortcode que se genera automáticamente cuando creas un formulario.
Si utilizas Wordpress para crear tus páginas web, una de las grandes ventajas que tiene con respecto a cualquier otro CMS es la enorme cantidad de plantillas libres. Éstas permiten crear una página web bien estructurada, con los colores muy bien escogidos y con contenido de demostración que puedes aprovechar a fin de que el proceso de creación de tu web sea rápido y el resultado sea totalmente profesional.
Lasson las que determinan la estructura y apariencia que tendrá tu página web. Normalmente traen múltiples diseños predeterminados para puedas escoger el que más se ajuste a lo que quieres trasmitir en tu sitio web. Gracias a las plantillas, podrás diseñar una página web completa en cuestión de horas.
Seguramente te haya pasado en algún momento. Entras a una web hecha en WP que te gusta tanto que deseas saber qué plantilla y qué plugins está usando para implementar ciertos de esos elementos y funcionalidades en tu web. Sin embargo, si no conoces al dueño de esa página, quizás te de corte consultar o simplemente el diseñador no te lo quiera decir a fin de que no le copies. Mas despreocúpate, por el hecho de que tengo la herramienta definitiva: Wordpress Theme Detector.
Tan solo tienes que introducir la web que quieres examinar y dejar que la herramienta trabaje por tí. Tras unos segundos, aparecerá el tema y los complementos que usa la web siempre y cuando esté efectuada sobre WP. Simplemente increíble.
¿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 empleas en tus proyectos. De este modo, podremos aumentar el listado para transformarlo en la mejor recopilación de herramientas de diseño de páginas web y weblogs del mundo. ¿Te animas?
