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¡.