Stvaranje čistog izgleda web stranice u Photoshopu - Dizajn izgleda web stranice više je nego organiziranje šarenih slika i popunjavanje dijela teksta u tekstualnim okvirima. To je pristup koji u velikoj mjeri govori o radu vašeg klijenta. Boje i grafike web mjesta definiraju prirodu poslovanja, dok kvaliteta dizajna i lagan tijek navigacije trebaju povezati korisnika s organizacijom i pretvoriti ga u potencijalnog kupca.
Dizajn dobrog izgleda i lako dostupnog izgleda web stranice obavezan je za sve wannabe web dizajnere. Ovaj je vodič namijenjen da vas vodi kroz postupak stvaranja izgleda jednostavnog i čistog web mjesta ispočetka. Tijekom postupka dolazit ćete do važnih bodova koji će vam dodatno pomoći u stjecanju više znanja o web dizajnu. 
Zapišite svoje zahtjeve prije dizajniranja izgleda web stranice
Prije nego što počnete dizajnirati izgled web mjesta, trebali biste znati kako će vaša web stranica izgledati i koje su teme koje biste trebali uključiti na web mjesto. Važno je napraviti popis elemenata izgleda web mjesta koje vaš klijent treba na svojoj web stranici. Uz to, kvaliteta dobrog dizajnera je pripremiti podsmijeh cijele web stranice prije nego što počne raditi na završnom predlošku.
Različite dizajnerske tvrtke prilagođavaju različite razine strategija prije projektiranja, koje mogu sadržavati uokvirivanje žica, prototipiranje, izradu maketa, beta verzije i još mnogo toga. U ovom ćemo udžbeniku stvoriti modelnu verziju prije pokretanja originalnog dizajna predloška. Koristim sive nijanse koje omogućuju prepoznavanje bloka makete
Platno
Prije nekoliko godina, dok je bilo vrlo malo OS-a i ograničenih uređaja za pristup web mjestima, dimenzije stranice bile su fiksirane na jednu ili dvije veličine. Danas je scenarij potpuno drugačiji. Krajnji korisnici pristupaju web mjestima na stolnim računalima različitih veličina, mobilnim telefonima, iPadima i tabletima. U ovoj raznolikoj situaciji, nema šanse da popravite svoju web stranicu na određenu veličinu. No postoje neke industrijske standardne veličine primijenjene na svaki uređaj. Polako ćete pronaći svoju omiljenu veličinu ili će vam klijent uputiti web mjesto da oponaša veličine.
U ovom slučaju radimo na sljedećim dimenzijama. Ne brinite o visini jer će se ona vremenom mijenjati. Što više sadržaja dodajete na svoju web stranicu, to će biti veća visina.
Upamtite da je uobičajeno za pomicanje stranice okomito, tako da se možda nećete popraviti na određenoj visini za svoju web stranicu, osim ako ne želite da se korisnik kretao po vašoj početnoj stranici kao Google. Ali, potrebno je ne pomicati se vodoravno. Dakle, ograničite širinu prema industrijskim standardima i ne budite kreativni s horizontalnim pomicanjem.
Za web je razlučivost ograničena na 72. Nedavno su slike i stranice veće rezolucije pronađene na iPadu i nekoliko tableta. Ali to je rijetka prilika, i bolje je držati se broja 72 s obzirom na brzinu interneta širom svijeta.
Odaberite datoteke pomoću naredbe Ctrl + A i vodiče jednako crtajte po predlošku. Web stranica bi trebala biti uredno organizirana tako da je svaki element međusobno koherentan. I smjernice za izgled web mjesta pomažu vam da ih lako dobijete.
Pripremite svoj nacrt
Postavljanje datoteke za iscrtavanje na vaš originalni predložak pomaže vam da uštedite dovoljno vremena. Dizajn vaše web stranice postaje toliko jednostavan da ćete na kraju dovršiti okvir u roku od nekoliko minuta. No, skica će vam samo pomoći u dizajniranju okvira. Dovršenje elemenata dizajna s detaljima, rasporedom i poravnanjem oduzet će više vremena nego crtanje izgleda web mjesta.
Shema boja i ostali izbori
Sljedeća stvar nakon što pripremite svoj okvir je odabir sheme boja. Ali, bolje je pripremiti svoje boje prije nego što počnete raditi na dizajnu.
Čitava stvar se svodi na poruku da, pripremite oružje prije nego što započnete s dizajnom. Sve, uključujući ikone, slike i odabira boja, treba biti spremno prije nego što počnete raditi. Organiziranje i planiranje vašeg rada uštediće više vremena i usredotočuje se na dizajn bez prepreka između.
Odabir boja može biti izbor dizajnera ako je tvrtka nova i nema korporativni identitet prije. U nekim slučajevima klijentima predočuje koje nijanse trebaju biti logotip ili pozadina. U slučaju postojećih tvrtki gdje ćete možda trebati redizajnirati čitavu web stranicu, možda ćete morati odabrati iste boje prema potrebama klijenta.
Postoje brojne web stranice koje vam mogu pomoći u odabiru milijuna shema boja iz arhive. Isprobajte sljedeće web stranice kako biste uživali u velikom izboru kombinacija boja.
Color.adobe.com
Colourlovers.com
Ovdje sam odabrao nekoliko nijansi plave koje koristim za web mjesto. Cijela web stranica planira se u sljedećoj shemi boja. Ne zaboravite odabrati tri ili četiri različite kombinacije boja, jer ne znamo koji će klijent klijent preferirati. Jednom kada klijent finalizira shemu boja, spremite vrijednosti nijansi i osigurajte da boje igraju vitalnu ulogu u svakoj vertikali organizacije. Pogotovo u korporativnom identitetu.
Proces dizajniranja
Postoji mnogo načina da nadgledate svoje dizajnere. Ne postoje čvrsta i brza pravila za oblikovanje web stranica koja mogu definirati ili slijediti proces dizajniranja, to je uglavnom postupak koji će dizajner odabrati po svojoj pogodnosti.
Neki dizajneri žele izgraditi cijele blokove i okvire te započeti raditi na detaljima u drugoj fazi, nakon čega slijede vrsta i konačno podešavanja i podešavanja. Neki vole dovršiti jedan dio stranice odjednom i prenijeti ga na sljedeći dio. Pratimo drugi stil.
Završit ćemo web mjesto u sljedećim koracima
- Zaglavlje podnožje
- Što radimo
- usluge
- Oblik
- Vijesti
- Podnožje
Zaglavlje podnožje
Pravilo da definirate dimenzije vašeg zaglavlja ili natpisa prepušteno je vašoj kreativnosti. Prema posljednjim trendovima, web stranice pojavljuju se s ogromnom slikom koja pokriva cijeli zaslon vašeg računala. Stil se naziva Hero image, koji je postao prilično popularan u posljednje vrijeme.
U ovom slučaju započeli smo s glavom visine od 120 piksela i visinom od 550 piksela za natpis. Širina treba odgovarati veličini dokumenta.
Dizajni s čvrstom bojom imaju ravan izgled koji ne ide dobro s većim okvirima ili slikama. Da izbjegnem ravan izgled, na vrh natpisa nanio sam sloj prekrivanja gradijentom. Daje transparentu dubinu koja se polako pretvara iz jedne nijanse u drugu.
Zatim smo počeli uvoziti Logotip i staviti ga u gornji lijevi ugao zaglavlja te još jedan veći logo na sredinu natpisa. Također možete promatrati vektorske oblike web stranice u gornjem desnom kutu, koji se koriste za dijeljenje veza na društvenim mrežama.
U ovoj fazi završio sam s dodavanjem vrste u dijelu Header & Banner. Naziv tvrtke, poruka robne marke, s vezama i uslugama, dodaje se u tekstu. Također možete promatrati transparentni gumb na Baneru.
Običan tekst ili previše vrste bez posebnih značajki pokvariti će izgled vaše web stranice; stranica će uskoro roditi korisnika, što mu može omogućiti da brzo napusti vaše web mjesto. Pogledajte vektorski oblik koji sam dodao vezama za usluge u gornjem desnom kutu natpisa. Stil je jednostavan, ali popunjava prazninu izbjegavajući prizemni izgled.
Odaberite sliku koja odgovara poslu. Na webu je dostupno milijune slika sa zalihama i neće potrajati previše vremena kako bi se pronašla slika koja odgovara vašem zahtjevu.
U mom slučaju pronašla sam visokokvalitetnu sliku za koju mislim da će se dobro slagati s mojom web stranicom. Nemam poslovnu temu za web mjesto, tako da sam slobodan odabrati bilo koju sliku koja će izgledati dobro na postu s natpisom.
Pokušajte preuzeti neke HD slike s web lokacija s besplatnim slikama danim u nastavku
www.pixabay.com
Miješanje je umjetnost koju biste trebali savladati u proizvodnji prelijepih banera. Ovdje sam miješao tri sloja kako bih postigao efekt prikazan na gornjoj slici. Evo što sam učinio
- Postavite sloj slike na vrh natpisa plave boje
- Postavite prekrivač Gradient iznad slike
- Promijenite neprozirnost slike na 40 posto i promijenite način miješanja na razliku.
- Pogledajte paletu slojeva na gornjoj slici da biste shvatili kako se slojevi međusobno slože.
Ovako će izgledati Header & Banner dok smo upravo na njemu radili. Radimo na jednom dijelu odjednom i vrijeme je da prijeđemo na sljedeću razinu.
Usklađivanje od presudnog značaja kada je u pitanju tip; imati predodžbu o tome kako bi trebala izgledati vaša web lokacija i treba li tekst uskladiti prije nego što ga pokrenete. Na ovoj razini koristio sam dva različita okvira teksta, oba poravnana s lijeve strane.
Sljedeći je korak dizajn dijela usluge web stranice. Dizajnirao sam metalnu zvijezdu u sivim nijansama kako bih prikazao različite usluge tvrtke. Namjera korištenja simbola zvjezdice je usluga 5 zvjezdica.
Kada je u pitanju poravnavanje teksta Vodiči su vam najbolji prijatelji. Koherencija unutar vrste i predmeta može se postići ako se dobro iskoristi bijeli prostor i jednake praznine između elemenata dizajna. Upotrijebio sam mnoge smjernice za izgled web mjesta da vidim kako svi objekti u kadru trebaju održavati odgovarajuće praznine i udaljenosti koji stvaraju priličnu količinu bijelog prostora.
Sljedeći korak našeg dizajna je stvaranje polja Obrazac. U ovom slučaju radim suprotno metodi koju smo koristili u dizajniranju transparenta. Postavit ćemo sloj slike ispod sloja obojene boje i nanositi gradijentni sloj na dva sloja kako bismo postigli bolji izgled. Igranje s načinima miješanja je uvijek neophodno pri postavljanju većih slika.
Izbor slika za ovu stranicu nema određenu temu vezanu za nju. Mislim da će ova slika pomoći web mjestu da izgleda bolje.
Postavite sliku ispod sloja obojenog pozadine. Da biste fiksirali sliku točno na veličinu obojenog sloja, koristite mogućnosti maskiranja slojeva.
Pogledajte paletu slojeva na gornjoj slici. Čvrsti sloj plave boje nalazi se na vrhu slike, način miješanja pretvara se u sloj, a neprozirnost se smanjuje na 65 posto.
Koristila sam kartu gradijenta na dva sloja. Način miješanja mijenja se u nijansu, a neprozirnost ostaje ista.
Okvir za obrazac je spreman, što nas dovodi do četvrte razine u dizajnu naše web stranice.
Naša sljedeća razina sastoji se od dva jednostavna okvira teksta. Podsjeća na razinu dva na web stranici, a upotrijebio sam dvije okvire slične vrhu. Održavanje koherentnosti u usklađivanju dobar je način korištenja bijelog prostora.
Kako smo stigli do završnog dijela stranice, vrijeme je da još jednom pogledamo dimenzije podnožja. Dizajner mora planirati visinu podnožja na temelju veza koje bi tamo trebao koristiti. U ovom slučaju dao sam visini od 170 piksela svom podnožju. Širina ostaje ista kao i web stranica.
Stavite veze i slike po vašem zahtjevu.
Ovim smo zaključili dio dizajniranja naše web stranice. Kombinacije boja koje smo koristili su minimalne, iskoristili smo puno bijelog prostora u svom dizajnu i dodali jednostavan tekst sa minimalnim fontom. Namjera je dizajnirati čistu web stranicu, za koju se nadamo da je ispunjena.
Molimo pogledajte još jedanput dizajn čitave stranice u nastavku
