Blog

Koraci u dizajnu web strane

Kao I svaki dizajn proces, I web page dizajn je proces koji vam niko u školi neće objasniti. Uostalom kao ni bilo koji proces. Da se ne bi previše lutalo, svetujem nekoliko koraka.

1 Kroki crteži

sketch

Krenite od osnovnog- svoje ideje iscrtajte na papiru, sve što vam padne na pamet; dopustite svom umu da je slobodan, nemojte biti kritični u ovoj fazi, nikada ne znate šta može da vam padne na pamet. Čak I ako ne iskoristite ideju na aktuelnom projektu, možda će baš ona biti ta koja vam treba za neki sledeći projekat.

2 Osnovni layout

layuot

Zapišite sve elemente koje ćete koristiti na strani/ stranama. U razgovoru sa klijentom pokušajte da saznate što više šta očekuju od sajta I kome je namenjen, ko je njihova publika. Kada razmišljate o elementima, uvek imajte na umu I SEO optimizaciju I elemente koji vam mogu koristiti u tom smislu (kao sto su FB komentari, twitter, pinterest…) Pokušajte da skicirate osnovni layout koji će se ponavljati po stranama a koji je user friendly, jasan I čist sa jasnim pozivima na akciju (ako ih ima, a ko ne moraćete da ih smislite :) )

3 Photoshop

grid

Iako mnogi odmah otvaraju photoshop I razmišljaju o efektima koji su dostuni, brzanje sa bojama I stilovima može da uspori proces dizajna. Iz tog razloga, mislim da je PSD tek treći korak I to prvo u smislu pravljenja grida koji ste rešili da koristite.

Napravite grid sa kojim ćete lako previti prelom za sve rezolucije I uz pomoć kojeg ćete lako pokazati klijentu kako će izgledati njihov sajt na velikim rezolucijama, tabletu I mobilnom telefonu.

Kada napravite dobar grid, moći ćete da ga koristite za većinu projekata na kojima radite. Jednom dobro uradjen ovaj deo posla, uradjen je I za ubuduće.

4 Fontovi

fonts

U zavisnosti od logoa, izaberite font za sajt. Preporuka, ili pravilo za izradu web sajtova je da ne koristite više od 2 fonta, ali u zavisnosti od projekta ovo pravilo se može poštovati ili ne.

Koristite font koji se lako čita kada ima dosta teksta I igrajte se sa naslovima, bojama, veličinama. Ne zaboravite da budete konzistentni kad su u pitanju naslovi, paragrafi, linkovi.

5 Boje na sajtu

colors

Izaberite color schemu za sajt u zavisnosti od boje brenda. Ne valja preterivati sa različitim bojama i sa previše nijansi na strani jer može doći do vizuelnog prezasićenje I umora očiju. Boje koristite da naglasite UI elemente kao sto su button-i, naslovi, linkovi.

Photoshop ima svoj alat za color schemu koji možete koristiti, pogledajte pantonove scheme ili nešto od predloga za web color scheme koje možete naći na netu.

Osnovno preporuka ovde je ne preterivati. Boje služe da stvore utisak o brendu kao I fontovi I koristite ih sa pažnjom.

6 Odvojeni layout-i za različite strane

k

Svaka strana na sajtu ima svoju poruku, priča odredjenu priču. Sve zajedno stvaraju opšti utisak. Prelom služi da naglasi bitne poruke na strani kao I da pomogne korisniku da lako nadje I prepoznaje sadržaj. Strana ne treba da bude pretrpana call-to-action sadržajima jer ce zbuniti korisnika.

Krenite od najjednostavnijeg jasnog preloma I onda dodajte neophodne elemente.

7 Detalji

d

Pogledajte još jednom sve što ste uradili I obratite pažnju na detalje. Ovo je trenutak kad možete da se igrate hover efektima I divnim CSS3 stilovima. Ne zaboravite da I ovde budete konzistentni I umereni. Birajte stilove koji se uklapaju u celokupan utisak koji želite da ostavite.

Na netu ima puno primera CSS stilova koji mogu da vam koriste ne samo kao izvor već I kao inspiracija za ceo utisak koji će sajt ostavljati.

Za kraj, ostavite sve po strani jedan dan, pa pogledajte još jednom. Otklonite višak… Razmislite da li je sve što ste stavili neophodno, da li nešto fali. Vrlo često na web stranama manje je više a ne obrnuto. Usudite se da unesete nešto novo iako klijent to možda nije očekivao, bilo da je reč o prelomu, efektima, dizajn elementima... Pokušajte da vidite da li svaki segment na strani može da stoji sam za sebe, I ako može, znači da je dobro uradjen.

Pitajte komšije, prijatelje šta misle šta se kako koristi na strani koju ste dizajnirali I budite otvoreni za kritiku jer vam ona može pomoći da uradite sve bolje.

Podelite ovaj članak