Bienvenido a Aeromental V8

@ 20 . noviembre . 2013

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:
Aeromental V8 single

Post:
Aeromental V8 single

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).
Categorías

Tenemos un nuevo sector en Inicio y debajo de los posts, son las noticias más comentadas en los últimos 30 días:
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).

Los Más Comentados

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.

proceso de Aeromental V8

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:

Aeromental anterior página de inicio
Aeromental v7.1 página de inicio

Y Aeromental v6.2.2

Aeromental v6.2.2 inicio

Categorías:
Aeromental v6.2.2 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:

Facebook en Android

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:

We cant stop Miley Cyrus

Otro ejemplo de como esta de moda letra sobre una foto con blanco y amarillo:

Pitbull y Cristina Aguilera

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:

Blurred Lines
Blurred Lines

El startup airbnb también usa el estilo de una foto de fondo con el texto blanco encima:
airbnb

Lo mismo encontramos en la web de Spotify:
Spotify

Y en otro blog, la misma tendencia:
tendencia web 2013

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.
pinterest

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:
youtube

En ABC noticias de Australia, encontré la misma tendencia:
ABC AU

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 XD

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:

codigo con Sublime Text 2

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.

Ultra
De nada Ultra y gracias a tí por tu comentario (y)

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

  • Luis Humberto

    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.

    Un sano consejo, si optimizas para verse mejor en alta resolución, seria mucho mejor aprovecharlo y poner imágenes mas coloridas, en lugar de quitarle su colorido, personalmente navego en muchas paginas a la vez, y salto de una a otra mientras leo, y es algo raro a la vista que de entre todo el colorido que observo pase a una pagina cuyos thumbs en su mayoría carecen de color, sumado a la paleta que usas el blog se nota algo desabrido, no quiero que me mal entiendas, me gusta mucho la paleta de colores que has escogido, pero al no tener thumbs que resalten (por mucho que tengan efecto eso no cuenta) todo el conjunto pierde su encanto.

    En cuanto al header, el diseño solo funciona si le aumentas el tamaño en alto para que la imagen sea observable, algo asi como una portada de bienvenida, que es el concepto que usan las paginas que mencionas, así de reducido como esta ahora desde mi punto de vista no funciona. Dicho sea de paso la portada bien pudiera ser aleatoria y cambiar siempre con lo que esta de moda.

    En cuanto al nuevo logo ya de por si no me agradaba, ahora al saber que te basaste en un video de Miley Cyrus simplemente lo odio :yaoming: Bien pudieras hacer una encuesta para saber cual logo es el mas representativo de Aeromental, y al fin decidirte y ya dejar de hacerle tantos cambios, recuerda los logos de las marcas mas importantes que existen, y date cuenta que han cambiado poco o nada una vez que la gente comienza a identificarse con ellos.

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

    Luis Humberto:

    Los thumbs si tienen todos los colores en el área principal de inicio y en la barra de últimos posts y aleatorios del sidebar. Tengo Retina y el efecto mencionado se ve bastante bien.

    El header: La imagen no quiere ser observable ni reconocible, es más hasta tiene un desenfoque para aumentar el efecto.
    Banners aleatorios, por el momento es algo que no esta en los planes (además que ya lo hicimos antes).

    Las marcas más importantes y sus logos que no cambian me parecen un mito que siempre cae en Coca-Cola. Pero no es así, como verás en la foto:

    logos de Coca-cola 2013
    Sólo la primera fila muestra al menos cuatro cambios radicales y si bien desde hace mucho tiempo ya casi no cambian el tipo de letra, lo que si cambian es el fondo/entorno y los colores de como mostrar este texto.

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

    Casi olvidaba mencionar…

    Gracias Ultra por tu comentario en otro post cuando ya viste el nuevo diseño V8, me alegró mucho lo que dijiste luego de tanto trabajo. (y)

    El respectivo screenshot lo añadí al final del post :)

  • Azathoth

    Con cada version mi computadora llora mas para poder abrir la pagina y mas cuando quiero abrir un entrada en otra pestaña, tendre que comprarme otra compu mas poderosa para seguir leyendo aeromental #not

  • Bob

    ¿Y que hay de nosotros? xD también somos ancianos en ésta página. Naah es broma.
    Él nuevo diseño se ve cool pero es difícil adaptarse después de tanto tiempo, aún así ¿De que me puedo quejar yo que la mayoría del tiempo lo visito desde él móvil?, estaría genial que también cambiaras el logo y el color en la versión móvil.
    Lo único que me pareció malo fue lo de Miley Cyrus xD
    Felicidades Daniel y perdón por ser tan exigentes, suerte con tu maestría.

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

    Saludos Bob !!!!

    Pronto veré de cambiar el header del móvil, para que todo tenga un mismo diseño, más que eso el móvi no tendrá otros cambios. (y se verá menos pixelado)

    Recién averigüé y es la mismo directora que hizo Blurred Lines y We Can’t Stop, se trata de Diane Martel.

    Así que más que inspirarme en Miley, la inspiración es en Martel.

    Mira sus otros videos: http://en.wikipedia.org/wiki/Diane_Martel

  • torrealbaruben

    Felicitaciones Daniel, al fin provoca ver a Aeromental directamente y no desde el lector de rss. Reitero mis felicitaciones.

    pd: el logo sigue siendo horrible. XD

  • Oscar

    Me parece que has hecho un excelente trabajo Daniel, te había escrito en otros temas que los cambios que habías hecho antes no me parecían muy adecuados, pero sinceramente con esta remodelación todo ha quedado genial, incluso la publicidad, que en otros intentos había quedado mal ubicada (ahora hasta te he desbloqueado del AdBlock ;) ).

  • Rey Grimlock

    Yo tambien soy de los antiguos !!!! y de los que a diario veo esto, osea un aeromentalero de corazon :D felicitaciones Daniel en lo particular me gusta todo, todo incluido el nuevo logo me encanta, siento que el blog ha ido evolucionando junto conmigo

  • Alejandro Fuentes

    ¡Excelente diseño!, todo te quedo bastante bien. Y el header es hermoso, no puedo dejar de mirarlo xD .

    De la versión móvil, como dijiste, no hay nada que cambiar pero además del header sería interesante que cambies los colores del fondo o los comentarios al mismo tono que están en la versión de escritorio :) .

  • Ultra

    Gracias por notar mi comentario señor Semper.
    Noto que mis comentarios siempre tienen votos negativos de parte de los demás lectores, incluyendo el del gráfico incluído en éste post.

    Hay muchos que me desprecian aquí. Comprendo que es difícil tener contentos a aquellos nerds a quienes nadie les lame las botas.

    Reitero mis felicitaciones por la nueva imagen y por trabajar con sólo código. Muy bien.

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

    De nada y gracias a todos, me alegra que V8 le guste a la mayoría.

    el header es hermoso

    (y) gracias !!!

  • mych

    Dan, que bueno es tenerte de vuelta, se respeta que siendo tu blog puedas hacer con el lo que mejor te retroalimente, sin embargo yo como muchos esperamos tener de regreso ese aeromental con ahora un excelente diseño pero con esas noticias y novedades frescas que con tu toque se hacen geniales de leer.

  • Daniel Barreiro

    Felicitaciones un buen look fiel al estilo de la pagina y buena eleccion decir “mas post , menos cambios” es lo que todos queremos jejejeej .

  • Alejandro

    Se ve bien… y en lo que respecta a los lectores que te visitan desde el móvil, sería un buen momento para empezar a probar el Responsive Design no crees?.

    Ya probaste phpDesigner? es la herramienta que yo uso para programar websites…

    Saludos