17 CONSEJOS de DISEÑO Web (y Gráfico) para Tu Web

¿Qué sucede cuando haces click en un enlace de un contenido que te ha interesado y acabas en una página web 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 sitio web 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 web 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 tienes un blog y quieres promocionarlo 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 web, 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 vamos 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 compartir a compartir las herramientas y recursos que utilizamos y que nos ayudan todos los días en nuestros proyectos y en el de nuestros clientes. ¿Quieres que tu web destaque del resto pero no sabes por dónde empezar cuando se trata de diseño? Te vamos a enseñar cuáles son los elementos comunes en el diseño efectivo de páginas web.

Entendiendo la importancia del diseño web

Aunque no nos consideramos gurús del diseño de páginas web, sí que somos muy buenos observando, aprendiendo y aplicando lo que les funciona a otras personas a nuestra manera (única). Esto es lo que queremos tratar en este apartado. Hemos llegado a consumir tanta información online, que queremos regurgitarla en forma de consejos sobre diseño web y gráfico. De hecho, estamos seguros que buscas que tu sitio web destaque de los demás, pero no sabes por dónde empezar cuando se trata de diseño.

Aunque intuitivamente nos encanta el diseño de nuestra página web, nunca lo habíamos 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ímos 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 hemos estado haciendo mal durante muchos años de blogger, pero muchas otras que estábamos haciendo bien (que ni siquiera conocíamos). Este proceso de comprensión ha dado lugar a una pequeña lista de tareas que compartiremos 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.

Mezclamos una y otra vez el diseño visual y el funcional ya que ambos son elementos esenciales para el diseño de tu página web y mejoran en mucho la experiencia del usuario.

Consejos para potenciar el diseño web a tu favor

AUna vez que entienda la importancia de tener un buen diseño web en tu sitio web ¡es hora de ponerse las pilas! Por ello, hemos reunido los que, para nosotros, son las acciones más habituales que realizamos en los proyectos de nuestros clientes y en los nuestros propios. Vamos a ir paso a paso explicándote todos los tecnicismos y técnicas que sean más complicadas y que puedan liarte.

#1 Un buen diseño empieza en tu página de inicio

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 tu web, 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 hemos tenido nuestras propias incongruencias a la hora de diseñar la página de inicio. De hecho, hemos tenido tantos diseños diferentes que no sabríamos enumerártelos todos. Algunos tenían el objetivo de informar, otros de captar leads (suscriptores) y otros de vender, pero ninguno nos 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 o captar la atención con una frase impactante 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 queremos extendernos un poco más, ya que existen ciertos elementos esenciales en diseño web que las mejores páginas de inicio suelen incluir (no hace falta incluirlos todos, pero sí hay que conocerlos):

• Imagen del encabezado: Una imagen de encabezado o un banner diseñado profesionalmente puede aumentar exponencialmente la credibilidad percibida en cualquier sitio web.
• Lema informativo y atractivo: La idea del lema es informar de forma resumida y concisa a sus visitantes sobre lo que haces. El mensaje debe ser directo para que el visitante entienda automáticamente qué es lo que puedes ofrecerle y qué conseguirá el con tu servicio o producto.
• Llamada a la acción: Una visita a tu página de inicio es una excelente oportunidad para captar una dirección de correo electrónico o hacer que el usuario realiza alguna acción ¡No la pierdas!
• Orientación sobre dónde empezar: Este es un elemento de diseño tan simple y, a la vez, tan importante. Cuando alguien nuevo llega a tu página web, blog o tienda online, es tu trabajo guiarle sobre dónde debe ir a continuación (una forma muy habitual de hacerlo es crear una página de «Primeros pasos en mi sitio web» para que los nuevos visitantes sepan con qué contenido tienen que empezar y dónde encontrarlo).
• Prueba social: Si has trabajado con marcas significativas, has contribuido en publicaciones conocidas o tienes testimonios sorprendentes de las personas con las que trabajas o has ayudado inclúyelas en la página de inicio. Cuanto más rápido construyas una credibilidad y confianza con el usuario mejor.
• Muestra tu personalidad: Aunque siempre depende del tipo de producto o servicio que ofrezcas y quién lo ofrezca, muestra a todo el mundo tu personalidad siempre que puedas. Si tienes un blog personal, incluye una foto. Si eres un negocio, crea una página de inicio que muestre tu visión, misión y conjunto de valores.

La página de inicio es esencial para crear un primer impacto positivo en el usuario. Incluye el mensaje, foto o vídeo que creas necesario para conseguirlo y que invite a «seguir navegando» por tu sitio web.

#2 Crea un manual de identidad corporativa para tu marca

Tu sitio web 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:

• Una breve versión de la historia de tu marca.
• Una tipografía primaria (y otra de respaldo).
• Códigos de color HEX de tu marca.
• Logotipo y variaciones del mismo (y cómo usarlos).
• Imágenes, estilo de fotografía y esquemas de color.
• Estilo de escritura y tono de voz a utilizar.

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.

Tu página web, blog o tienda online debería ser una extensión de tu marca. Por ello, necesitas crear una guía de estilo que se adapte a tu marca, tono y personalidad.

#3 Utiliza el espacio en blanco y provoca una lectura más ordenada

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 estás 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.

Para ayudar a tus lectores a navegar por tu sitio web (y contenidos), permite que sus ojos respiren y deja suficiente espacio en blanco en determinadas zonas. Yo uso esta técnica, pero con imágenes que ayuden a entender el texto. Queda algo más recargado, pero también alegra a la vista y permite descansar la mirada unos segundos, lo justo para empezar una nueva sección.

#4 Tu diseño debe adaptarse a todos los dispositivos móviles

No lo decimos nosotros, 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. ¡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 sitio web ebe adaptarse a todos los dispositivos posibles.

Ya te habíamos 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.

Ofrecer a tus usuarios un sitio web multidispositivo es esencial en los tiempos que corren. De hecho, en nuestros proyectos damos más importancia a la versión móvil o responsive de la web, ya que sabemos, con seguridad, que va a ser la que más visitas va a recibir.

#5 Pon a disposición del usuario una navegación rápida y sencilla

Solíamos 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 empezamos a diseñar y escribir nuestra página web, pasamos por alto algunos de los fundamentos más importantes de la navegación. Ahora, en retrospectiva, tiene mucho sentido que nuestra tasa de rebote fuese mucho mayor de lo que debería ser. Por ello, hemos reunido algunas claves que deberías considerar al diseñar la arquitectura de navegación de tu sitio web:

• Pon orden en el menú superior: Ordena el menú principal, que sea muy claro y simple sobre lo que ofrece tu sitio web, para que tus usuarios de cualquier nivel (novatos y avanzados) puedan encontrar lo que quieren.
• Incluye una sección de «primeros pasos»: En esta página quieres proporcionar una ruta de entrada para que los nuevos visitantes pueden hacerse a tu web rápidamente. Por ejemplo, ¿qué entrada o página debería leer primero, segundo y tercero? De esta manera creas una experiencia única para tus usuarios.
• Incluye un despegable con las categorías más importantes del sitio web: Si tienes bien categorizado el contenido de tu web, esta técnica es muy interesante, ya que el lector va directamente al contenido relacionado que realmente le interesa (no te recomendamos que sean más de 10).
• Incluye una sección de recursos y herramientas: A la hora de crear y gestionar un sitio web, hay muchas veces que las personas se olvidan de que hay que monetizarlo. Una buena manera de hacerlo es añadir una sección con las herramientas que sueles usar y afiliarte a las mismas para sacar un dinero extra.
• Incluye una sección más personal: Las páginas web, blogs y tienda online están hechas por personas, y la gente quiere saber quién está detrás. Añade una sección donde expliques tu historia, tus objetivos y valores.
• Incluye llamadas a la acción: Añade CTAs, enlaces internos o enlaces a contenidos relacionados en tu barra lateral (preferiblemente derecha) y al final de los artículos de tu blog. No quieres que alguien lea un post completo y luego salga de tu sitio inmediatamente ¡Dale una razón para quedarse!

Sobre este punto queremos 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 equivocarnos, que es el mejor menú que hemos 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.

Dedica tiempo a pensar una estructura para tu sitio web porque mejorarás la experiencia de usuario de tus visitas y potenciarás el SEO.

#6 Evita y elimina rutas sin salida

¿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áginas 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.

Search Console debe revisarse todos los días y en profundidad una vez por semana o más. Los datos que arroja se pueden utilizar para mejorar la estrategia de marketing, prevenir un ataque de enlaces negativos, ayudarte a controlar cómo rastrea Google tu página web, y mucho más. Hay una gran cantidad de información en estas herramientas y el uso adecuado puede ser la diferencia entre el fracaso y el éxito.

#7 Utiliza caras para humanizar tu marca y que sea más sincera

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 dejamos algunos consejos para hacer más humano tu blog y aumentar el engagement y la conexión que tienes con tus lectores:

• Completa tu biografía y la de cada autor (si tienes un blog multiautor) que contribuya en tu blog con una foto y un breve resumen sobre quien es y a qué se dedica.
• Muestra, de forma clara (que sea muy visible), el total de comentarios y las veces que ha sido compartido en las redes sociales en cada artículo y, a ser posible, en la página principal del sitio blog (ambos son buenos medidores del engagement y animarán a tus visitas a leer tus contenidos).
• Incluye imágenes sobre ti, tu personal, tu familia o tus clientes siempre que puedas, como mínimo, en la página «Acerca» o «Sobre ti» (el tipo de fotos depende de ti, pero intenta que se te vea bien a ti o a las personas que salen).

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

También te dejamos otro ejemplo. En este caso MensandBeauty, un blog de belleza y moda para hombres muy interesante. En este caso, gracias a un diseño muy cuidado, te cuenta, brevemente, quienes son los que están detrás, uniéndolo con otras opciones que vienen al cuento.

¿A quién no le gusta ver una cara sonriente? No importa el idioma que hables, ver una cara de una persona sonriente, sean cuales sean sus rasgos, funciona. Hace que tu diseño web sea, a la vez, familiar y agradable, dotándole de una cercanía que hace que puedes conectar con tus usuarios y llegar a su «corazoncito».

Un estudio realizado por Caltech demostró que el cerebro tiene unas células que responden únicamente a las caras. Esta parte del cerebro se llama Fusiform Gyrus y ningún otro objeto, forma o elemento puede hacer que se equivoque. Ahora, ¿cómo se puede conseguir activar esta parte del cerebro de tus visitantes? Hay muchos ejemplos, ya que hay muchas maneras de utilizar las caras en el diseño web.

Puedes visualizar y provocar emociones, crear confianza (utilizando fotografías de empleados), comprometer a tus visitantes (con alguien que los mire) y mucho más. ¿La mejor práctica? Tener una imagen de alguien que mire directamente (o esté apuntando hacia) lo que sea que quieres que el visitante preste atención.

Sé cercano con tu audiencia y humaniza al máximo la experiencia. De esta manera podrás despertar sentimientos en ellos que harán que prefieran tus productos o servicios.

#8 Diseña una página «sobre ti» irresistible

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, hemos hecho un listado de lo deberías incluir tu página «acerca»:

• Muestra sólo la información clave para que la página sea fácil de entender y navegar (la idea es que el usuario la pueda escanear en pocos segundos).
• Muestra tu lado más personal utilizando imágenes para poner cara a tu marca (una imagen tuya o la de tus empleados y el entorno de la oficina puede funcionar muy bien).
• Cuenta la historia de tu negocio y cómo y por qué surgió para ayudar a tus lectores conectar contigo y con tu marca (recuerda que eres de carne y hueso, no un superhéroe).
• Toca la fibra sensible y explica detalladamente los retos que ayudas a superar a quien está «en tu círculo».
• Olvídate de la jerga profesional y utiliza un tono único de voz y estilo de escritura, que sea conversacional y cercana.
• Incluye un formulario de contacto (o un enlace a la página de de contacto) para que los interesados puedas contactar contigo de manera directa.
• Esfuérzate por que la página sea estéticamente agradable (espacios en blanco y una marca coherente con el resto del sitio web), para que la experiencia de usuario sea la mejor.
• Utiliza el humor para ser provocar impacto en el usuario (y en su memoria, ya que aunque el recuerda de marca) e incluye una broma o dos.
• Incluye pruebas sociales y deja un espacio a los testimonios y opiniones de tus clientes o lectores (también puedes añadir casos de estudio o comentarios que se hayan hecho en tus perfiles sociales sobre tu marca).
• Incluye llamadas a la acción y no te pierdas la oportunidad de capturar una dirección de correo electrónico.
• Muestra a tus visitas qué hacer después incluyendo enlaces a los artículos más recientes del blog, las últimas notas de prensa o la página «primeros pasos» a dar en ti sitio web.

Crea una página que hable sobre ti o tu negocio, donde des detalles sobre quién eres y por qué haces lo que haces. De esta manera podrás empatizar con el usuario y conseguir que se convierta en tu fan o seguidor.

#9 Optimiza todas la páginas con llamadas a la acción (CTAs)

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? Hemos 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:

• Formularios de suscripción a tu lista de correos electrónicos.
• Descargas de recursos como ebooks, plantillas o checklist.
• Contadores de las veces que se ha compartido el contenido en redes sociales.
• Ofertas exclusivas o temporales de tus productos o servicios.
• Enlaces a productos o servicios de afiliados.
• Textos animando a tus lectores a comentar una publicación.
• Enlaces a otras páginas internas de tu sitio web.
• Enlaces externos a recursos valiosos o páginas de socios.

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.

• CTA al final de cada artículo del blog: Es de cajón, el usuario lee tus interesantes artículos y, cuando termina, le lanzas un call to action para que se suscriba, se descargue en formato pdf el contenido, se descargue un ebook sobre la temática gratis y un largo etc. El blog de HubSpot es un punto de referencia en este sentido, ya que, dependiendo de donde te encuentres en el customer journey determinará qué CTA mostrarte, lo que hace que las conversiones se disparen.

• CTA dentro del contenido: Puede enlazar palabras clave específicas a otras páginas (internas o externas) o incluir un banner o imagen prediseñada dentro del contenido de tus posts. Un buen ejemplo de esta manera de incluir llamadas a la acción es el blog de Backlinko, de Brian Dean.

• CTA de las redes sociales: En este caso tienes varias opciones. Por un lado puedes añadir llamadas a la acción con la funcionalidad Click-to-Tweet dentro del contenido, mostrar botones para conectar en las redes sociales en la parte superior, barra lateral derecha o footer o utilizar plugins para compartir el contenido en las redes sociales más importantes.

• CTA emergente en una parte visible del sitio web: Las ventanas emergentes y las cajas deslizantes (desde los lados) están diseñadas para aumentar las tasas de conversión. Plugins de WordPress como Sumome facilitan esta tarea e incluyen estas llamadas de acción de una manera muy fácil y que no moleste a tus usuarios. Un buen ejemplo lo  puedes encontear en el blog de MaxCF.

• CTA en la barra lateral derecha: Aunque somos de los que opinan que esta barra lateral sobra, ya que es un foco de «distracciones», los blogs que todavía la mantienen pueden usarla para añadir llamadas a la acción como los posts más populares, los enlaces a las redes sociales, un optin para suscribirte a la newsletter, el feed del blog y un largo etc. Bluewire Media lleva esta técnica a la maestría.

• CTA en un banner superior: Otro sitio perfecto para incluir un call to action y obtener una alta conversión es en un banner en la parte superior de la página (encima del texto y debajo del menú de navegación principal). Puedes incluir el último post que has publicado, un curso gratuito que tengas como lead magnet y un largo etc.

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 yo incluyo una gran variedad del llamadas a la acción en mi blog, siempre intento cambiarlos y optimizarlos de vez en cuando con imágenes y textos creativos y convincentes. En esta lista de tareas diarias de un blog puedes ver varios CTAs y la manera de ajustarlos para que estén visualmente alineados con tu marca.

#10 Incluye pruebas sociales de tu marca siempre que puedas

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. De todas maneras ¿qué tipo de prueba social puede ayudar a hacer el diseño de mi sitio web más eficaz y dónde la incluyo? Déjanos explicártelo en varios puntos:

• Testimonios de clientes o expertos del sector: Los testimonios son una gran manera de ofrecer cierta credibilidad a los usuarios que visitan tu sitio web. Podemos ponerte muchos ejemplos, pero nos quedamos con LifeStyle Al Cuadrado, que usa la prueba social para fortalecer la conexión con el usuario en su página de inicio. De todas maneras, también deberías utilizar los testimonios en las páginas de ventas, la barra lateral derecha o en la página sobre ti.
• Reviews de tus productos y servicios: Amazon es un ejemplo claro en el uso de está técnica de marketing. Si, por ejemplo, escribes un libro para venderlo en Amazon, la probabilidad de que salgas en su lista de «los mejores vendedores» está determinada por una serie de factores, entre ellos la cantidad de comentarios positivos de los usuarios. ITunes tiene un algoritmo similar para sus podcasts.
• Enlaces a publicaciones de medios: Utiliza el logotipo de medios importantes (así será más atrayente) para mostrar los medios que han hablado de tu marca. Por ejemplo, muchos bloggers escriben para marcas muy importantes en sus respectivos nichos como una forma de impulsar su propia autoridad. Por otro lado, si tu marca hace buenas migas con medios conocidos, puede que quieras incluir estos logotipos en tu sitio web. El una buena manera de utilizar ciertas marcas para hacer mejor la tuya.
• Total de suscriptores y seguidores en las redes sociales: Usa estos números para reforzar tu credibilidad como líder en tu sector. Son muchos las página web y blogs que usan este método para atraer nuevos suscriptores y seguidores, y hemos de decir que funciona muy bien. De hecho, puedes añadirlo en la barra lateral y será visible por cualquier visita.
• Historias fidedignas de tus clientes: Este método ayuda a profundizar en la creencia que tienen tus clientes potenciales sobre lo que ofreces. La idea es «calcar», de la forma más exacta posible, el reto que han tenido, tienen o tendrán tus clientes y cómo resolverán ese desafío con tu ayuda. De esta manera, otras personas que tienen un desafío similar podrán verse superándolo. Es común usar este tipo de prueba social en una serie automatizada de correos electrónicos, además de que aportan mucho valor al diseño de tu blog en una publicación o en una página de estudios de casos y testimonios.
• Total de veces que se ha compartido un post o sus comentarios: Usar este número hará que tus lectores sepan si merece la pena leer ese artículo. Además, si el contenido ya ha sido compartido o comentado por muchas personas, esto «obligará» en cierto modo a hacer click en el enlace y leerlo. Por lo tanto, es importante que muestres, de forma clara y visible, el número total de comentarios y las veces que se ha compartido el contenido en las redes sociales.

Más del 50% de los consumidores indican que son más propensos a comprar en un sitio web si tiene opiniones y revisiones de sus productos o servicios, por lo que empieza a usar esta técnica en tu sitio web.

#11 Utiliza diferentes tipos de contenidos

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 nos sigues desde hace tiempo, sabrás que tenemos predilección por la listas (de hecho, tenemos una web dedicada a las listas). Son, simplemente, nuestros 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.

Si vas a dedicar tiempo y recursos a hacer vídeos de calidad para tu web, no cometas el error de elegir Youtube. Puede parece la mejor solución al principio, pero, con el tiempo, te darás cuenta de que muestra poca profesionalidad y termina con fragmentos de contenido externo después de que un usuario vea el vídeo (con lo que puede acabar en otro sitio). Wistia o Vimeo son alternativas mucho más profesionales.

#12 Utiliza fragmentos de tus contenidos en la página principal

En la página principal, 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 «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 explicamos en varios puntos:

• Reduce el contenido duplicado: Duplicar contenidos dentro de tu sitio web puedes acabar en una penalización de Google por una de sus algoritmos. Si muestras, por ejemplo, una secuencia de publicaciones completas en la página principal del blog (algo muy habitual en muchas bitácoras) así como los enlaces a la publicación real, esto puede ocasionarte un problema. Lo mejor es ser breve y obligar a hacer click para leer la versión completa.
• Reduce tu tasa de rebote: Si un nuevo visitante llega a la página principal del blog y puede leer todas tus publicaciones, no le estás dando ninguna razón para hacer click en ningún otro sitio. En su lugar, si le «obligas» a hacer click en una publicación mostrando sólo un fragmento, esto reduce la tasa de rebote para la página principal del blog. La tasa de rebote es un factor SEO que los motores de búsqueda tienen en cuenta al clasificar las páginas.
• Permite a los lectores escanear el contenido: La entrada más reciente del blog puede no interesar a todos los usuarios. Sin embargo, pueden estar interesados ​​en un post que hiciste hace 3 o 4 meses. Al mostrar vistas previas, puedes mostrar más contenido en la parte superior de la pantalla, lo que permite a los lectores buscar el contenido que deseen.

Al utilizar porciones de tus entradas en diferentes sitios de tu sitio web podrá enriquecer el contenido y mejorar el diseño web, además de que evitas el contenido duplicado.

#13 Haz visibles y facilita los comentarios en tu blog

En cualquier sitio web (sobre todo en los blogs), 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 ávidos lectores de blogs, nos encanta la oportunidad de conectar con otros bloggers a través de su sección de comentarios. De hecho, nos atrevemos a decir que ayudan al posicionamiento web (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 analizamos ciertos blogs, los posts con más tráfico y mejor posicionados son los que más comentarios tienen (alguna relación habrá). Hay algunas cosas a considerar al diseñar la sección de comentarios del blog:

• Facilita a tus lectores el proceso de comentar, de manera que puedan publicar un comentario en menos de 1 minuto (no te recomendamos forzar a que se registren).
• Ofrece la posibilidad de incluir un enlace al sitio web de quien comenta (este enlace está incrustado, normalmente, en el nombre de usuario), para animar a que comenten más.
• Incluye el número total de comentarios en los fragmentos de la página principal de tu blog para propiciar la conversación con otros usuarios y aumentar el engagement que recibe tu post.
• Ten controlados tus comentarios en todo momento para evitar que entre spam y los pingbacks (Akismet es un plugin gratuito de WordPress que te ayudará a reducir el spam en tus comentarios).

Existen muchos plugins para realizar este cometido. Entre todos ellos recomendamos el sistema de comentarios de Disqus, que ya hemos usado en otros blogs. 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 suficiente 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.

Facilitar los comentarios en tu sitio web (en la zona del blog) puede acarrear más trabajo, pero también mejor posicionamiento para los artículos mas comentados y un feedback «gratuito» que podrás aprovechar para otros fines.

#14 Fomenta que los usuarios compartan tu contenido en redes sociales

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 más utilizadas). De todas maneras, desde la perspectiva del diseño web, te vamos a dar una serie de consejos que deberías seguir al respecto:

• Utiliza plugins para agregar botones sociales: Si lo haces, animarás a tus lectores a compartir tu contenido. Uno de los botones sociales para compartir contenido social son los que flotan a medida que el lector se desplaza hacia abajo. Nosotros usamos Easy Social Share Buttons en mi blog por su versatilidad, precio y opciones (te lo recomendamos, es muy bueno, bonito y barato), pero existen muchos más.
• Incluye bloques Click-to-Tweet dentro del texto: Colocar bloques «tuiteables» puede hacer que crezcan tus seguidores de Twitter (importante para cualquier blogger), además de que ayudan a tus lectores a tuitear frases preparadas que impactan en esta red de microblogging (si quieres un ejemplo, baja hasta el final del post). Si no quieres estar instalando más plugins y nos has hecho caso y has comprado Easy Social Share Buttons, este plugin incorpora esta opción de serie, sin necesidad de instalar más plugins.
• Muestra tu feed de actividad de tu perfil de Twitter o Facebook: Puedes mostrar todo lo que haces en tus redes sociales en la barra lateral (si la tienes), para así mostrar a tus lectores que eres activo en las redes y que puedan conectar contigo y puedan seguirte.
• Añade enlaces a tus redes sociales donde creas que sean relevantes: Es importante mostrar enlaces a tus perfiles sociales en ciertos sitios de tu blog. Siempre puedes añadirlos en el sidebar, el encabezado o pie de página de tu página web. Además, como consejo, puedes añadir botones sociales al final de los posts (suelen funcionar muy bien).

Las redes sociales deben estar bien implementadas en tu sitio web. De esta manera, podrás animar a tus usuaios a que compartan tus contenodos y que estos puedan ser vistos por miles de personas sin necesidad de invertir ni un duro en publicad.

#15 Elige una tipografía que haga fácil de leer tu blog

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 dejamos algunos principios imprescindibles para aumentar la legibilidad en tu blog:

• Utiliza una tipografía que sea lo suficientemente grande: La fuente tiene que tener un mínimo de tamaño para que tus lectores la puedan leer cómodamente. Desde el aspecto de diseño wev, el tamaño óptimo sería 14 pixels. Algunos de los blogs más importantes usan este tamaño, aunque siempre depende de la tipografía que hayas elegido. En nuestro caso, al utilizar Raleway, tenemos que llegar a los 16 pixels porque sino se vería muy pequeña.
• Divide tus artículos con subtítulos, puntos aparte y un índice: Si lo haces, tus lectores podrán escanear tu contenido en pocos segundos y consumir rápidamente los puntos clave . Hay muchos usuarios que consumen la información de esta manera, por lo que, si no lo haces, se irán de tu blog sin haber leído nada más que el título y la primera línea.
• Escribe titulares más grandes que el cuerpo de tu texto: Si escribes títulos con un tamaño de letra mayor que el del cuerpo de texto harás que sean más visibles y los diferenciaras del resto de la página. Deberías usar títulos que estén entre 20 y 32 pixels.
• Usa un fondo claro con un texto oscuro: La gran mayoría de blogs utilizan esta combinación, ya que aumenta la capacidad de los usuarios para comprender lo que está escrito y ayuda al ojo a no cansarse (pudiendo leer mucho más). No te recomendamos usar fondos oscuros y, si lo haces, usar una letra muy clara para facilitar la lectura.

Usar una fuente que sea legible y clara puede ayudar a personas con problemas de visión a leer mejor tus contenidos, por lo que estarías llegando a muchas más personas sin quererlo.

#16 Incluye una barra lateral derecha

Hemos mencionando el sidebar o la barra lateral derecha del blog bastantes veces durante esta guía del diseño web. Aunque nosotros no lo usamos, 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? Te lo explicamos por puntos:

• Llamadas a la acción (CTA): El Call to Action más importante, sin lugar a dudas, debe estar en la parte superior del sidebar. Esto no es por conveniencia, sino porque es una de las áreas de mayor conversión de tu sitio web. Algunos CTAs comunes que podrías incluir serían un enlace para descargar un recurso gratuito, un optin para suscribirse, botones de tus perfiles sociales y un largo etc.
• Posts populares y categorías: Una vez que alguien está leyendo un artículo del tu blog, la barra lateral derecha es una gran oportunidad para que descubran más contenido (si puede ser relacionado con el que están leyendo ¡mucho mejor!). La forma más sencilla de hacerlo es incluir un widget de «posts populares o recientes» y otro de las «categorías» (sólo las más importantes).
• Feed o actividad de tus perfiles sociales: Incluyendo el feed de perfiles como el de Twitter en la barra lateral derecha permitirá a tus lectores saber qué tipo de contenido estás compartiendo en tiempo real y aumentarán las posibilidades de que te sigan.
• Prueba social: El sidebar derecho es un buen sitio para incluir logotipos de medios y testimonios de clientes que aumenten tu credibilidad. Puedes llevar esto al siguiente nivel combinando un testimonio real con un CTA.

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 nuestro lector, diluye la fuerza que envíamos 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ñadimos 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 mustzee.com.

Aunque el sidebar o barra lateral está en desuso en muchos blogs, en algunos todavía tiene sentido. Por ello, hazla atractiva e incluye los elementos más importantes de tu sitio web.

#17 Utiliza imágenes de encabezado creativas en todas tus publicaciones

Como un añadido al diseño, apariencia de tu blog y estilo de tu marca, te recomendamos 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 recomendamos 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 nuestro branding.

Crea tus propias imágenes con fotos de calidad y añade textos para que sean más virales.

#18 Ofrece menos opciones para aumentar la tasa de decisión

Los psicólogos William Edmund Hick y Ray Hyman realizaron experimentos basados en la reacción de la elección, para así evaluar la capacidad de la información cognitiva. Encontraron que, al aumentar el número de opciones, también aumentó el tiempo que tomó a los sujetos para tomar una decisión logarítmica. Una aplicación común de esta ley es un estudio de mermelada que seguro habrás leído. Si no lo has hecho, se resume en que, cuando se redujo el número de opciones en una tienda de comestibles se redujo en 18, las ventas subieron de 3% a 30%.

Entonces, ¿cómo puedes aplicar esta ley al diseño de su sitio web? En lugar de proporcionar muchas opciones a tus visitantes y abrumarlos, reduce su número ese número al mínimo. Piensa que todos los usuarios somos bombardeados con mucha información todos los días. Por lo tanto, cuando alguien visitan tu sitio web, valora su tiempo y preséntale tu oferta más atractiva y relevante. En este sentido, están los elementos específicos en los que deberías enfocarte:

• Reduce el número de campos de los formulario al mínimo: A la hora de pedir información, es mejor pedir poco y, si se da el caso, pedir más cuando ya hayas entablado una conversión con esa persona (los formularios son elementos web que suelen tener una alta tasa de abandono).
• Reduce el número de botones para compartir en redes sociales al mínimo:  Cada botón adicional para compartir tu contenido en los medios sociales en tu sitio web contribuye a aumentar el tiempo de carga, por lo que analiza en qué plataformas sociales está tu audiencia y muestra sólo esos botones oficiales (también puede utilizar mapas de calor para encontrar los botones con más clicks).
• Cada landing page tiene que tener un único objetivo: El principio «One Page. One Goal » debería ser la premisa a seguir para las páginas de destino, sobretodo cuando haya botones o CTA  (call to action) involucrados (Whirlpool aumentó un 42% su CTR en su campaña de correo electrónico después de eliminar 3 botones CTA secundarios y recurrir a un solo CTA enfocado)
• Reduce el número de elementos en la barra de navegación al mínimo: El número de opciones en la barra de navegación de tu sitio web debe servir sólo los elementos más importantes y relevantes.
• Reduce el número de elementos en los que se pueda hacer click al mínimo: La página principal, en particular, no debe contener gran cantidad de elementos en los que se pueden hacer click para evitar fugas a páginas que no aporten nada.

Un menú de navegación breve y conciso también ayudará al SEO de tu sitio web. Un menor número de enlaces desde la página principal conduce a una fluidez en la autoridad que traspasas a las páginas internas. Más enlaces significan que el link juice se diluya.

¿Qué tal si experimentas eliminando el menú de navegación de la parte superior de tu página principal? Puede enfocar la atención del usuario en tu CTA principal. Esta acción puede hacer que aumentes tus conversiones hasta más de un 100% ¡Haz la prueba!

#19 Escoge unos colores e intégralos en tu línea gráfica

El color tiene mucha influencia en lo que a evocación de la emoción se refiere. Si eres un visitante regular de mi sitio web (no vale con haberlo visitado 2 veces), estamos seguros de que asocias el «rosa» y el «azul» con nuestra marca. Todas las secciones de color son predominantemente rosas y azules (aunque también utilizo el blanco y el negro de apoyo). Pero esto no ha sido siempre así.

Hace tiempo era difícil asociar nuestra marca a un color determinado, por lo que, nos pusimos manos a la obra y, para asegurarnos de que la gente nos recuerda, cambiamos mi linea gráfica (con la ayuda de 99designs) y empezamos a poner un fuerte énfasis en la marca. Pasamos un montón de tiempo jugando con combinaciones de colores para ver lo que funcionaba mejor. Al final, después de muchas vueltas, nos quedamos con la combinación de negro, blanco, rosa y azul que ves hoy.

No es que sean colores habituales en diseño web, ya que se suele usar más el naranja, pero como el objetivo era impactar y, a la vez, diferenciarnos, después de un largo brainstorming nos decidimos por estos colores. Una vez los tenía claros, comenzamos a pensar en un nuevo logotipo. No queríamos un logotipo cualquiera, queríamos que fuese personal, amigable y acogedor, por lo que redactamos un amplio briefing y lo publicamos en 99designs.

Después de revisar cientos de diseños de hasta 60 diseñadores distintos, finalmente lo encontramos. Esta etapa fue larga y dura, pero las cosas bien hechas requieren de un tiempo y un esfuerzo que tiene que estar a la altura del producto final. Vemos muchas sitios web con logos «made in casa», y hemos de recalcar que, con muy poco, puedes lograr un impacto visual y un recuerdo de marca mucho más potentes (que, al final, es de lo que se trata).

Nuestro logo une muchas cosas buenas. Por un lado, predomina el color rosa, el cual queríamos después potenciar en el sitio web. Por otro, era moderno y sutil, ya que tiene algo de profundidad, pero nada desmesurado. Por último, tiene un icono (que da mucho juego en las redes sociales) muy intuitivo y mi nombre (que es nuestra marca personal) se lee correctamente. Teníamos claro que queríamos una marca fuerte, y escogiendo unos colores e integrándolos en la línea gráfica del logo y de la página web fue dar un salto de gigante dentro del competido mundo online.

Vamos a volver al tema de la emoción que evocan los colores. Estamos seguro de que si escribo Coca-Cola, lo asocias rápidamente con el color rojo y con una imagen de marca enérgica y fresca. Esto no es por coincidencia, detrás hay décadas de anuncios publicitarios e inversiones estratosféricas. En tu caso, con una inversión muy pequeña y dedicando tiempo a elegir de 2 a 3 colores corporativos, puedes hacer que tu marca sea recordada, para así aumentar el reconocimiento de la marca hasta en un 80%.

Eso sí, la preferencia de unos colores u otros puede diferir dependiendo del sexo y los hábitos de compra de tu usuario. Incluso la cultura y la nacionalidad pueden afectar a la preferencia por unos colores u otros. Por ejemplo, en los Estados Unidos, la mayoría de las personas asocian el blanco con el matrimonio. Pero, en la India, el rojo es el color del matrimonio. Echa un vistazo a esta infografía informativa que compartió The Logo Company, que analiza los colores que diferentes marcas utilizan y lo que significan.

Que funcione un color u otro, depende de muchos factores. Te digo esto para que no te vuelvas loco y empieces a cambiar, por ejemplo, los colores de los botones de rojo a verde, porque lees que aumentan el CTR en un 21%. Tu podrás obtener (o no) resultados similares pero, como no existe un color universal perfecto que funcione en todos los sitios web, es muy importante hacer test A/B.

Al mismo tiempo elegir una paleta de colores que coincida con la personalidad de tu marca y que sea amigable para tu público objetivo es de vital importancia. Aquí entra en juego la rueda de las emociones de Robert Plutchik, que muestra las emociones que evocan varios tonos de color., que puedes usar para elegir cuidadosamente los colores de tu logotipo.

En general, los colores de tu sitio web deben acentuar los valores de tu marca. La mayoría de los sitios web (sobre todo si hablamos de blogs) pasan por muchos cambios de diseño y, por ende, de colores. Por lo tanto, si no has pensado los colores de tu sitio web, es un buen momento para empezar. Y piensa que no siempre un color azul, naranja o verde es el mejor, ya que un simple blanco o un negro puede ser, muchas veces, la mejor opción.

Google es una empresa que ha tenido mucho cuidado con su línea gráfica. Ha elegido los colores en consonancia con su marca, y ha creado una guía visual muy interesante que debes conocer cuando elijas los colores de tu sitio web.

#20 Utiliza la asimetría para llamar la atención de tus usuarios

Si eres como la mayoría de las personas, no te gusta el desorden. Por ello, percibes todos los objetos con una simetría alrededor de su centro. La psicología de la Gestalt (también psicología de la forma o psicología de la configuración) es una corriente de la psicología moderna, surgida en Alemania a principios del siglo XX, cuyos exponentes más reconocidos fueron los teóricos Max Wertheimer, Wolfgang Köhler, Kurt Koffka y Kurt Lewin.

El término Gestalt proviene del alemán, fue introducido por primera vez por Christian von Ehrenfels y puede traducirse como «forma», «figura», «configuración», «estructura» o «creación». El axioma pretende explicar que la organización básica de cuanto percibes está relacionada con una figura en la que te concentras que, a su vez, es parte de un fondo más amplio, donde hay otras formas. En otras palabras, todo lo percibido es mucho más que información llegada a los sentidos.

Entonces, ¿cómo puedes aprovechar este principio en el diseño web? Tu audiencia comprende rápidamente la información, eso sí, siempre y cuando la transmitas de una manera simétrica y ordenada. Por otro lado, cuando esa composición da sensación de desorden o desequilibrio, entonces el usuario puede tener dificultades para concentrarse y captar el mensaje. Sin embargo, puedes aprovechar esa asimetría para llamar la atención hacia elementos importantes de tu sitio web.

#21 Provoca una reacción visceral hacia tu marca en tus usuarios

Cuando decíamos que un sitio web elegante no obtiene buenas conversiones no hemos compartido el 100% de la información contigo. En ocasiones, puedes ganarte a la personas y hacer que amen tu marca haciendo trabajar su sistema nervioso central. Si lo consigues, las personas sienten que tu sitio web es genial y nunca tendrán suficiente. ¿De qué eatamos hablando? ¡Muy fácil! Provocar una reacción visceral.

Todos reaccionamos, subconscientemente, a ciertas cosas. Cómo nos afecta es muy parecido en todos los géneros y demografía, porque estas reacciones están arraigadas en tu cerebro. Por lo tanto, ¿cómo puedes evocar una reacción visceral en tu sitio web y hacer que la gente quiera experimentarlo a menudo? Una manera sencilla es aprovechando las imágenes coloridas.

AirBnB, por ejemplo, utiliza hermosas imágenes para complacer a sus visitantes y crear una gran primera impresión. En nuestro caso hacemos algo muy parecido, pero usando imágenes que, aunque son muy coloridas y agradables para el ojo (ya que uso a personas), también explican el texto que les rodea. La idea es dar un apoyo y conseguir que la lectura sea mucho más fácil, pero también placentera y sistemática.

Ya te hemos hablado de la importancia de los colores, las fuentes y las formas en el diseño web. Elegirlos cuidadosamente te ayudará a obtener la confianza instantánea de tu audiencia. Del mismo modo, también puedes considerar ir más allá y crear experiencias memorables y divertidas en torno a los elementos de tu sitio web.

#22 Aprovecha el comportamiento humano como catalizador de tu diseño

Al construir un sitio web es importante que tengas en cuenta a las personas. A la hora de crear y estructurar una página web, blog o tienda online es vital que conozcas el comportamiento humano y te bases en dicho conocimiento para hacer un mejor diseño. Muchas veces puede parecer que colocar un elemento web en ciertos sitios no tenga mucho sentido para ti, pero sí para tus usuarios o clientes.

Echa un vistazo a The User is My Mom, para encontrar algunas pruebas bastante divertidas y comprueba si tu sitio web está diseñado pensando en personas. ¿No quieres pagarle a alguien para que haga un test especial en tu sitio? Por qué no pedirle a un amigo, familiar o compañero que pueda ayudarte con esto y brindarte una retroalimentación inmediata.

Conclusión: Es momento de mejorar el diseño de tu blog ¿A qué esperas?

No te vamos a engañar, no existe el diseño del sitio web 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 hemos 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 hemos hablado de blogs, puedes aplicarlo a cualquier tipo de página web.

Tenemos claro que nuestro blog no es perfecto, pero estamos dispuestos a aprender de mis errores, de los demás y seguir mejorando sin con el tiempo. Espero que decidas emprender un viaje parecido, porque estamos seguros 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 pedimos es que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero nos alegraremos mucho de leerlo y responderlo.