Aeromental v5.3: Google Plus Circles y mejoras del diseño

@ 18 . noviembre . 2011

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:

Badget Google Plus Circles

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:

widget Google Plus Circles widget Google Plus Circles

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.

cabecera Aeromental Search

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:

Aeromental Botón CSS3 shadows

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:

Botones redes sociales

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.

Comentarios Aeromental

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]
Blog Aeromental v5.3 etapa 1

Etapa 2 [Zoom]
Blog Aeromental v5.3 etapa 2

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]
blog Aeromental V5

Y comparando con el mismo post del Cisne Negro V5.3 Light Grey Bunny se ve así: [Zoom]
Aeromental V5.3 Light Grey Bunny

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

DanielSemperAutor: Daniel Semper, fanático de la tecnología y sus usos sociales, cinéfilo geek, al menos veo una película por semana, innovador en Front-End y activo lector de comics. En mis tiempos libres soy ingeniero y estudio una maestría en Sidney en la universidad de UTS. Me puedes contactar en: twitter, Google Plus.
e-mail: hola @ danielsemper.com

Noticias Similares

  • Oficientes

    Muy bonito, me encantó el diseño y también el empeño que pones en mejorarlo. Felicitaciones!

  • Alejandro

    Mmn, hay cosas que me gustan y cosas que, vayamos de arriba a abajo, primero, lo del buscador y su efecto cuando pones el cursor es genial :D y los enlaces de Twitter, Facebook, etc son MUY útiles pero siempre echare de menos al: “El Blog Favorito de Tony Stark” (y) así que seria una gran característica por otra muy útil así que a la cabecera un (y) ,luego en lo que dice “Somos un blog…..” esta muy bien también, Y luego el primero post, todo me gusta pero plomo??!! Se ve muy (y) pero el fondo blanco me encantaba, le daba animo con los efectos con CSS3 que hiciste de “Seguir Leyendo” y todo eso, el plomo le da seriedad y se ve bien pero el blanco alegraba Aeromental… :D seguidamente los comentarios, al principio no me gustaba ni un poquito que se cambie la forman y fuente de letra pero si lo veo bien se ve cool, así que un gran (y) pero me hubiera gustado mucho que Daniel, habilitaras la opción de poder responder a otros comentarios hasta unos mmm…. 3 niveles, en las instrucciones para los comentarios se ve bien (y) y finalmente lis widgets de la parte derecha, lo del recuadro con las tres redes, excelente Daniel (y)

    De forma general me gustan TODOS los cambios a Aeromental menos el fondo plomo porque como ya dije, se ve bien y serio, pero el blanco le daba alegría a Aeromental. :D

    Yo le daría una 9/10 a todos los cambios, pero Daniel solo es mi opinión. :D

    PD: Daniel, me hubiera gustado mucho que añadieras el logo de Aeromental o favicon (No esoy seguro de su nombre perO me refiero a la “A” azul en un cuadradito que sale cuando termina de cargar.

    Saludos, Alejandro ;)

  • http://www.aeromental.com/ DanielSemper

    Alejandro:

    El efecto de seguir leyendo, sigue con su respectiva animación.

    Sobre los comentarios anidados, un día que quise poner eso intente activarlos, pero luego de varias horas codificando fallé en el intento, nunca pude conseguir que se moviera el área del formulario al presionar responder. Por otro lado, creo que en un 60 a 80% de las veces la gente responde a un comentario antiguo más para insultar o burlarse, entonces ganamos menos agresividad, y además con comentarios sin anidar nos parecemos a Facebook, que por defecto ya es algo que la gente adopta como un estándar por ser tan común su arreglo de comentarios.

  • Alejandro

    Bueno ok Daniel, no importa, de todas formas se ve genial!! :D

  • KILLER_INSTINCT

    jajaja!!… “nos parecemos a Facebook” :D, facebook lo hace por que
    se ve más estético y simple; no por que no puede hacerlo xD

    El fx del brillo se llama Glow por si no lo sabias.

  • http://www.aeromental.com/ DanielSemper

    KILLER_INSTINCT:

    En realidad la palabra glow es brillo en inglés, tal como Shadow es sombra, que también es otro Fx ;)

  • jmanueloxa

    Echaré en falta las frases de la cabecera. :(

  • http://www.aeromental.com/ DanielSemper

    jmanueloxa: Dejé una en el pie de página.

  • Luis Humberto

    Esta Genial, nada mas que también extraño las frases, @DanielSemper por que no haces una convocatoria para definir nuevas frases y que vayan en la cabecera? Esas frases aleatorias son un distintivo del Blog y voto por que sean devueltas a la cabecera ;)

  • Matias

    Me gusta el nuevo diseño, es uno de los mejores. Definitivamente el color gris de fondo es mas tranqui a la vista cuando queremos leer.
    Lo único que me parece horrible es el nuevo logo, hacete algo con un buen diseño, no un logo que parece de un pibe de 10 años.

  • Neilandio

    Voy a extrañar las frases random

  • http://www.aeromental.com/ DanielSemper

    Matias:

    ¿Quéeeeeee? ¿un niño de 10 años me podía hacer este mismo estilo de logo?, y yo perdiendo el tiempo en lugar de explotar a mis primitos, ya verán que mañana los sacó del parque para que vengan a diseñar todo para Aeromental a cambio de unos GI-Joes.

  • KOLLA

    Buscar, muy buen diseñador debes.

  • Diamar

    Cuando vi tu blog por primera vez una de las cosas q me encantaron fueron los textos que giran, veo que cada vez son mas pocos, pero me alegra ver que los conserves. el gris de fondo se te agradece, y en general siento que los demás cambios mejoran bastante la cosa

    pero las frases…esas si que hacen falta :( es que eran como el mensajito de galleta china, cortos y gratamente sorpresivos :)

    saludos

  • Alejandro

    Daniel disculpame por esto pero tengo que decirlo, @Matías, estas loco o eres un &&&@:$#{?? Cada esquina de Aeromental es la conbianacion de unos largos y teduosos códigos de HTML y CSS3 ya que aunque yo ya leí 6 seis libros virtuales sobre como programar HTML y CSS3 pero aun no puedo hacer algo ni parecido al diseño de Aeromental, Daniel Semper es muy hábil y creativo (y)