Cómo CREAR el Diseño Gráfico y Visual del BLOG [+TIPS]

El diseño de páginas web aplicado al blogging es un tema que hay que tratar con mucho tiempo, mimo y dedicación. Antes de empezar, quiero confesarte que no soy ningún gurú del diseño de blogs. Eso sí, en lo que soy muy bueno es observando, aprendiendo y aplicando, a mi manera, lo que funciona para otras personas y blogs. Después de haber leído cientos de posts, libros y creado cientos de blogs (propios y para clientes), he llegado a consumir tal cantidad de información que, de alguna manera, me ayuda a crear blogs bonitos, ordenados y altamente optimizados.

Antes de seguir quiero ponerte en contexto y explicarte la razón por la qué he creado está guía sobre el diseño de blogs. Hace un tiempo añadí una pregunta en un correo electrónico que envíé a mis suscriptores. La pregunta era «¿Hay una sola cosa que te esté dando la lata con tu blog?». Hacer este tipo de preguntas me ayuda a conectar con mis lectores en un nivel mucho más personal y entender cualquier problemática que pueda tener (si conozco tus problemas, puedo ayudarte mejor).

Mi misión entonces se centra en crear contenidos de calidad para ayudar a ese lector/suscriptor. Los consejos de diseño de blogs que te voy a mostrar en este guía son el resultado directo de varias respuestas que recibí de esa envío. Una específica fue «Quiero que mi blog destaque de los demás, pero no sé por dónde empezar cuando se trata de diseño web ¿Cuáles son los elementos comunes del diseño efectivo de un blog?».

Gran pregunta ¿No te parece? Aunque intuitivamente me encanta el diseño de mi blog, nunca lo había dividido para ver sus componentes básicos para ver lo que importa y lo que no, y ver cómo podría ayudar a otros a implementar eso mismo. Así que empecé mi andadura en diseño de bitácoras, cuyo objetivo era ver lo que creía que sabía sobre el diseño de blogs y lo que realmente sabía.

Resulta que había un montón de cosas que he estado haciendo mal. Además de algunas cosas que estaba haciendo bien que ¡ni siquiera sabía! (esto ha dado lugar a una lista de tareas pendientes que he establecido, que compartiré al final de esta guía). He recopilado todo este conocimiento en varios principios para un diseño de blogs efectivo. Ahora en lugar de pasar días y días investigando lo que funciona, esta guía abreviará tu viaje poniendo todo en un mismo lugar.

Piénsalo, ¿Qué sucede cuando haces click en un enlace de un contenido que te ha interesado y acabas en un blog con diseño feo y sin cuidar? Lo más probable es que llegues incluso hasta sospechar de la veracidad y calidad del contenido de ese página web, blog o tienda online ¿Verdad?. Después de cientos de estudios, se ha demostrado que el diseño web y gráfico y la usabilidad de un blog afectan a la manera en cómo los nuevos visitantes te ven a ti o tu marca.

Para muchos usuarios, el diseño web y gráfico son factores críticos para dar credibilidad a una pagina web, blog o tienda online. De hecho, el diseño de tu blog es crucial para dar una buena primera impresión a tus lectores e impactar en cómo ellos te perciben como fuente de información. Te guste o no, antes de empezar a leer cualquiera de tus contenidos, ya te estarán juzgarán por tu diseño. Esto, sumado a que cada día hay más bitácoras, hace que el diferenciarse sea clave a la hora de potenciar la marca personal.

Por otro lado, si quieres promocionar tu blog poniéndote en contacto con otros blogs y bloggers ¡Suerte! Con un diseño del blog descuidado es muy probable que pierdas muchas oportunidades de colaboración o de obtener una respuesta. Otros bloggers te verán como lo que eres, un total novato ¿Cómo van a confiar en ti? En este sentido, por estos y otros muchos motivos, muchos bloggers principiantes y propietarios de sitios web posponen o no prestan atención al diseño de sus blogs diciendo que es caro o que no tienen tiempo para dedicarle.

¡Nada más lejos de la realidad! El diseño web y el diseño gráfico de tu blog, aunque no es fácil (para que engañarte), no es caro. Lo que tienes que pensar primero es sí quieres hacerlo tú mismo o quieres externalizarlo. Existen herramientas y plataformas que te pueden ayudar a encontrar profesionales muy cualificados, a los que tendrás que pagar muy poco para obtener unos resultados muy positivos.

De todas maneras, si eres de los que les gusta el «DIY» (Do It Yourself o Hazlo Tú Mismo), también te voy a enseñar a ahorrar tiempo y dinero haciendo las cosas tú mismo (aunque siempre te daré, al menos, una opción de pago). También voy a compartir las herramientas y recursos que yo utilizo y que me ayudan todos los días en mis proyectos y en el de mis clientes. ¿Quieres que tu blog destaque del resto pero no sabes por dónde empezar cuando se trata de diseño? Te voy a enseñar cuáles son los elementos comunes en diseño efectivo de un blog.

Una guía de identidad corporativa o guía de estilo une el corazón, alma, misión, visión y valores de la marca, y lo traduce en diseño. También le dice a todo el mundo cómo deben comunicar tu marca (con todo tipo de detalles). Es, al fin y al cabo, un documento que codifica cómo se presenta tu organización (es decir, tu página web, blog o tienda online) al mundo. Dicho de otra manera, es la herramienta de referencia que ayuda a mantener coherencia explicando cómo se ve, se siente y suena tu marca.

Llega a tener tanta importancia (sobre todo en empresas muy grandes), que algunas personas lo llegan a llamar la «Biblia de la marca«. De todas maneras, no dejes que eso te confunda o intimide, tan sólo son nombres diferentes para el mismo documento. Disponer de un manual de imagen te asegura que tu marca se vea y se sienta igual en todas partes, incluso cuando tienes con personas ajenas a tu actividad. Es perfecto para tener todo «atado» en lo que a diseño web y gráfico se refiere.

Un manual de identidad corporativa o guía de estilo es importante porque ayuda a que tu empresa se comunique de manera consistente en todos los equipos y canales. Hay, de hecho, cinco componentes clave: misión, visión, público objetivo, personalidad y valores fundamentales de la marca. Juntas, estas son los pilares más importantes a la hora de establecer tu identidad de marca, porque le dicen al mundo lo que representas. Las demás partes de tu guía de estilo de marca son elementos tangibles que comunican los componentes clave al mundo a través del diseño web.

Una vez que hayas dado rienda suelta a tu imaginación e inspiración, es hora de empezar a trabajar para empezar a unirlo todo y darle forma. En este paso, siempre te recomendaré que trabajes con con un diseñador web y gráfico con el que te puedes comunicar bien y que te haga sentir cómodo. La razón es sencilla: Tu cuando tienes que operarte, ¿Vas al médico especialista o intentas operarte a ti mismo en tu casa? Se que es un ejemplo algo agresivo, pero quiero que lo entiendas. Si no sabes, no lo hagas, porque vas a perder un tiempo que puedes aprovechar para otros menesteres.

El diseño de una imagen de marca es un proceso de descubrimiento continuo y el diseñador será un socio clave en dicho proceso. El, como profesional en su trabajo, puede tener ideas o sugerencias que tu no habías considerado. Además, el precio por contratar este tipo de servicio no es caro, y los resultados, créeme, serán espectaculares. Si, aún así, te resistes a molestar a tu bolsillo, sigue leyendo que te mostraré algunas herramientas gratuitas para hacer el trabajo tú mismo.

Hay seis elementos esenciales que deben desarrollarse para tener una guía de identidad completa para tu marca. Debes concentrar y priorizar tus esfuerzos y los del diseñador en la creación de estos elementos. De hecho, algunas partes puede que ya las tengas (el logotipo por ejemplo), pero estoy seguro de que después de leer esta guía querrás volver a la mesa de diseño de nuevo. Un buen diseñador gráfico te asesorará y ayudará a coger esos estados de ánimo, sentimientos e imágenes y convertirlos en elementos tangibles de la marca.

Introduce tu marca al mundo. Un simple resumen le dará a la gente una visión del corazón y el alma de tu empresa, lo que les ayudará a entender las misma. En esta parte puedes incluir los cinco componentes clave de la marca que he comentado más arriba: misión, visión, audiencia, personalidad y valores (también puedes elegir compartir sólo parte). Piensa muy bien qué incluir por su utilidad y como punto de referencia. Todas tus directrices debe ser fieles a estos componentes fundamentales.

Llega el momento de crear el logotipo. Tu objetivo es que la gente se tome en serio tu proyecto, por lo que este necesita lucir bien y estar bien presentado y no tener un logo «pasable» no es una opción. Yo te recomiendo encarecidamente que contrates a un profesional (diseñador gráfico). Me se eso de «le pongo lo que sea para ir funcionando y ya me encargaré del logo«. ¡Pues no! Al final, y te lo digo por experiencia (a mi me ha pasado), se queda esa «plasta» (y va para largo).

Seguramente pienses que contratar a un profesional cueste mucho dinero, pero ¿y si te digo que a mi me han hecho logos profesionales por menos de $150? ¿No te lo crees? Pues eso es porque no conoces las herramientas correctas. Se trata de recursos online que harán las maravillas de tu negocio, ofreciendo profesionales freelance muy cualificados a precios muy competitivos. Eso sí, ya te aviso que vas a necesitar ciertas herramientas para emprendedores que ya te había mostrado (como Skype).

¡Has llegado a los colores! Definir una paleta de colores hará a tu marca mucho más consistente, coherente y diferente. La mayoría de las marcas eligen 2 o menos colores principales y no se alejan demasiado de los tonos de color de su logotipo. Para ello, es una buena idea elegir un color claro para los fondos, un color más oscuro para el texto, un tono neutro y también uno que llame mucho la atención.

Tal y como hace YouTube (o yo mismo en mi página de branding) con el manual de marca, define diferentes colores e intégralos con tu marca. Por ejemplo, si tengo una empresa dedicada a los productos ecológicos, te viene fenomenal el verde (que es el color que todo el mundo espera ver en este tipo de productos), pero podría complementarlo con un amarillo o un azul. Asegúrate de incluir los colores de tu marca en la guía de estilo y la información necesaria para reproducir esos colores con precisión, donde quiera que vaya su mensaje de marca. Estos es lo que debes incluir:

¡Un momento! No hace falta que te hagas un master en colores, pero si que entiendas qué es cada uno. De todas maneras, existen varias herramientas online muy útiles para ayudarle a elegir un esquema de color o convertir el color digital en otros valores. Llamadas comúnmente «conversor de colores» o «ruedas de color» te permiten trabajar de forma simultánea con los modelos de color hexadecimal, RGB, HSV y HSL. Simplemente tienes que rellenar el dato de uno de ellos y presionar «Intro». Estas son mis favoritas:

Cuando se trata de tu marca o negocio, se suele tener un instinto natural para saber qué fotos e ilustraciones son más adecuadas (echa un vistazo a la guía de estilo de Nike). La sección de imágenes en tu guía de estilo guiará a cualquiera que la vea en la dirección correcta a la hora de crear o agregar imágenes para tu marca (para evitar estar teniendo que aprobarlo todo y que se tenga que repetir el trabajo). Puede abordar este punto de varias maneras diferentes:

Por otro lado ¿te hayas parado a pensar la enorme cantidad de tráfico que te pueden traer las imágenes desde los buscadores? ¡En serio! Alguien busca un producto, un lugar, una receta, o una infografía en Google y ahí deberían aparecer tus imágenes. No importa que el nuevo diseño del buscador reduzca la cantidad de visitas que puedes recibir, la oportunidad de ser visible y atraer tráfico siempre es interesante y jugosa.

Además, la búsqueda universal muestra imágenes en la página de resultados de forma combinada. Esto significa que no es necesario buscar una imagen para encontrarla, puedes aparecer en cualquier momento (sobretodo para ciertas búsquedas). Por todo ello, es importante que aprendas a optimizar tus imágenes para los buscadores (lo que también se conoce como SEO para imágenes). Estas son mis herramientas para optimizar imágenes favoritas:

Aunque no soy ningún gurú del diseño de blogs, sí que soy muy bueno es observando, aprendiendo y aplicando lo que les funciona a otras personas a mi manera (única). Esto es lo que quiero tratar en este apartado. He llegado a consumir tanta información online, que quiero regurgitarla en forma de una bonita y optimizada guía del diseño web y gráfico. De hecho, estoy seguro que buscas que tu blog destaque de los demás, pero no sabes por dónde empezar cuando se trata de diseño.

Aunque intuitivamente me encanta el diseño de mi blog, nunca lo había dividido en los componentes más importantes, haciendo hincapié en que realmente importa y cuánto y cómo podría eso ayudar a otros a implementar buenas prácticas. Así que emprendí una misión para salvar el vacío entre lo que pensaba que sabía sobre el diseño de blogs y lo que realmente sabía.

Resulta que había un montón de cosas que he estado haciendo mal durante muchos años de blogger, pero muchas otras que estaba haciendo bien (que ni siquiera conocía). Este proceso de comprensión ha dado lugar a una pequeña lista de tareas que compartiré al final de esta guía y una serie de principios del diseño efectivo del blog. Ahora, en lugar de pasar días y días investigando lo que funciona y lo que no, esta guía te lo pone todo en el mismo lugar. Vamos a verlos uno por uno.

La gente que navega por Internet, por desgracia, está ocupada, tiene prisa, presta poca atención y es avasallada con un mar de contenido todos los días (correos electrónicos, blogs, tweets, páginas de ventas, cursos, ebooks y un largo etc). Así que la primera impresión importa más que nunca. Tienes de 3 a 5 segundos para mostrar a un usuario tu página web, blog o tienda online, decirle quién eres o qué haces y hacerle que actúe.

¡Es rápido, muy rápido! Es por eso que el diseño de tu página de inicio es esencial para el éxito de su blog, ya que, con el tiempo (para los proyectos que llevan menos tiempo no suele ser así), la mayoría de tus visitas deberían llegar por aquí (si no es así, comprueba tu estrategia, porque tu tráfico directo no está creciendo).

La verdad es he tenido mis propias incongruencias a la hora de diseñar la página de inicio. De hecho, he tenido tantos diseños diferentes que no sabría enumerártelos todos. Algunos tenían el objetivo de informar, otros de captar leads (suscriptores) y otros de vender, pero ninguno me ha llegado a convencer del todo. Hay mucho escrito sobre lo que funciona y lo que no, pero hacer preguntas a las personas que te visitan es una muy buena idea.

Eso sí, no te quedes ahí y añade llamadas a la atención y otra serie de elementos que atraigan la vista y el click a donde realmente quieres. De hecho, sobre esto quiero extenderme un poco más, ya que existen ciertos elementos esenciales en el diseño de blogs que las mejores páginas de inicio suelen incluir (no hace falta incluirlos todos, pero sí hay que conocerlos):

Tu blog debe ser una extensión directa de tu marca. Esto significa que necesitas crear una guía de estilo (si no tienes una ya) que se adapte a tu marca, tono y personalidad. El objetivo es crear una experiencia consistente para tus clientes a medida que investigan sobre quién eres y lo que haces. Aunque ya te lo explicaba más arriba, un manual de imagen eficaz aumenta la confianza y la credibilidad percibida y te da una cierta inspiración en lo que a diseño se refiere. Una guía de estilo debería incluir:

Unido a todos estos elementos, deberían añadirse una serie de ejemplos para cada punto que resalten exactamente lo que se espera de cada uno de ellos. Un buen ejemplo de manual de identidad, que la ha seguido al pie de la letra en todas sus plataformas, es Copyblogger. No importa donde vayas, si a su página web o a alguno de sus perfiles sociales, en todos sentirás que estás en Copyblogger.

El espacio en blanco es el mejor amigo de un diseñador web y gráfico. Ayuda a los ojos a dar sentido a lo que estamos leyendo y dibuja los puntos más importantes, destacados con otros colores. Los lectores pueden consumir la información de una manera más sencilla cuando se optimiza la cantidad de espacio en blanco y les permites escanear fácilmente la página para obtener textos o imágenes valiosas. En definitiva, más espacio en blanco hace más claro un sitio web y que la experiencia del usuario sea mucho más agradable.

De hecho, el espacio en blanco proporciona un buen colchón entre la información inútil y las cosas más importantes, guiándote exactamente hacia lo que debes hacer. Un ejemplo de un sitio web que usa esta técnica y la lleva a la máxima expresión es Google. Maximizan el uso del espacio en blanco y ponen el foco en el centro de la pantalla.

No lo digo yo, lo dicen los blogs y medios más importantes del mundo: El móvil no deja de crecer y se pone a la cabeza en lo que a consumo de información y compras se refiere. En promedio, gastamos una media de 120 minutos en nuestro dispositivo móvil todos los días (fuente: Econsultancy). ¡Es simplemente bestial! Pero no digo nada nuevo, porque es algo que se veía venir hace ya muchos años.

La tecnología avanza más rápido que nunca. De hecho, vamos tan rápido que no tenemos tiempo ni de acostumbrarnos a ciertos adelantos. ¿No te has fijado que caminamos por la calle chocando unos con otros porque no podemos retirar la mirada del teléfono móvil ni un segundo? Nos apresuramos de reunión a reunión con sólo unos minutos de descanso, y los invertimos mirar nuestro smartphone o teléfono inteligente. En 2014 los usuarios de Internet «móvil» superaron a los usuarios de Internet de escritorio.

Si no te lo crees, fíjate en tu analítica y haz un histórico de los últimos 5 años (es un ejemplo, con unos meses valdría). Si usas Google Analytics, vete a «Audiencia > Móvil > Visión General» y haz analiza bien los números y los porcentajes. ¿Qué ves? ¿No te das cuenta de que tienes cada vez más visitas desde dispositivos móviles? ¡Espera! ¿No tienes un sitio web responsive? Entonces lo primero es ponerse con eso antes de tocar ningún diseño.  Tus lectores están utilizando teléfonos móviles para acceder a tu bitácora, por lo que el diseño de tu blog debe adaptarse a todos los dispositivos posibles.

Ya te he hablado en alguna ocasión sobre las mejores páginas para probar la versión móvil de tu web, los errores más comunes, las métricas a medir y las mejores herramientas para convertir tu blog de WordPress en móvil. Por si esto no fuese suficiente, Google anunció no hace mucho que los sitios con versión móvil tendrán un mejor posicionamiento en los resultados de búsqueda (el móvil se añade como factor de posicionamiento). Y como los usuarios están cada vez más unidos a sus teléfonos, este factor de clasificación cada vez será más importante. Si no estás seguro de si tu sitio web es compatible con dispositivos móviles y no sabes por dónde empezar, consulta este recurso de Google.

Yo solía pensar que la «navegación» era lo bien que podías poner el menú superior en tu página web, blog o tienda online. Pero es mucho más que eso y algo más complicado. La navegación consiste en ayudar a tus visitantes a encontrar su camino en tu sitio web de una manera específica, rápida y sencilla. Una navegación eficaz y bien pensada es un win-win para tu web. Consigues que tus visitantes vayan exactamente donde tu quieres y, a la vez, les ahorras un tiempo precioso (ya que no tendrán que estar «adivinando dónde ir»).

Cuando empecé a diseñar y escribir este blog, pasé por alto algunos de los fundamentos más importantes de la navegación. Ahora, en retrospectiva, tiene mucho sentido que mi tasa de rebote fuese mucho mayor de lo que debería ser. Por ello, he reunido algunas claves que deberías considerar al diseñar la arquitectura de navegación de tu blog.

Sobre este punto os puedo poner un ejemplo que seguro conocerás: AulaCM. Sigue a la perfección esta fórmula y clava la manera de presentar un menú. Es simple, rápido y muy atractivo. Puedo decir, sin equivocarme, que es el mejor menú que he visto nunca. Como en muchas otras cosas, los profesionales que hay detrás demuestran que están en lo más alto y que tienen mucho mimo con su diseño.

¿Te ha pasado alguna vez que, estando en una web, has hecho click en un enlace y no te ha llevado a ningún sitio? ¿O tal vez si que te llevaba a algún sitio, pero no era la página que esperabas o era una página de error 404 sin más? ¡Tranquilo! Es muy habitual y, además, es esencial cuando se trata de percepción y conversiones. Si tienes un formulario o un enlace que no lleva a ninguna parte a tus usuarios, es probable que termine en un abandono de tu sitio web y un aumento de la tasa de rebote (más preocupante es que la gran mayoría no volverán).

Por favor, revisa todos estos errores y página sin «chicha», no sólo desde el punto del diseño, sino también desde el punto de vista del posicionamiento web. Google, de hecho, pone a tu disposición Search Console o Webmaster Tools, una herramienta SEO gratuita perfecta para tener controlado este aspecto y muchos otros.

A cualquier propietario de una página web le viene bien estar bien informado del estado de su sitio web, y cuanta más y de mejor calidad sea esta información mucho mejor. Indexación de páginas, enlaces entrantes, errores 404 y un largo etc. Aunque son datos algo técnicos, es recomendable que sepas manejar una de las mejores herramientas SEO de Internet.

A cualquier propietario de una página web le viene bien estar bien informado del estado de su sitio web, y cuanta más y de mejor calidad sea esta información mucho mejor. Indexación de páginas, enlaces entrantes, errores 404 y un largo etc. Aunque son datos algo técnicos, es recomendable que sepas manejar una de las mejores herramientas SEO de Internet.

Tus usuarios quieren conectar con personas, no con marcas. Así que aprovecha cada oportunidad que tengas de personalizar y humanizar tu blog. De esta manera te haces más cercano y la confianza en tu sitio web sube instantáneamente. De todas maneras, te dejo algunos consejos para hacer más humano tu blog y aumentar el engagement y la conexión que tienes con tus lectores.

En este sentido, la imaginación es el límite. Puedes hacerlo como quieras, ya que depende de si es un blog más «divertido» o más «serio». En ambos casos te recomiendo hacerlo lo más cercano posible y, aunque suelo recomendar siempre fotos profesionales, en este caso te digo que son mejores «las de andar por casa«. Cuenta tu historia e intenta conectar con tu lector. Como ejemplo te pongo a Frenchiemania, donde te cuenta una pequeña historia y lo uno con decenas de fotos «personales».

También te dejo otro ejemplo. En este caso MensandBeauty, un blog de belleza y moda para hombres en el que vierto muchos de mis conocimientos, y que está dando unos resultados impresionantes. En este caso, gracias a un diseño muy cuidado, te cuento, brevemente, quienes son los que están detrás, uniéndolo con otras opciones que vienen al cuento.

La página «sobre ti» o «sobre nosotros» es una de las páginas más visitadas en cualquier sitio web. Si alguien va a esa página en tu página web, blog o tienda online significa que está ansioso por saber más sobre lo que haces y quién eres. Es una gran oportunidad para convertir a estos visitantes en miembros de la comunidad e incluso clientes, algo en lo que muchos sitios web fallan. Por ello, he hecho un listado de lo para mí debería incluir tu página «acerca».

Atraer tráfico es sólo el primer paso. Una vez que lo tienes y los usuarios llegan a tu página web, blog o tienda online, es momento de persuadirlos para que hagan las acciones que más te convienen. Eso puede sonar muy bien, pero, ¿qué les deberías pedir que hagan? He hecho una lista con las llamadas a la acción (CTAs) más habituales y que mejor funcionan a la hora de generar más suscriptores, clientes y ventas.

Cada página de tu sitio web debe cumplir un propósito y este debe ser muy claro y directo (al menos para ti) en lo que a la acción que pretendes de cada usuario (es la base del objetivo de un CTA o Call To Action o Llamada a la Acción). Realmente lo que quieres es que los usuarios realicen acciones específicas en cada página, siempre y cuando estén alineadas con el contenido. Sabiendo esto y los tipos de CTAs que puedes mostrar, es un momento perfecto para explicarte dónde y cómo colocarlos.

Para reforzar más esta información es importante conocer a los expertos en conversión, así que tienes que visitar el blog de LeadPages. Este sitio web utiliza muchos tipos de CTAs y lo hace con mucho estilo, casi sin enterarte. Algo a aprender de ellos es que las llamadas a la acción deberían estar en la parte visible de la página (la parte de la página que se ve cuando se carga por primera vez). Esta zona se conoce como «above the fold» y tienen una tasa de conversión superior, ya que son visibles nada más cargar la página, antes de que los usuarios empiecen a desplazarse hacia abajo.

Aunque tu producto o servicio sea de los mejores del mercado, es muy probable que nadie lo sepa o te crea si se lo dices tú directamente como marca o persona. En cambio, puedes aprovechar las recomendaciones positivas de otros y tener la oportunidad de influir en los clientes potenciales o lectores. Realmente esta es la base del social proof o la prueba social. Muy bonito lo que me cuentas Ignacio, pero ¿qué tipo de prueba social puede ayudar a hacer el diseño de mi blog más eficaz y dónde la incluyo? Déjame explicártelo en varios puntos:

Desde siempre, el blogging se ha concebido como un proceso de añadir 2 o 3 párrafos de texto y una imagen en la esquina derecha en una publicación. Pero nada más lejos de la verdad. No es que eso haya cambiado, es que realmente nunca ha debido ser así. Olvídate de añadir 2 o 3 párrafos, una imagen y a esperar a que lleguen las visitas. Tienes que empezar, no sólo a añadir más texto y más imágenes, sino a complementar tus artículos con más tipos de contenidos. Si siempre utilizas el mismo tipo de contenido, tus seguidores podrían llegar a aburrirse. No solo se trata de que el contenido sea de calidad, sino que también sea variado. Esto es algo que valorarán positivamente tus usuarios.

Si me sigues desde hace tiempo, sabrás que tengo predilección por la listas (de hecho, tengo una web dedicada a las listas). Son, simplemente, mi tipo de contenido favorito. La ventaja de realizar este tipo de contenido es que es posible hacer listas de casi cualquier cosa y tus seguidores no se aburrirán de ellas si el contenido es de calidad y están bien realizadas. Por otra parte, puede haber un inconveniente, y es que en ocasiones puede resultar complicado hacerlas bien y completas. Además, es posible que si intentas hacerla demasiado larga, termine resultando algo tedioso.

Otro recurso esencial para cualquier blog son las infografías. Las infografías son un tipo de contenido que sirven para representar, de manera visual, una idea incluyendo imágenes y textos resumidos. Para realizar una infografía puedes utilizar distintos tipos de signos, tanto lingüísticos, como no lingüísticos y gráficos para formar descripciones. Su principal ventaja es que para los lectores de los blogs suele resultar un tipo de contenido muy ameno, útil y muy fácil de compartir en los medios sociales. Sin embargo, existe el inconveniente de que no es un tipo de contenido fácil de realizar.

El vídeo es simplemente impresionante. A la gente le encanta verlo e interactuar con el. Además, personaliza la experiencia de tu sitio web y da a los visitantes la oportunidad de consumir mucha información en un corto período de tiempo (perfecto para «engancharles»). Eso sí, no te pases. Si usas el vídeo en exceso el vídeo puedes llegar a perder impacto y posicionamiento. Por ello, lo mejor es incluir vídeos simples y atractivos en las páginas más importantes de tu sitio web. Por lo general, éstas serán las páginas de ventas, la página de inicio, la de acerca y los posts más visitados.

En la página principal de tu blog, sea esta la página de inicio o la página del blog de un sitio web, es importante mostrar un pequeño fragmente de las entradas de blog. Algunos bloggers cometen un error enorme en este aspecto, ya que muestran toda la entrada, sin necesidad de hacer «click». Lo mejor es que utilices una especia de «vista previa» del artículo, que llame la atención para que el usuario quiera leerlo entero. De todas maneras, ¿Cuál es la razón para mostrar un fragmento en lugar de la publicación completa? Te lo explico en varios puntos:

En cualquier blog, los comentarios son un claro indicador del compromiso de la audiencia. La realidad es que este tema da para mucho, ya que son muchos los bloggers de sitios de mucho tráfico que han decidido deshabilitar los comentarios. ¿Por qué? Puedes que te suene el término spam. Puede que también sientan que les lleva mucho tiempo responder a los comentarios (y no se equivocan), por lo que prefieren cerrarlos directamente. Por favor, ¡Ni se te ocurra hacerlo!

Como un ávido lector de blogs, me encanta la oportunidad de conectar con otros bloggers a través de su sección de comentarios. De hecho, me atrevo a decir que ayudan al posicionamiento (aunque no existe un factor de posicionamiento que se llame «número de comentarios»). De hecho, algunos profesionales del sector de dirán que se pierda fuerza en cuanto a densidad de palabras clave y enlaces se refiere. No se equivocan, pero si analizo mi blog, los posts con más tráfico y mejor posicionados son los que más comentarios tienen (estoy seguro de que alguna relación habrá). Hay algunas cosas a considerar al diseñar la sección de comentarios del blog:

Existen muchos plugins para realizar este cometido. Entre todos ellos recomiendo el sistema de comentarios de Disqus, que ya he usado en el pasado en mi blog. Es visualmente atractivo para los lectores, te permite conectarte usando tus perfiles sociales y se integra a través de cualquier plantilla de WordPress. De todas maneras, si te has fijado en lo que tengo ahora, te preguntarás ¿Por qué has vuelto al sistema de comentarios de siempre? ¡Muy fácil! Porque es más que sufiente y así no te complicas la vida (cosa que te recomiendo). De todas maneras, siempre puedes añadir comentarios de Facebook, Twitter y Google Plus, aunque tiene que saber que esos comentarios no te pertenecen.

Las plataformas sociales son uno de los ingredientes básicos para promocionar el contenido de tu blog y construir una comunidad fiel y duradera. Por lo tanto, uno de tus objetivos como blogger es facilitar al máximo que cualquier persona que visite tu página, sea por la razón que sea, pueda compartir tus contenidos en sus redes sociales favoritas (normalmente las smás utilizadas). De todas maneras, desde la perspectiva del diseño web, te voy a dar una serie de consejos que deberías seguir al respecto.

Si quieres que las personas que visitan tu blog lean tus contenidos, es muy importante optimizar su diseño y elegir una buena tipografía que facilite la lectura. Piensa que cuesta mucho trabajo atraer visitas al blog (sobre todo al principio) y quieres que, cuando lleguen, se queden todo el rato posible. Si les pones una fuente ilegible o que cueste mucho leer (ten en cuenta el móvil), vas a notar que tu tasa de rebote aumenta mucho (claro signo de que algo no va bien). Aquí te dejo algunos principios imprescindibles para aumentar la legibilidad en tu blog.

He estado mencionando el sidebar o la barra lateral derecha del blog bastantes veces durante esta guía del diseño web. Aunque yo no lo uso, la barra lateral derecha ofrece la oportunidad de incluir gran cantidad de información para tus lectores, sin desvirtuar el contenido principal de la página (aunque puede dispersar al usuario y que pierda interés). Es importante que la barra lateral esté en el lado derecho y el contenido principal en el lado izquierdo. Esto evita cualquier confusión a los lectores y les ayuda a centrarse en la prioridad. De todas maneras, ¿Qué debe incluir en la barra lateral derecha de su blog? Vamos a verlo por puntos:

Como verás, vas a necesitar un sidebar para seguir estos consejos de diseño web. Te preguntarás, ¿Por qué has eliminado el sidebar? La respuesta no es fácil, porque es una suma de muchas cosas, pero dicho rápido es porque he comprobado que «lía» a mi lector, diluye la fuerza que envío desde los posts a otros posts (ya que aumenta el número de enlaces» y hace que la página cargue mucho más rápido (piensa que añado muchas imágenes a cada artículo, asi que imagínate que tuviera que cargar más). Para ver estos consejos «en acción», lo mejor es que eches un vistazo a uno de mis blogs: mustzee.com.

Como un añadido al diseño, apariencia de tu blog y estilo de tu marca, te recomiendo incluir una imagen de cabecera creativa en cada post. Muy bien, pero, ¿Por qué creativa? A ver, un blog con una imagen de cabecera atrae a más lectores y hace que luzca mucho mejor, pero si vas un paso más allá y la haces creativa te diferencias de otros blogs.

De hecho, te recomiendo replicar esa imagen (con el tamaño adecuado) en el fragmento del artículo que muestres en la página principal (en WordPress sería simplemente añadir una imagen destacada) y en la imagen que se comparta a la hora de compartir el contenido en las redes sociales (de nuevo, si usas Easy Social Share Buttons, podrás elegir qué imagen se comparte en las redes sociales).

La imagen de cabecera juega un papel vital en la experiencia de usuario de tus lectores, además de que añade un estilo a tu marca y ayuda a que sea más perceptible. Con esto en mente deberías ser coherente y consistente con el tipo de imágenes que utilizas en tu blog. Para ello puedes utilizar imágenes de stock gratuitas o de pago. La idea es que las imágenes aporten valor a tu marca y conecten con tus lectores, por lo que tienes que valorar el pagar un servicio premium (aunque puedas hacerlo totalmente gratis si lo prefieres).

Es importante que elabores imágenes exclusivas y únicas, y que les añadas texto. Para hacer esto de forma rápida y fácil, te recomiendo Canva, una herramienta perfecta para este cometido por su versatilidad, aunque hay muchas más herramientas para retocar y editar imágenes. Como ejemplo este mismo post, fíjate en la imagen de cabecera y en las imágenes que uso en el resto del contenido. Todas siguen al pie de la letra mi branding.

¿Después de darte la chapa todavía quieres hacerlo tú mismo? ¡Pues espera que te quiero ayudar! Soy de los que antes hacía estas locuras, asi que no te voy a detener si prefieres dedicar tu tiempo y esfuerzo a crear tu propio logo. En este apartado quiero explicarte el proceso de diseñar un logotipo simple con software libre. El truco está en omitir todas las partes tediosas del diseño de un logotipo.

Si está familiarizado con el principio de Pareto, llegarás al 80% de un gran logotipo invirtiendo sólo el 20% del tiempo y las habilidades. De todas maneras, antes de ponerte al lío, deja que te explique qué vas a tener que hacer y las herramientas que vas a necesitar (sí, incluso para conseguir un logo rápido y «pasable» necesitas de ciertos pasos y herramientas).

Una vez tienes las herramientas y tienes bien claro que quieres hacer tu propio logo (desde luego hay algo que te sobra, y es tiempo, porque pudiendo hacerlo desde $5 no tiene mucho sentido (a menos que tu tarifa por hora sea inferior a $5) tienes que tener claro que sin conocimientos de diseño gráfico sólo podrás diseñar un logo simple y «pasable». Los objetivos que persigues en esta fase son:

Se que tienes unas ganas locas de empezar a crear los primeros bocetos de tu logo, pero antes necesita conocer un poco más el software libre que te estoy recomendando. He elegido Inkscape porque es muy popular, multiplataforma y, lo mejor de todo, 100% gratis. Siempre puedes usar cualquier otra herramienta de edición vectorial con la que estés familiarizado, como Adobe Illustrator o Sketch App, o incluso codificarlo todo en CSS con un poco de ayuda (esto sería un poquito más pro).

De cualquier manera, primero asegúrate de que tienes tu espacio de trabajo listo. De todas las funciones que tiene este programa, sólo vas a utilizar para crear tu logotipo unas pocas. Realmente necesitas aprender sobre trayectorias, herramienta de escritura y movimiento, cómo cambiar los colores y las fuentes. Puesto que no tiene sentido repetir lo que otros ya han explicado perfectamente, sugiero que eches un vistazo a este tutorial si no estás familiarizado con Inkscape.

No han sido ni 1 ni 2 sino varias las veces que me equivocado en la elección de un logotipo. ¿Por qué? Muchas veces por las prisas del proyecto (que lo quieren para ya), pero, sobre todo, porque el yo o mi cliente no teníamos claro dónde iba a ir colocado ese logo. No es lo mismo colocar un logotipo en un menú finito, que en uno prominente. Por lo que, lección aprendida, antes incluso de pensar qué forma tendrá tu logo, tienes que tener claro dónde ira colocado y su objetivo.

¿Ya lo tienes claro? ¡Perfecto! A continuación echa un vistazo a tu competencia. ¿Necesitas ideas? Encuentra las mejores empresas en tu nicho de mercado y copia su estilo. ¡Espera un segundo! ¿De verdad he escrito «copia»? ¡Pues sí! ¿Por qué no? En primer lugar, es muy probable que no tengas ni idea de cómo debe ser un buen diseño. En segundo lugar, hay muchas posibilidades de que tu competencia haya contratado a diseñadores profesionales para diseñar su marca.

No hace falta que sea igual, pero sí «que se de un aire». Simplemente crea un algo que sea lo suficientemente parecido para que tu marca sea reconocida automáticamente como parte del nicho. Un buen ejemplo es Starbucks, y como decenas de empresas han «copiado» las formas de su logo para generar reconocimiento de marca (sin tener que gastar millones en el proceso). Hay millones de ejemplos sobre este tema, pero quédate con la idea de que no es una copia literal, sino coger lo que funciona y darle tu impronta.

Ahora que ya has hecho algo de investigación, estás listo para crear tu propio logotipo. Básicamente, los siguientes pasos son elegir un icono y una fuente (tipografía) que representen el proyecto. Puede llevarte algún tiempo encontrar la combinación correcta, así que tómate tu tiempo en estos 2 pasos. Ahora vamos con el primer paso, que es encontrar un icono de calidad, que sea preferentemente gratuito (o muy barato).

Internet está llena de páginas para descargar iconos gratuitos y de pago. Estoy seguro de que encontrarás un icono adecuado para tu logotipo en alguna de ellos. De todas maneras, tienes que tener claro que será un icono que tendrán otros, asi que olvídate de exclusividad. Por otra parte, he querido hacerte la vida un poco más fácil y, por muy poco dinero, ofrecerte 2 packs con miles de iconos a un precio sin competencia (a ver dónde consigues lo mismo por menos dinero).

Sí estás cansado de ver siempre los mismos iconos aburridos en tu página web o perfiles sociales, quizá te interese este pack de iconos vectoriales. El pack ICON Academy es una colección muy completa que incluye iconos de diversas temáticas como SEO, diseño web ecommerce, redes sociales, marketing y mucho más.

Sí estás cansado de ver siempre los mismos iconos sociales aburridos en tu página web, blog o tienda online, quizá te interese este pack de iconos vectoriales. El pack SOCIAL Academy es una colección muy completa que incluye diferentes iconos de las plataformas sociales más importantes.

En estos packs te llevas miles de iconos profesionales muy poco habituales que podrás usar para tu logo, pero también para el resto de necesidades que presente tu página web, blog o tienda online (podrás embellecer tu insignia y el resto de tu sitio web). El generador de logos es muy útil si quieres un «todo en 1» y no quieres ir buscando más opciones. Sea cual sea tu elección, sigue estas premisas:

Una vez que hayas elegido unos cuantos iconos, podrás importarlos a Inkscape haciendo click en «Archivo > Importar» y eligiendo los archivos vectoriales epecíficos. Dado que Inkscape sólo admite la importación de archivos .ai, .pdf y .svg (.eps requiere un script extra), lo mejor es buscar iconos en este tipo de archivos.

Algunos dicen que el 95% del diseño gráfico se lo lleva la tipografía. Este elemento puede llegar a romper cualquier escala de color, diseño o, por ejemplo, un sitio web cuidadosamente diseñado. Puede hacer, incluso, que la gente deje de leer el texto y que piensen «espera, hay algo que falla en esta página«. Además, tiene el maravilloso poder de hacer un logotipo reconocible, incluso aunque se utilice la archiconocida y antigua Helvetica Bold.

En el proceso de creación de tu propio logo, necesitas elegir la fuente idónea. De hecho, sólo vas a necesitar una (no todas las fuentes son adecuadas para todos los logos). En este paso, al igual que con los iconos, Internet está llena de páginas para descargar tipografías gratis y de pago. Estoy seguro de que encontrarás la tipografía adecuada para tu logotipo en alguna de ellas. De todas maneras, tienes que tener claro que será un icono que tendrán otros, asi que olvídate de exclusividad. Por otra parte, he querido hacerte la vida un poco más fácil y, por muy poco dinero, ofrecerte 2 packs con cientos de tipografías a un precio sin competencia (a ver dónde consigues lo mismo por menos dinero).

Tu logo ya empieza a coger forma ¿verdad? Ahora toca unir las dos partes principales: el icono y la tipografía. En este paso, todo lo que necesitas hacer es prestar mucha atención al tamaño del texto en comparación con el icono y el espacio entre ellos. Por ello, tienes que tener cuidado con ciertos aspectos que darán la forma final a tu logotipo:

El paso final para finalizar el logotipo es elegir los colores correctos. Los colores son imprescindibles para que tu marca sea reconocida (y, por tanto, recordada), por lo que es vital saber cómo elegir sólo los tonos perfectos. Por ello, te dejo algunos pasos que te harán la vida más fácil y con los que podrás decidir los colores que mejor se adaptan tu logo y a tu negocio.

Una vez que estás satisfecho con el logotipo, es momento de exportarlo a un formato utilizable para su uso en impresión y en la página web, blog o tienda online. En primer lugar, querrás convertir todas tus fuentes en rutas. Esto eliminará la opción de editar texto, pero asegura que el texto se procesará en todos los ordenadores de la misma manera. Para ello, seleccione el texto del logotipo y haz click en «Path > Object to Path«.

A continuación, puedes exportar tu logo a un archivo vectorial para comprimirlo y enviarlo a donde sea necesario. Para ello, simplemente seleccione «File > Save as» y elige el formato que aparece en el menú desplegable. Para guardarlo con un formato transparente o .png para poder subirlo a tu sitio web (y que sea vez en todo tipo de colores y fondos), tienes que ir a «File -> Export PNG Image«.

No te voy a engañar, no existe el diseño de blog perfecto. Cada blogger crea su propio diseño y lo hace suyo, pudiendo equivocarse en el camino. En ese aspecto, te animo a probar los consejos de diseño web que te he ofrecido en esta guía y a «equivocarte». Es la única manera de llegar a un diseño que te guste a ti y, sobre todo, a tus lectores (ellos son la razón del diseño). Espero que te haya ayudado a estar más seguro a la hora de tomar decisiones sobre cómo representar su marca online. Aunque he hablado de blogs, puedes aplicarlo a cualquier tipo de página web.

Tengo claro que mi blog no es perfecto, pero estoy dispuesto a aprender de mis errores, de los demás y seguir mejorando sin con el tiempo. Espero que decidas emprender un viaje parecido, porque estoy seguro de que tendremos mucho de lo que hablar (y discutir). ¡Tu turno! ¿Qué te ha parecido esta guía para mejorar el diseño de tu blog? ¿Te has quedado con alguna duda o pregunta? Entonces te pido es que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.