Väljavõte.
See näide räägib sellest, kuidas me lõime ja täiustasime kodulehte, tuginedes allhanke korras disainerilt saadud kujundusele.
2018. aasta alguses alustasime koostööd ettevõttega . Olles töötanud koos kolmanda osapoole disaineritega, suutsid nad pakkuda meile originaalset kodulehe disaini. Rakendasime projekti täielikus kooskõlas disainiga ja täiustasime selle funktsioone.
Kliendi lugu.
on spetsialiseerunud plaatide hulgi- ja jaemüügile ning pakub teenuseid disainiprojektide loomisel ja remonditöödel.
Meie koostöö alguses oli ettevõttel vananenud koduleht, mis ei vastanud nõuetele ja ei vastanud tegevuse spetsiifikale.
Veidi varem tegi ettevõte koostööd disaineritega, kes töötasid tulevase kodulehe kujunduse välja PSD-vormingus (Photoshop). Teatud põhjustel, näiteks pika arendusaja tõttu, otsustas klient leida uued tarkvaraarendajad.
Nad leidsid, et oluline on järgmine:
- Valmis disaini kasutamine (selle eest maksti ja see vastas nõuetele).
- Kodulehe visuaalse osa identsus disainiga
- „Võtmed kätte“ kujundus koos kodulehe jaoks vajalike funktsioonidega lühikese aja jooksul
Meie lahendus.
See polnud esimene kord, kui me sellises formaadis töötame. Kõik meie projektid on klientide poolt heaks kiidetud, kuna need vastavad täielikult seatud ülesannetele.
Saime selle projekti teostajateks, olles 2 kuu jooksul arendanud PSD-kujunduste põhjal valmis kodulehe. Lisasime ka mitmeid sektsioone ja täiustasime disainfunktsioone, et tulemus vastaks kliendi ärieesmärkidele.
Kodulehe HTML-kodeerimisel lähtusime tuntud Pixel Perfect'i kontseptsioonist. Selle lähenemisviisiga saate tutvuda meie Pixel perfect WordPressi mallide arendus projektis.
Tulemus.
Avaleht
Leheküljel on järgmised elemendid:
- Täisekraaniline slaidiesitlus atmosfääriliste fotodega interjööridest
- Tooteklassifikaator (kataloog tootetüüpide kaupa: laminaat, plaat, parkett, vinüül, vaibad)
Avalehe vana versioon:

Uue avalehe makett:

Uue avalehe versioon:

Tootekataloog
Tootekataloogi jaoks rakendasime integratsiooni kodulehe ja Visma Horizon lao ERP-süsteemi vahel. Haldurid saavad laorakenduses muuta kaupu, nende koguseid, omadusi ja hindu. Kõik muudatused ilmuvad automaatselt kodulehe kataloogi sektsiooni.
Kõik 5-st sektsioonist - plaadid, laminaat, vaibad, parkett, vinüül - on esitatud kolmes kategoorias:
- Kollektsioonid
- Interjöörid
- Kataloog
Kataloogi lehekülje vana versioon

Uue kataloogi lehekülje makett:

Uue kataloogi lehekülje versioon:

Tooteotsingu filter
Otsingufiltri ikoon on ekraani vasakul küljel.
See aitab valida tooteid vastavalt järgmistele parameetritele:
- Ruumid
- Tekstuur
- Hind
- Variatsioonid
- Kulumiskindlus
- Materjal
- Pinna tüüp
- Libastumiskindlus
- Tekstuur
- Vorm
- Värv
Nii nagu kollektsiooni elementide laadimine, töötavad ka otsingufiltrid dünaamiliselt, laadides andmeid Visma Horizon laosüsteemist. Selle rakenduse muudatused kuvatakse dünaamiliselt kodulehel.

Maandumisleht
See on sihtgruppidele mõeldud maandumisleht. Näiteks kontekstipõhise reklaami jaoks. See kuvab olulist teavet ettevõtte kohta erinevatele sihtgruppidele - ehitajatele, projekteerijatele, arhitektidele.
Maandumislehe vana versioon

Maandumislehe makett:

Uue maandumislehe versioon:

Kontaktide lehekülg
Lehekülg sisaldab kontaktandmeid, sisseehitatud Google Maps'i vidinat ettevõtte asukohaga ja kontaktvormi.
Kontaktide lehekülje vana versioon

Kontaktide lehekülje makett

Uue kontaktide lehekülje versioon:

Kokkuvõte.
Me suutsime projekti ellu viia 2 kuu jooksul. Klient sai uue kodulehe, mille originaaldisain oli täpselt vastavuses kujundusega.
Selle projekti üks tunnusjoontest oli Visma Horizon laoarvestussüsteemi integreerimine kodulehe kataloogiga. Kõiki muudatusi saab teha rakenduses: toote kustutamine, uute toodete lisamine, kirjelduse ja hinna muutmine. Ja need uuendused kuvatakse automaatselt kodulehel.