Landing, por Don McCullough

Una de las palabras que encontramos con más frecuencia cuando nos adentramos en el fascinante mundo de los blogs es: ”Landing Page”.

Pero, ¿Qué diablos es eso?: Una “landing page” es una página donde ”aterrizan” los visitantes en nuestro sitio web, desde diversas fuentes; como pueden ser:

• buscadores.
• redes sociales.
• campañas de email marketing.

Este tipo de páginas, se diseñan específicamente para provocar ciertas reacciones en los visitantes:

• comprar un producto.
• suscribirse a nuestra lista de correos.
• descargarse un archivo.
• leer un artículo.
• algún tipo de interacción.
• etc….

Ahora que tenemos más o menos claro, lo que es una “landing page” o “página de aterrizaje”, deberíamos preguntarnos por las características que esta debería tener, como por ejemplo:

• Centrar el foco de atención.
• Crear jerarquías.
• Utilizar la aprobación social.
• Crear buenos títulos o lemas.
• Mostrar signos de seguridad.

Centrar el foco de atención

Lo primero que tenemos que definir claramente es: cuál es nuestro foco; es decir, qué es lo que pretendemos que hagan nuestros visitantes al llegar hasta nuestra página y esto tiene que quedar muy claro para el visitante.

Por lo tanto lo primero que tenemos que decidir al crearla, es que acción queremos que haga nuestro visitante.

Una vez que tenemos claro este punto, todo el diseño de la página deberá ir claramente dirigido a ese objetivo.

La manera más fácil de conseguir esto es con una llamada a la acción o call to action¹ (en inglés queda más impactante).

Crear jerarquías

Los diseños de este tipo de páginas son eminentemente visuales, por que es la manera más fácil de llamar la atención. Pero es muy importante que ese planificación visual de la página, vaya acompañada de unas jerarquías claramente establecidas (dar más importancia a unos elementos que otros y organizarlos en estructuras lógicas).

La mejor manera de entender esto es imaginar que no lo hacemos. En este caso todo los elementos de la página pesan, o dicho de otra manera, importan lo mismo, y esto es completamente contrario a nuestro interés en centrar al usuario en una acción determinada.

Las jerarquías establecen un recorrido visual que permite llevar a nuestros visitantes hasta el “call to action”; es decir el elemento que va a desembocar en la acción que queremos provocar.

Utilización de imágenes para crear jerarquías

Un ejemplo muy sencillo de creación de jerarquías, es la utilización de imágenes. Si las elegimos bien, pueden ayudarnos a centrar la vista de los visitantes sobre aquellos puntos que queramos destacar de nuestro diseño.

En este primer caso la imagen no nos conducen al botón de acción

Nada se parece tanto a la ingenuidad como el atrevimiento. Por Marcos de Madariaga

Pero en este segundo caso si

La golosina prohibida, siempre es la más apetecida. Por Marcos de Madariaga

Aprobación social

Somos seres gregarios y tendemos a repetir las acciones y comportamientos que vemos a nuestro alrededor. Esto se traduce en la llamada aprobación social, que podríamos definir como:

Un fenómeno psicológico donde la gente asume las acciones de los demás, en un intento de reflejar el comportamiento correcto para una situación dada.

Os voy a poner un ejemplo de un vídeo para que lo entendáis mucho mejor:

Puede parecer simplemente una anécdota graciosa, pero si lo pensáis bien, muchas de nuestras decisiones del día a día, están basadas en esta idea de la “aprobación social”.

¿Y como se utiliza la aprobación social en una landing page?

Muy fácil, mostrando ejemplos de otras personas que ya hayan realizado la acción que pretendemos que se repita en nuestra página. Por ejemplo utilizando testimonios de clientes satisfechos que ya hayan realizado esa compra (por poner un ejemplo) o indicar el número de personas que se han suscrito al boletín de noticias.

En definitiva mostrar acciones de otras personas para facilitar ese sentimiento de aprobación social.

Utilización de títulos y lemas atrayentes

Tenemos muy poco tiempo para enganchar a nuestros visitantes y por ello, además de un diseño visual, los títulos o headings en la jerga de internet, serán nuestros mejores aliados.

Los títulos o lemas deben ser claros y directos para ayudar a clarificar nuestros mensaje.

Luego podemos utilizar un texto más descriptivo en el cuerpo de la página, para explicar y desarrollar algunos conceptos, pero debemos de tener muy presente que los títulos deben ser claros y directos.

Signos de autoridad

Por último, tenemos que tener en cuenta todos aquellos factores que ayuden a dar seguridad a nuestros visitantes. Este tema es particularmente importante si nos dedicamos al comercio electrónico, por los que tendremos que platearnos la posibilidad de utilizar certificados de seguridad o la posibilidad de devolver el dinero durante un periodo de tiempo y sobre todo dejar claro y hacer visibles las personas que estando detrás de la página.

No hay nada que genere más confianza que saber que hay alguien a quien reclamar si algo sale mal.

Conclusión

Una ”landing page” es tu mejor aliado para empezar a rentabilizar tu blog consiguiendo acciones concretas de los usuarios (leads).

Ahora sólo necesitas visitantes a tu página para conseguir ese objetivo. Pero es, es otra historia.

1. Call to action (CTA) es, literalmente, una llamada a la acción.Mediante una palabra o frase, se busca que el usuario o cliente potencial realice una acción determinada, ya sea hacer click en un banner o un botón, realizar una compra, rellenar un formulario, etc

The post ¿Qué es una landing page? appeared first on Monta tu Blog.

El rediseñar tu página personal, te obliga a ordenar tus ideas, organizarlas y en algunos casos aceptar que estabas equivocado.

Lower case, por John Nuttall

Este artículo es un repaso de las lecciones aprendidas en el diseño de mi blog. Desde un tema premium (el que tenía antes) hasta un tema totalmente creado por mí.

Objetivo

Tenía claro que quería que el blog reflejase lo más fielmente posible como soy y lo que puedo ofrecer.

Era muy importante que quedase claro quien era la persona que esta detrás de Monta tu Blog; o sea yo.

En definitiva, el objetivo principal era el de convertir mi blog, en mi mejor escaparate personal.

Elementos de diseño

Si el objetivo era el crear mi escaparate personal, la página de inicio, o mejor dicho la parte de arriba que es lo primero que se ve al llegar al blog, debería mostrar dos cosas: A mi mismo y a mis servicios.

No es que me guste mucho mostrarme de una manera tan clara, pero creo que en este tipo de servicios es muy importante dar visibilidad a la persona que se encuentra detrás de un servicio, ponerle cara. Además, había que mostrar cuanto antes los servicios que presto por que al fin y al cabo es de lo que vivo.

Así que eso es exactamente lo que se ve nada más llegar a mi página: a mi, mis servicios y mi idea de lo que deberían ser las páginas webs y más concretamente los blogs:

Tu blog, es tu casa digital en internet

Para ello he creado una animación en HTML5 que se adaptará a las distintos tamaños de pantalla y que diese paso a un pequeño vídeo explicativo de las cosas que podía ofrecer y cómo podía hacerlo.

Paleta de colores

No puedes imaginarte la cantidad de vueltas que di al tema de los colores. Puede que trabajase con unas 20 variaciones y al final, después de mucho pensarlo decidí quedarme con esta paleta de colores:

Paleta de colores

En algunos casos he utilizado pequeñas variaciones de estos colores para mejorar la legibilidad de las distintas secciones

Tipografías

En cuanto a las tipografías he utilizado estas:

• Para los encabezados: “Source Sans Pro”.
• Para el cuerpo del texto: “Open Sans”.

Esta tipografías me gustan por su claridad y porque tienen muchas variantes de tamaños y eso me permitía mucha flexibilidad a la hora de jugar con las tipografías.

Logo

He tratado de simplificarlo y hacer que fuese lo más claro y directo posible. Quería que sólo tuviera un color para que fuera mucho más fácil reproducirlo en cualquier tipo de soportes. Además quería incluir la propia dirección de la página en el logo.

De esta manera, La propia dirección de la página quedaba bien clara en el propio logo, lo cual facilitaba las cosas a la hora de hacer tarjetas de presentación u otro tipo de productos de merchandising.

Elementos gráficos

En el proceso de investigación para el rediseño de mi página, encontré una pequeña joya: Font Awesome. Es una librería de iconos que funcionan como si fuese una tipografía, por lo que se puede escalar a cualquier tamaño sin perder la calidad de la imagen del icono.

Arquitectura de la información

La arquitectura de contenidos; es decir, la manera en la que he dispuesto los contenidos del blog. Podríamos dividirlos en tres apartados:

• Tipos de contenido personalizados.
• Categorías generales.
• Landing pages de servicios.

Tipos de contenido personalizados

Uno de los objetivos del blog era hacerlo lo más útil y sencillo de utilizar para mis posibles lectores; para ello, necesitaba crear nuevos tipos de contenido. Si nos sabes lo que es un tipo de contenido personalizado, te lo explico brevemente:

Por defecto cualquier instalación de WordPress viene con dos tipos de contenidos: páginas y entradas que constan de un titulo, un texto y una imagen destacada.

Los tipos de contenido personalizados en WordPress, permiten crear primero una arquitectura diferenciada de contenidos y por otro lado  campos específicos para necesidades concretas. Imaginemos por ejemplo que tenemos un sitio web de críticas de películas; pues bien, en lugar de hacer nuestra crítica con un título y un artículo sin más, podría sernos más útil crear un tipo de contenido personalizado que tuviera los siguientes campos:

• Una ficha de la película: Casting, año de producción, país, etc….
• Director
• Sinopsis.
• Una valoración en forma de estrellas.

En definitiva, crear un contenido que se adapte a las necesidades de nuestro trabajo concreto en el blog.

En mi caso, he creado estos cuatro tipos de contenidos:

• Preguntas y respuestas: se trata de las típicas FAQ’s que podemos encontrar en muchos sitios de internet. Es una manera fácil y sencilla de responder a las pregunta más comunes que nuestros visitantes puedan hacerse sobre vuestro trabajo. Ademas al crearlo en forma de pestañas desplegables, facilita la navegación por ellas: puedes ver el resultado aquí: “FAQ’s de Monta tu blog”.
• Portfolio: Este tipo de contenido, me sirve para mostrar mis trabajos, aunque todavía no esta terminado porque quiero añadirle más información a cada uno de ellos y todavía esta en desarrollo.
• Microconsejos: Como todo programa WordPress tiene una serie de trucos o pequeñas ayudas que ayudan enormemente. En este caso la idea no era crear campos nuevos para este contenido, sino diferenciarlos de los artículos normales. Podría haber utilizado una etiqueta o categoría para diferenciarlos. pero al crear un tipo de contenido, los diferenciaba tanto en la url que se generaba, como internamente a la hora de generar los microconsejos.
• Noticias: Noticias cortas relacionadas con el mundo de WordPress que puedan ser de utilidad a mis lectores.

Categorías generales

Además he organizado las entradas normales por así decirlo, en cuatro grandes apartados:

• ¿Por qué deberías tener un blog?
• ¿Cómo crear un blog?
• ¿Cómo mantener un blog?
• ¿Cómo obtener beneficios de un blog?

Estas cuatro grandes categorías me parece que reflejan bien las preocupaciones o dudas que cualquiera puede tener sobre este mundo. Además, he construido una página para cada una de estas categoría en las que encontrar los artículos relacionados con cada una de las categorías.

Landing pages de servicios

Cada uno de mis servicios, necesitaba una página específica y tenía que estar pensada como una autentica “Landing Page”:

Una landing page, o página de aterrizaje en español, es una página web a la que una persona llega tras pulsar en el enlace de una guía, un portal o algún banner o anuncio de texto situado en otra página web o portal de internet. En la mayoría de los casos esta página web es una extensión del anuncio de promoción, donde se explica más detalladamente la oferta del producto o servicio que se está promocionando a través de una carta de ventas. (Fuente: Wikipedia)

La estructura de la página es sencilla, pero creo que efectiva:

• Una imagen representativa.
• El enlace a un vídeo explicativo.
• Un texto contado las características del servicio, un botón con el precio que al pulsarlo abre el programa de correo.
• Un formulario para contactar conmigo.

Debajo del Capo

Con esto me refiero a todas las cosas que no son visibles para un visitante de mi sitio, pero que hace que todo funcione correctamente. El cambio fundamental en este aspecto es la utilización del framework Genesis.

Genesis es un framework que ayuda a la creación a temas personalizados en WordPress

Suelo utilizar la siguiente metáfora:

Hacer un blog es como construir una casa.

Pues bien siguiendo con la metáfora, génesis sería como tener el IKEA y el LEROY MERLIN a tu servicio: que quiero hacer una habitación nueva o amueblarlo de una determinada manera, les llamo y rápidamente lo hacen. Esto llevado al mundo del WordPress y de la programación web, significa que hay una serie de funciones que me ayudan a crear los espacios en las páginas y a “decorarlos” de una manera fácil y sencilla.

Además Genesis tiene otras dos ventajas: rapidez y mejora en el SEO:

• Rapidez: esto es una percepción propia y no tengo pruebas para demostrarlo, pero lo que si que puedo decir, es que he notado un significativo aumento de la velocidad general del sitio al utilizar Genesis. Este aumento ha sido más notable al utilizar el plugin de caché “Zen Cache”.
• Mejora del SEO: Esto necesitaría de un artículo entero, pero para simplificarlo, podríamos decir que los sitios web hecho con Genesis, permiten a Google entenderlos mejor y eso siempre es bueno para nuestro SEO.

Conclusiones finales

Como decía al principio, rehacer un sitio web personal, supone enfrentarte a toda tu estrategia de negocio y plantearte aquello que es importante y lo que no.

Hay una frase sobre el diseño que me gusta mucho: “Los diseños no se terminan, se abandonan” y es cierto. Uno podría estar rediseñando y haciendo cambios toda la vida, pero al final los trabajos hay que acabarlos. Mi sensación es que he hecho lo que esperaba: reflejar como soy y mostrar las cosas que puedo hacer.

Así que ya sabes, si quieres que hablemos sólo tienes que rellenar el formulario que encontrarás al final de cada página.

¡Hasta pronto¡.

The post Lecciones aprendidas en el diseño de un blog personal appeared first on Monta tu Blog.