Ya varios lectores asiduos se habrán dado cuenta de los leves y progresivos cambios en el diseño de Aeromental. En esta ocasión realizados para mejorar la lectura, optimizar la navegación, mejorar la distribución de las herramientas, y actualizar el diseño con un toque de diferenciación.
Veamos las novedades de Aeromental v5.3 (Nombre clave: Light grey bunny):
Badge con Google Plus Circles
En la barra lateral hemos quitado el cuadro de la Fan Page de Aeromental en Facebook y en su lugar hemos puesto 3 recuadros pequeños para las Fan Pages de Google+, Facebook y twitter, en una distribución muy usada por varios blogs, para así unirnos a algo que visualmente es casi un estándar para ubicar estos botones:
La primera caja, como podrán ver permite que un usuario de G+ agregue a Aeromental directamente a uno de sus círculos sin abandonar la página y sin entrar a G+, de la siguiente manera:
Una vez agregado se pinta el botón de verde mostrando el nombre del respectivo círculo.
Este badge con los Google Plus Circles esta disponible (si quieren crear uno) aquí:
developers.google.com/+/plugins/badge/
Mejoras en el diseño
La cabecera es más útil, hemos dicho adiós a las frases aleatorias y en su lugar ahora tenemos al buscador del blog (que antes iba en la barra lateral) ubicado en una posición más accesible e importante. También están los enlaces a Twitter, Facebook, Google+, y RSS.
En una segunda instancia, el botón de buscar de ser sólo naranja ha sido mejorado visualmente con sombras y brillos (realizados únicamente con CSS3), se ve más moderno y además irradia un brillo si pones el cursor encima:
Debajo del post, en lo que personalmente llamo el PowerBox, siguen los botones sociales (estrenado nuestro G+), pero ahora les acompaña el buscador de Google, para dar mejores opciones de quienes quieren ver algo más con este buscador que acepta errores ortográficos:
El diseño de los comentarios también se ha mejorado considerablemente, ocupan menos espacio verticalmente (ahorrando scroll) y traen un interesante efecto de sombra en movimiento (con CSS3) al poner el cursor encima. También les recomiendo que vean el efecto del logotipo principal.
Aeromental v5.3: Gris
Por último el cambio más fácil y a la vez el más perceptible, es el color de fondo del blog y el resaltado del título principal.
El fondo principal del blog pasó de ser blanco a gris, para mejorar la lectura sin cansar nuestra vista con el brilloso blanco. Al mismo tiempo adquirimos un toque de originalidad puesto que la mayoría de los blogs de tecnología elige directamente un fondo blanco #FFFFFF (como Engadget, TechCrunch, Mashable, FayerWayer).
El sidebar esta con un interesante toque de profundidad, y el título principal esta resaltado, junto con un ad y los botones sociales, en un recuadro casi blanco #F9F9F9 (una vez más evadimos el blanco puro).
El proceso de este update en el diseño pasó por dos etapas, que podrán observar a continuación:
Etapa 1 [Zoom]
Etapa 2 [Zoom]
Como siempre espero que los cambios sean del agrado de la mayoría.
Predecesores
Si te pica la curiosidad, Aeromental V5.0 Light Bunny se veía así: [Zoom]
Y comparando con el mismo post del Cisne Negro V5.3 Light Grey Bunny se ve así: [Zoom]
La versión 5.2 traía la novedad de los thumbs: Aeromental V5.2
El historial completo de todas las versiones se puede ver en el post de Aeromental V5.0