// Studija slučaja

Duca Dizajn — portfolio sajt koji stoji iza Instagram profila

Grafički dizajner iz Novog Sada koji ceo posao vodi preko Instagrama. Profil pokazuje radove, ali ne odgovara na pitanja koja čovek postavi pre nego što napiše prvu poruku — šta se tačno radi, koliko traje, šta se dobija na kraju. Sajt je napravljen da odgovori na to i da posetioca vrati nazad na profil.

Klijent
Duca Dizajn
Delatnost
Grafički dizajn — logotipi, vizit karte, pozivnice, brošure
Grad
Novi Sad, Vojvodina
Tip
Portfolio sajt — jedna duga strana i pravne podstrane
Kontakt kanal
Instagram, bez kontakt forme
Tehnologije
HTML5 · CSS3 · Vanilla JS · GSAP 3.12 + ScrollTrigger
Status
Živ sajt na našem poddomenu, u održavanju
Naslovna strana sajta Duca Dizajn sa naslovom Kreativni Grafički Dizajn
Naslovna — jedna rečenica o poslu i dva izlaza: portfolio ili Instagram

Čime se Duca Dizajn bavi

Duca Dizajn je grafički dizajner iz Novog Sada. Radi četiri stvari: logotipe i vizuelni identitet, vizit karte, pozivnice za venčanja i proslave, i print materijal — brošure, kataloge i flajere. Nema agenciju ni kancelariju u koju se svrati; posao ide direktno, od prvog razgovora do finalnih fajlova.

Kanal na kome se sve dešava je Instagram profil @duca.d.dizajn. Tamo stoje radovi, tamo stižu upiti, tamo se dogovara. Za dizajnera to ima smisla — rad je vizuelan, a Instagram je mesto gde se vizuelno gleda. Problem počinje kod onoga ko još nije siguran: hoće da zna šta se tačno dobija, koliko to traje i kako izgleda saradnja, a profil na to ne odgovara. Listanje objava tri meseca unazad nije odgovor.

Radovi za stvarne naručioce već su postojali — serije vizit karti, logotipi, ilustracije, materijal za štampu. Nedostajala je jedna adresa koja to sredi u red, objasni i stavi cenu na sto.

Šta je trebalo rešiti

Zahtev je bio uzak i jasan, i baš zato lak za promašiti. Sajt ne treba da zameni Instagram nego da radi ono što profil ne ume:

  • Da odgovori pre nego što se neko javi. Šta se radi, kako teče posao, koliko traje, koji formati stižu na kraju, kako se plaća.
  • Da ima cenu. Ne konačnu, ali početnu — da čovek zna da li je uopšte u svom opsegu pre nego što napiše poruku.
  • Da vodi nazad na profil. Kontakt kanal ostaje Instagram. Sajt nema kontakt formu i ne treba da je ima; poruka na profilu je brža i dizajner je ionako tamo.
  • Da bude sam svoj. Bez CMS-a, bez dodataka i bez mesečne pretplate koja se plaća da bi jedna strana stajala na internetu.

Jedna stvar se vidi iz same adrese i bolje da bude rečena odmah: sajt stoji na poddomenu ducadizajn.svilenkovic.com, dakle na našem domenu. To nije demo — Duca Dizajn je stvaran klijent i sadržaj je njegov — nego dogovor da se krene bez kupovine i godišnjeg održavanja sopstvenog domena. Kada za tim bude potrebe, prelazak je izmena adrese i preusmerenja, ne izrada novog sajta.

Kako je sajt složen

Sve što posetilac treba da vidi stoji na jednoj strani, podeljenoj u pet celina koje se numerišu dok se skroluje: uvod, Moji Radovi, Šta Nudim, Proces Rada i Česta Pitanja. Navigacija u vrhu ne vodi na druge strane nego skače na te sekcije, a stavka Kontakt vodi pravo na Instagram profil.

Uvodni ekran kaže ko je i šta radi u jednoj rečenici i nudi dva izlaza — portfolio ili profil. Ispod stoje tri oznake koje pokrivaju delatnost (logo dizajn, brending, print dizajn) i tri kratke tvrdnje koje dizajner sam daje: brza isporuka, neograničene revizije, zadovoljstvo naručioca. To su njegove reči i tako i stoje.

Sekcija Moji Radovi namerno nije galerija koja se održava ručno. Umesto reda slika koje bi neko morao da menja svaki put kad nastane nov rad, tu je jedna kartica sa kolažom radova koja vodi na profil. Razlog je praktičan: dizajner objavljuje na Instagramu ionako, a galerija na sajtu bi zaostajala već posle prve nedelje i posle pola godine bi lagala o tome šta on danas radi.

Uz tu jednu stranu idu tri pravne podstrane i sopstvena strana za grešku 404. To je ceo sajt — pet dokumenata, ništa više.

Usluge i kako je rešena cena

Sekcija Šta Nudim je četiri kartice, po jedna za svaku uslugu. Svaka nosi kratak opis, početnu cenu sa oznakom „od" i spisak onoga što je uključeno — kod logotipa su to više koncepata, revizije, svi formati fajlova i osnovna pravila upotrebe znaka; kod vizit karti dizajn obe strane, priprema za štampu i opcija sa QR kodom. Kartica za logo dizajn je označena kao najtraženija.

Cena je namerno rešena kao početna, ne kao cenovnik. Grafički dizajn se ne prodaje po komadu — vizit karta za jednog čoveka i serija za firmu sa deset zaposlenih nisu isti posao, iako se zovu isto. Oznaka „od" hvata tu razliku bez pregovaranja unapred, a Uslovi korišćenja to pišu doslovno: iznosi su orijentacioni, konačna cena zavisi od složenosti, broja revizija, formata isporuke i roka, i dogovara se pre početka rada. Cena potvrđena pri prihvatanju porudžbine obavezuje obe strane.

Iste te cene stoje i u strukturisanim podacima strane, kao ponuda uz svaku uslugu. Kada se cena menja, menja se na oba mesta — nije to nikakva magija, oba zapisa su u istom fajlu na dvadesetak redova razmaka, pa se teško zaboravi. Sajt na kome vidljiva cena i cena u strukturisanim podacima kažu različito je česta i tiha greška.

Proces rada i pitanja koja skidaju teret

Dve sekcije postoje samo zato da bi prva poruka bila kraća. Proces Rada je četiri koraka — razgovor, skica, dizajn, isporuka — svaki u dve rečenice. Nije to zato što je proces komplikovan, nego zato što čovek koji prvi put naručuje dizajn ne zna šta ga čeka, a to neznanje ga zaustavi pre nego što uopšte pita.

Česta Pitanja rade isti posao, samo direktnije: koliko traje izrada, mogu li se tražiti izmene, koje formate dobijam, kako funkcioniše plaćanje. Odgovori su kratki i konkretni — rok u radnim danima uz napomenu da postoji i hitna varijanta, spisak formata koji stižu na kraju, i podela na avans pre početka i ostatak po završetku.

Ta četiri pitanja nisu izmišljena da bi sekcija imala sadržaj. To su pitanja koja su stizala u poruke, jedno za drugim, i svaki put tražila isti odgovor otkucan iznova. Sada stoje na strani, pa poruka koja stigne posle njih obično već zna šta hoće — a to je razlika između deset poruka koje se pretvore u jedan posao i deset poruka koje pojedu popodne.

Pitanja i odgovori su i mašinski čitljivi, zapisani kao FAQPage, pa mogu da se pojave direktno u rezultatu pretrage, ispod naslova sajta.

Izvedba — statički HTML i ništa više

Sajt je čist HTML5, CSS3 i vanilla JavaScript. Nema PHP-a, nema baze, nema CMS-a, nema nijednog dodatka. Cela naslovna je jedan fajl od tridesetak kilobajta koji server pošalje takav kakav jeste, bez ijednog izvršavanja u međuvremenu.

Odluka nije lenjost nego račun. Portfolio jednog čoveka sa četiri usluge menja se nekoliko puta godišnje. CMS bi za taj obim značio bazu koja može da padne, administraciju koja mora da se ažurira svakih mesec dana i prijavnu stranu koja stoji otvorena tri stotine šezdeset pet dana zbog izmene koja se desi u martu i u oktobru. Statička strana nema šta da se provali kroz prijavu koje nema.

Ono što se dobija je brzina bez optimizacije: nema upita, nema generisanja strane, nema keširanja koje treba podesiti pa proveriti. Nginx pošalje fajl, statika ima keš od trideset dana, kompresija je uključena, i to je cela priča o performansama.

Izvorni kod stoji u git repozitorijumu i sinhronizuje se na server, tako da svaka izmena ima svoj trag i može da se vrati. Fajlovi za režim održavanja, koji stoje u istom folderu, blokirani su na nivou servera da ih neko slučajno ne otvori.

Ono što je puklo i kako je popravljeno

Najzanimljiviji deo posla nije bio dizajn nego jedan kvar koji se ne vidi.

Sajt koristi GSAP sa ScrollTrigger za pojavljivanje sekcija i Font Awesome za ikone. Oboje je isprva učitavano sa javnog CDN-a, kako se to obično radi. Onda je preko cele naše flote pooštrena bezbednosna politika sadržaja tako da brauzer sme da izvršava skripte i učitava stilove samo sa istog domena. Rezultat: skripta blokirana, stilovi ikona blokirani, animacije mrtve, sve ikone nevidljive.

Podmuklo je bilo to što se sajt nije srušio. Sekcije su ostale vidljive, jer animacija koja se nikad ne pokrene ostavi element tamo gde jeste. Strana se otvarala, tekst se čitao, ništa nije vikalo da je greška — samo je bila mrtva. Takav kvar preživi mesecima ako niko ne otvori konzolu.

Rešenje je bilo da se biblioteke prestanu pozajmljivati. Skinute su tačno određene verzije GSAP-a i Font Awesome-a, sa svim webfont fajlovima, i postavljene na sam sajt. Time je usput nestala i zavisnost od tuđeg servera koji jednog dana može da promeni adresu, uspori ili ukine verziju.

Dva detalja su pokazala zube. Prvi: fajlovi su prvo smešteni u /vendor/ i i dalje su vraćali 404 — jer pravilo koje važi za sve sajtove na serveru namerno skriva taj folder, pošto se tako obično zove direktorijum sa tuđim kodom koji nema šta da bude javan. Umesto da se dira zajedničko pravilo koje štiti ceo server, biblioteke su premeštene u /assets/vendor/. Drugi: index.html je bio označen kao nepromenljiv na nivou fajl sistema, pa je automatska sinhronizacija tiho pucala i u dnevniku ostavljala poruku koja liči na problem sa granama u gitu. Zastavica je skinuta i sinhronizacija je proradila.

Animacije, brzina i uređaji

Animacije su tu da vode oko, ne da se primete. Sekcije se pojavljuju pri skrolu, naslov se razdvaja na reči, u vrhu stoji tanka traka koja pokazuje dokle se stiglo, a na velikim ekranima kursor dobija sopstveni oblik. Sve to je uslovljeno: kursor se pravi samo iznad hiljadu i dvesta piksela širine i samo ako posetilac u sistemu nije tražio manje kretanja. Ko je tu opciju uključio dobija sajt koji stoji mirno.

Slika gotovo i nema — logo, kolaž radova i slika za deljenje na mrežama. Kolaž se učitava tek kad dođe na red i ima upisane dimenzije, pa strana ne poskakuje dok se učitava. Fontovi su Playfair Display za naslove i Inter za tekst, sa unapred otvorenom konekcijom ka izvoru da prvo slovo ne čeka. Duplo učitavanje istog fonta — jednom kroz oznaku u zaglavlju, jednom kroz uvoz u CSS-u — uklonjeno je; to je greška koju niko ne primeti, a plaća se pri svakom otvaranju.

Sajt je proveren na četiri širine ekrana, od malog telefona do desktopa. Nema horizontalnog pomeranja, meni se prebacuje na hamburger na tabletu i niže, a raspored na telefonu je izmenjen tako da prvo ide tekst pa logo. Ranije je bilo obrnuto, pa se na malom ekranu prvo video znak, a poruka se tražila ispod njega.

Pristupačnost nije ostavljena za kasnije: na vrhu strane stoji skriveni link koji vodi pravo na sadržaj, meni je označen kao navigacija, a siva boja teksta je pojačana dok kontrast prema pozadini nije prešao prag za čitljivost. Na kremastoj podlozi sa zlatnim akcentom to je moralo — svetla paleta izgleda pitomo dok se ne pokuša pročitati sitniji tekst.

Kolačići, analitika i pravni deo

Portfolio bez forme deluje kao sajt koji nema šta da prijavi. Nije tako. Dovoljna je analitika da nastanu obaveze, a merenje koje se pokrene pre pristanka je prekršaj bez obzira na to koliko je sajt mali.

Zato je analitika postavljena kroz Consent Mode v2, sa svim kategorijama u početnom stanju odbijeno. Skripta za merenje se ne učitava dok posetilac ne klikne „Prihvati sve". Ko izabere „Samo neophodni" dobija sajt koji radi potpuno isto, samo bez merenja — a to je ceo smisao izbora koji nije lažan. Odluka se pamti u brauzeru i poštuje pri sledećoj poseti, a sajt čita i signal koji brauzer šalje kada je korisnik u podešavanjima tražio da ga niko ne prati.

Uz to idu tri napisana dokumenta: politika privatnosti po Zakonu o zaštiti podataka o ličnosti i GDPR-u, uslovi korišćenja i politika kolačića u kojoj su kolačići nabrojani poimenično — naziv, svrha, trajanje i ko ih postavlja. Nisu prepisani sa tuđeg sajta. Pišu ono što ovaj sajt stvarno radi: ko drži server i u kojoj zemlji, koliko dugo stoje zapisi o poseti, kome se podaci prosleđuju i kako se saglasnost povlači.

Pošto sajt nema formu, tu se i završava priča o podacima — nema poruka koje se čuvaju, nema baze u kojoj bi stajale, nema izvoza koji bi neko morao da čuva. Najsigurniji podatak je onaj koji se nikad ne prikupi.

SEO i vidljivost

Sajt od jedne strane lako završi kao adresa koju zna samo onaj ko je već dobio link. Da se to ne desi, urađeno je ono što se za jednostranu prezentaciju obično preskoči.

Strukturisani podaci opisuju posao kao LocalBusiness — ime, opis, logo, Novi Sad kao mesto, Vojvodina i Srbija kao područje rada, Instagram kao zvanični profil i četiri usluge sa početnim cenama. Uz to idu WebSite i FAQPage. To je ono što pretraživaču kaže da iza adrese stoji stvaran posao na stvarnom mestu, a ne strana sa lepim slikama.

Naslov i opis su pisani za rezultat pretrage, ne prekopirani iz uvodnog teksta. Svaka podstrana ima svoj naslov i svoj opis. Postoji kanonska adresa, slika za deljenje u punom formatu za mreže i poruke, oznaka boje teme, manifest, favikon i mapa sajta koja nabraja sve strane. robots.txt ne blokira ništa osim strana za režim održavanja.

Greška 404 ima svoju stranu u istom dizajnu, sa linkom nazad na naslovnu i na portfolio, i — što je važnije — vraća pravi status 404. Strana koja izgleda kao greška a serveru kaže da je sve u redu je najtiši način da se u pretragu upiše gomila nepostojećih adresa i da se sajt sam razvodni.

Sitnica koja se retko radi: sajt ima security.txt sa kontaktom, pa neko ko naiđe na propust zna kome da javi umesto da ćuti ili da to objavi negde drugde.

Šta klijent na kraju ima

Jednu adresu koja radi posao koji Instagram ne radi: objašnjava ponudu, daje početnu cenu, opisuje kako teče saradnja, odgovara na četiri pitanja koja se ponavljaju i vraća čoveka na profil onda kada je spreman da piše. Adresa se može napisati na vizit kartu, poslati u poruci ili staviti u opis profila.

Nema mesečne pretplate za platformu, nema dodataka koji se raspadnu pri sledećem ažuriranju, nema administracije koju treba čuvati lozinkom. Sajt je pet dokumenata i nešto stila — može da se prekopira, preseli i preda drugom bilo kada, bez pregovaranja sa bilo kim.

Održavanje je ono što se stvarno dešava, a ne stavka u ponudi: sertifikat se sam obnavlja, izmene idu kroz git sa tragom, a kvarovi koji nastanu spolja — kao ona bezbednosna politika koja je preko noći oborila animacije i ikone — hvataju se u redovnim proverama cele flote, a ne onda kad se klijent javi da nešto ne radi.

Ako jednog dana dođe sopstveni domen, sadržaj i kod idu netaknuti. Menja se adresa, postavljaju se preusmerenja i sređuje zapis u pretrazi. Sve ostalo ostaje kako jeste.

// Sajt uživo

Duca Dizajn

Logotipi, vizit karte, pozivnice i brošure — portfolio i cela ponuda na jednoj strani.

ducadizajn.svilenkovic.com

Često postavljana pitanja

Zašto sajt kad već postoji Instagram profil?
Zato što profil pokazuje radove, ali ne objašnjava ponudu. Ko šta radi, koliko traje, šta se dobija na kraju i kako se plaća — to na profilu ne postoji kao stalna informacija, nego kao objava koja odluta unazad. Sajt to drži na jednom mestu i vraća posetioca na profil kada je spreman da se javi.
Zašto sajt stoji na poddomenu, a ne na sopstvenom domenu?
Zato što je tako dogovoreno — krenulo se bez kupovine i godišnjeg održavanja sopstvenog domena. Sadržaj i kod su klijentovi. Kada bude hteo sopstveni domen, sajt se seli takav kakav jeste; to je izmena adrese, postavljanje preusmerenja i sređivanje zapisa u pretrazi, ne izrada novog sajta.
Zašto nema kontakt forme?
Zato što bi bila slabiji kanal od onog koji već radi. Poruka na Instagramu stiže odmah, dizajner je ionako tamo, i razgovor se nastavlja u istoj niti. Forma bi značila jedno sanduče više koje se povremeno zaboravi da se proveri — i jednu tačku više na kojoj sajt prima tuđe podatke.
Zašto statički HTML, a ne WordPress?
Zato što se portfolio sa četiri usluge menja nekoliko puta godišnje. CMS bi za taj obim doneo bazu, administraciju koja se ažurira svakih mesec dana i prijavnu stranu koja stoji otvorena stalno. Statička strana nema šta da se provali kroz prijavu koje nema i ne košta ništa mesečno.
Kako se menjaju usluge i cene?
Izmena ide kroz kod i objavljuje se odmah. Za sajt koji se menja nekoliko puta godišnje to je brže nego prijava u panel. Bitno je samo da se cena promeni i u vidljivom tekstu i u strukturisanim podacima — oba zapisa su u istom fajlu, jedan blizu drugog, baš da se ne bi razišla.
Da li sajt radi na telefonu?
Radi, i tu se najviše i gleda, jer većina posetilaca dolazi sa Instagrama. Proveren je na četiri širine ekrana, od malog telefona do desktopa, bez horizontalnog pomeranja. Na telefonu je raspored uvodnog ekrana izmenjen tako da se prvo vidi poruka, pa tek onda znak.

Treba vam ovakav sajt?

Recite mi čime se bavite i šta sajt treba da uradi za vas — dobijate fiksnu ponudu i rok, u pisanoj formi.

Pozovi