Vrtlog Digital

Nakon što sam složio osnovni nacrt početne stranice direktno u WordPressu, došlo je vrijeme za onaj uzbudljiviji dio – dizajn. U ovom postu dijelim kako sam pristupio definiranju boja, tipografije, stilova sekcija, dodavanju slika i pozadina, te završnom „finišu“ koji daje stranici pravi karakter.

Boje i tipografija: stvaranje prepoznatljivog vizualnog identiteta

Odabrao sam jednostavnu i kontrastnu paletu boja – s dominantnom bojom za akcente (gumbi, linkovi) i neutralnom pozadinom koja omogućuje da sadržaj dođe do izražaja.

Kod tipografije, ostao sam vjeran čitljivim Google fontovima – jedan za naslove, drugi za tekst. Bitno mi je bilo da sve izgleda moderno, ali ne previše „techy“ – želim da stranica djeluje profesionalno, ali i osobno.

Naslovi i podnaslovi: hijerarhija i jasnoća

Dodao sam jasnu strukturu naslova (H1, H2, H3…) kako bi korisnici mogli brzo skenirati sadržaj, a istovremeno i zbog SEO prednosti. Svaka sekcija počinje naslovom koji jasno komunicira što slijedi – bez nepotrebnih ukrasa, direktno i jednostavno.

Slike: biranje relevantnih i autentičnih vizuala

Slike igraju veliku ulogu u stvaranju dojma. Izbjegavam generičke stock fotke – gdje mogu, koristim vlastite vizuale, mockupe i prilagođene ilustracije.

Na primjer, u sekciji za vas dodajem slike mojih radova koje vizualno podržavaju tekst, dok u blog sekciji slike pomažu privući pažnju na najnovije objave.

Pozadine i kontrast: da sve “diše”

Nisam htio pretjerivati s pozadinama, ali u nekim sekcijama koristim suptilne boje, sjene ili lagane teksture koje pomažu da se sekcije međusobno razlikuju i bolje istaknu.

Primjer: pozadina iza sekcije pri dnu ima blagi sivi ton, dok sekcija usluge ima pozadinsku sliku s jasnim gumbom za akciju.

Animacije i prijelazi: suptilno, ali efektno

Dodao sam nekoliko jednostavnih scroll animacija i hover efekata – samo tamo gdje imaju smisla. Cilj nije zabaviti, već voditi pažnju korisnika prema bitnim informacijama. Sve animacije su lagane, bez usporavanja učitavanja stranice.

Testiranje responzivnosti: mobilno prije svega

Nakon što sam dizajnirao desktop verziju, prešao sam na testiranje na mobitelima i tabletima. Svaka sekcija mora biti pregledna i funkcionalna i na manjim ekranima. Posebno sam pazio na veličinu teksta, margine i interaktivne elemente poput gumba i menija.

Što slijedi?

Stranica sada vizualno izgleda jako blizu finalne verzije. Sljedeći korak je optimizacija performansi, dodavanje SEO postavki, postavljanje kontakt forme, i nekoliko manjih dorada koje će dodatno poboljšati korisničko iskustvo.

Zaključak

Redizajn web stranice je proces koji se stalno razvija. U ovom dijelu fokusirao sam se na dizajn, vizualni identitet i korisničko iskustvo. Kroz sljedeće faze dodat ću još funkcionalnosti i pobrinuti se da sve radi brzo i glatko.

Ako ti je ovaj sadržaj bio koristan ili te zanima što dalje radim – zaprati me na facebook ili se pretplati na moj youtube.

🎥 U idućem videu ću vam pokazati novi dizajn stranice u akciji – od scrollanja kroz sekcije, preko animacija, do pregleda mobilne verzije.

Ako te zanima kako sve izgleda uživo – klikni play i pogledaj!