Grieķu restorāna vietne
Tāda sajūta kā pašā vakarā
Aristeia ir grieķu restorāns un bārs Ziemeļlondonā, kas veidots, balstoties uz nepietiekamu greznību un patiesu viesmīlību. Tīmekļa vietnei bija jāliek viesim tādas sajūtas, pirms viņš ieiet pa durvīm.
Es izstrādāju un izveidoju deviņu lappušu vietni ar animētu sveicienu, pilnekrāna animētu izvēlni, video varoni, vienmērīgu ritināšanas kustību, lapu pāršķiršanas grāmatu piecām izvēlnēm un tiešsaistes rezervāciju un svinību jautājumiem.
Viesi jau pirmajā ekrānā uztver telpu, ēdienu un pakalpojumu, var izlasīt katru izvēlni jebkurā ierīcē un ar dažiem pieskārieniem pieprasīt galdiņu, neizejot no zīmola.
Aristeija ir a Next.js vietne, kurā kustība nes zīmolu: an animēta sveiciena, a pilnekrāna animācijas izvēlne un vienmērīga ritināšana ar ritināmiem atklājumiem no GSAP un Lenis.
Aiz slīpēšanas tas ir praktiski: piecas izvēlnes, kas pārvēršas kā grāmata, bet var lasīt kā tekstu vai lejupielādēt, rezervācijas veidlapa, kas piedāvā tikai reālos darba laikus un kuru nevar iesniegt divreiz, un īpaša pieprasījuma lapa kāzas, dzimšanas dienas un pasākumi.
Greznībai ir jābūt jūtamai, nevis norādītai
Zīmola solījums ir nepietiekama greznība un patiesa viesmīlība. Veidne ar krājuma fotoattēliem un rezervēšanas logrīku atsauktu šo solījumu pirmajā sekundē.
Kustība, kas nekad netraucē
Animācijai bija jārada vietne mierīga un dārga sajūta, nevis lēna. Katrs efekts, kas nepieciešams, lai tālruņos būtu vienmērīgs un izslēgtu apmeklētājiem, kuri dod priekšroku samazinātām kustībām.
Drukātas ēdienkartes, lasāmas tiešsaistē
Restorāna piecas ēdienkartes ir veidotas mākslas darbā. Viņiem bija jāsaglabā izskats ekrānā un joprojām jābūt lasāmiem tālrunī, ekrāna lasītājos un meklētājprogrammās.
Rezervācijas un uzziņas vienuviet
Galdiem, kāzām, dzimšanas dienām un privātiem pasākumiem bija nepieciešams skaidrs ceļš, nenosūtot viesus uz trešās puses rezervēšanas vietni.
Animēts sveiciens
Pirmajā apmeklējuma reizē zelta lauru vainags apvelk Aristejas cekuls, "Laipni lūdzam" aizpildās no kontūras, un ARISTEIA vārdzīme uztver gaismu burtu pa burtam, pirms priekškars paceļas uz varoņa plēvi.
Pilnekrāna animācijas izvēlne
Ar pogu MENU tiek atvērts tumšs panelis, kas noslauka lapu. Astoņas lieli numurētas saites parādās viena pēc otras, kamēr rezervēšanas poga un adrese izgaist blakus tām. Tālruņos tas kļūst par augstu sarakstu ar vienu zelta krustiņu.
Skaista, vienmērīga ritināšana
Lenis piešķir visai vietnei maigu, svērtu ritināšanu, un GSAP ScrollTrigger piesaista tai kustību: virsraksti un kopijas tiek atklātas, kad tie ienāk, attēli mainās savā tempā, un sadaļas tiek pārvietotas starp tumšo un krēmkrāsas toni bez stingra griezuma.
Burti, kas ripo virs kursora
Katra navigācijas saite un poga ir sadalīta burtos. Virzot kursoru, burti saritinās viens pēc otra un tiek aizstāti ar jaunu kopiju — maza detaļa, kas liek visam interfeisam justies izstrādātam.
Kursors, kas runā
Darbvirsmā mīksts apļveida kursors seko rādītājam un kļūst par etiķeti virs lietām, kuras varat veikt, piemēram, SKATĪT IZVĒLNI virs izvēlnes vāka vai OPEN NAVIGATION virs izvēlnes pogas.
Filma, nevis fotogrāfija
Varonis atskaņo klusu filmu par ēdamistabu aiz virsraksta ar pogu Pause video, lai kustība vienmēr būtu viesa kontrolē.
- 01
Izvēlieties datumu
Kalendārs piedāvā tikai nākamās 90 dienas, un nevar iesniegt dienu, kurā nav pieejami laiki.
- 02
Viesi un laiks
Svētku lielums un laiks no šīs dienas atvērtajām vietām, tāpēc viesim nekad netiek piedāvāts laiks, kad virtuve ir slēgta.
- 03
Dažas detaļas
Vārds, e-pasts, tālrunis un izvēles piezīmes dzimšanas dienai, jubilejai, piekļuves vajadzībām vai uztura prasībām ar nepārprotamu piekrišanu.
- 04
Vienreiz nosūtīts
Katram pieprasījumam ir unikāls ID, tāpēc dubultklikšķis vai atkārtots mēģinājums ar sliktu savienojumu nevar izveidot otru rezervāciju. Slēpts meduspoda lauks klusi novērš botus.
- 05
Atsauce
Tajā pašā lapā viesis uzreiz redz animētu apstiprinājumu ar rezervācijas atsauci.
Dziļa Egejas jūras flote, silts krēms un antīks zelts nes visu vietni. Sadaļas mainās starp tumši un krēmkrāsas toni, tāpēc garai lapai ir ritms bez papildu dekorācijas.
Lieli klasiskā serifa virsraksti savieno vertikālu līniju ar slīprakstu “Izgatavots, lai kopīgotu. Paredzēts uzkavēties.” uz etiķešu mazajiem lielajiem burtiem. Tonis ir izvēlnes karte, nevis tīmekļa veidne.
Amforas, lauru vainagi, gredzeni, kūkas un glāzes ir uzzīmētas kā smalkas zelta līnijas ikonas, un kājene beidzas ar plašu ilustrāciju ar grieķu galdu, no kura paveras skats uz salas ciematu.
Katra no piecām izvēlnēm tiek atvērta kā grāmata. Lapas tiek pārvērstas 3D formātā, izmantojot CSS transformācijas, noklikšķinot, velkot vai izmantojot bulttaustiņus, un Escape aizver grāmatu.
Tālummaiņa, lai lasītu, palielina lapu mazos ekrānos, Lasīt kā tekstu maina mākslas darbu pret reāli pieejamu tekstu, un katra izvēlne ir pieejama kā PDF lejupielāde.
Kāzām, dzimšanas dienām un pasākumiem katram ir sava lapa un sava aptaujas anketa, tāpēc viesim, kas plāno kāzas, nekad nav jāraujas pa galdiņu rezervācijas veidlapu.
Rezervācijas tiek publicētas pašas vietnes rezervēšanas API, nevis trešās puses logrīkā, tāpēc pieredze paliek zīmola līmenī no pirmā ekrāna līdz apstiprināšanai.
Animācijas pārbauda ierīces samazināto kustību iestatījumu, tāpēc apmeklētāji, kuri lūdz mazāk kustību, joprojām saņem katru vārdu un attēlu bez teātra.
Saite pāriet uz saturu, apzīmētas pogas, pauzējama varoņa filma un ēdienkarte, kas tiek pagriezta ar bulttaustiņiem un aizverama ar Escape, lai luksusa sajūta nekad nevienu neizslēdz.
Ir ideja projektam?
Pastāstiet man, ko jūs mēģināt sasniegt. Jums nav jāzina, kura tehnoloģija jums ir nepieciešama: es palīdzēšu definēt tehnisko pieeju, darbības jomu, laika grafiku un izmaksas pirms izstrādes sākuma.
- E-PASTS // info@artursdev.co.uk
- TĀLRUNIS // 07460 162893
- VĒLATIES APRUNĀTIES? // Rakstiet, lai vienotos par zvanu
- LINKEDIN // aradionovs ↗
- ATRODOS // Bārneta, Ziemeļlondona, Lielbritānija. Darbs ar klientiem jebkurā vietā.