Hea luksusbrändi veebileht teeb sama mis esinduspood: jätab tootele ruumi, aeglustab külastaja tempot ja annab tunda, et iga detail on läbi mõeldud. Praktikas tähendab see vaoshoitust: vähem elemente ja rohkem valget või musta vaba pinda, aeglast ja täpset liikumist, suurt ilmekat kirja, oma fotosid ning kiiret laadimist. Suurejoonelisusel on oma koht, kuid peamiselt uute toodete ja piiratud seeriate tutvustamisel.
Vaatame, kuidas need põhimõtted ekraanil toimivad ja kus brändid eksivad.
Vaoshoitus annab märku luksusest
Massituru saidid võistlevad tähelepanu pärast: bännerid, märgised, taimerid ja viis üleskutset juba avavaates. Luksusbrändide veebilehed toimivad vastupidi. Üks pilt. Üks rida. Üks tegevus. Üleliigse puudumine väljendab enesekindlust.
Kuidas vaoshoitus veebilehel välja näeb:
- Üks keskne objekt vaate kohta. Toode, materjal või kella sihverplaat. Miski ei konkureeri tähelepanu pärast.
- Rohkelt vaba ruumi. Nii laiad veerised, mis sooduspoe veebilehel tunduksid raiskamisena.
- Vähe värve. Tavaliselt kaks neutraalset tooni ja üks aktsentvärv, mida kasutatakse säästlikult.
- Vähe ja tagasihoidlikke liideseelemente. Peened jooned, väikesed sildid ja menüü, mis ei jää ette.
- Ära tekita kunstlikku ostusurvet. Taimerid ja „ainult 3 alles” bännerid muudavad brändi kiiresti odavaks.
Aeglane ja täpne liikumine
Liikumine luksusbrändi veebilehel peaks meenutama kvaliteetse uksehinge tööd: sujuv, tajutava raskusega ja ilma vetruvate jõnksudeta. Mõned reeglid, mida oma töös kasutame:
| Element | Massituru mulje | Luksuse mulje |
|---|---|---|
| Pildi ilmumine | Kiire sisselibisemine, 200-300 ms | Aeglane sujuv ilmumine või avanemine maski kaudu, 800-1200 ms |
| Liikumiskõver | Vetruv, liigub lõpp-punktist üle | Pikk ease-out, pehme peatumine |
| Kursoriga osutamine | Värvisähvatus, suurendamine | Õrn pildinihe, valguse muutus |
| Kerimine | Palju liikuvaid elemente | Üks element liigub, teised seisavad |
| Lehevahetus | Järsk lõige | Lühike sujuv üleminek, mis hoiab pilti nähtaval |
Need kestused on meie töö põhjal lähtepunktid, mitte kindel reegel. Suund jääb aga samaks: aeglasemalt, vähem ja sujuvamalt. Teostusest lähemalt räägib meie veebianimatsiooni disaini juhend.
Aeglane liikumine ei tähenda rasket lehte. Animatsioon on aeglane, leht peab olema kiire. Arvesta eelistusega prefers-reduced-motion, et liikumisest loobunud külastaja näeks staatilist ja terviklikku kujundust.
Tüpograafia kannab brändi iseloomu
Vaoshoitud lehel räägib kõige rohkem kiri. Omanäoline seriifkiri või viimistletud grotesk, suur kirjasuurus ja hoolikalt valitud vahed ütlevad rohkem kui ükski graafiline element. Millele tähelepanu pöörata:
- Suuruste kontrast. Väga suured pealkirjad ja väike, rahulik põhitekst.
- Tähevahed ja reapikkus. Pealkirjade tähevahe on pisut tihedam, põhitekstis on 50-75 märki real. Seda vahemikku soovitab Baymard loetavuse jaoks.
- Vähe kirjaraskusi. Kaks või kolm, mitte kaheksa.
- Litsentsitud veebifondid, mis laaditakse õigesti. Kasuta omadust
font-displayja sobitatud asendusfonti, et pealkirjad fondi laadimisel ei hüppaks.
Oma fotod on alati paremad kui pildipanga omad
Luksuskaupade ostjad vaatavad tähelepanelikult. Pildipangafotod ja mallilikud renderdused jäävad kohe silma. Telli fotosessioon või tipptasemel 3D, mis näitab tekstuuri: naha mustrit, harjatud metalli ja kanga raskust. 3D eelis on kontroll: iga värvivariandi saad näidata täpselt sama valgusega, teha lähivõtteid, milleks ükski objektiiv ei küüni, ja esitleda tooteid, mida veel ei ole.
Kiirus on osa kogemusest
Luksussait, mille avavaade ilmub nelja sekundiga, mõjub odavalt, olgu see kui tahes ilus. Seda toetavad ka andmed. Google'i tellitud 55 ja Deloitte'i uuringus Milliseconds Make Millions seostati mobiilisaidi 0,1-sekundilist kiirenemist 40,1% kasvuga nende luksuskaupade ostjate osakaalus, kes liikusid tootelehelt toote ostukorvi lisamiseni. See oli uuritud valdkondade suurim mõju. Uuring märgib, et luksussektori ostuteekonna järgmisse etappi liikujate osakaal on alguses väike, mistõttu ka väikesed absoluutsed muutused paistavad protsentides suured. Suund on siiski selge.
Praktilised eesmärgid telefonis on Google'i „hea” taseme lävendid: LCP kuni 2,5 s ja INP kuni 200 ms.
Millal on suurejoonelisus omal kohal
Vaoshoitus on lähtekoht, mitte keeld. Mõnes olukorras on täismahus animatsioon, 3D ja video omal kohal:
- Uute toodete turuletoomine. Uus kollektsioon või lipulaevtoode saab eraldi lehe, mille avavaates on video ja toote interaktiivne vaade. Ülesehitust selgitab meie toote turuletoomise veebilehe juhend.
- Piiratud seeriad. Haruldus õigustab suurejoonelist esitlust. Lühikese elueaga leht võib olla põhisaidist julgem.
- Brändi maailm. Kampaania mikrosait, kus peamine on atmosfäär.
Hoia suurejoonelised efektid neil lehtedel ja põhipood rahulikuna. Just see kontrast muudab turuletoomise sündmuseks.
Premium-veebidisain ja auhinnad
Luksussaidid võidavad sageli disainiauhindu, sest žürii hindab teostuse meisterlikkust ja laitmatut vaoshoitust on raske saavutada. Kui kaalud, kas auhinna nimel pingutada tasub, loe meie seisukohta artiklist „Awwwardsi tasemel veebidisain”.
