„Baldūra“ – internetinė baldų parduotuvė, kurios pagrindinis tikslas sukurti modernią, patogią ir vartotojui draugišką internetinę svetainę, pritaikytą skirtingų dydžių ekranams. Ji atitinka šiuolaikinio interneto dizaino principus, o didžiausias dėmesys skiriamas dizainui ir vartotojo sąsajai. Projektas įgyvendintas naudojant HTML, CSS ir JavaScript. Kuriant šią elektroninę parduotuvę buvo laikomasi keturių pagrindinių žingsnių:
- Aiškiai pabrėžti, kas tai per projektas ir kam jis skirtas.
- Paruošti ir surinkti visą reikiamą turinį – tekstus, paveikslėlius, vaizdo medžiagą ir pan.
- Svetainės išdėstymo maketo kūrimas ir išdėstymo komponentų kūrimas.
- Svetainės kūrimas ir įgyvendinimas.
1. Pagrindinis projekto tisklas
Šio projekto tikslas – sukurti internetinę baldų parduotuvę, kuri sudarytų sąlygas verslui efektyviai parduoti baldus, o klientams – įsigyti estetiškas, patvarias ir funkcionalias prekes už prieinamą kainą nei įprasta rinkoje. Todėl tikslinė auditorija – žmonės, siekiantys atnaujinti savo namų interjerą ir pagerinti gyvenimo komfortą, tačiau ieškantys ekonomiškų sprendimų.
2. Turinio planavimas ir ruošimas
Kadangi svetainė yra nedidelė, visa pagrindinė informacija pateikiama viename puslapyje, todėl atskiro svetainės žemėlapio ir sudėtingos navigacijos kurti nereikia. Kuriant šios svetainės dizainą buvo pasirinktas ramus ir jaukus stilius.
Tai reiškia, kad jau buvo priimti pagrindiniai dizaino sprendimai: pasirinktas aiškiai skaitomas serifinis arba sans-serifinis šriftas, naudojami paveikslėliai su užapvalintais kampais, o spalvų paletę sudaro pastelinės spalvos. Svetainė orientuota į vartotojo gerovę, todėl joje pristatomi kokybiški baldai, pritaikyti skirtingiems kliento poreikiams. Turinys apima informaciją apie parduotuvės privalumus, baldų katalogą, trumpą pristatymą apie pačią parduotuvę bei kontaktinę informaciją.
3. Svetainės maketavimas ir komponentų idėjos
Kuriant šią elektroninę parduotuvę nuspręsta visą turinį – reklamas, teikiamas paslaugas, baldų katalogą, kontaktinę informaciją ir trumpą pristatymą apie svetainę pateikti viename puslapyje. Turinį suskirstyti į atskiras sekcijas ir pasinaudojus įkvėpimu iš kitų internetinių puslapių, kiekvienai sekcijai parengti atskirus maketus. Kiekvienoje sekcijoje apgalvoti konkretūs elementai arba jų grupės, kurie geriausiai atspindi parduotuvės profesionalų įvaizdį, žemiau pateikiamos nuorodos į tuos puslapius iš kurių pritaikytos šios idėjos:
Gautas Rezultatas:
- Logotipas kartu su navigacija
- Pagrindinė reklaminė sekcija
- Privalumai ir informacija apie parduodamus produktus
- Produktų katalogas
- Kaip nusipirkti prekes
- Trumpas svetainės aprašymas ir kontaktinė informacija
- Poraštė
4. Svetainės kūrimas ir įgyvendinimas
Kuriant šį internetinį tinklalapį nuo pat pradžių buvo taikomas prie skirtingų ekranų dydžių prisitaikantis dizainas. Dėmesys buvo skiriamas vartotojo patogumui, kad svetaine būtu patogu naudotis tiek telefone, tiek planšetinėje ar kompiuteryje. Siekta, kad tekstas būtų įskaitomas, spalvų kontrastas – pakankamas, išdėstymas ir vaizdiniai elementai lankstūs. Medijos užklausos leidžia koreguoti tam tikrus elementus priklausomai nuo ekrano dydžio. Apibendrinant, projekte taikomi devyni dizaino principai:
- Tipografija
- Spalvos
- Vaizdai ir iliustracijos
- Piktogramos
- Šešėliai
- Kampų užapvalinimas
- Tuščia erdvė
- Vizualinė hierarchija
- Vartotojo patirtis
4.1 Tipografija
Tipografija — tai raidžių, teksto išdėstymo menas ir technika, kurių tikslas yra padaryti rašytinę kalbą lengvai skaitomą ir vizualiai patrauklią, kai ji pateikiama ekrane. Visi dydžiai nurodyti ne pikseliais, o rem vienetais. Rem vienetai yra CSS matavimo vienetai, priklausantys nuo šakninio elemento <html> šrifto dydžio. Todėl, jei vartotojas naršyklės nustatymuose padidins arba sumažins šrifto dydį, pikseliais apibrėžti elementai išliktų nepakitę (pikselis yra absoliutus vienetas), o naudojant rem — visi svetainės dydžiai proporcingai padidės arba sumažės, kas gerina prieinamumą ir lankstumą. Jeigu numatytas šrifto dydis yra 16 pikselių, tai 1rem bus lygus tiems 16 pikselių. Kuriant šį tinklapį nuspręsta, kad 1 rem atitiktų 10 pikselių — taip patogiau skaičiuoti, todėl reikėjo paversti šrifto dydį iš 16 į 10 pikselių. Pavyzdžiui, norint, kad šrifto dydis būtų 22 pikseliai, reikia naudoti 2.2 rem.
Atsižvelgiant į pasirinktą ramų ir jaukų dizaino stilių, tinklalapyje naudojamas švarus švarus sans-serif šriftas „Work Sans“ iš Google Fonts puslapio.
Buvo sukurta šrifto dydžių sistema apribojanti galimus teksto dydžių pasirinkimus. Tai supaprastina sprendimų priėmimą ir leidžia išvengti eksperimentavimo su kiekvienu atskiru dydžiu – tekstui naudojami tik iš anksto apibrėžti dydžiai, užtikrinantys nuoseklumą ir spartesnį darbą. Taip pat buvo nustatyti teksto svoriai, ryškumas ir eilučių aukštis, kurie taikomi antraštėms ir pabrėžimams. Tekstas lygiuojamas dešinėje pusėje, o vienoje eilutėje ribojamas simbolių kiekis, tam, kad turinys būtų lengviau skaitomas.
4.2 Spalvos
Kadangi elektroninė parduotuvė siūlo įvairius baldus, pagrindine spalva pasirinkta ruda — ji asocijuojasi su gamta, ilgaamžiškumu ir komfortu.
Ši spalva naudojama visame tinklalapyje, o iš jos naudojant įrankį Tint&Shade Generator sugeneruojama visa teminė spalvų paletė, kurią sudaro šios spalvos atspalviai ir šešėliai.
Teksto spalva nėra visiškai juoda — pagrindiniam tekstui naudojama šiek tiek šviesesnė tamsi pilka, antraštėms parinkta tamsesnė pilka, o akcentams kai kur taikomas tamsiausias teminės spalvos atspalvis. Konkrečios spalvos pasirenkamos atsižvelgiant į foną, siekiant užtikrinti pakankamą kontrastą, kuris yra itin svarbus teksto įskaitomumui ir prieinamumui. Projektuojant svetainę sąmoningai buvo laikomasi teksto kontrasto reikalavimų: pagrindinis tekstas atitinka 4.5:1 kontrasto santykį, o antraštėms taikomas apie 3:1 kontrastas, atsižvelgiant į jų dydį, ryškumą ir foną. Kiekvieną teksto kontrastą tikrinau su šiuo įrankiu Coolors – Contrast Checker.
Patikrinus spalvų kontrastus ir sugeneravus pagrindinę spalvų paletę, sudaromas dokumentas, kuriame surašyti visi dizaino sprendimai. Tai padėjo išlaikyti spalvų nuoseklumą visame projekte.
4.3 Vaizdai ir iliustracijos
Atsižvelgiant į svetainės asmenybę yra pasirenkamos fotografijos arba iliustracijos, kurios laikytųsi vieningo vizualinio stiliaus. Vaizdai parinkti taip, kad aiškiai perteiktų elektroninės baldų parduotuvės pobūdį ir derėtų kartu su pateiktu turiniu. Vaizdai naudojami kaip foninis elementas, o ne pagrindinis dėmesio taškas, todėl jiems taikomas švelnus spalvinis perdengimas, sumažinantis vaizdų kontrastą ir leidžiantis tekstui bei svarbiausiam turiniui likti pirmame plane.
Visi svetainės vaizdai yra prisitaikantys prie skirtingų ekranų — jų dydžiai nurodyti procentais, todėl vaizdai automatiškai keičiasi pagal turinio plotį. Taip pat didelis dėmesys skiriamas – vaizdų optimizavimui, kuriuo siekiama užtikrinti greitą svetainės pakrovimą. Vaizdų raiška parenkama atsižvelgiant į jų realų atvaizdavimo dydį ekrane, padauginant jį iš dviejų, kad vaizdai išliktų ryškūs aukštos raiškos ekranuose. Pavyzdžiui, jei originalus vaizdas yra 2480 × 3600 pikselių, tačiau svetainėje jis rodomas tik 800 × 600 pikselių dydžiu, optimizuota vaizdo raiška yra 1600 × 1200 pikselių. Tokiu būdu vaizdas išlieka kokybiškas, bet užima ženkliai mažiau vietos ir paspartinamas puslapio užkėlimas.
4.4 Piktogramos
Šiame projekte naudojamas Phosphor Icons piktogramų rinkinys. Ikonos buvo parinktos taip, kad papildytų tekstinę informaciją, padėtų greičiau suprasti turinį ir sustiprintų vizualinę hierarchiją.
4.5 Šešėliai
Subtilūs šešėliai taikomi produkto kategorijų blokams, produkto kortelėms, prekių paieškos laukeliui ir mygtukams, ypač tiems, kurie pateikiami ant vaizdų. Tai švelniai atskiria interaktyvius elementus nuo fono, pagerina vizualinę hierarchiją.
Projekte naudojami šešėliai buvo suklasifikuoti nuo subtilesnių iki labiau pastebimų, taip užtikrinant dizaino nuoseklumą.
4.6 Kampų užapvalinimas
Kampai projekte dažniausiai yra švelniai apvalinti — didesniems elementams ar vaizdams pritaikytas didesnis apvalinimas. Apvalinimo vertės nustatytos pikseliais, o ne rem vienetais, kad vartotojo naršyklės arba šrifto dydžio pakeitimai neturėtų įtakos objekto kampuotumui. Tam tikrais atvejais apvalinimui naudojamos procentinės reikšmės, siekiant, kad elementų kampai sudarytų tobulą apskritimą.
4.7 Tuščia erdvė
Pakankami tarpai tarp elementų suteikia dizainui švarų, modernų įspūdį ir pagerina skaitomumą. Tuščia erdvė tarp teksto, vaizdų ar ikonų padeda aiškiai suprasti, kurie elementai priklauso tai pačiai grupei — tarpusavyje susiję elementai išdėstomi arčiau vienas kito, o atskiri elementai atskiriami didesniu atstumu, taip vizualiai perteikiant jų tarpusavio santykį. Tarp sekcijų paliekama daug tuščios erdvės, o tarp sugrupuotų elementų ir atskirų komponentų — mažiau. Tai padeda aiškiai atskirti turinio blokus ir lengviau suprasti struktūrą.
Siekiant užtikrinti dizaino nuoseklumą ir apriboti naudojamus tarpus, sukurta erdvių sistema, analogiška teksto dydžių sistemai.
4.8 Vizualinė hierachija
Vizualinė hierarchija padeda suprasti, kurie puslapio komponentai yra svarbiausi ir kokia tvarka vartotojas juos mato. Tai pasiekiama tinkamu išdėstymu, tuščios erdvės panaudojimu, teksto paryškinimu, bei ryškesnėmis spalvomis ar šešėliais. Taip pat galima sumažinti akcentus mažiau svarbiose vietose, kad pagrindiniai elementai labiau išsiskirtų. Puslapyje vaizdai buvo subtiliai sumenkinti ir perdengti, kad ryškios spalvos neblaškytų dėmesio ir žvilgsnis natūraliai kryptų į tekstinį turinį.
Elementų akcentavimas ir kitų sumenkinimas formuoja dėmesio kelią. Pirmiausia yra pastebimas produkto atvaizdas, užimantis apie pusę kortelės. Toliau matomos nuolaidos ir naujienų žymos — nuolaidos pažymėtos ryškia raudona spalva, o naujienos ryškia mėlyna juostele. Toliau dėmesys pereina prie kainų: esant nuolaidai, ji išryškinama didžiausiu šrifto dydžiu ir raudona spalva. Šalia pateikiama senoji kaina — mažesniu, tamsesniu šriftu ir perbraukta. Po to vartotojas pastebi veiksmų mygtuką, vėliau į antraštę (šiek tiek mažesnę už kainą, bet paryškintą) ir galiausiai į aprašymą, pateiktą gerokai mažesniu ir šviesesniu šriftu. Taip sukuriamas aiškus vartotojo vedimas per puslapį — šiuo atveju per produkto kortelę.
Šiais dizaino principais siekiama užtikrinti, kad vartotojas pirmiausia pastebėtų svarbiausius elementus ir atliktų numatytus veiksmus, bei lengvai pasiektų savo tikslus.
4.9 Vartotojo patirtis
Dizainas — ne tik išvaizda, bet ir funkcionalumas. Laikantis šių principų gerėja vartotojo patirtis ir puslapio prieinamumas. Visame projekte vietoje absoliučių pikselių naudojami santykiniai rem vienetai, kurie priklauso nuo naršyklės nustatyto šrifto dydžio, todėl gerbiami vartotojo nustatymai. Visi vaizdai, išskyrus prekių nuotraukas, turi aiškius aprašus, kad ekrano skaitytuvai galėtų perteikti informaciją regos sutrikimų turintiems vartotojams. Be to, projektas pritaikytas visiems įvairių dydžių įrenginiams, kad ši elektroninė parduotuvė pasiektų kuo didesnę auditoriją. Dizainas pasitelkus medijos užklausas, buvo suskirstytas į šešias grupes – nuo didžiausių ekranų ir nešiojamųjų kompiuterių iki planšetinių ir telefonų, kad dinamiškai prisitaikytų prie visų rezoliucijų, nuo didžiausios iki mažiausios.
Taigi naudojant HTML ir CSS sukurtas „Baldūra“ svetainės dizainas, siekiant pagerinti naudotojo patirtį ir įgyvendinti specifinį funkcionalumą, buvo pridėtas JavaScript kodas.
Javascript funkcijos ir interaktyvumas
- Poraštėje visada rodyti dabartinius metus.
- Paspaudus ant navigacijos mygtuko, sklandžiai peršokti ir atvaizduoti tą sekciją ekrane.
- Slankiklio animacija ir funkcionalumas, paspaudus pakeičiamas į kitą paveiksliuką, taip pat automatiškai keisti po tam tikro laiko.
- Filtro mygtukų funkcionalumas ir reikšmių atvaizdavimas ekrane.
- Akordeono funkcionalumas, informacijos išskleidimas ir atvaizdavimas, bei suskleidimas paspaudus.
- Paieškos, filtro, krepšelio ir paskyros langeliai atsidaro mygtuko paspaudimu, juos uždaryti galima uždarymo mygtuku arba spustelėjus už langelio.
- Telefono navigacijos funkcionalumas, paspaudus atsidaro meniu su sekcijų nuorodomis, kur pasirinkus nuorodą vyksta sklandus peršokimas ir ekrane atvaizduojama atitinkama sekcija.
- Viršutinė svetainės antraštė automatiškai slepiama, kai vartotojas slenka žemyn, ir vėl rodoma, kai slenka aukštyn. Tai įgyvendinta lyginant einamąją ir prieš tai buvusią slinkties poziciją: jei dabartinė pozicija didesnė – laikoma, kad slenkama žemyn, todėl antraštė paslepiama, jei mažesnė – ji grąžinama. Siekiant sumažinti našumą apkraunančių įvykių kiekį, slinktis apdorojama vykdymo ribojimo funkcija, kuri atnaujina būseną tik kas tam tikrą intervalą.
- Visos animacijos pristabdomos keičiant naršyklės lango dydį. Tai įgyvendinta naudojant atidėjimo funkciją: kol vyksta lango keitimas, animacijos laikinai sustabdomos, o atnaujinimai ir pasikeitimai taikomi tik tuomet, kai lango dydžio keitimo procesas baigiasi.
- Dideliems ekranams pridėtas mygtukas-rodyklė apačioje, ant kurios paspaudus įvykdomas sklandus grįžimas į puslapio pradžią.
Apibendrinant – projektas sukurtas naudojant HTML, CSS ir JavaScript. Tolimesnei projekto plėtrai numatoma jį perkelti į React.js, kas palengvins vartotojo sąsajos ir komponentų tobulinimą, bei leis prijungti duomenų bazę, iš kurios būtų dinamiškai užkraunami ir atvaizduojami visi produktai. Visgi svetainės kūrimas prasideda nuo idėjos, maketavimo ir apgalvotų dizaino sprendimų, kurie buvo pagrindinis šio projekto akcentas.