gwaith
mwy
Gwybodaeth
mwy
Ysbrydoli rhyngweithio: sut y gwnaethom ddylunio tudalen lanio ar gyfer ein hymgyrch Nadolig 2025
Bob blwyddyn, mae ein hymgyrch Nadolig yn rhoi cyfle i ni arbrofi, archwilio syniadau newydd, ac arddangos yr hyn rydyn ni'n ei wneud orau. Mae'n gyfle i gamu y tu hwnt i friffiau cleientiaid a chreu rhywbeth sy'n adlewyrchu ein galluoedd dylunio a datblygu sy'n esblygu'n barhaus.
Ar gyfer ymgyrch eleni, penderfynon ni fynd y tu hwnt i'n cynnwys fideo Nadoligaidd arferol a churadu profiad digidol mwy rhyngweithiol; rhywbeth chwareus, trochi ac sy'n sicr o aros yn y cof!
Wrth wraidd y cyfan roedd cwestiwn: sut gallem ni ychwanegu haen newydd at ein hymgyrch Nadolig a fyddai’n gwahodd pobl i gymryd rhan, yn hytrach na dim ond gwylio?
Roeddem am greu profiad a oedd yn teimlo’n premiwm ac yn greadigol, tra’n parhau i fodloni’r un safonau ag yr ydym yn eu cymhwyso i waith ein cleientiaid: hynny yw, cyflym, ymatebol, a hygyrch yn llawn.
Creoddwn dudalen lanio ryngweithiol ar gyfer persawr Nadoligaidd dychmygol, wedi'i chynllunio i ategu'r ymgyrch Nadolig ehangach a dod â'r cysyniad yn fyw.
Wedi'i adeiladu gan ddefnyddio Next.js, mae'r prosiect yn arddangos arbenigedd P+S o ran darparu profiadau blaen-ben perfformiad uchel y gellir eu graddio. Rhoddodd Next.js y hyblygrwydd i ni gyfuno delweddau cyfoethog, animeiddio, a rhyngweithioldeb heb gyfaddawdu ar berfformiad, hygyrchedd, na defnyddioldeb ar ddyfeisiau symudol. Roedd y dudalen orffenedig yn cynnwys:
- Delweddau a fideo wedi'u llwytho'n ddiog – fel bod y dudalen yn teimlo'n gyflym ac yn ymatebol, hyd yn oed gyda chyfryngau cyfoethog.
- Meintiau cyfryngau wedi'u hoptimeiddio, gyda fformatau penodol ar gyfer ffonau symudol – i ddarparu delweddau o ansawdd uchel heb arafu defnyddwyr symudol.
- Dim JavaScript na CSS nas defnyddir – yn cadw'r profiad yn ysgafn ac yn fywiog.
- Modelau 3D wedi'u hoptimeiddio – yn sicrhau bod cynnwys rhyngweithiol yn llyfn ac yn ymdrochol heb gyfaddawdu ar berfformiad.
- Animeiddiadau wedi'u hysgogi gan sgrolio – mae animeiddiadau yn ddifyr ond dim ond pan fo angen y maent yn rhedeg, gan leihau prosesu diangen.
Dod â'r ‘cynnyrch’ yn fyw
Yn ganolog i'r profiad mae potel bersawr 3D ryngweithiol, a adeiladwyd gennym gyda Three.js. Caniataodd hyn i ni greu ymdeimlad o ddyfnder a chyffyrddoldeb a oedd yn atgyfnerthu naws premiwm y cysyniad ac na fyddai wedi bod yn bosibl gyda delweddau statig yn unig. Roedd rhai o'r effeithiau a ddefnyddiwyd gennym yn cynnwys:
- Goleuadau a myfyrdodau deinamig – i roi golwg realistig a premiwm i'r botel.
- Amgylcheddau wedi'u teilwra – i greu'r awyrgylch a'r naws o amgylch y cynnyrch.
- Animeiddiad cyflwyno llyfn – i ddenu defnyddwyr ar unwaith pan fydd y dudalen yn llwytho.
- Rhyngweithio sy'n ymateb i'r llygoden – gan ganiatáu i ddefnyddwyr archwilio'r botel mewn amser real, gan wneud y profiad yn hwyl ac yn ymdrochol.
- Renderio 3D o ansawdd uchel yn y porwr – gan ddarparu profiad cyfoethog a rhyngweithiol heb adael y dudalen we.
Cadw pethau'n symud
Mae'r holl symudiadau ar y dudalen yn seiliedig ar sgrolio ac yn cael eu pweru gan Motion, gan roi rheolaeth i ddefnyddwyr dros gyflymder y profiad tra'n cadw'r animeiddiadau'n llyfn ac yn bwrpasol.
Mae fideo sgrin lawn yn cysylltu'r dudalen lanio â'r ymgyrch ehangach, tra bod cynlluniau ymatebol yn sicrhau bod y profiad yn gweithio'n ddi-dor ar ffonau symudol a chyfrifiaduron bwrdd gwaith.
Er gwaethaf y defnydd o 3D, animeiddio a fideo, mae'r wefan yn cydymffurfio'n llawn â safonau hygyrchedd ac roedd hyn wedi'i wreiddio o'r cychwyn cyntaf, gyda sylw gofalus wedi'i roi i sut mae pob defnyddiwr yn profi'r wefan, gan gynnwys:
- HTML semantig a strwythur tudalen clir – gan sicrhau bod darllenwyr sgrin a thechnolegau cynorthwyol yn gallu dehongli'r dudalen yn gywir.
- Llywio llawn trwy fysellfwrdd a threfn ffocws resymegol – gan ganiatáu i ddefnyddwyr na allant ddefnyddio llygoden lywio'n reddfol.
- Cyferbyniad lliw digonol ar draws testun ac elfennau UI – gan wneud cynnwys yn ddarllenadwy i ddefnyddwyr â golwg isel neu ddallineb lliw.
- Disgrifiadau ystyrlon o ddelweddau ar gyfer cynnwys gweledol – gan adael i ddefnyddwyr sy'n dibynnu ar ddarllenwyr sgrin ddeall delweddau allweddol.
- Cefnogaeth i leihau mudiant ar gyfer animeiddiadau sy'n seiliedig ar sgrolio – gan atal anghysur sy'n gysylltiedig â mudiant a pharchu dewisiadau'r defnyddiwr.
Y canlyniad
Ychwanegodd y dudalen lanio orffenedig ddimensiwn rhyngweithiol newydd at ein hymgyrch Nadolig anghonfensiynol. Gan ddefnyddio Next.js, Three.js, a Motion, llwyddasom i greu profiad digidol deniadol a lwyddodd i gydbwyso dod â'n creadigrwydd yn fyw gyda pherfformiad o'r radd flaenaf a hygyrchedd.
Gallwch archwilio'r canlyniad terfynol yma: https://slej.proctorsgroup.com/
Trwy greu’r profiad hwn, fe wnaethom ddangos sut y gall technolegau fel Next.js, Three.js, a Motion gydweithio mewn ffordd hygyrch sy'n barod ar gyfer cynhyrchu. Mae’n enghraifft dda o sut rydym yn mynd ati i adeiladu prosiectau blaen-ben cymhleth yn P+S, gan ganolbwyntio ar berfformiad, defnyddioldeb, a manwl gywirdeb, hyd yn oed pan fo’r syniadau’n uchelgeisiol.
