Gribouille
Sculptural squiggles, worn like punctuation.
Projektist
Gribouille on Tallinnas sündinud ehtebränd, mille tunnuseks on üksainus looklev joon. Iga kõrvarõngas meenutab katkematut joont, mis vormitakse ja viimistletakse käsitsi. Kollektsioonis on viis värvitooni, Bleu Kleinist Jaune oeuf’ini.
Ülesanne
Gribouille’il on väike tiim ja üks eristuv toode. Veebileht pidi edasi andma poe erilise meeleolu, näitama kõrvarõngaid modellidel kõigis viies värvitoonis ning avanema kiiresti ka telefonis. Tavaline fotopanga piltidega mall ja mahukas avalehevideo ei sobinud selleks.
See pole video, vaid reaalajas 3D.
Lehe ülaosas olev lett on fotole paigutatud 3D-mudel, mida brauser kuvab reaalajas. Lett teeb umbes 100 sekundiga täisringi ning metallnaastude kohal liigub roosa valgusjoon, mis kordab kõrvarõnga looklevat kuju. Allpool näitame, kuidas stseen valmis.
Ruum
Kõigepealt lõime vastuvõtuala pildi brändi ploomilillas ja roosas värvigammas. Sellest valmis kaks versiooni: tühi ruum, kuhu lisatakse liikuv 3D-lett, ning foto, millel lett on juba olemas. Teine pilt kuvatakse esimesena ja jääb nähtavale ka siis, kui seade ei suuda animatsiooni jooksutada.
Kaamera
Arvutasime fotol oleva vaiba kuju järgi välja virtuaalse kaamera kõrguse, nurga ja fookuskauguse. Nii püsib 3D-lett õigel kohal ja õiges perspektiivis nii laial monitoril kui ka püstisel telefoniekraanil.
Lett
Lõime leti koodiga, eraldi 3D-programmi kasutamata. Mudel koosneb mustast lakitud pinnast, kroomitud detailidest ja 260 naastust viies reas. WebGL kuvab seda ekraani enda resolutsioonis, mistõttu pilt jääb teravaks ka seal, kus videofail võiks detaili kaotada.
Valgus
Roosa valgusjoon liigub aeglaselt mööda naaste ja muudab kuju. Valgustatud detailide ümber tekib pehme kuma, vaibale langevad peegeldused ning kõige kohal on brändi nimi.
- 260eraldi valgustatavat kroomitud naastu
- ~100 sleti ühe täispöörde kestus
- 0videofaili
- 15 kBkoodi kogu 3D-stseeni jaoks
Sujuv ka nõrgemal seadmel
- Animatsioon peatub, kui kerid sellest mööda või avad teise vahelehe.
- Kui telefonil jääb jõudlust väheks, vähendab leht automaatselt 3D-stseeni resolutsiooni.
- Kui WebGL ei tööta, näidatakse selle asemel staatilist pilti.
- Kui kasutaja on liikumisefektid välja lülitanud, jääb stseen paigale.
Ka kampaaniafotod tegime ise.
Fotopanga piltide ja mannekeenide asemel korraldasime päris fotosessiooni. Valisime modellid ning tagasihoidlikud heledad ja sinakad kudumid, et pilk jääks värvilistele kõrvarõngastele. Iga värvitooni pildistasime eraldi taustal. Ühe fotosessiooni materjalidest jätkus veebilehele, reklaamidele ja terve hooaja sotsiaalmeediapostitusteks.
Modellide valik
Valisime modellid, kelle näod mõjuvad hästi nii väikesel tootepildil kui ka suurel ekraanil. Juuksed seadsime taha, et kõrvarõngad jääksid selgelt näha.
Stilistika
Beežid, kreemikad ja helesinised kudumid hoiavad tausta rahuliku ning lasevad ehetel esile tõusta.
Valgus
Pehme külgvalgus toob esile lakitud pinna ja kõrvarõngaste kumerused.
Värv
Värvitöötluses jälgisime, et Bleu Kleini toon näeks fotol välja võimalikult lähedane päris ehtele.
Üks fotosessioon, mitu kasutusviisi.
Mõtlesime juba pildistades läbi, kuidas fotod töötavad tootekaardil, sotsiaalmeedia postituses ja püstises story-formaadis. Kõrvarõngas jääb igas lõikes nähtavale.
Lahendus
Veebilehe ülesehitus meenutab jalutuskäiku poes: esmalt vastuvõtt, seejärel kõrvarõngad viies värvitoonis, suured modellifotod ja interjöör. Värvivalik vahetab pilte ning kui külastaja midagi ei tee, vahelduvad toonid automaatselt. Kerimisel ilmub ekraanile brändile iseloomulik looklev joon, samal ajal kui 3D-lett jätkab pöörlemist.
Värvipunkti valides näed vastava tooni fotot. Kui midagi ei vali, vahetuvad värvid ise.
Brändi maailm ka päris ruumis.
Lõime ka poe ruumilise visiooni: roosa valgusega prooviala ja baarinurga laupäevasteks kohtumisteks. Ploomililla, roosa ja kroomitud detailid korduvad nii veebilehel kui ka interjööris, et bränd mõjuks mõlemas keskkonnas ühtselt.
Tulemus
Gribouille sai ühtse visuaalse identiteediga veebilehe, fotomaterjalid ning interaktiivse 3D-stseeni. Ühe fotosessiooni pildid sobivad kasutamiseks veebis, reklaamides ja sotsiaalmeedias. Avalehe 3D-lahendus püsib eri ekraanidel terav ega vaja videofaili.