AluConnect
A termék sokszínűségét és prémium minőségét kellett megmutatni, miközben az országban alig pár darab létezett belőle, az is bemutatóteremben.
aluconnect.hu →Az AluConnect alumínium-PVC hibrid nyílászáró rendszer: a szerkezetet az Aluveka Group fejleszti és gyártja, a magyar piacra a Prémium Fenster System Kft. viszi kizárólagos feldolgozóként. Új termék, ismeretlen névvel.
A kiinduló gondolat egyszerű volt: a sokszínűséget és a prémium minőséget kell megmutatni. Ebből adódott a megoldás is: a nyílászáró különböző típusait különböző színekben és élethelyzetekben mutatjuk be. Nem katalógusban, hanem otthonokban.
Egy baj volt vele: az országban akkor alig néhány kész termék létezett, azok is bemutatóteremben. Házakban fényképezni tehát nem lehetett. A gyártótól is csak néhány, a gyártáshoz készült 3D modell állt rendelkezésre, vagyis a teljes látványvilágot meg kellett építeni.
A kutatásból kiderült, kik a tipikus vásárlók, mire kíváncsiak, és mit várnak egy ilyen oldaltól: az Apple-éhez hasonló élményt. A valódi kihívás ezért nem maguk a képek voltak, hanem az egyensúly: a műszaki és az esztétikai tartalom egyszerre szólítsa meg a kereskedő partnert és az építtetőt.
Nem volt mit leváltani.
Ez termékbevezetés volt, nem újratervezés. Nem létezett korábbi weboldal, amit át lehetett volna alakítani, és nem volt arculat, amelyhez igazodni kellett volna. Ez több szabadságot ad, de több felelősséget is: nincs mihez mérni, hogy jó irányba haladunk-e.
Ami rendelkezésre állt: a gyártó műszaki dokumentációja és néhány 3D modell, amelyet a gyártáshoz mellékeltek. Fotó nem volt, és nem is lehetett, mert a néhány kész termék bemutatóteremben állt, nem otthonokban.
Emiatt a projekt súlypontja a kreatív és vizuális koncepcióra került. Nem képeket kellett válogatni, hanem eldönteni, milyen világban él ez a termék, és azt a világot felépíteni.
A szerkezet mint tartalom
Az oldal egyetlen, végiggörgethető termékoldal, öt aloldallal: letöltések, kapcsolat és a három jogi oldal. A sorrend a meggyőzés sorrendje: előny, szerkezet, energiahatékonyság, szín, termékkínálat, fenntarthatóság, kapcsolatfelvétel.
Középen az interaktív szerkezeti diagram áll. Négy rétegét (külső felület, statikus ragasztás, többkamrás PVC mag, hegesztett sarokillesztés) a látogató egyenként nyithatja ki, mellette a robbantott 3D renderrel. Alatta a mérőszámok, amelyeket a kereskedő keres: 82 mm rendszermélység, 48 mm üvegvastagság, B3, A6, RC2.
A látványvilágot nem válogattuk, hanem megépítettük.
A kreatív koncepció a kutatásból indult: tudtuk, kik a tipikus vásárlók, mire kíváncsiak, és mit várnak egy ilyen oldaltól. A válasz egyértelmű volt: az Apple-éhez hasonló élményt. Ez adta a mércét, minden más ebből következett.
A sokszínűséget nem lehet egyetlen szép házzal bizonyítani. A látványtervek ezért három tengely metszéspontjain készültek: élethelyzet, szín és nyílászáró-típus. Ugyanaz a termék más otthonban, más RAL-színben, más nyitási móddal: így lesz a sokszínűség látható, nem csak ígéret.
A színpaletta majdnem fekete alapra épül, egyetlen világoskék kiemelőszínnel. A nyílászáró fém és üveg: mindkettő a tükröződéstől szép, sötét alapon kirajzolódik, világoson elveszik. Egyetlen betűtípust használunk, az Intert, különböző vastagságokkal. Ahol a mérőszámok és a marketingmondatok folyamatosan váltják egymást, ott egy második betűtípus csak zavarna.
A mozgás pedig nem díszítés. A prémium hatás a részletek időzítéséből áll össze: a görgetésre induló animációkból, a diagram rétegeinek nyílásából, a képváltások ritmusából. Ezt a látogató külön nem veszi észre, csak azt érzi, hogy az egész igényes.
Nem tudtunk kimenni fényképezni, mert nem volt hova: az országban pár darab létezett a termékből, az is bemutatóteremben. Elsőre korlátnak tűnt, aztán kiderült, hogy szabadság: minden képkockát mi terveztünk meg. A szín, a ház, a napszak mind döntés volt, nem véletlen.
Kutassy Bálint ügyfélkapcsolati vezető és a csapat szóvivője, KUTASSY
- Alap #1B1B1C Oldalháttér
- Mély #0F0F0F Szekciókontraszt
- Akcentus #28A8E0 Kiemelés, ikonok
- Szöveg #FFFFFF Címsorok, adatok
- Inter Címsorok, folyó szöveg és mérőszámok egyetlen betűcsaládból
Mit építettünk, és mi alapján.
Egy ismeretlen terméknél az oldal első dolga nem az eladás, hanem a megértetés. Minden döntés alatt ott van a forrása is.
-
01
Az arculat előbb készült el, mint az oldal.
Logó, színvilág és tipográfia nélkül a weboldal csak egy designjavaslat lett volna, amelyet a következő anyag felülír. Az arculat rögzítése után a katalógus, a színkollekció és az oldal ugyanabból a rendszerből épül.
Mi alapján: egy termékbevezetésnél a weboldal csak egy csatorna a sok közül. Ha az arculat utána születik, mindent újra kell rajzolni.
-
02
A szerkezet interaktív diagram lett, nem bekezdés.
Négy réteg, egyesével kinyitható magyarázattal, mellette a robbantott render. A látogató a saját tempójában halad, és csak azt olvassa el, ami érdekli: a kereskedő a ragasztást, az építtető a külső felületet.
Mi alapján: a hibrid szerkezet előnye négy különálló műszaki állítás. Egy bekezdésbe zsúfolva egyik sem marad meg.
-
03
A látvány 3D-ből épült, mert máshogy nem lehetett.
Az országban akkor alig néhány kész AluConnect létezett, azok is bemutatóteremben, otthonokban fényképezni tehát nem lehetett. A gyártótól is csak néhány, a gyártáshoz készült 3D modell érkezett. Ebből épült fel a teljes látványvilág, az életképektől a robbantott szerkezeti renderig.
Mi alapján: nem esztétikai döntés volt, hanem az egyetlen járható út. Cserébe minden képkocka tervezett: a szín, a ház és a napszak is.
-
04
A képek egy mátrixból születtek.
Élethelyzet, szín és nyílászáró-típus: a látványtervek ennek a három tengelynek a metszéspontjain készültek. Nem egy szép ház több szögből, hanem ugyanaz a termék más otthonban, más RAL-színben, más nyitási móddal.
Mi alapján: a sokszínűség csak akkor állítás, ha látszik. Egy típus egy színben nem sokszínűség, csak egy termékfotó.
-
05
Két célcsoport, egy görgetés.
A kutatás megmutatta, kik döntenek. A kereskedő partner mérőszámot keres (Uf-érték, rendszermélység, RC2), az építtető viszont látványt és biztonságérzetet. A valódi kihívás nem az egyik vagy a másik kiszolgálása volt, hanem az egyensúly: ugyanaz a görgetés vigye végig mindkettőt. Ezért váltakozik életkép, adatsáv és magyarázat.
Mi alapján: a két olvasó ugyanazon az oldalon jár, de nem ugyanazt olvassa el. Az Uf = 0,8 W/(m²K) ezért ott áll az első képernyőn, az indoklása viszont külön szekcióban.
-
06
A mozgás nem díszítés, ettől lesz prémium az élmény.
A kutatásból az jött ki, hogy a célközönség az Apple-éhez hasonló élményt vár egy ilyen oldaltól. Ezt állóképpel nem lehet megadni: a görgetésre induló mozgás, a diagram rétegeinek nyílása és a képváltások ritmusa együtt adja azt, amit a látogató „prémiumnak” érez.
Mi alapján: a prémium hatás a részletek időzítéséből áll össze. Ha a mozgás késik vagy ugrik, az a termékre vetül vissza.
-
07
A letöltés önálló cél, nem mellékes funkció.
Katalógus és színkollekció külön aloldalon, közvetlen letöltéssel. A kereskedő partnernek ez a leggyakoribb feladata az oldalon: elvinni valamit, amit meg tud mutatni az ügyfelének.
Mi alapján: ha egy terméket kereskedők adnak el a vásárlóknak, a letöltés gyakran megelőzi a kapcsolatfelvételt, és sokszor éppen az vezet oda.
-
08
Egyetlen HTML, beépített stílussal és scripttel.
A termékoldal nem alkalmazás: nincs adatbázisa, nincs keresője, nincs bejelentkezés. Statikus kimenetet építettünk, a stílussal és a scripttel a dokumentumba fordítva, így nincs külön kérés, amelyre a megjelenítés várna.
Mi alapján: mérve 1,2 mp LCP és nulla elrendezés-elmozdulás. Ezt egy nehezebb keretrendszerrel is el lehet érni, csak több munkából.
Hogyan készült
Öt réteg, amiből az oldal összeáll.
Egy mondat a lényegről
„A két világ legjobbja.” Az alumínium eleganciája és a PVC hőszigetelése egy szerkezetben: a teljes üzenet az első képernyőn.
Termékkínálat
Ablakok és bejárati ajtók egyetlen rendszerből: nyíló, bukó, tolóajtó, karcsú profilok, változatos osztások.
Felelős választás
A PVC és az alumínium teljes körű újrahasznosítása zárt anyagkörben. A prémium választás mellett ez érv a környezettudatos beruházónak.
Letöltések
Katalógus és színkollekció egy kattintásra: a kereskedő partner ezt viszi magával az ügyfélhez.
Kapcsolatfelvétel
Külön út a kereskedő partnernek és a kivitelezőnek: már az űrlap előtt eldől, ki kérdez, nem utána.
A diagram az a pont, ahol egy termékoldal vagy működik, vagy nem. Négy réteget kellett úgy megnyithatóvá tenni, hogy közben a render is mozogjon, mindezt egy olyan oldalon, amelynek nincs keretrendszere.
Biró Tamás
vezető fejlesztő, KUTASSY
