Web dizajn: šta je to, od čega se sastoji i kako prepoznati dobar

Web dizajn je planiranje i oblikovanje sajta tako da ga ljudi razumeju, lako koriste i urade ono zbog čega su došli. Obuhvata izgled, ali i raspored sadržaja, put kroz stranice, čitljivost na telefonu i brzinu. Lep sajt koji niko ne ume da koristi nije dobar web dizajn.

To je kratak odgovor. Ispod je sve ostalo što ljudi obično pitaju kad krenu da se raspituju: po čemu se web dizajn razlikuje od programiranja, od čega se sastoji, kako izgleda proces, koliko košta i šta znače svi ti izrazi koje dizajneri koriste. Na kraju je rečnik pojmova, pa se slobodno vrati na njega kad ti neko pošalje ponudu punu nepoznatih reči.

Web dizajn nije samo izgled

Kad neko kaže „dizajn“, većina ljudi pomisli na boje i fontove. To je samo najvidljiviji sloj. Dobar web dizajn radi na tri nivoa odjednom:

• Kako izgleda. Boje, tipografija, fotografije, prostor između elemenata. Ovo je deo koji gradi prvi utisak i poverenje.
• Kako se koristi. Da li čovek za tri sekunde razume gde je i šta može da uradi, da li nalazi ono što traži bez razmišljanja, da li forma radi na telefonu. To je korisničko iskustvo, o kome smo više pisali u tekstu UI/UX dizajn: šta je to i zašto odlučuje da li sajt prodaje.
• Kako radi. Brzina učitavanja, prikaz na različitim ekranima, pristupačnost. Dizajn koji se učitava šest sekundi ne vidi skoro niko.

Sajt može biti odličan u jednom sloju i loš u druga dva. Najčešći slučaj koji viđamo je upravo to: vizuelno lep sajt sa kog ne stižu upiti, jer niko nije razmislio o tome šta posetilac treba da uradi.

Web dizajn i web razvoj: u čemu je razlika

Ova dva pojma se često mešaju, a u praksi ih često radi ista osoba ili isti tim. Razlika je u pitanju na koje odgovaraju.

Za manji poslovni sajt dizajn i razvoj obično ide u paketu. Kod većih projekata, posebno online prodavnica i sajtova sa posebnim funkcijama, razvoj je veći deo posla i cene.

Šta je web stranica, a šta sajt

Još jedna česta zabuna, pa kratko:

• Web stranica je jedna strana, na jednoj adresi. Na primer strana „Kontakt“.
• Web sajt je skup povezanih stranica pod jednim imenom. Početna, usluge, o nama, kontakt, zajedno čine sajt.
• Domen je adresa sajta, na primer tvojafirma.rs.
• Hosting je server na kome sajt fizički živi.

Kad neko kaže „treba mi web stranica“, skoro uvek misli na ceo sajt.

Sedam elemenata dobrog web dizajna

1. Struktura i navigacija

Pre boja i fontova, dizajn počinje odlukom koje stranice postoje i kako se između njih ide. Meni sa sedam do osam stavki, jasni nazivi umesto kreativnih („Usluge“, ne „Šta radimo sa ljubavlju“), i put do kontakta sa svake strane.

2. Vizuelna hijerarhija

Oko čita stranicu redom koji dizajn diktira: prvo najveće i najkontrastnije, pa manje. Dobar dizajn tim redom vodi od onoga što te zanima do onoga što treba da uradiš. Kad je sve jednako naglašeno, ništa nije naglašeno.

3. Tipografija

Veći deo sajta je tekst. Čitljiva veličina slova na telefonu, dovoljan razmak između redova, najviše dva fonta. Tekst koji se teško čita se ne čita.

4. Boje i kontrast

Boje nose brend, ali pre svega moraju da obezbede da se tekst jasno vidi na podlozi. Siv tekst na svetlosivoj pozadini izgleda elegantno na monitoru dizajnera, a nečitljivo na telefonu na suncu.

5. Prostor

Prazan prostor nije protraćen prostor. Daje sadržaju da diše i pomaže oku da odvoji jednu celinu od druge. Pretrpana stranica deluje jeftino čak i kad nije.

6. Slike i ilustracije

Prave fotografije tvog posla, prostora i proizvoda grade poverenje brže od bilo kog teksta. Stok fotografije nasmejanih ljudi u kancelariji rade suprotno. I sve slike moraju biti optimizovane, jer su najčešći razlog sporog sajta.

7. Poziv na akciju

Svaka stranica treba da ima jasan sledeći korak: pozovi, zatraži ponudu, kupi, rezerviši. Vidljiv, jedan glavni po stranici, napisan tako da čovek zna šta će se desiti kad klikne.

Responzivni dizajn: prvo telefon

Responzivan sajt je onaj koji se prilagođava ekranu na kome se otvara, od telefona do širokog monitora. Pojam je 2010. popularisao Ethan Marcotte u tekstu Responsive Web Design, i od tada je postao standard.

Danas je pitanje čak obrnuto. Većina posetilaca stiže sa telefona, a Google sajt ocenjuje prvenstveno po mobilnoj verziji. Zato dobar dizajn danas počinje od uskog ekrana, pa se širi, a ne obrnuto.

Kako izgleda proces web dizajna

1. Razgovor i cilj. Šta sajt treba da postigne i za koga. Ovo je najvažniji korak i najčešće preskočen. Pomaže ako unapred pripremiš specifikaciju sajta.
2. Struktura. Spisak stranica i šta ide na koju.
3. Skica (wireframe). Crno-beli raspored elemenata, bez boja, da se proveri logika pre nego što se uloži u izgled.
4. Vizuelni dizajn. Boje, tipografija, fotografije, detalji.
5. Razvoj. Dizajn postaje sajt koji radi.
6. Testiranje. Na telefonima, u različitim pregledačima, sa pravim formama i pravim sadržajem.
7. Lansiranje i merenje. Sajt ide uživo, a merenje pokazuje odakle stižu upiti i gde ljudi odustaju.
8. Održavanje. Ažuriranja, rezervne kopije, sitne izmene. Sajt nije plakat, živi i troši se.

Gotova tema ili dizajn po meri

Gotova tema je unapred napravljen dizajn u koji se ubaci tvoj sadržaj. Brza je i jeftinija, ali izgleda kao hiljade drugih sajtova i često vuče mnogo koda koji ti ne treba. Dizajn po meri se pravi za tvoj posao i tvoje posetioce, i sporiji je i skuplji na početku.

Nijedno nije uvek pravi izbor. Za vizit kartu na internetu gotova tema je sasvim dovoljna. Za sajt koji treba da donosi upite ili prodaje, razlika se vidi. Detaljnije u tekstu šta zapravo znači ručni rad kod sajta, a ako razmišljaš o platformama tipa Wix, pogledaj Wix, Squarespace ili WordPress.

Koliko košta web dizajn

Cena prati obim i složenost, ne broj stranica. Kod nas prezentacioni sajt sa dizajnom rađenim od nule počinje od 1.690 evra jednokratno, ili od 175 evra mesečno, sa godinom dana održavanja. Sve stavke su na cenovniku, a šta tačno pomera cenu razložili smo u tekstu izrada sajta cena.

Kratka istorija, u pet rečenica

Prvi sajt na svetu objavljen je 1991. u CERN-u, a njegova obnovljena kopija je i danas dostupna: samo tekst i linkovi, bez ikakvog dizajna. Sredinom devedesetih dolazi CSS, jezik koji je prvi put odvojio izgled od sadržaja i omogućio web dizajn kakav znamo. Početkom dvehiljaditih sajtovi su se slagali od tabela i Flash animacija, a Flash je krajem 2020. potpuno ugašen. Od 2010. responzivni dizajn postaje standard, jer telefoni prestižu računare. Danas je fokus na brzini, pristupačnosti i tome da sajt radi posao, a ne samo da postoji.

Rečnik pojmova u web dizajnu

Izrazi koje ćeš sresti u ponudama i razgovorima sa dizajnerima, objašnjeni bez žargona.

Domen

Adresa sajta, na primer tvojafirma.rs. Plaća se godišnje i treba da bude registrovan na tebe.

Hosting

Server na kome sajt živi. Od njega direktno zavisi brzina.

CMS

Sistem za upravljanje sadržajem, preko koga menjaš tekstove i slike bez programera. Najpoznatiji je WordPress.

Tema

Gotov dizajn za CMS u koji se ubacuje sadržaj.

Plugin (dodatak)

Dodatni modul koji sajtu daje neku funkciju, na primer formu ili prodavnicu. Svaki dodatak treba ažurirati.

Responzivan dizajn

Dizajn koji se prilagođava veličini ekrana.

UX (korisničko iskustvo)

Koliko je sajt lak i logičan za korišćenje.

UI (korisnički interfejs)

Vidljivi elementi sa kojima korisnik radi: dugmad, meniji, forme.

Wireframe

Crno-bela skica rasporeda stranice, pre vizuelnog dizajna.

Mockup

Slika kako će stranica izgledati, pre nego što se programira.

Prototip

Mockup na koji može da se klikne, da se proba tok kroz sajt.

Hero sekcija

Prvi, najveći deo stranice koji se vidi bez skrolovanja.

Fold

Linija do koje se stranica vidi bez skrolovanja. Sve iznad nje vidi skoro svako.

CTA (poziv na akciju)

Dugme ili link koji traži konkretan korak: pozovi, kupi, zatraži ponudu.

Landing stranica

Stranica napravljena za jedan cilj, obično za posetioce iz oglasa.

Footer

Donji deo stranice, obično sa kontaktom, linkovima i pravnim informacijama.

Breadcrumbs

Putanja iznad sadržaja koja pokazuje gde si na sajtu, na primer Početna / Blog / Članak.

Favicon

Mala ikonica sajta u tabu pregledača.

SSL i https

Šifrovana veza, katanac u adresi. Danas obavezno.

SEO

Optimizacija za pretraživače, da te nađu na Google-u.

Core Web Vitals

Google-ove mere brzine i stabilnosti učitavanja stranice.

Keš

Sačuvana kopija stranice koja se služi brže nego da se svaki put pravi iznova.

CDN

Mreža servera koja sadržaj isporučuje sa lokacije najbliže posetiocu.

Pristupačnost

Da sajt mogu da koriste i ljudi sa oštećenim vidom ili koji koriste samo tastaturu.

Kako da prepoznaš dobar web dizajn za pet minuta

Otvori sajt na telefonu i odgovori na ovih pet pitanja:

1. Da li za tri sekunde znam čime se firma bavi i za koga?
2. Da li vidim šta treba da uradim, bez traženja?
3. Da li se sve učitalo pre nego što sam izgubio strpljenje?
4. Da li mogu da pročitam tekst bez zumiranja?
5. Da li bih ovoj firmi dao novac na osnovu onoga što vidim?

Ako je bilo koji odgovor „ne“, tu je problem, bez obzira koliko je sajt lep.

Sledeći korak

Ako hoćeš da vidiš kako to izgleda kad se radi od nule za konkretan posao, pogledaj naše radove i kako radimo izradu sajtova. Ako već znaš šta ti treba, zatraži procenu.