Kako stvoriti dizajn web stranice?

Svaki vlasnik web stranice sanja o jedinstvenom dizajnu svog resursa. Svi znaju da osobu pozdravlja odjeća. Isto vrijedi i za web mjesto, budući da posjetitelj prvo obraća pozornost na dizajn projekta, a zatim i na sadržaj. Ako je dizajn previše svijetao ili, naprotiv, dosadan, korisnik će uskoro napustiti resurs. Nemojte pretrpati web stranicu nepotrebnim elementima jer često web resursi minimalističkog dizajna izgledaju mnogo zanimljivije. Kako stvoriti dizajn web stranice?

Zapravo, cijeli se proces dizajna može podijeliti u tri faze: stvaranje skice, stvaranje izgleda u grafičkom uređivaču, izgled dizajna. Skica dizajna može se nacrtati u jednostavnom uređivaču fotografija ili običnom olovkom na komadu papira. Što se tiče izgleda, većina dizajnera koristi Photoshop kao najmoćniji grafički uređivač koji postoji. Za dizajn izgleda trebat će vam znanje jezika za označavanje hiperteksta i CSS -a. Prije nego što kreirate vlastiti dizajn, zapitajte se nekoliko jednostavnih pitanja: Poznajem li HTML i CSS te mogu li raditi i s grafičkim uređivačem?

Ako odgovorite ne, tada se proces projektiranja neće pomaknuti dalje od prve faze. Nacrtati skicu nije teško, ali ne može svaki korisnik izraditi izgled i izraditi gotov dizajn. Zbog toga se preporučuje da prvo naučite osnove HTML -a | CSS -a, kao i pogledate nekoliko video zapisa o Photoshopu kako biste znali gdje se svaki alat nalazi, kako primijeniti filtre i još mnogo toga.

Prije nego što počnete skicirati, u glavi stvorite sliku budućeg dizajna. Imajte na umu da se svaki dizajn sastoji od sljedećih dijelova:

  • "Zaglavlje" web stranice - gornji dio bilo kojeg dizajna, koji obično uključuje logotip, naziv web stranice i nekoliko gumba (kontakti, o autoru). Zaglavlje može biti različite visine, ali obično ovaj parametar ne prelazi 300 piksela. Obrasci za pretraživanje i banner oglasi često se nalaze pri vrhu stranice.

  • "Bočna traka" - bočni izbornik web stranice. Bočna traka sadrži sekundarne informacije i dodatne elemente: blok sa svježim člancima, obrazac za pretraživanje, razne ankete i kalendare, veze, oglase i elemente navigacije resursima. U dizajnu web mjesta može se koristiti nekoliko bočnih traka, ali postoje dizajni bez bočnih traka.
  • "Podrum" - donji dio nalazišta. Obično sadrži vezu na glavni resurs i autorska prava u stilu "(c) 2014. Najbolje mjesto." No posljednjih se godina koncept dizajna podruma promijenio pojavom mobilnih uređaja. U "podrumu" su se počeli taložiti elementi koji se obično postavljaju na bočne trake.

  • "Glavni dio" - blok u kojem se nalazi glavni sadržaj. Većina dizajnera postavlja glavni dio web mjesta u središte radi lakšeg čitanja materijala.

Dakle, sada znate od kojih se blokova stranica sastoji. Vrijeme je da počnete rješavati pitanje kako sami izraditi dizajn web stranice. Otvorite najjednostavniji uređivač fotografija (Paint je dovoljan) i izradite novi predložak rezolucije 1280x1024. Vrijedno je odmah podsjetiti da se prilikom izrade web mjesta ne koriste metrička mjerenja. Svi se blokovi "mjere" u pikselima.

Na primjer, odlučili ste skicirati s jednom bočnom trakom. Označite granice podnožja, zaglavlja web stranice i bočne trake u grafičkom uređivaču.

Imate li ideju napraviti neke bočne stupce i postaviti sadržaj u središte? Odlično, ali uzmite u obzir širinu bočnih traka i prostor za glavni sadržaj prilikom označavanja. Bočni stupci ne smiju biti preširoki (ne više od 300 piksela), a ispod glavnog sadržaja treba ostaviti najmanje 500 piksela, jer će u protivnom tekst biti nezgodan za čitanje.

Sada kada su glavne oznake raširene, vrijeme je da dodate neke elemente u skicu dizajna. Dodajte autorska prava u podnožje, okvir za pretraživanje, naslov itd. Skica dizajna postat će zanimljivija i neće biti zbirka geometrijskih oblika.

Ako ste naučili raditi u Photoshopu, vrijeme je da skicu pretvorite u izgled. No prije toga odlučite o bojama stranice. Za web stranice s vijestima prikladnije su bijele boje pozadine, crne boje teksta i plave veze. Ako je dizajn kreiran za žensko ili turističko mjesto, upotrijebite svjetlije boje. Istodobno, ne biste trebali napraviti božićno drvce od dizajna, jer obilje cvijeća ometa percepciju glavnog sadržaja.

Svaki blok izgleda počnite popunjavati grafikom. Eksperimentirajte s bojama i pozadinama, stvorite vlastite elemente i gumbe. Međutim, na Internetu postoji ogroman broj različitih pozadina, gumba za stvaranje dizajna.

Kad je izgled konačno spreman, izrežite ga na blokove i od njega napravite dizajn. Istodobno, potpišite svaki sloj radi lakšeg pisanja.

Pojavom mobilnih uređaja povećala se popularnost responzivnih "gumenih" dizajna. Svaki korisnik može stvoriti temu za svoju web lokaciju, ali samo pravi dizajner može je prilagoditi za sve uređaje. Na početku svoje dizajnerske karijere pokušajte započeti s jednostavnim predloškom.

Zapamtite tri jednostavna pravila "izvrsnog dizajna":

  • tekst mora biti dobro čitljiv čak i sa onemogućenim slikama u pregledniku;
  • pokušajte ne koristiti boje "labavih očiju";
  • Izradite navigaciju web mjestom prilagođenu korisniku.

Nakon što ste izradili dizajn i prenijeli ga na web mjesto, svakako ga isprobajte u različitim preglednicima. Uključite prijatelje i poznanike u testiranje, jer tuđa kritika pozitivno utječe na osobu. Zapamtite osnovno pravilo: dizajn web stranice trebao bi se svidjeti ne samo vama, već i drugim korisnicima. Stoga uvijek slušajte mišljenja posjetitelja vašeg projekta.

.