ONLINEZARADA AKADEMIJA / WEB DIZAJN

Od prve ideje
do tvog web projekta.

Šest praktičnih lekcija. Jedan demonstracijski sajt. Uči dizajn i strukturu, vježbaj u Web Labu, pa sačuvaj rezultat za portfolio.

0 / 6 vježbi završeno

Besplatan praktični put · čitanje i vježbanje ~2–4 sata, zavisno od projekta. Prijavljenim članovima napredak se čuva na računu.

◎ AKADEMIJA / PRAKSA

Znanje postaje
vidljiv rezultat.

01 Uči02 Izgradi03 Provjeri
Označi vježbu tek kada je uradiš.
01Plan koji ima jednu jasnu svrhu

Prije boja i efekata odredi šta stranica treba postići. Posjetilac treba brzo razumjeti kome se obraćaš, šta nudiš i koji je sljedeći korak.

  1. Napiši jednu publiku: npr. mali lokalni kafić koji treba predstaviti ponudu. Izbjegni „za sve“.
  2. Napiši jednu glavnu radnju: pregled usluga, pregled radova ili početak razgovora. Demo u ovoj vježbi ne šalje kontaktne obrasce.
  3. Složi mali brief: publika, problem, usluga, dokaz, radnja. Za primjer portfolija napiši „izrađujem jednostavne web stranice za lokalne firme“.
  4. Napravi inventar sadržaja: naslov, opis, tri usluge, tri demonstracijska projekta i završna poruka. Izmišljene projekte označi demonstracijskim.
Tvoj praktični zadatak

Napiši brief od 5 rečenica. Otvori Web Lab, odaberi početni stil i unesi naziv svog projekta. Rezultat je usklađen cilj i sadržaj, bez ukrasa koji odvlače pažnju.

Vježbaj u Web Labu ↗
02Tipografija, boje i vizuelni identitet

Premium utisak počinje čitljivošću, dosljednim razmacima i smirenom hijerarhijom. Više efekata samo po sebi ne znači bolji dizajn.

  1. Izaberi najviše jednu akcentnu boju i jednu mirnu pozadinu. Akcent služi važnim dugmadima i detaljima.
  2. Za moderan tehnološki stil izaberi modernu tipografiju; za elegantni studio probaj serif. Tekst opisa treba ostati lako čitljiv.
  3. U naslovu koristi jednu konkretnu ideju. Umjesto „Najbolji na svijetu“ napiši „Web stranice koje jasno predstavljaju vaš posao“.
  4. Provjeri odnos teksta i pozadine. Ako je teško čitati, promijeni boju prije dodavanja novih detalja. Ne prenosi važne informacije samo bojom.
Tvoj praktični zadatak

Napravi dvije vizuelne verzije iste naslovne sekcije. Uporedi lavandu i toplu pijesak paletu, pa izaberi onu koja odgovara ciljnoj publici. Provjeri naslov na prikazu mobitela.

Vježbaj u Web Labu ↗
03Sekcije koje vode posjetioca

Svaka sekcija treba odgovoriti na jedno pitanje. Redoslijed je priča: šta nudim, zašto je korisno, kako izgleda rezultat i šta slijedi.

  1. Kreni naslovnom sekcijom, zatim dodaj Usluge, Portfolio, Proces i Poziv na akciju. Sekcije pomjeraj strelicama u editoru.
  2. Kartice piši u odvojenim redovima. Koristi najviše 3–6 stavki; duga lista otežava pregled.
  3. U portfolio napiši stvarne radove ili jasno označene demonstracije. Nemoj izmišljati klijente, recenzije ili rezultate.
  4. Dodaj FAQ s pitanjima koja bi stvarni posjetilac postavio. U svakom redu piši pitanje, znak | i kratak odgovor.
Tvoj praktični zadatak

Složi stranicu od 5 sekcija. Za tri usluge napiši konkretne nazive, a u FAQ dodaj dvije razumljive stavke. Dupliraj jednu sekciju i nauči promijeniti redoslijed.

Vježbaj u Web Labu ↗
04Mobilni prikaz i pristupačnost

Dobar web projekt radi i na malom ekranu. Provjera mobitela treba doći dok radiš, a ne tek na kraju.

  1. Uključi prikaz Mobitel. Provjeri da naslov ne prekriva vizual i da se riječi ne lome neobično. Skrati naslov ako je predug.
  2. Prođi editor tastaturom: Tab pomjera fokus, Enter aktivira dugme. Fokus treba biti vidljiv.
  3. Tekst treba biti razumljiv bez ikonica. Koristi ikonice kao pomoć, uz jasno napisane nazive.
  4. Smanji vizuelnu gužvu: prazni prostor, jasni naslovi i kratki opisi olakšavaju čitanje. Ne dodaj automatske animacije koje ometaju sadržaj.
Tvoj praktični zadatak

Pregledaj sve sekcije na mobitelu i velikom ekranu. Zapiši tri promjene koje poboljšavaju preglednost i primijeni ih. Zamoli drugu osobu da u pet sekundi opiše šta stranica nudi.

Vježbaj u Web Labu ↗
05Osnove SEO-a i provjera sadržaja

SEO počinje korisnom, tačnom stranicom. Izvoz iz Web Laba sadrži naziv projekta u naslovu dokumenta i meta opis koji ti uneseš. Javni demo je namjerno isključen iz indeksiranja.

  1. Naziv projekta koristi kao jasan naziv brenda ili teme. U glavnom naslovu prirodno opiši uslugu.
  2. Napiši meta opis do 160 znakova: šta nudiš, kome i koja je korist. Nemoj ponavljati istu ključnu riječ više puta.
  3. Koristi jednu glavnu naslovnu sekciju. Ostale sekcije imaju H2, a kartice H3. Redoslijed olakšava razumijevanje stranice.
  4. Provjeri pravopis, obećanja, cijene i dozvolu za sadržaj. Stvarnu analitiku, politiku privatnosti i obradu obrazaca planiraj za budući produkcijski sajt.
Tvoj praktični zadatak

Unesi meta opis i provjeri sve naslove. Izvezi HTML i otvori ga na svom uređaju. Uporedi izvoz s pregledom u editoru. Demo link nije zamjena za SEO objavljenog poslovnog sajta.

Vježbaj u Web Labu ↗
06Objava, portfolio i predložak zajednice

Završeni projekt treba moći pokazati i objasniti. Sačuvaj svoju radnu verziju, zatim svjesno objavi javni demo. Objavljeni prikaz je zasebna verzija do sljedeće objave.

  1. Klikni Sačuvaj projekt. Član može imati do 5 projekata. Projekt ostaje vezan za prijavljeni račun.
  2. Klikni Objavi demo. Javna demonstracija traje 30 dana od posljednje objave; njen sadržaj može vidjeti svako ko ima link. Ne dodaj privatne podatke.
  3. Otvori javni link i provjeri rezultat. Ako nešto izmijeniš, ponovo sačuvaj i objavi. Povuci demo ako ga više ne želiš javno dijeliti.
  4. Za portfolio napiši kratak prikaz: cilj projekta, publika, izbor stila, urađene provjere i šta bi sljedeće unaprijedio. Ako nudiš rad biblioteci, pročitaj dozvolu i koristi samo originalni sadržaj.
Tvoj praktični zadatak

Objavi demo, provjeri link i napiši studiju slučaja od 150–250 riječi. Po želji dobrovoljno ponudi predložak biblioteci. Administrator pregledava rad; označavanje vježbe ne znači profesionalni certifikat.

Vježbaj u Web Labu ↗

Sljedeći korak: pravi WordPress projekt.

Web Lab uči strukturu i dizajn kroz statične demonstracije. Za pravu WordPress instalaciju trebaju hosting, domena, tema, dodaci i sigurnosne kopije. Besplatni starter paketi u Studiju mogu pomoći pri tom koraku.