Portfolio · koncept izrada
SVOD — ordinacija koja pokazuje plan.
SVOD je koncept sajta za stomatološku ordinaciju na Vračaru, napravljen od nule: tri strane, ceo cenovnik, crtež vilice koji objašnjava svaki zub i plan terapije nacrtan kao dokument. Ručno pisan HTML, CSS i čist JavaScript — bez framework-a i bez page builder-a. Probajte ga u laptopu ispod, pa pročitajte kako je nastao.
SVOD je koncept, ne klijentski projekat. Ordinacija ne postoji ni na Vračaru ni bilo gde drugde: ime, tim, cene, telefon i adresa izmišljeni su radi prikaza, i to piše na svakom ekranu sajta. Fotografije su ilustrativne i ne prikazuju ovu ordinaciju. Kod i dizajn su stvarni — to je jedini deo koji tvrdimo. Forma za upit ne šalje ništa i ne čuva ništa.
Ukratko
- Tip — sajt stomatološke ordinacije, za posetioca koji tek bira gde će na pregled.
- Obim — tri strane (početna, usluge, cenovnik), plan terapije kao dokument, crtež vilice koji objašnjava svaki zub i upit u tri koraka.
- Tehnologije — ručno pisan HTML5, CSS i čist JavaScript. Bez framework-a, bez bundler-a i bez CSS biblioteke: jedan stilski fajl, jedna skripta.
- Jezik — srpski, latinica. Pisan na srpskom, ne preveden.
- Težina — 1,77 MB ceo sajt, od čega 740 KB dva video fajla i 721 KB slika. Detaljno u tabeli niže.
- Pristupačnost — kontrast izmeren za svaki nivo teksta, sa rezervom iznad AA, i pun
prefers-reduced-motion.
Zašto baš ordinacija
Zato što je to najteži lak zadatak koji postoji.
Lak je jer se zna šta posetilac hoće: koliko košta, da li boli i ko će ga dirati. Težak je jer je stomatologija regulisana delatnost. Izmišljena diploma, izmišljen broj u komori ili izmišljena statistika ishoda nisu „marketinška sloboda“, nego tačno ona vrsta greške po kojoj se ovaj sektor prepoznaje. A sajt koji zbog toga ne kaže ništa konkretno ne ubeđuje nikoga.
Ceo posao je bio držati oba kraja. Nema klijenta, nema saradnje i nema statistike, pa ovo nije studija rezultata nego studija odluka: šta gledamo pre nego što išta nacrtamo, šta odbijemo da uradimo i zašto.
Šta smo pogledali pre nego što smo išta nacrtali
Trinaest ordinacija iz Beograda i Pančeva, u tri prolaza, otvorenih u pregledaču i merenih — ne prelistanih sa Google rezultata. Tri stvari koje smo našli promenile su projekat.
Prvo: cene na sajtu nisu prednost. Krenuli smo sa pretpostavkom da je objavljen cenovnik ono što konkurencija krije. Nije. Tri od četiri ordinacije iz drugog prolaza objavljuju cene u brojkama, dve od njih pun cenovnik u dinarima, a jedna prvi pregled daje besplatno. Objavljene cene su na ovom tržištu normalna stvar, ne razlika, pa je pozicija morala da se pomeri.
Drugo: stavka u meniju nije isto što i sadržaj. Jedna ordinacija iz seta ima „Pre i posle“ i „Iskustva pacijenata“ u glavnoj navigaciji, a na obe stranice uživo stoji Lorem ipsum — latinski tekst-punilo, na objavljenom sajtu. Stranica sa utiscima nema nijedan utisak. Lestvica u ovom sektoru nije visoko postavljena, ali se lako pretpostavi da jeste.
Treće: ono što niko ne pokazuje. Jedna ordinacija iz trećeg prolaza vrlo dobro drži isti ton koji smo i mi hteli — „izvedena nežno“ u naslovu, „jasan plan terapije“ u uvodu, prava Google ocena na vrhu stranice. Ali plan samo imenuje i nikada ga ne pokaže, a cene uopšte ne objavljuje.
Tu je bila rupa. Ne u tome da li neko obećava jasan plan, nego u tome da li ga iko pokaže.
Pozicija: dokument koji nosite kući
Naslovna rečenica sajta ne obećava osećaj, nego predmet:
Plan terapije na papiru, sa prvog pregleda.
A onda sajt taj papir nacrta. Na početnoj strani stoji primer plana terapije, složen kao dokument: stavke, oznake zuba, cena po stavci, šta se radi odmah a šta može da čeka, i zbir na dnu. Ispod piše ono što ceo argument drži: plan je vaš i ako terapiju radite negde drugde.
Cifre u tom primeru slažu se sa objavljenim cenovnikom: svaka stavka pada u raspon koji za nju stoji na strani „Cenovnik“. To nije detalj — plan čiji se zbir ne poklapa sa cenovnikom na istom sajtu gori je od nikakvog plana.
Pregled traje 30 minuta i košta 2.000 dinara. Ta cifra nije izmišljena da zvuči dobro: tačno toliko naplaćuje jedna od ordinacija iz našeg seta.
Šta smo odbili da uradimo
Ovo je, iskreno, korisniji spisak od svakog drugog na ovoj strani. Sve u levoj koloni je ili traženo tokom izrade, ili uobičajeno u sektoru.
| Traženo ili uobičajeno | Zašto toga nema |
|---|---|
| Izmišljene diplome i brojevi u komori | Izmišljena ordinacija ne može da nosi ničiju diplomu, a tuđa diploma pod izmišljenim imenom nije koncept nego lažno predstavljanje. |
| Izmišljene ocene i utisci pacijenata | Ocena koju niko nije dao obara ceo argument ostatka sajta. |
| Galerija „pre i posle“ | To su tuđa usta, i saglasnost je ceo smisao. A uobičajena izvedba je klizač preko krupnih kadrova kamenca i pokvarenih zuba — tačno slike na koje se uplašen pacijent priprema. Na stranici koja tvrdi da ovde niko neće biti uplašen, takva galerija ruši sopstvenu poziciju. |
| Sve što plaši | Odbačena su četiri materijala: snimak bušilice u ustima, makro kadar šprica, snimak zahvata sa otvorenim ustima i fotografija hirurške pripreme. |
| Ugrađena Google mapa | Adresa je izmišljena, pa bi pribadača stajala na nečijoj stvarnoj zgradi, a iframe nosi kolačiće pre nego što je iko na šta pristao. Umesto nje stoji shematska mapa i link koji se otvara u novoj kartici. |
| Pozadinska muzika | Predložena je, pa smo od nje odustali: pregledači blokiraju automatsko puštanje, pristupačnost traži kontrolu za zaustavljanje svega što traje duže od tri sekunde, a tišina je ovde deo poente. Mir je dobijen razmakom, ne zvukom. |
| Karusel | Skoro svaka ordinacija iz seta ima bar jedan. Karusel je mesto gde sadržaj ide da ga niko ne vidi. |
| Modal na ulazu, precrtane cene, odbrojavanje | Sve troje postoji u ovom sektoru. Ništa od toga ne ulazi u sajt koji tvrdi da ništa ne krije. |
Odluke u dizajnu
- Luk. Znak, favicon, okvir crteža vilice i pločice tima su isti oblik — luk, po kome i zubi stoje u vilici. Jedan motiv koji se ponavlja, umesto pet ukrasa koji se međusobno ne poznaju.
- Jedna boja akcenta, i to ne plava. Tamnozelena,
#196840. Ceo sektor je cijan na belom; dva dobra kadra odbačena su samo zato što je stolica u njima bila tirkizna. - Topli porcelan, ne bela i ne tamna. Podloga je
#f6f2eb. Tamna paleta je probana i odbačena: čita se kao sajt agencije, a druga najveća zamka ovog sektora je klinička hladnoća. - Dva pisma, self-hostovana. Fraunces za naslove, Instrument Sans za tekst, oba sa
latin-extskupom, da č, ć, ž, š i đ ne padnu u zamensko pismo. Većina ordinacija iz seta povlači pisma sa Google servera; pod strožom bezbednosnom politikom to zna da otkaže bez ijedne poruke u konzoli — stranica se otvori, samo u pogrešnom pismu. - Dve animacije, i nijedna treća. Zubni luk koji se iscrta jednom pa stane, i video na vrhu strane.
- Tekst nikad ne stoji direktno na videu. Naslov je u neprozirnom panelu preko snimka. Kontrast prema pokretnoj slici ne može da se izmeri, a ovde je sve izmereno.
- Crtež vilice koji objašnjava. Pređete mišem preko zuba — ili ga na telefonu dodirnete — i dobijete njegov broj, ime, šta se sa njim najčešće dešava i šta se obično radi. Nijedna od šest ordinacija iz poslednjeg prolaza nema ništa interaktivno osim karusela i padajućih pitanja.
- „Da li boli“ tamo gde se odlučuje. Konkurencija na to pitanje odgovara, ali u blogu, iza klika, napisano za pretraživač; jedan takav tekst je iz 2021. Ovde stoji na strani na kojoj se posetilac odlučuje, zajedno sa dogovorom o podignutoj ruci: ako zaboli, staje se.
Tri prazna mesta koja se ne popunjavaju
Na dnu sekcije o timu stoji okvir pod naslovom „Šta bi ovde stajalo na sajtu prave ordinacije“, sa tri stavke: diplome i brojevi u komori, utisci pacijenata i ocena, i „pre i posle“. Uz svaku piše šta bi na pravom sajtu tu bilo i zašto je ovde prazno.
To je namerno. Izostaviti ih značilo bi da o njima nismo ni razmišljali. Izmisliti ih značilo bi da je sve ostalo na sajtu podjednako pouzdano. Prazno mesto koje objasni sebe jedina je treća opcija.
Isti razlog stoji iza oznake na svakoj fotografiji tima: ilustrativna fotografija. Bez nje bi stranica tvrdila da je stvarna osoba imenovani stomatolog.
Kako je napravljen
Ručno. HTML, CSS i čist JavaScript — bez framework-a, bez bundler-a, bez koraka za build i bez CSS biblioteke. Sve je self-hostovano, od pisama i slika do videa i ikona, i ništa se u trenutku učitavanja ne povlači ni sa jednog tuđeg servera.
Tri provere se pokreću nad sajtom pre svake izmene: da li je nešto polomljeno (mrtvi linkovi, neispravan JSON-LD, nesklopljeni tagovi, sitemap), da li su zaglavlje i podnožje odlutali od šablona, i da li je dizajn skliznuo u generičko. Ta treća broji stvari kao što su sitna velika slova sa razmaknutim slovima i previše različitih radijusa, i za svaki izuzetak traži napisan razlog.
Video na vrhu strane prekodiran je sa 10,9 MB na 576 KB i skraćen na devet sekundi, a telefon dobija manji fajl od desktopa. Umesto pridevâ, brojevi:
| Šta | Koliko |
|---|---|
| Ceo sajt — tri strane, kod, pisma, slike i video | 1,77 MB |
| Video, dva fajla (desktop i telefon) | 740 KB |
| Slike, 10 fajlova | 721 KB |
| Pisma — četiri variable woff2 | 109 KB |
| CSS, jedan fajl | 75 KB |
| JavaScript, jedan fajl | 37 KB |
| Prvo učitavanje početne strane, desktop | 910 KB · 10 zahteva |
Izvor: veličine fajlova na disku u našem repozitorijumu, i prenos izmeren u pregledaču pri prvom otvaranju početne strane na 1440 piksela, sa lokalnog servera, 25. septembra 2026. Od 910 KB prvog učitavanja 576 KB je video. HTML, CSS i JavaScript se preko HTTPS-a šalju kompresovani, pa je stvarni prenos manji od ovih brojeva — namerno navodimo veći. Svih osam fotografija nosi loading="lazy" i dobavlja se tek kada dođe u vidno polje, pa nisu u prvom učitavanju.
Lighthouse merimo na objavljenom sajtu i brojeve upisujemo kada ih izmerimo. Dok ih nema, ovde stoji crta, a ne procena.
Pristupačnost i zanat
Svaki nivo teksta izračunat je prema stvarnoj podlozi, ne procenjen: glavni tekst 14,65:1, sekundarni 6,92:1, najtiši 5,32:1, a akcenat 6,08:1. Sve prolazi AA, sa rezervom. Ikone su crtane u SVG-u, a ne znakovi iz fonta, koji na svakom telefonu izgledaju drugačije.
Pod prefers-reduced-motion ništa se ne pomera: luk je odmah dovršen, a umesto videa stoji njegova prva slika. Bez JavaScripta stranica se i dalje čita cela — umesto videa stoji ista slika, a umesto forme poruka sa brojem telefona. Jedino crtež vilice tada ostaje prazan.
Ovo ne radimo zbog liste sa kvačicama. Nervozan pacijent čita sporije, često na telefonu i jednom rukom, a sajt koji se tada lako čita je sajt sa kog stiže poziv.
Šta ovaj sajt nema — i šta bi imao da je pravi
Ovo je koncept, i sve što bi stajalo iza forme ne postoji. Navodimo to ovde jer je to pola posla na pravom projektu, a na prikazu se ne vidi.
- Nema pozadinu. Forma za upit proverava polja i prikazuje potvrdu, ali ne šalje ništa i ne čuva ništa — i to piše ispod nje. Nema servera, nema baze, nema pošte.
- Nema sistem za zakazivanje. Termini na sajtu su tekst, ne kalendar.
- Nema CMS. Cene, tekstovi i tim upisani su u kod; ordinacija ih sama ne bi mogla promeniti.
- Nema analitiku, kolačiće ni praćenje, pa nema ni trake o kolačićima — nema šta da se traži.
- Nema stranicu o privatnosti, namerno: ništa se ne prikuplja. To je prva stvar koja se pravi čim se zakači pravi endpoint.
Da je ovo pravi posao, u obim bi ušlo:
| Šta | Zašto |
|---|---|
| Forma koja stvarno šalje — na poštu ordinacije, sa zaštitom od spama i zapisom upita | Bez toga sajt ne donosi ništa. Uz nju odmah ide stranica o privatnosti, pristanak i rok čuvanja, po Zakonu o zaštiti podataka o ličnosti. |
| Zakazivanje | Ili prosta molba za termin koja stiže na poštu, ili povezivanje sa kalendarom koji ordinacija već koristi. Odluka zavisi od toga ko u ordinaciji stvarno drži raspored. |
| CMS za cenovnik i tekstove | Cenovnik se menja bar jednom godišnje. Ako za svaku izmenu mora da se zove agencija, cene na sajtu zastare i obećanje o transparentnosti padne. |
| Prave fotografije | Jedno snimanje, tim i prostor, uz pismenu saglasnost svih na slici. Zamenjuju sve ilustrativne slike i sve tri pločice tima odjednom. |
| Diplome i brojevi u komori | Provereni u registru pre objave. Popunjavaju prvo prazno mesto — jedino ispravno. |
| Google recenzije sa profila ordinacije | Sa linkom na izvor. Popunjavaju drugo prazno mesto ocenom koju posetilac može sam da otvori. |
| Analitika bez kolačića | Da se vidi da li sajt donosi pozive, bez trake o kolačićima. |
| Drugi jezik — nemački pre engleskog | Dentalni turizam je ovde stvaran prihod: tri od šest ordinacija koje smo otvorili u trećem prolazu imaju stranu za njega, jedna radi i na nemačkom i na ruskom, a jedna je cela na engleskom. |
| Blog ili novosti | Ono što posetiocu i pretraživaču kaže da je ordinacija još uvek živa. |
Sve ovo je posao koji se planira sa klijentom, a ne iznenađenje na kraju. Zato i stoji ovde.
Šta bismo uradili drugačije
Dve stvari, pošteno.
Sajt koristi isto pismo za naslove kao jedna stvarna beogradska ordinacija koja drži vrlo sličan ton. Na konceptu to nije problem; na pravom projektu u istom gradu bio bi, i pismo bi se menjalo.
I fotografije. Ovde su ilustrativne, i svaka pločica tima to i kaže. Prvi dan pravog projekta je dogovor o snimanju — ordinacija se prepoznaje po svojoj sobi i svojim ljudima, ne po tuđim.
Šta ova izrada dokazuje
Sajt male ordinacije može da bude konkretan, miran i pošten u isto vreme: da kaže koliko šta košta, da pokaže šta pacijent dobija sa prvog pregleda i da ne izmisli ništa od onoga što ne može da dokaže. Uđite u sajt u laptopu gore, pređite preko zuba, otvorite cenovnik i pošaljite probni upit, pa sami procenite.
Isti postupak primenjujemo na svaki sajt lokalnog biznisa: prvo set konkurenata i pitanje šta oni ne odgovaraju, pa tek onda dizajn. Detaljnije o obimu i cenama stoji na strani izrada sajtova.
Ako vodite ordinaciju i sajt vam ne donosi pozive, pogledajte svoj pored ovoga i recite nam šta vam fali.