Rediseñando FranciscoAMK.com (Parte 1: Planificación)
Dentro de mis planes a corto plazo está rediseñar este sito, para recibir el año 2015 con una nueva cara, que no solo sea mejor desde un punto de vista estético, sino que también sea más estratégico y más amigable con los visitantes (o sea tú 😉 ).
Esto es algo que generalmente haría en privado, pero creo que puede ser de utilidad si comparto contigo públicamente este proceso, explicándote el por qué de cada decisión y mostrándote cómo lo llevo a cabo. Todo esto con la esperanza de que puedas sacar alguna lección o idea a partir de mi experiencia y, por supuesto, esperando que puedas compartirme algunas ideas que creas que pueden resultar beneficiosas.
Razones que motivan un rediseño
Este sitio ha pasado por varios diseños diferentes desde su creación en el 2006. Sí, este blog existe desde el 2006 y ha cambiado bastante desde entonces. En un comienzo todo lo que quería era un lugar donde poner mis dibujos y escribir cosa personales como «uff! Qué calor que hace hoy«, como casi todos los blogs de la época lo hacían.
Esto fue así hasta cerca del 2012, cuando con el lanzamiento de mi curso «Diseño web: HTML y CSS desde Cero» comencé a responder algunas preguntas de mis estudiantes a modo de artículos de blog y noté lo interesante que resultaba para mí crear estos contenidos y lo útil que resultaba para otras personas leerlos. Allí fue cuando decidí borrar todos los posts antiguos y sin importancia y comprometerme a escribir un artículo cada semana.
En cuanto a lo técnico, es algo que tampoco había tomado en serio hasta hace unos 2 años, el sitio comenzó en Blogger con una innumerable iteración de diseños bajo el link «autymangaka.blogspot.com» (AutyMangaKa era mi pseudónimo de dibujante, de ahí vienen las letras AMK). Luego, cuando descubrí que existía WordPress, traspasé el sitio a un subdominio «amk.apkestudio.com«, en donde realicé por lo menos unos 3 o 4 temas diferentes, solo para divertirme y aprender.
A finales del 2012 fue cuando me decidí a comprar mi propio dominio y darle real importancia a este sitio, creando el diseño (y el tema WordPress) que lo viste hasta hoy, sólo con la intención de que me sirviera para pubicar artículos y que se vieran «bonitos».
¿Por qué te cuento todo esto? Para dejar en claro lo siguiente: El diseño y la estructura de este sitio no tiene y nunca ha tenido una estrategia, por lo que al día de hoy con más de 51 artículos publicados y, a pesar de los cambios superficiales que he hecho recientemente, sigue siendo débil en diferentes aspectos que merecen mejorar estratégicamente.
Problemas que enfrenta el sitio hoy
Debido a esta falta de estrategia, el sitio tiene una serie de problemas bien graves que espero poder solucionar con este rediseño. Los problemas son:
1. Navegación compleja
El sitio ha crecido mucho desde su creación, en cuanto a contenido y visitas, pero la falta de planificación en su estructura hacen difícil navegar entre los contenidos, dada la cantidad de categorías creadas con el tiempo, más algunas páginas que están completamente ocultas. En este contexto, se hace complejo para los nuevos visitantes poder dar un vistazo general a los contenidos y poder encontrar lo que buscan.
2. Difícil promover cursos
Lo que me permite mantener este sitio libre de anuncios y seguir publicando contenido de calidad cada semana, es el dinero que obtengo cada mes a partir de la venta de cursos, pero dado que el diseño de este sitio nació solo para mostrar de una forma «bonita» mis artículos, no se pensó en un método de poder promocionar los cursos, mediante banners, o enlaces destacados.
3. Páginas débilmente redactadas
Varias páginas de este sitio están desaprovechando su verdadero potencial el tener solo textos básicos, escritos sin ningún tipo de objetivo en mente.
4. Su diseño ya me aburrió.
Cuando un nuevo visitante llega al sitio se encuentra con un sitio diferente al resto y que llama a su atención. Por eso creo que he recibido varias preguntas acerca de cómo hago que la cabecera del sitio permanezca fija al hacer scroll. Sin embargo para mí el diseño ya está viejo, llevo mirándolo casi 2 años y ya le veo todos sus defectos.
Revisando las páginas
El sitio posee actualmente 15 páginas, algunas de las cuales son landing pages y páginas ocultas para propósitos exclusivos como la confirmación de suscripciones al newsletter.
Las páginas que dejaré accesibles públicamente desde el menú de navegación serán las siguientes:
- Inicio: Esta página será rediseñada con el objetivo de presentar la propuesta de valor con mucho más detalle y de un modo más directo de lo que se hace hoy día, probablemente integrando elementos de validación social, llamados a la acción y presentando algunos de los cursos más valiosos directamente allí.
- Acerca de: El cambio en esta página será planteado más bien a modo de contenidos, tratando de generar una narrativa que permita presentarme de una forma más honesta y profunda a los nuevos visitantes, buscando que se lleven una impresión mucho más acabada de mí de lo que pueden obtener en la página actual que no hace absolutamente nada por generar confianza con los visitantes.
- Comienza aquí: dado que ya hay una gran cantidad de artículos publicados en el sitio, los cuales no aparecen en la primera página, creo que sería una buena idea tener una página para mostrar a los nuevos visitantes los posts más populares y más interesantes. El blog de Blogging Wizzard es un buen ejemplo, aunque su diseño no me parece apropiado.
- Newsletter: Esta página es nueva, pero creo que es una muy buena idea dedicar una página completa a explicar de qué se trata el newsletter y cuáles son sus beneficios.
- Cursos: Actualmente esta es la peor página del sitio, que solo tiene un listado de los cursos disponibles. Mi idea acá es crear una historia respecto al crecimiento de un freelance desde no saber nada hasta ser un diseñador web profesional, indicando en qué parte del proceso encaja cada uno de los cursos. cada uno de ellos tendrá su propio landing page por supuesto.
- Contacto: Agregaré al sitio un formulario de contacto para poder filtrar los mensajes recibidos. Algo como lo que tiene Chris Lema en su sitio, creo que me vendría bien. Aún estoy en la duda de si debería agregar la posibilidad de contratarme para 1 hora de consultoría. ¿Qué crees tú? ¿Usarías este servicio?
- Blog: La parte esencial de este sitio debería recibir una gran intervención con el objetivo de facilitar el consumo de los contenidos. Probablemente vuelva a la estructura estándar para el listado de artículos, mostrando uno sobre el otro con un sidebar al lado derecho en donde poder destacar alguno de mis cursos y entregar algún otro tipo de información y con el contenido centrado en una sola columna al ver el detalle de un post. En este sentido me estoy inspirando en el blog de WooThemes. Aunque para ser honesto también me tienta la idea de hacer algo más fuera de la norma como el blog de HelpScout. ¿Qué crees tú que sirva más aquí?
Revisando las categorías
Uno de los puntos que más complica la navegación en el sitio actualmente es la falta de organización de las categorías ya que hay una serie de ellas que no sirven para separar el contenido de una forma apropiada.
El listado actual luce así:
Luego de hacer un repaso general por el contenido del blog pude notar que el material se puede dividir básicamente en 4 temáticas: WordPress, Diseño Web, Negocios y Personal. Estas 4 temáticas son tratadas de 2 formas diferentes, pueden ser artículos de tipo tutorial o artículos de tipo análisis/reflexión.
En síntesis, las categorías del blog serán:
- WordPress
- Diseño Web
- Negocios
- Personal
- Tutoriales
- Reflexiones
Así por ejemplo, cada artículo debería tener 2 categorías. Este artículo por ejemplo, debería encajar en las categorías «Diseño Web» y «Reflexión«.
Acerca del diseño
En cuanto al aspecto estético del sitio me importan principalmente 2 cosas:
- Simplificar y reducir los elementos visuales innecesarios tanto como sea posible, eliminando cualquier distracción y aplicando minimalismo.
- Mejorar y hacer más amigable el proceso de consumir el contenido, a través del uso de tipografías limpias y colores que faciliten la lectura.
En cuanto a la inspiración, creo que el sitio que más me ha «volado la cabeza» recientemente es el de Medium tanto en su app como en la web. No por que su diseño sea precisamente espectacular, sino por cómo consiguen entregar una experiencia de lectura tan satisfactoria con tan pocos elementos.
Bajo esta lógica es que he decidido inclinarme por el uso de una tipografía más grande y de tipo serif para los contenidos. Tratando en lo posible de evitar que el sitio se parezca a medium.
Otros diseñadores que han inspirado el camino que quiero tomar con este rediseño son Paul Jarvis, cuyo sitio me parece simplemente genial, y Brian Gardner, que es el creador de StudioPress, quienes trajeron a la vida a Genesis Framework. En este caso el diseño suyo que más me inspira es el de Unfiltered.
¿Qué será lo próximo?
Ok, esto es todo por hoy. En un próximo artículo continuaremos navegando en este proceso de rediseño, espero, ya viendo wireframes, bocetos y propuestas de diseño reales.
Por el momento me gustaría saber si tienes alguna idea o recomendación que crees que debería tomar en cuenta. Sólo déjame un comentario más abajo y charlamos.
Un abrazo,
@FranciscoAMK