U ovoj vježbi ponovit ćeš oblikovanje teksta i tipografije na web stranici. Pokušaj postići čitljiv, uredan i dosljedan izgled.
Na stranici se nalaze naslovi, odlomci, liste, poveznice i gumb. Tvoj zadatak je stilizirati ih tako da sve djeluje skladno i profesionalno. Obrati pozornost na veličine, razmake, poravnanja i stanja interaktivnih elemenata.
Popis pojmova za vježbu
- Tipografija i čitljivost
- Hijerarhija naslova
- Razmaci i međurazmaci
- Stanja poveznica i gumbi
Kratka lista koraka
- Uskladi osnovni izgled teksta na stranici.
- Istakni glavni naslov u odnosu na ostale elemente.
- Učini podnaslov vizualno različitim od naslova i teksta.
- Naglasak stavi na uvodni odlomak.
- Drugi odlomak pripremi za ugodno čitanje većih blokova teksta.
- Uredi prikaz stavki u listama (oznaka, uvlake, razmaci).
- Pripremi različita stanja za poveznice.
- Uredi gumb tako da bude jasno uočljiv i reagira na pokazivač.
Korisne poveznice
Kontakt
Imaš pitanje? Klikni na gumb i zamisli da otvara kontakt obrazac.
Upute za stiliziranje (bez navođenja konkretnih svojstava)
- Postavi temeljni izgled teksta na cijeloj stranici: odaberi prikladan font, veličinu i boju; osiguraj ugodan kontrast i uređen raspored na rubovima stranice.
- Glavni naslov vizualno izdvoji u odnosu na ostatak sadržaja te ga smjesti tako da odmah privlači pažnju.
- Podnaslov oblikuj tako da se jasno razlikuje od naslova i običnog teksta (možeš sugerirati drugačiji dojam bez promjene sadržaja).
- Uvodni odlomak učini naglašenim i istaknutim, a pritom zadrži čitljivost.
- Drugi odlomak pripremi za ugodno čitanje u širim redovima: prilagodi razmake i poravnanje tako da tekst izgleda uredno.
- Uredi nestrukturiranu listu: promijeni izgled oznaka, uvlake i razmake između stavki tako da lista bude pregledna.
- Poveznice pripremi za različita stanja: neka se uobičajeno ponašaju neutralno, na prelazak pokazivača jasno reagiraju, a u trenutku klika daju jasan dojam radnje.
- Gumb učini dovoljno velikim i uočljivim za interakciju; na prelazak pokazivača treba reagirati promjenom izgleda. Po želji dodaj suptilan efekt.
Dodatni izazov: dodaj još jedan odlomak s vlastitom klasom i primijeni nekoliko dorada po vlastitom izboru kako bi se uklopio u ostatak dizajna.