Väljavõte.
Näide kodulehe malli loomisest WordPressi platvormi kujundusest. Meie kliendid - turundus-, reklaami-, disaini- ja SEO-agentuurid - pakuvad oma klientidele turundustuge, reklaamiteenuseid ja SEO-reklaamimist. Nende spetsialistid loovad individuaalse kodulehe disaini ja meie teeme sellele programmeerimisosa.
Kodulehtede loomisel on oluline, et see vastaks täpselt kavandatud kujundusele. Selleks kasutame Pixel Perfect lähenemisviisi.
Kliendi lugu.
Agentuurid, mis pakuvad erinevaid teenuseid ettevõtte reklaamimiseks Internetis, pöörduvad sageli kodulehe loomiseks kolmanda osapoole arendajate poole. Nad loovad oma klientidele disainilahendusi, mis tulevikus tuleb konverteerida sobivaks malliks WordPressi CMS-i jaoks.
Meile on esitatud Figma / Photoshop / Adobe Illustrator / Adobe XD ja muudes programmides koostatud pildifailid.
Selle tulemusena loome WordPressi kodeerimisstandarditele vastava malli ning selle malli abil toimiva WordPressi kodulehe. Kasutame loodud malli demonstreerimiseks testotstarbelist WordPressi kodulehte.
Meie lahendus.
WordPressi platvorm pakub palju tasulisi ja tasuta kodulehe kujundusmalle, kuid need ei sobi individuaalseks arenduseks. Eriti siis, kui teil on vaja luua originaalset, personaliseeritud kodulehte, kasutades individuaalset disainilahendust.
Pixel Perfect kontseptsioon on siinkohal oluline. Selle lähenemisviisi kohaselt peavad kõik kodulehe elemendid, sealhulgas veerised, fontide suurused, ridade kõrgused, piltide suurused ja objektide paigutus, vastama kujundusele mõne piksli täpsusega.
Pakkusime klientidele järgmist:
- Koostada kodulehe visuaalne osa, kasutades Pixel Perfect lähenemist
- Arendada programmeerimisosa, mis põhineb WordPressi kodeerimisstandarditel, ning ehitada paigaldatava malli WordPressi platvormi jaoks.
Märkus: Tehniliselt on võimatu luua kodulehte, mis vastab täpselt pikslitele, sest isegi fondid ja reavahed võivad erinevates brauserites olla erinevalt kuvatud. Mõnikord võib disainer teha vea ka taande või joonduse osas. Seetõttu püüame alati hoida tasakaalu kujunduse ja programmeeritud versiooni täpsuse vahel.
Tulemus.
Siin on mõned näited kodulehe kujunduse loomisest. Kontrolliti ka HTML-malli ja kujunduse vastavust ja kokkusobivust.
Kõigepealt töötasime välja lehekülgede põhistruktuuri. Me mõtlesime läbi ja lõime kodulehe, leheküljed, postitused. Seejärel paigaldasime vajalikud fondid, pildid, valmistasime ette kõik tekstid ja lõime kujunduse.
Vastavalt Pixel Perfect kontseptsioonile tegutsesime järgmise põhimõtte alusel:
- Originaalkujundus salvestati
.pngvormingus. - Avasime loodud kodulehe brauseris
- Panime kujunduse koopia leheküljele, kasutades spetsiaalset pluginat
- Korrigeerisime elementide paiknemist, et need vastaksid täpselt üksteisele.
Pealkirjade ja veeriste kontroll:
Tekstilehtede kontroll:
Sisendväljade kontroll:
Tähtis! Elementide, plokkide, fontide ja veeriste sobivust kontrollitakse vastavalt mõõtmetele, milles disainer on kujunduse loonud. Kui selle laius on 1920 pikslit, kohandatakse ekraani sama suurusele.
Disainerid esitavad meile sageli kujunduse arvutimonitoride (umbes 1280 pikslit) ja mobiiliversiooni jaoks. See on meile tööks piisav ja me kohandame juba arendusprotsessi käigus versioone teiste resolutsioonidega ekraanidele.
Kodulehe loomine WordPressi platvormil nõuab tavaliselt lisafunktsioone: veebipõhiseid kalkulaatoreid, spetsiaalseid animatsioone, spetsiifilisi vorme jne. Selleks loome WordPressi pluginaid.
Siin on mõned näited sellest, kuidas me tegime WordPressi malle.
Koduleht Soomes
Esileht
Töö käigus muutis kliendi disainer kujundust, mistõttu tulemus erineb prototüübist.
Prototüüp:
Tulemus:
Näited
Selles ja teistes sektsioonides järgisime Pixel Perfect kontseptsiooni ja kordasime täpselt disaini kujundust.
Prototüüp:
Tulemus:
Kontaktid
Prototüüp:
Tulemus:
Tehnoloogiad
Sellel lehel vastavad kõik plokid, fondid ja veerised disaineri prototüübile ning ainult sisu - pildid ja tekst - on erinev.
Prototüüp:
Tulemus:
Lahendus ja platvorm
Prototüüp:
Tulemus:
Finantsteenuste koduleht
Esileht
Prototüüp:
Tulemus:
Kalkulaator
Prototüüp:
Tulemus:
Blogi (loetelu)
Prototüüp:
Tulemus:
Blogi tekstide lehekülg
Prototüüp:
Tulemus:
Kokkuvõte.
Nende projektide puhul oli oluline, et loodud kodulehtede kujundus oleks täielikult kooskõlas. See võimaldas mitte ainult saada oodatud tulemust, vaid ka lihtsustada koostööd disaineri ja arendajate vahel.
Pixel Perfect lähenemist kasutatakse selleks, et tagada lõpplahenduse täielikku vastavust disaineri loodud kujundusele.
Lisaks sellele realiseerisime/arendasime välja kõik soovitud funktsioonid. Kodulehed töötavad korrektselt WordPressi platvormil ja neid saab vajadusel muuta.
Iga projekt kestis umbes 2 nädalat. Mõlemad olid nii disainerite kui ka lõppklientide poolt heaks kiidetud.
