GUD DESIGN

GudDesign.lv — grafiskā dizaina studijas portfolio mājaslapas izstrāde

Klients: SIA “GUD Design” (Jelgava) Nozare: Grafiskais dizains, vizuālā identitāte, zīmolu izstrāde Saite: guddesign.lv Tirgus: Latvija Valodas: Latviešu, angļu Tehnoloģijas: WordPress (custom tēma), PHP, JavaScript, SCSS

Īsumā par projektu

GudDesign.lv ir pilnībā custom izstrādāta divvalodu WordPress mājaslapa Jelgavas grafiskā dizaina studijai GUD Design. Projekts ir portfolio tipa vietne ar fokusu uz vizuālo realizāciju — parallax efekti, animēti slīdņi, projektu galerijas ar dinamisku attēlu maiņu un dubultā filtrēšanas sistēma. Tehniskais izaicinājums: balansēt bagātīgu animāciju klāstu ar ātru ielādi un perfektu mobilo pieredzi — visu uzbūvēt klientam, kura pamatkompetence ir dizains, tātad katra pikseļa precizitāte ir kritiska.

Par klientu

GUD Design ir grafiskā dizaina studija no Jelgavas, kuras pieeja balstās trīs principos: skaidrība, precizitāte un uzmanība pret detaļām. Studija strādā ar zīmoliem dažādās nozarēs un piedāvā plašu pakalpojumu spektru:

• • Zīmola vizuālā analīze — uzņēmuma vizuālās pozīcijas izvērtējums.

• • Vizuālā identitāte — logotipa, krāsu paletes un tipogrāfijas izstrāde.

• • Zīmola vadlīnijas — detalizēta vizuālās identitātes lietošanas rokasgrāmata.

• • Mārketinga materiāli — vizītkartes, bukleti, plakāti, katalogi.

• • Iepakojuma dizains — produktu iepakojuma grafiskais risinājums.

• • Digitālais dizains — digitālie zīmola saskares punkti.

• • Vides dizains — vides baneri, auto dizains, izstāžu vizuāli.

• • Web dizains — mājaslapu vizuālā koncepcija un struktūra.

Studijas klientu vidū — Moneo Latvia, Brabantia, Tērvete, Barboleta, Zemgales Būvserviss, FK Tukums 2000 un citi.

Projekts tika īstenots ar Eiropas Savienības Atveseļošanas fonda — NextGenerationEU — finansiālu atbalstu, programmas “Atbalsts procesu digitalizācijai” ietvaros.

Projekta uzdevums

Klientam bija nepieciešama jauna portfolio mājaslapa, kas atbilst vairākām paaugstinātām prasībām:

1. 1. Pilnībā oriģināls dizains — nekādu gatavu šablonu, jo studijas pamatkompetence ir tieši dizains.

1. 1. Vizuāli kustīgi elementi — parallax efekti, animēti slīdņi, projektu lapu vizualizācijas, kustīgs marķī teksts.

1. 1. Projektu portfolio ar diviem filtru veidiem — pēc datuma/nosaukuma/kategorijas un pēc projekta tipa.

1. 1. Detalizēta katra projekta apakšlapa ar galeriju un dinamisku attēlu maiņu.

1. 1. Divvalodu sistēma (LV/EN) ar WordPress valodu pārvaldību.

1. 1. Veiktspēja — neskatoties uz lielo animāciju un attēlu apjomu, lapai jāielādējas ātri.

1. 1. Pilns funkcionalitātes komplekts — blogs, kontaktforma ar reCAPTCHA, Google Maps, sociālo tīklu integrācija.

Tehnoloģiskais paraksts

Joma	Tehnoloģija
CMS	WordPress
Tēma	Pielāgota (custom), izstrādāta no nulles
Backend	PHP
Frontend	JavaScript
Animācijas	JavaScript (custom), CSS animations, IntersectionObserver
Stilizācija	SCSS (modulāra struktūra)
Daudzvalodība	WordPress valodu pārvaldība
SEO	Yoast SEO / Rank Math
Aizsardzība	Google reCAPTCHA
Karte	Google Maps API
Analītika	Google Analytics 4
Attēlu formāts	WebP, SVG (logotipiem)

Galvenās izstrādātās funkcijas

1. Custom dizaina realizācija ar atvērtu animāciju klāstu

Mājaslapa veidota kā vizuāls portfolio — apmeklētāja uzmanība tiek piesaistīta caur kustību, nevis tekstu. Galvenie animācijas risinājumi:

• • Parallax efekti uz sākumlapas un projektu apakšlapām

• • Animēts marķī teksts (“clarity makes good design”) sākumlapas vidū

• • Slīdņi ar sociālo pierādījumu (klientu logo karuselis)

• • Hover efekti uz projektu kartiņām ar attēlu transformāciju

• • Lazy load animācijas — saturs parādās gludi, kad ienāk redzes laukā

Visas animācijas optimizētas ar IntersectionObserver un requestAnimationFrame, lai tās neslodzītu galveno renderēšanas pavedienu.

2. Projektu portfolio ar dubulto filtrēšanu

Portfolio lapa ir centrālais elements visai vietnei. Izstrādātās funkcijas:

• • Pirmais filtra veids: pēc datuma, nosaukuma vai kategorijas (alfabētiski, hronoloģiski).

• • Otrais filtra veids: pēc projekta tipa — digitālais dizains, mārketinga materiāli, vides dizains, vizuālā identitāte u. c.

• • Dinamiska filtru kombinācija — apmeklētājs var pielietot abus filtrus vienlaicīgi.

• • URL parametru saglabāšana — apmeklētājs var pārsūtīt filtrētu skatu kā saiti.

• • Smooth filtering ar JavaScript, bez lapas pārlādes.

3. Detalizēta vienas projekta apakšlapa ar galeriju

Katrs projekts ir atsevišķa apakšlapa ar:

• • detalizētu projekta aprakstu un kontekstu

• • attēlu galeriju ar dinamisku attēlu maiņu

• • saistītajiem dokumentiem (gadījumos, kad tas relevanti)

• • saistītajiem projektiem (cross-promotion uz citiem darbiem)

• • skaidru CTA uz kontaktformu — “sākt sarunu”

4. Divvalodu sistēma (LV/EN)

Mājaslapas pārvaldība divās valodās caur WordPress valodu sistēmu:

• • katra lapa pieejama LV un EN versijā

• • automātiska valodas pārslēgšana saglabā apmeklētāju tajā pašā saturā

• • atsevišķi hreflang tagi katrai versijai

• • atsevišķa URL struktūra (/lv/... un saknes ceļš EN versijai)

5. Kontaktu sadaļa ar Google Maps un reCAPTCHA

• • Pilna kontaktinformācija (Vīgriežu 39, Jelgava)

• • Iebūvēta Google Maps karte ar studijas atrašanās vietu

• • Custom kontaktforma ar Google reCAPTCHA aizsardzību pret SPAM

• • Sociālo tīklu integrācija (Instagram, Facebook)

6. Blogs ar SEO struktūru

Atsevišķa bloga sadaļa ar:

• • rakstu kategoriju sistēmu

• • meklēšanu pa atslēgvārdiem

• • katra raksta optimizāciju (meta tagi, attēlu alt teksti, schema markup)

• • saistīto rakstu blokiem (iekšējo saišu stratēģija)

SEO un AI optimizācija

Klasiskais SEO

• • Yoast SEO / Rank Math konfigurācija

• • Unikāli meta virsraksti un meta apraksti katrai lapai

• • XML sitemap’a ģenerēšana un iesniegšana Google Search Console

• • Strukturēta H1–H3 virsrakstu hierarhija

• • Visi attēli WebP formātā ar alt parakstiem

• • Iekšējā saišu struktūra ar pārdomātām breadcrumb takām

• • Schema markup: Organization, LocalBusiness, BreadcrumbList, BlogPosting, CreativeWork (projektu apakšlapām)

Veiktspējas optimizācija

Tā kā lapā ir liels animāciju, slīdņu un attēlu apjoms, veiktspējas optimizācija bija viena no galvenajām tehniskajām prioritātēm:

• • WebP attēli ar fallback uz PNG/JPG

• • SVG logotipi ar inline <svg viewBox> placeholderiem (lazy load), lai netraucētu lapas izkārtojumu

• • Lazy loading visam saturam zem pirmā ekrāna

• • Critical CSS inline <head> sadaļā

• • Atlikts JavaScript (defer un async skriptiem)

• • Animāciju optimizācija ar transform un opacity (GPU-paātrinātas)

• • WordPress kešošana un attēlu kompresija

WordPress drošība un GDPR

• • WordPress kodola un spraudņu regulāri atjauninājumi

• • Drošības spraudnis ar brute force aizsardzību un firewall noteikumiem

• • SSL sertifikāts un HTTPS visā vietnē

• • Sīkdatņu piekrišanas bloks ar granulāru izvēli (analītika, mārketings)

• • Privātuma politika un noteikumi atbilstoši GDPR

• • Google reCAPTCHA uz visām formām

Tehniskie izaicinājumi un risinājumi

Izaicinājums: Liels animāciju un parallax efektu apjoms, kas var izraisīt lēnu ielādi un sliktu veiktspēju mobilajās ierīcēs. Risinājums: Visas animācijas balstītas uz transform un opacity īpašībām (GPU-paātrinātas), izmantots IntersectionObserver, lai animācijas startētu tikai tad, kad elements ienāk redzes laukā. Mobilajās ierīcēs daļa animāciju automātiski tiek atspējota ar prefers-reduced-motion mediju vaicājumu.

Izaicinājums: Dubultā filtrēšanas sistēma projektu sarakstam, kas vienlaicīgi strādā kategoriju un projekta tipa līmenī, bez lapas pārlādes. Risinājums: JavaScript-balstīts filtru risinājums ar URL parametru atjaunošanu, kas ļauj apmeklētājam pārsūtīt filtrētu skatu kā saiti, vienlaikus saglabājot SEO atbilstību (filtrētie stāvokļi pieejami caur sākotnēji generētu HTML).

Izaicinājums: Pilnībā custom dizains klientam, kura pamatkompetence ir dizains — katra pikseļa precizitāte tiek vērtēta dizaina speciālista acīm. Risinājums: Tieša sadarbība ar dizaineri, dizaina sistēmas dokumentēšana SCSS mainīgajos (krāsas, tipogrāfija, atstarpes), pixel-perfect implementācija ar regulāru caur-pārbaudi.

Izaicinājums: Lapa jāatklāj gan Google, gan AI meklētājiem, kā arī jāatbilst mūsdienīgajām SEO prasībām. Risinājums: Yoast SEO konfigurācija, paplašināts schema markup (Organization, LocalBusiness, CreativeWork), atvērti AI roboti robots.txt failā, strukturēti definīciju paragrāfi katrā pakalpojumu sadaļā.

Sasniegtais rezultāts

• • Pilnīgi jauna portfolio mājaslapa, kas vizuāli atbilst dizaina studijas paaugstinātajām prasībām

• • Skaidra konversijas plūsma — apmeklētājs no jebkuras lapas viegli nokļūst pie kontaktformas (“sākt sarunu”)

• • Pilnīga divvalodu sistēma, kas ļauj komandai patstāvīgi uzturēt LV un EN saturu

• • Bagātīga animāciju sistēma, kas darbojas ātri un nepasliktina lapas veiktspēju

• • Funkcionāla projektu filtrēšanas sistēma ar URL parametru atbalstu

• • SEO un AI optimizēta vietne ar pilnu schema markup pārklājumu

• • Pilna GDPR atbilstība un WordPress drošības konfigurācija

BUJ — biežāk uzdotie jautājumi

Kas ir GudDesign.lv? GudDesign.lv ir SIA “GUD Design” oficiālā mājaslapa — Jelgavas grafiskā dizaina studija, kas piedāvā vizuālās identitātes izstrādi, zīmola vadlīnijas, mārketinga un iepakojuma dizainu, vides un web dizainu.

Uz kāda CMS ir uzbūvēta lapa? Lapa ir uzbūvēta uz WordPress ar pilnībā pielāgotu tēmu, kas izstrādāta no nulles. Kods rakstīts PHP, JavaScript un SCSS — bez gatavu šablonu izmantošanas.

Kādās valodās ir pieejama lapa? Latviski un angliski. Abas versijas pieejamas paralēli ar atsevišķu satura pārvaldību caur WordPress valodu sistēmu.

Kādas animācijas tika izstrādātas? Parallax efekti, animēts teksts, klientu logo slīdņi, hover efekti uz projektu kartiņām, lazy load animācijas saturam, kas ienāk redzes laukā.

Vai lapa ir mobilo ierīču optimizēta? Jā. Lapa izstrādāta ar atsaucīgu (responsive) pieeju un pilnībā atbilst mobilajām ierīcēm, planšetdatoriem un datoriem. Daļa animāciju automātiski tiek samazinātas mobilajās ierīcēs ar prefers-reduced-motion atbalstu.

Kā darbojas projektu filtrēšana? Portfolio lapā darbojas dubulta filtrēšanas sistēma — pēc datuma/nosaukuma/kategorijas un atsevišķi pēc projekta tipa (vizuālā identitāte, digitālais dizains u. c.). Filtri darbojas bez lapas pārlādes un saglabā stāvokli URL.

Kas tika integrēts kontaktu lapā? Google Maps karte ar studijas atrašanās vietu, custom kontaktforma ar Google reCAPTCHA SPAM aizsardzību, sociālo tīklu saites un tiešs e-pasts.

Vai lapa ir SEO optimizēta? Jā. Lapa optimizēta gan klasiskajai Google meklēšanai (Yoast SEO / Rank Math, schema markup, XML sitemap, ātrums), gan AI platformām (ChatGPT, Claude, Perplexity, Google AI Overviews).