RSS
Google+
Twitter
FacebookYa 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
Seguinos en Twitter @aeromental y Facebook
¿Qué es Aeromental?
Mejor bajate unos videotutoriales para aprender, lo veo mucho mejor para aprender algo. algunos de css y html recomiendo esta pag.
http://www.pizcos.net
KOLLA:
En ningún momento dije que necesito o busco aprender CSS o ver tutoriales
Entro por un post en concreto y me desvio aquí
… Alejandro deja de ser chupamedias, Kolla esta bueno eso jajaja, ya te respondieron, yo digo para que pierden el tiempo escribiendo lo que piensan si despues les dirán “En ningún momento dije que necesito o busco aprender CSS o ver tutoriales” jeje.
Ahora por lo del fondo gris es absurdo, en los blogs cómo este uno para 5min a lo mucho. poco más nytimes.com que donde si pasamos horas se pondrá de gris el fondo y disque para leer mejor jajaja. es TOntO
Emmm… como empiezo.. ejem… los cambios al parecer no afectan mi forma de ver Aeromental, asi que creo no puedo ser tan objetivo con mis comentarios en el blog, lo que si vamos a extrañar (y debes hacer una encuesta) son las frases Random… por que quitarlas?! no entiendo la razon…
El logo? @Matias lees los libros por la tapa o el tema?? Por eso andamos mal en Latinoamerica.
Daniel!! ASDFGH!
Khristian:
Trato de deducir lo que significa ASDFGH! (puesto que no es un typo porque cada vez comentas terminando con la misma palabra)
Se me ocurre lo siguiente:
Aeromental Siempre Dando Felicidad y Gónadas de Humor.
El comentario de los videotutoriales era para el que dice que no puede aprender con los ebooks… :/ FAIL!! :/
Kolla:
Cuando respondas a alguien en específico es mejor usar su nombre antes de tu respuesta para evitar confusiones
Seria mejor q pusieras algo como esto:
Cuando uno quiere leer por ejemplo las pags. de respuestas, estas se cargan de nuevo con la web… no seria mejor q solo cargaran las respuestas. Es una sugerencia
Aun que la explicacion es mucho mas sencilla, la frase estuvo muy diertida, mas cuando no sabes que significa “Gonadas”… luego de buscar Gonadas en wiki:
http://es.wikipedia.org/wiki/G%C3%B3nada
Encuentras esto y solo dije hahahaha!
La explicacion mas sencilla te la doy con un ejemplo:
“QWERTY”
“ASDFGH!”
Algo sin significado ahora lo tiene!
El theme se ve muy bien, pero se nota que es una clara copia del nuevo diseño de YouTube, la paginación es idéntica, misma imagen de fondo, y los “Post + populares” se ve igual que los videos relacionados de Youtube.
Slds.
Mariano:
Post + populares no se parece a Youtube para nada, lo diseñé completamente solo, es más ya estaba así mucho antes en V5.0 (nada más que como era el fondo blanco el hover (poner mouse encima) era gris y ahora solo invertí esos colores). Videos rel. de Youtube no estan con efecto hundido ni con imágenes cuadradas y borde redondeado alineados a la izquierda con sombra y brillo, su hover no es blanco como aquí, no tienen linea de separación punteada, ni alguna palabra con gris hundido y sombra (como Top) y más diferencias (el mismo título de posts + Populares también es mi diseño, negro y blanco con esquinas redondeadas) por lo que no se parecen en nada.
Decir que ambos usan el mismo fondo, es como decir que nuestro anterior fondo blanco era el mismo que de Mashable o Google.com, blanco puro. Ahora es gris con textura granulada y eso con un código especial que saqué de un documento de Wikipedia y w3schools, quizás YT también lo sacó de la misma fuente. Es un código especial del cual incluso publiqué un tutorial (reforzado por otra página), puesto que es una imagen generada con código base64:
Data URI: Generar imágenes con sólo código mediante data:image base64
Porque las cosas útiles que aprendo las comparto.
Aún no activé la nueva interfaz de Youtube así que ni para inspiración (pero tengo Cosmic Panda).
Eso sí, la paginación debo decir que me gustó la que vi en Cosmic Panda y puse un diseño casi idéntico (con mejor hover). Este punto si que lo reconozco puesto que traté de sacar lo más parecido posible. Lo demás no es copia.
De la misma manera creo que menospreciaste todo el trabajo realizado, porque en tu critica mencionas 3 puntos (donde solo 1 es cierto) y tildas de que todo el re-diseño es una copia,
que me dices de los efectos de botones, efecto del logo, buscar iluminado, diseño de comentarios, avatars animados, emoticons con marco 3D 
(también es CSS), footer, Menú superior con palabras flotantes (el de Facebook, Twitter, etc), ubicación de Botones de redes sociales, subtitulos dentro un artículo con un cuadrado a su izquierda, bloques flotantes animados en el pie de página, recuadro de votos para cada comentario con efecto hover y brillo, el diseño del powerbox en el que me tuve que idear la manera como ordenar toda la información que trae dentro (y ya vi un par de blogs latinos que lo han copiado). Y el cambio más característico que no vi en ningún lado, un área rectangular sobrepuesta con solo el titulo del post y Ads y redes sociales, que diseñe en un momento de epifanía… todo esto salió 100% de mi cabeza, si bien tampoco será el diseño más lindo del mundo solo digo que son mis gustos e ideas, así que me parece que opinaste menospreciando mucho trabajo, el cual no lo hice en minutos ni horas.
Hasta puse el primer boceto que hice con los cambios en Etapa 1 tratando de narrar el proceso… bueno no reniego más.