No hace más de tres semanas que estrenado Aeromental V7.1 y ya saltamos a otro diseño radicalmente distinto, aunque seguimos manteniendo la estructura que conseguimos hasta esa versión, es decir una página de inicio con entradas en grilla, el sidebar de dos columnas a la derecha, y otros detalles, pero descubrí porque estaba cambiando con tanta frecuencia el diseño del blog, porque desde V6 hasta v7, ya me estaba aburriendo el look, a tal nivel que lo iba cambiando y nunca parecía ser suficiente. Ante este raro comportamiento medité y llegué a la conclusión de realizar una modernización y mejora radical en todo, detalle por detalle, de tal manera que sea un cambio que dure por mucho tiempo y uno se siente más que cómodo con la página, tengamos una sensación moderna, radical, cool y muy interactiva.
Con ustedes, así es Aeromental V8 (y casi podría asegurar que nos quedaremos con este diseño por mucho tiempo), de esta manera y como “Vox Populi” lo pide, menos cambios y MÁS POSTS!!! ( )
Página de inicio, no pierdan la oportunidad de poner el mouse sobre cada foto (thumb) para presenciar un interesante efecto zoom:
Post:
Categorías, simplemente no hay manera más sencilla de mostrar 18 posts al mismo tiempo, estoy muy satisfecho con este sector (funciona igual para tags, archivos por fecha y búsquedas).
Tenemos un nuevo sector en Inicio y debajo de los posts, son las noticias más comentadas en los últimos 30 días:
Los Más Comentados, sólo un ojo crítico se dará cuenta que estos thumbs tienen un color más atenueado, se ha jugado con el hue de la foto (lo propio con la columna vertical de Los + Populares).
Entre otras cosas, todo esta optimizado para monitores modernos de alta resolución, incluyendo los retina display.
Tenemos nuevo logo, hice varias pruebas de este diseño con el anterior logo y no daba ni por izquierda ni por derecha, así que aproveché de igualmente renovarlo en forma y color. Además es un logo que no se pixela nunca pues no es una imagen, sino un archivo vectorial de texto.
Detalles en el proceso
Como muchos experimentaron, V8 no salió de un día para el otro, sino que durante una semana todo el blog iba cambiado poco a poco, con prueba y error de lo que funcionaba y lo que aún requería más mejoras.
Por ejemplo, guardé un screenshot de una etapa sin terminar de la página principal, ya teníamos el header muy bien conseguido, finalmente con una manera óptima y vistosa de mostrar los enlaces a nuestros perfiles en Facebook, twitter y demás.
Como podrán apreciar, la barra lateral con encajaba con el nuevo diseño y tenía muchas falencias. Lo principal era que el texto de los títulos del post no era muy legible con color blanco y fondo negro, y en conjunto era muy negro al final, las fotos, estaban tapadas en un 40% quitándoles la razón de representar un post, así que cambiamos a thumbs menos cuadrados, que se ven sin taparse, y lo mismo el título letra negra, fondo blanco y siempre visible.
La parte de los posts, se notaba que eran áreas muy largas, la fecha sin motivo estaba debajo de los botones sociales, no había lógica y aumentaba el área del recuadro. Todo esto se fue mejorando.
Antes: Aeromental V7, V7.1 y V6.22
Como referencia a como estaba antes, veamos las tres últimas versiones anteriores a V8.
Así era Aeromental V7 y Aeromental V7.1 respectivamente:
Categorías:
Fuentes de inspiración de V8
Para cada nuevo rediseño del blog, me voy fijando los re-diseños de blogs más famosos que Aeromental, a manera de también aprender de los capos y analizar si hay tendencias que valen la pena ser seguidas (o no). De igual manera también aumento ocurrencias propias, evitando que le sitio se parezca a otro y tenga personalidad propia.
Pero nunca antes hice un estudio de no sólo páginas web, sino de además las tendencias en videos musicales pop de lo que “está de moda” en la juventud, lo que se respira en Mtv y similares, pues es ese público al que también queremos integrar con la lectura del blog (no sólo a los que reconozcan a robert Downey Jr. en el fondo del header).
Muchos diseñadores opinarán que uno no debería revelar sus fuentes de inspiración, pues capaz se pierde la magia de ver el resultado final, pero es que como esta vez hice bastante hincapié en este punto, me parece interesante mostrarles este proceso.
Nuevo Logotipo y Cabecera
La inspiración surgió de …
La imagen de una aplicación de Facebook en Windows Phone 7.8, texto blanco con una foto de fondo:
Video musical We Can’t Stop, de nada menos que la chica que se mece en una bola de demolición, Miley Cyrus. no cabe duda que contrató a un director vanguardista para sus últimos dos videos, y sin entrar en gustos musicales (con audio en off) se nota lo bien que queda el texto amarillo intenso con una imagen de fondo:
Otro ejemplo de como esta de moda letra sobre una foto con blanco y amarillo:
La canción Blurred Lines de Robin Thicke hace lo propio, texto grande de color plano con una imagen de fondo, el poder de solo usar una palabra, con esto ya ibamos armando la idea de como mostraría el nuevo logo y la cabecera de v8:
El startup airbnb también usa el estilo de una foto de fondo con el texto blanco encima:
Lo mismo encontramos en la web de Spotify:
Y en otro blog, la misma tendencia:
Página de inicio
Los recuadros blancos de la página de inicio, están inspirados en Pinterest, pero no quise usar ese look desordenado con alturas variables, pues para un blog cronológico se pierde todo sentido del orden, algo que no se requiere en Pinterest pero si en Aeromental, así que tomé la idea pero prefería usar recuadros de una misma altura y mejor alineados.
Luego de implementarlo, noté que lo mismo estaba haciendo youtube, pero en los emails que te envía una vez que te suscribes a un canal:
En ABC noticias de Australia, encontré la misma tendencia:
El efecto de zoom, me salió inspirado en un efecto similar en la barra lateral del blog Niubie. Eso sí, ellos usan un código completamente distinto, yo tuve que inventar el mío porque no entendí nada lo que ellos hicieron
Y para los que crean que esto se hace con un editor gráfico (cof cof Dreamweaver) pues claro que no!!! yo uso editor de texto, si no es el bloque de notas, pues la versión gratuita de Sublime Text 2, este esnnun screenshot de como iba codificando a mano todo V8:
Al final espero que les guste, perdonen tantos cambios, borrón y cuenta nueva, pues me parece que con este nos quedamos por mucho tiempo (apuntemos mínimo un año).
:iPhone: PD.- Veré de actualizar la versión para celulares, pero no creo que pase de sólo un refresh al logo, pues me parece que los thumbs cuadrados ahí si funcionan bien.
Gracias
Siempre uno se siente bien cuando los cambios son comprendidos y aceptados por los lectores, en especial por los más antiguos y exigentes (como lo es Ultra), y que sientan que todo ha sido una mejora y evolución positiva.
De nada Ultra y gracias a tí por tu comentario