Grafiva — case study
Kako smo postavili spletno stran za tiskarno, ki ne izgleda kot tiskarna
Uvod
Grafiva je tiskarna in studio za promocijske izdelke iz Velenja, ki jo vodi Tjaša Klopčič s.p. S svojim obsegom storitev — od DTF in DTG tiska, UV tiska, tampotiska, laserske obdelave, do priprave celostne grafične podobe za podjetja — pokriva širok spekter tiskarskih in dizajnerskih potreb. Med njihove referenčne partnerje sodijo SRS Security, Mestna občina Velenje in Slovenska Vojska.
Pri postavitvi nove spletne strani smo si zastavili jasno nalogo: ustvariti distinctive online prisotnost, ki bo Grafivo postavila ob bok studie iz Ljubljane in Zagreba, ne pa jo zalepila v vrsto generičnih tiskarskih strani s tekstilnimi fotkami in modrimi gumbi “Pošljite povpraševanje”.
DEL 1 — VSEBINSKI PRISTOP
Kaj smo želeli doseči
V brifingu z naročnico smo identificirali tri glavne želje:
1. Stran mora delovati kot vizitka pri B2B prodaji. Ko Grafiva pride v podjetje na sestanek za novo celostno podobo, mora spletna stran nadgraditi pogovor, ne pa ga zmanjšati. Stranka mora po obisku strani dobiti občutek, da Grafiva razume sodobno oblikovanje in da bo kakovost izvedbe ustrezala kakovosti spletne predstavitve.
2. Distinctive vizualni jezik. Grafiva ne tiska samo majic za nogometne ekipe — ima tudi sofisticirano stranko s prepoznavnimi grafičnimi standardi. Stran mora to nakazati že na prvi pogled. Zato smo izbrali editorial industrial slog z izrazitim CMYK akcenti in masivnim brutalističnim tipografijo. Tipičnih “stockovskih” fotk tiskanih majic ni nikjer.
3. Funkcionalnost, ne samo estetika. Stran mora biti hitra, mobilno-prijazna, mora dobro delati v iskalnikih in mora dejansko pripeljati nove stranke. To pomeni: optimiziran kontaktni obrazec, jasne CTA, lokalno SEO za “tiskarna Velenje”, ter nova razsežnost — optimizacija za AI iskalnike (ChatGPT, Claude, Perplexity, Google Gemini), ki postajajo vse pomembnejši.
Vizualni jezik
Barvna paleta
Osnova je temna podlaga (#0A0A0A — skoraj črna, a ne čisto črna; rahlo toplejša). Na njej “živijo” tri CMYK barve, ki vsaka služi svojemu namenu:
- Magenta (
#FF1B6B) — primarni akcent, klici k akciji, opozorila, pomembne besede v naslovih - Cyan (
#00D9FF) — sekundarni akcent, povezave, info elementi, focus stanje - Yellow (
#FFD60A) — terciarni akcent, posebne situacije, varnostna nadgradnja
Te tri barve niso bile izbrane naključno — to so tri ključne barve CMYK tiskarskega procesa (z dodanim K-jem za črno). Stran tako že na strukturni ravni govori jezik tiska — ne le simulira ga, ampak ga pretvorba v digitalno gramatiko.
Za besedilo smo izbrali toplo “papirno” belo (#F5F0E8) — ne čisto belo, ampak rahlo kremasto, ki spominja na tiskarski papir. To je drobna, a pomembna gesta: tudi ko bralec gleda zaslon, podzavestno čuti tisk.
Tipografija
Tri družine, vsaka s svojim opravilom:
Big Shoulders Display — masivna grotesque sans-serif z industrijskimi koreninami. Navdihnjena s tipografijo Chicago znakov in industrijske železne dobe. V Grafivi nosi vse veliko naslove. Ima posebno težko italic 900 verzijo, ki jo uporabljamo za izpostavljanje ključnih besed v barvi (npr. “promocija” v hero, “pripravimo ponudbo” v kontaktu).
Inter Tight — sodobna, tehnična sans-serif, ki dobro dela v majhnih velikostih. Nosi opise, beseda strankam, navadno besedilo. V tankih različicah (300-400) se rahlo umakne pred velikimi naslovi, vendar ne deluje šibko.
JetBrains Mono — monospace font, ki ga sicer uporabljajo programerji v editorjih. V Grafivi nosi “meta” elemente: oznake sekcij ([ 01 ] Studio), številke projektov (P/01), labels nad polji obrazca, datumi in podatki. Daje občutek “podatkovnega lista”, ki je ena od značilnosti editorial sloga. Brez tega bi stran izgledala bolj kot tipična agencijska stran — z njim pa pridobi tehnično natančnost.
Hierarhija in postavitev
Stran ne uporablja klasične “centrirane vsebine” prikaza. Namesto tega imamo:
- Asimetrične mreže — naslov je včasih levo, opis desno, oznaka pa zgoraj v drugi vrstici
- Velike outline tipografije v ozadju sekcij (
PODJETJE,PARTNERJI,IDEJA,POVPRAŠEVANJE) — samo obrobe črk v zelo veliki velikosti, ki “rasejo iz dna sekcij” - Številčne oznake kot
[ 01 ],[ 02 ],P / 03— daje občutek katalogiziranja, “indeksa”, strokovnosti - Subtle grid mreža v ozadju, ki rahlo izgine proti dnu sekcij — dodatni “industrial” element
Animacije in interakcija
Vse animacije so podporne, ne odločilne. Naslov ob nalaganju “vstane” iz blur-a (rise + skewY + blur out). CMYK pikice počasi pulzirajo na različnih lokacijah (meni, scroll indikator, status). Hover stanja so odkrito uporabna — ko hover-aš čez kartico storitve, dobiš subtle radial glow v lastni CMYK barvi, ne pa kakšno fancy 3D rotacijo.
Na mobilcih smo aktivno izklopili infinite animacije, da scroll ne zatika. Vsaka animacija, ki bi lahko motila izkušnjo na šibkejši napravi, je tam odpovedana.
Struktura strani
Domov
- Hero s polno-zaslonsko fotografijo barvnega “color splash” eksplozijskega ozadja, ki edina loči Grafivo od konkurence — masivni naslov “Tisk & promocija na enem mestu” z magenta italic poudarkom
- Tagline + CTA v ločenem temnem bloku (od ideje do končnega izdelka…)
- Drsni trak s storitvami, ki gre nepretrgano levo (DTF tisk · DTG tisk · UV tisk · Tampotisk · Laser · Promo izdelki)
- O nas sekcija z vrednotami in pristopom
- Storitve — 6 kartic v 3×2 mreži, vsaka z lastno CMYK akcent barvo
- Za podjetja (B2B) — z velikim outline tekstom “PODJETJE” v ozadju
- Partnerji — kartice s SRS, MO Velenje, Slovenska Vojska
- Kontakt z obrazcem — info levo, polni obrazec desno
Podstrani
- /kontakt/ — razširjena stran z hitrimi karticami (telefon, e-pošta, lokacija), polnim obrazcem, sekcijo z delovnim časom (kjer se trenutni dan avtomatsko obarva, če smo “odprti”), kontaktnimi osebami (Tjaša, Mitja), zemljevidom (OpenStreetMap iframe v dark slogu) in FAQ accordion s šestimi pogostimi vprašanji
- /piskotki/ — politika piškotkov v editorial slogu z razlago v laičnem jeziku, GDPR pravicami in tabelo uporabljenih piškotkov
- 404 stran — z RGB split glitch efektom na “404” napisu, opisom (“Ta stran je izginila.“) in CTA gumboma za vrnitev na domov ali pisanje
Globalno
- Header s sticky pozicijo, klikabilnim “MENI” trigger (z animiranimi CMYK pikami) in dropdown s 4 sekcijami
- Footer z big CTA blokom (“Pripravljeni za vašo naslednjo idejo?”), 4-stolpčno mrežo (brand, kazalo, kontakt, partnerji) in podnožjem z dvema CMYK glow blob-oma v ozadju
- Cookie banner — pojavi se 0.8s po nalaganju, s pulsirajočo magenta piko, dvema gumboma in linkom na politiko piškotkov
Kontaktni obrazec
To je funkcionalno srce strani. Custom narejen, brez generičnih pluginov. Polja: ime, e-pošta, telefon, izbira storitve (dropdown s 8 opcijami), sporočilo, GDPR potrditev. Ima honeypot za boti (skrito polje, ki ga uporabniki ne vidijo, boti pa ga avtomatsko izpolnijo) in časovno detekcijo (če se obrazec pošlje v manj kot 3 sekundah po loadu, je avtomatsko zavrnjen).
Sporočila prihajajo direktno na info@grafiva.si v profesionalno oblikovani HTML obliki, z vsemi podatki in Reply-To glave nastavljeno na e-pošto pošiljatelja — torej Tjaša samo klikne “Reply” v Gmail-u in odgovori direktno stranki, brez ponovnega vnašanja kontaktov.
SEO in AI search optimizacija
Klasični SEO
Stran je polno opremljena z meta tagi (title, description, keywords, geo lokacija, Open Graph, Twitter Card) in strukturiranimi podatki v JSON-LD obliki — Google bo razumel:
- Da je Grafiva lokalna firma v Velenju (
LocalBusinessschema) - Vse storitve, ki jih ponuja (
OfferCatalogz 7 storitvami) - Pogosta vprašanja in odgovore (
FAQPageschema) - Kontaktne osebe in njihove vloge (
ContactPoint× 3) - Delovni čas (
openingHoursSpecification) - Geografske koordinate
Rezultat: ko nekdo Googla “tisk Velenje” ali “DTF tiskarna Slovenija”, bo Grafiva imela boljše možnosti za rich snippet prikaz — z mapo, urami, klicalno ikono, FAQ-jem direktno v search results.
AI search
Najnovejša razsežnost SEO-ja, ki jo večina slovenskih spletnih strani še popolnoma ignorira. Nove generacije iskanja niso več samo Google in Bing — ChatGPT search, Claude, Perplexity, Google Gemini in Apple Intelligence so že prisotni. Ko nekdo vpraša AI “kdo je dobra tiskarna v Velenju”, AI mora poznati Grafivo.
Tri ključne pripravice:
1. AI crawler permissions — eksplicitna dovoljenja za GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot, PerplexityBot, Google-Extended, Applebot-Extended in druge boti, da lahko berejo stran. Brez tega jih security pluginsi pogosto blokirajo privzeto.
2. llms.txt datoteka — nov standard (2024+) za strukturiran povzetek strani, ki ga AI modeli berejo namesto da crawlajo celotno stran. Grafivin llms.txt vsebuje povzetek storitev, kontakte, delovni čas, FAQ — vse v markdownu, AI-friendly.
3. Strukturirani podatki za AI — JSON-LD z FAQPage in LocalBusiness ne pomaga samo Googlu, ampak tudi AI modelom. Ko ChatGPT povzame Grafivo, bo navedel prave podatke, ne pa halucinirane.
Zaključek
Spletna stran ni samo “predstavitev podjetja” — je prvo srečanje s potencialno stranko. Pri B2B prodaji, kjer je naročilo lahko vredno tisoče evrov, je razlika med “amaterska stran” in “profesionalna stran” lahko razlika med pridobljenim in izgubljenim poslom.
Z Grafivo smo se lotili stvari z istim načinom razmišljanja, kot bi se lotili dobre tiskovine: izbiraš pravi papir, paziš na barve, masivno tipografijo, čisto kompozicijo. Rezultat ni “spletna stran z barvami CMYK” — je digitalni prenos jezika tiska.
Tjaša Klopčič in ekipa Grafiva so dobili stran, ki ne izgleda kot tipična tiskarska stran — kar je natančno tisto, kar potrebuje tiskarna, ki želi delati z najboljšimi strankami.
Tehnični stack: WordPress · Divi 5 · vanilla JS/CSS · Code Snippets · OpenStreetMap Vsebina: editorial industrial slog · CMYK paleta · Big Shoulders Display + Inter Tight + JetBrains Mono SEO: Schema.org JSON-LD · llms.txt · AI crawler permissions · LocalBusiness markup
