Micrositio Klaukol

[LeandroBraier]

Fede, te paso un pedido para diseñar el micrositio de Klaukol Impermeable Potenciado, el nuevo producto de Klaukol, que iría linkeado en el sitio de Parex Klaukol que estás armando.

Este es un micrositio en Parallax, muy simple pero con una estética muy high end. El template podría ser el mismo que el de Paty.

Te paso el mock up y decime cómo lo ves. Puede ser para la semana que viene sin problema. Lo único que no va acá es la palabra KLAUKOL en mayúsculas que aparece arriba de "Última tecnología en adhesivos.

Los círculos donde se ven imagenes microscópicas deberían tener cierto movimiento y que, al hacer click, se expandan un poco de ser posible.

Cómo lo ves?

[FAAREIA]

Hola Lea, lo veo OK. Tendrías el PSD por ahi? Capas que algunos fondos cambian, pero voy a tratar de mantener todo.

[FAAREIA]

Hola Lea, hoy ya estuve avanzando con esto, pero si podes mandame el PSD asi saco algunas texturas. No te olvides.

Abrazo

[LeandroBraier]

Ya te subí el PSD a la carpeta BENTEVEO MAQUETADOR/KLAUKOL/MICROSITIO..../

Lo recibiste? Avancemos con este que es pan comido.

abrazo

[FAAREIA]

ajajaja, no es tan simple como parece. Hay muchas textura, sombra e imagen en este tipo de landings. http://www.benteveo.tv/_ultima-tecnologia/

Ahi va un avance, faltan poner algunas sombras y terminar el footer. Las fotos si las tenes sin recortar, mejor asi lo defino en base a la maqueta.

Abrazo

[LeandroBraier]

Vamos muy bien Fede!

Obvio que no es tan sencillo, claro. Me refiero a que no tiene tanto contenido al menos jeje.

Me gusta el movimiento parallax de los fondos. Te consigo las fotos.

abrazo

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

2015-03-16 11:29 GMT-03:00 Federico Arena notifications@github.com:

ajajaja, no es tan simple como parece. Hay muchas textura, sombra e imagen en este tipo de landings. http://www.benteveo.tv/_ultima-tecnologia/

Ahi va un avance, faltan poner algunas sombras y terminar el footer. Las fotos si las tenes sin recortar, mejor asi lo defino en base a la maqueta.

Abrazo

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/Klaukol/issues/7#issuecomment-81701944.

[LeandroBraier]

Acá va un link de descarga para las fotos

https://www.wetransfer.com/downloads/04a44578d8e28fc4f2ea52a31c956d3d20150316204507/f91acd2897ea9037cc8684ddce8fbbfb20150316204507/4759ab

abrazo

[FAAREIA]

Joya Lea. Dale F5 que ahi estaría. Falta hacerlo responsivo.

[LeandroBraier]

Está bueno lo que están buscando pero ya está final? Todavía le veo muchas imperfecciones. Lo siguen trabajando o te hago un feedback con esta versión?

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

On Tue, Mar 17, 2015 at 10:06 AM, Federico Arena notifications@github.com wrote:

Joya Lea. Dale F5 que ahi estaría. Falta hacerlo responsivo.

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/Klaukol/issues/7#issuecomment-82334901.

[FAAREIA]

Hace feedback y lo vamos corrigiendo en base a lo que nos digas.

[LeandroBraier]

Ok, va mi feedback:

1. El producto debe estar más grande y, de ser posible, poner una fila de packs en perspectiva como la que te adjunto en esta gráfica. En todos los navegadores que probé en BrowserStack sobra espacio debajo del pack. Tiene que ser más impactante esa parte y no se tiene que dejar ver lo que está abajo. Solo se tiene que ver al scrollear.

http://www.browserstack.com/screenshots/1e12a2f5ee8353c48f451e514e4baacfe437c8b6

1. La barra roja detrás de "La última tecnología en adhesivos" se ve muy simple. Hay que buscar la forma de que se vea como con la textura del hormigón armado.
2. Las lupas no funcionan bien. Debería hacerse zoom al hacer mouse over y el círculo rojo sofisticado de alrededor debería girar de forma mecánica, como si se tratara del zoom de una máquina de fotos o algo así, algo más hi tech.
3. El fondo se ve demasiado vacío, hay que ver cómo resolver eso. Quizá cada tanto podría volver a aparecer el suelo de cerámicos blancos, que queda muy bien.
4. Los elementos que suben y bajan están buenos como idea, pero no funcionan bien. Se superponen con las imágenes y los textos, se mueven de forma boba. Deberían hacer más sofisticada la web, por lo cual debería haber más cantidad y que se movieran con alguna lógica al subir y bajar, no solo esos dos que veo yo.
5. En una segunda versión, de ser posible, deberíamos poder tener dos imágenes dentro de cada lupa para generar un efecto simil 3D. Por ejemplo, en el caso de las partículas, la partícula del centro que está bien en foco, debería ser una capa sobre el resto de la foto. Así, al hacer zoom, ambas imagenes podrían hacer un tipo de zoom distinto. No sé si seguís la idea que te digo. Lo mismo podríamos hacer con el arquitecto y su fondo y con las líneas de colores que están al frente y otras en el fondo.

abrazo

[FAAREIA]

Esta bueno lo de 3D que decis, que hay que decomponer las imágenes en dos, hay que ver si eso es posible. En la de los rayos cruzados si, pero la del tipo la veo jodida

[LeandroBraier]

Como venimos Fede con este Micrositio? Necesitaría tenerlo listo esta semana.

[FAAREIA]

Estoy en eso Lea, hoy te muestro avances

[FAAREIA]

http://www.benteveo.tv/_ultima-tecnologia/ Habría que hacerle un preloader como en paty, pero cuando termine de cargar toda la landing dale F5 asi la ves bien.

Decime que te parece Abrazo

[LeandroBraier]

Me gusta más pero algo me dice que no estoy viendo todos los elementos. Por ejemplo, los puntitos de fondo no aparecen interconectados salvo en el Header.

Detalle: cambiá la palabra "polímeros" por "aditivos"

[LeandroBraier]

Estoy esperando que se cargue todo. Cuanto puede demorar?

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

2015-03-25 11:53 GMT-03:00 Federico Arena notifications@github.com:

http://www.benteveo.tv/_ultima-tecnologia/ Habría que hacerle un preloader como en paty, pero cuando termine de cargar toda la landing dale F5 asi la ves bien.

Decime que te parece Abrazo

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/Klaukol/issues/7#issuecomment-86066189.

[FAAREIA]

La carga se termina cuando el navegador deja de cargar. Lo que falta es meter algunos elementos más al fondo. Lo de los puntos puedo interconectarlos pero no va a quedar bien creo, ahora lo voy a probar.

[FAAREIA]

http://www.benteveo.tv/_ultima-tecnologia/ Falta ajustar el loading. Decime que te parece todo igual

[LeandroBraier]

La idea está bien, la funcionalidad también, pero el fondo no.

Esa textura no nos sirve porque no coincide con el keyvisual que te mandé, es otra cosa. El color está bien pero la textura no y con solo esos puntos y esas lineas no alcanzamos a reproducir la sofistifación que transmiten los fondos del keyvisual. Habría que buscarle otra vuelta. Voy a pensar qué puede ser pero porfa fijate si le encontrás otra vuelta.

abrazo

[FAAREIA]

El tema del fondo es que habría que fabricar un fondo bien manchado pero que sea motivo, voy a ver si puedo hacerlo.

[LeandroBraier]

Dale, entiendo lo que decís. Me parece buena punta. Gracias!

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

2015-03-26 11:50 GMT-03:00 Federico Arena notifications@github.com:

El tema del fondo es que habría que fabricar un fondo bien manchado pero que sea motivo, voy a ver si puedo hacerlo.

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/Klaukol/issues/7#issuecomment-86548072.

[FAAREIA]

http://www.benteveo.tv/_ultima-tecnologia/ (dale F5) http://www.benteveo.tv/_ut/

Hay que laburarlo más para lograr un buen motivo, pero antes decime si va bien Lea.

Abrazo

[LeandroBraier]

La textura está buena pero es muy oscura y faltan los chirimbolos que den algo hi tech. Te paso referencia del flyer que hicimos para Klaukol.

Si te sirve el fondo para web te paso el editable en wetransfer:

https://www.wetransfer.com/downloads/02c5b7dd66af45d70e3d49be0cdc3b8c20150325145438/518a9e

[LeandroBraier]

Fede, necesito ver subido el micrositio de Klaukol urgente. Estoy en reunión con el cliente. Por favor urgente.

[FAAREIA]

Ahi me lo bajé Lea, el tema es que n es editable el fondo por lo que lo voy a rehacer en un motivo.

[LeandroBraier]

Entiendo. No hace falta que sea el mismo, tomá lo que te sirva, lo importante es que siga la misma línea, toda la estética del producto Klaukol Impermeable Potenciado tiene que ser la misma, entendés?

Igual estoy trabajando en una adaptación vectorizada de ese Fondo. Ahora te mando el que tengo hasta ahora pero a la tarde voy a tener una versión vectorizada y en mayor tamaño.

abrazo

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

On Fri, Mar 27, 2015 at 8:29 AM, Federico Arena notifications@github.com wrote:

Ahi me lo bajé Lea, el tema es que n es editable el fondo por lo que lo voy a rehacer en un motivo.

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/Klaukol/issues/7#issuecomment-86906552.

[LeandroBraier]

Acá van los que tengo hasta ahora:

https://www.dropbox.com/s/f8c0gk9rny13lkx/fondo.ai?dl=0

https://www.dropbox.com/s/svzjyne09lwycaq/FONDO.psd?dl=0

https://www.dropbox.com/s/971xyxaaeeysz7j/fondo2.psd?dl=0

abrazo

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

2015-03-27 8:35 GMT-03:00 Leandro Braier leandrobraier@gmail.com:

Entiendo. No hace falta que sea el mismo, tomá lo que te sirva, lo importante es que siga la misma línea, toda la estética del producto Klaukol Impermeable Potenciado tiene que ser la misma, entendés?

Igual estoy trabajando en una adaptación vectorizada de ese Fondo. Ahora te mando el que tengo hasta ahora pero a la tarde voy a tener una versión vectorizada y en mayor tamaño.

abrazo

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

On Fri, Mar 27, 2015 at 8:29 AM, Federico Arena notifications@github.com wrote:

Ahi me lo bajé Lea, el tema es que n es editable el fondo por lo que lo voy a rehacer en un motivo.

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/Klaukol/issues/7#issuecomment-86906552 .

[FAAREIA]

Fijate ahora Lea, creo que es el fondo correcto. El motivo funciona. Avisame como lo ves

[LeandroBraier]

Si, es ese Fede. Dale mas opacidad a las lineas interconectadas de fondo y listo.

Avancemos.

Federico Arena notifications@github.com escribió:

FijateahoraLea,creoqueeselfondocorrecto.Elmotivofunciona.AvisamecomolovesReplytothisemaildirectlyorviewitonGitHub.

[FAAREIA]

Buenisimo Lea. Cuales líneas especificamente Lea? Pregunto porque hay varias, mandame screenshot asi no le pifio. Abrazo

[LeandroBraier]

Son estas las líneas. A lo que me refiero es a que queden más en segundo plano, porque como son rojas y azules le quitan protagonismo al producto.

[FAAREIA]

Fijate ahora Lea. Le ajuste la opacidad de todos los detalles. http://www.benteveo.tv/_ultima-tecnologia/ Dale al F5

[LeandroBraier]

Lo veo mejor, Fede. Por ahora dejemos así el fondo, sólo te pido un par de cositas para el sitio:

1. que se destaquen mejor las líneas de los cerámicos, quedan como muy opcas esas líneas. Las líneas de colores que cambiaste quedaron muy bien.
2. No entiendo por qué después de la franja blanca del footer sigue hacia abajo la web. Debería terminar ahí, en blanco.
3. Respecto del footer, quitale las líneas de colores de contorno, que quede solo blanco. Que la forma sea un poco más regular y prolija, queda como muy anárquica las formas geométricas así. Podría ser algo más simétrico? Además, agregale ahi en el footer, entre "Klaukol Potencia que Une" y el logo de Parex Group" los tres logos en gris como en el sitio web de Parex Klaukol. Los logos serían: Klaukol, Parex, Lanko.

En breve te voy a estar pasando más contenidos para sumarle a este micrositio, incluidas nuevas imágenes para cambiar las de las lupas, pero antes quiero que quede una versión bien cerradita de esta etapa para confirmar con el cliente y después seguir adelante sobre base segura.

abrazo

[FAAREIA]

Ahi le ajuste todo Lea, el footer lo dejé recto. Las marcas le agregué 2 porque klaukol ya estaba del otro lado. En el medio no las puse porque no quedaba bien. Decime que te parece ahora.

[LeandroBraier]

No lo logro ver. No me carga. Será mi conexión?

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

2015-03-30 11:28 GMT-03:00 Federico Arena notifications@github.com:

Ahi le ajuste todo Lea, el footer lo dejé recto. Las marcas le agregué 2 porque klaukol ya estaba del otro lado. En el medio no las puse porque no quedaba bien. Decime que te parece ahora.

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/Klaukol/issues/7#issuecomment-87701527.

[FAAREIA]

Fijate ahora desde el index.html

[LeandroBraier]

Ok, siguientes cambios:

1. los 3 logos en gris sí van en el centro, no debajo de ParexGroup.
2. La barra blanca está bien recta pero en la parte de Parex Group hacele el triángulo como en el Manual de Marca de ParexGroup. Fijate como aparece en el Dorso del Flyer que te pasé.
3. Aún no cambiaste la palabra "polímeros" por "adhesivos". Perdón, lo había pedido pero me di cuenta recién que aún no estaba impactado.

abrazo

[FAAREIA]

Fijate ahora Lea. F5 Abrazo

[LeandroBraier]

Perfecto Fede. Dos pedidos nuevos:

1. Las líneas rojas y azules con puntitos en las intersecciones de las que venimos hablando no gustaron. Cambialas por las secuencias de puntos que podés ver utilizadas claramente en el Flyer que te pasé y en este tríptico nuevo:

https://www.wetransfer.com/downloads/1747a03696509be6bf689a92b9be0ee120150330223858/73bfd3288b5914973facfefb05ce6efe20150330223858/70be66

Me refiero a estos

1. Está bien el footer. Solo me hace ruido el piquito que aparece sólo para ParexGroup cuando lo veo en la retina.

Fijate si lo podés emprolijar un poco nomás, que el triángulo siga hasta arriba o que baja de forma más elegante, no sé.

abrazo

[FAAREIA]

Ahi va Lea, dale F5: http://www.benteveo.tv/_ultima-tecnologia/

[LeandroBraier]

Excelente, Fede! Ahora sí lo veo joya.

En un rato te paso las imágenes a modificar en las lupas y un par de detallecitos mínimos más.

abrazo

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

On Wed, Apr 1, 2015 at 10:40 AM, Federico Arena notifications@github.com wrote:

Ahi va Lea, dale F5: http://www.benteveo.tv/_ultima-tecnologia/

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/Klaukol/issues/7#issuecomment-88484410.

[LeandroBraier]

Fede, te paso varias cosas para sumar al Micrositio KIP.

Paquete 1: 3 gifs animados para reemplazar la foto interior de las 3 lupas (Los subí al "Dropbox/Benteveo Maquetador/Klaukol/Micrositio...."). Ya tienen cierto movimiento. Yo diría reemplaces las imágenes actuales por estas, manteniendo el movimiento de zoom que hace la lupa, y viendo cómo queda ahí hacemos el ajuste necesario para que de el efecto 3D deseado.

Paquete 2: En la misma carpeta de Dropbox te subí un ppt con nuevos contenidos a sumar para el Micrositio. Cualquier duda me avisás.

Paquete 3: Sumar las siguientes correcciones:

1. Hay una línea azul y una roja colgadas y sin ubicación clara del lado derecho que se siguen viendo. Habría que sacarlas.
2. Va un cambio en el texto de la segunda lupa:

"UNA MEZCLA CREMOSA, ELÁSTICA Y HOMOGÉNEA, CON RETENEDORES DE AGUA QUE ASEGURAN EL NIVEL JUSTO DE HUMEDAD, PERMITIENDO REACOMODAR Y FACILITAR TU TRABAJO."

1. Antes del footer, debe aparecer un video de presentación del producto que lo podés descargar de aquí:

https://www.wetransfer.com/downloads/5fa59ae1fae623d5c9293891cbbd3ca420150330171609/c448b3

1. Agregar un slideshow de fotos con el título "Aplicación de producto". Mostraría un paso a paso de cómo se aplica el producto. Las fotos son 9 y las tenés en Dropbox en la carpeta "Aplicación de producto".
2. Agregar los siguientes links arriba del footer y debajo del slideshow de aplicación de producto.

. descarga de Ficha Tecnica . Link a Youtube . Link a Facebook. . Link a Club del Colocador . Link a Club de Vendedores Klaukol . Link a Guía de Corralones

1. El "potencia que une" del footer va aplicado como en la foto que te pasé de los empleados de Klaukol colgados en el muro y que subiste a la url, el que me mandaste hoy a la mañana. Fijate en el Flyer que te pasé por WeTransfer, ahí tenés la imagen en alta para colocarla. En el ppt del Paquete 2 aparece también esta estética que te digo. Cualquier cosa me avisás y te la mando de nuevo por mail.
2. Agregar también en el footer:

. Link a la página principal de ParexKlaukol . Orientación Profesional 0800-222-5528

Si está esto para el lunes al mediodía estamos ok. Si es antes mejor, obvio.

abrazo

[FAAREIA]

Fijate ahora. Lo que si noté es que los GIF pesan 5MB c/u. Osea que la página pesa 15MB+ Además tampoco estan loopeados y para hacerlos 3D habría que tener las fuentes del gif, sino hay que editarlos cuadro por cuadro, lo cual es una locura de trabajo y tampoco creo que quede bien

[LeandroBraier]

Está bueno, Fede. Va feedback:

1) Tema GIFs fijado si los podés comprimir. Loopeados están. Los hice con Photoshop. Decime si necesitás que haga algo distinto, que les ponga menos frames por segundo lo lo que sea, pero el loop es constante. Por ahora vamos sin 3D. Lo importante es que se agranden al hacer mouse over y además se animen. Van muy lento al principio pero van bien. Si necesitás los editables para esto también avisame y te los mando.

En cuanto a las Lupas, la lupa de la mezcla fijate si la podés encuadrar distinto para que se note que es un balde. No sé entiende qué es lo que estamos mostrando. La del arquitecto también encuadrala mejor, que quede el arquitecto en el centro de la lupa.

2) El slideshow está bueno, pero fijate de comprimir más las fotos y que no queden en un tamaño tan diferente las verticales y las horizontales. Es decir, que no se altere el tamaño del slideshow cuando cambia de una foto vertical a una horizontal.

3) Los nombres al pie cambian levemente. Esto influye también en sus respectivas plataformas:

Club de Colocadores pasa a llamarse: Club de Colocadores Klaukol

Club de Vendedores para a llamarse: Club de Vendedores ParexKlaukol

La Guía de Corralones queda ok.

4) El video de producto queda vacío el hueco hasta que no se pone play. Ponele un thumbnail.

abrazo

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

2015-04-06 10:10 GMT-03:00 Federico Arena notifications@github.com:

Fijate ahora. Lo que si noté es que los GIF pesan 5MB c/u. Osea que la página pesa 15MB+ Además tampoco estan loopeados y para hacerlos 3D habría que tener las fuentes del gif, sino hay que editarlos cuadro por cuadro, lo cual es una locura de trabajo y tampoco creo que quede bien

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/Klaukol/issues/7#issuecomment-90056617.

[FAAREIA]

Hola Lea, ya estan los cambios. Con respecto a los GIF:

• Las medidas deberían ser 210 x 210 y si los queres hacer retina, 420 x 420.
• Hacerlos retina van a hacer que pesen probablemente el doble. Aca hay que definir si queres calidad por sobre peso.
• Los GIF ya son formato comprimido, admiten solo 256 colores. Para hacer el archivo más liviano, le sacaría frames. Hay uno que abrí que tenia ochenta y algo de frames.
• Lo del loop por su puesto que loopea, lo que yo decía es que no es infinito el loop, hay un quiebre que muestra que volvió a empezar, solo eso.

[LeandroBraier]

Ah, entiendo perfecto!!! Bueno, todos los temas que me decís te los puedo resolver. EN un ratito te mando nuevos GIFs via mail.

Respecto de la página está todo joya. Fijate solo dos cosas:

1. Lo que te decía en el ticket del Newsletter, que el "Potencia que une" del footer está mal. El que va es el del Flyer que te pasé. Tiene una placa roja como de sello.
2. Fijate si a la barra roja que "Última tecnología en adhesivos" le podés dar algo más de textura metálica además del degradé.

abrazo

Leandro Braier Producción Audiovisual & Social Media Benteveo Producciones http://benteveo.tv Móvil 1158717399

2015-04-07 9:45 GMT-03:00 Federico Arena notifications@github.com:

Hola Lea, ya estan los cambios. Con respecto a los GIF:

• Las medidas deberían ser 210 x 210 y si los queres hacer retina, 420 x 420.
• Hacerlos retina van a hacer que pesen probablemente el doble. Aca hay que definir si queres calidad por sobre peso.
• Los GIF ya son formato comprimido, admiten solo 256 colores. Para hacer el archivo más liviano, le sacaría frames. Hay uno que abrí que tenia ochenta y algo de frames.
• Lo del loop por su puesto que loopea, lo que yo decía es que no es infinito el loop, hay un quiebre que muestra que volvió a empezar, solo eso.

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/Klaukol/issues/7#issuecomment-90536392.

[FAAREIA]

Ok perfecto, la placa está, dale F5. Lo de la textura dejame ver porque es un vector eso actualmente.

[LeandroBraier]

Fede, van por mail los 3 Gifs animados comprimidos para modificar en el Micrositio de Klaukol. Lo podremos tener para el mediodía modificado a esto y a lo de la barra roja?

abrazo

[FAAREIA]

Ahi esta listo Lea Faltarían meter los links nomás.

[LeandroBraier]

Perfecto. Los links cuando tengamos listos esas plataformas.

Los veo bien. Consulta: te acordás cuando te pedí que las lupas fueran fijas y se empezaran a mover cuando hacemos "mouse over"?? Se puede hacer eso?