Web dizajn za početnike, ovaj vodič će vas pripremiti da se uhvatite u koštac sa svojim prvim projektom kao početnik.
Web dizajn je ključna komponenta procesa web razvoja. Ako ste zainteresovani za web dizajn, pretpostavljamo da imate kreativni trag. I kako ne biste bili uzbuđeni što ćete uskočiti i napraviti svoju prvu web stranicu? Web dizajn je stvaranje funkcionalnog umjetničkog djela – ali odakle početi? Ako se pitate šta trebate znati prije nego što počnete, ovaj vodič će vam pomoći.
Odaberite nešto osnovno za svoj prvi dizajn web stranice
Ovo izgleda kao da nema smisla, zar ne? Ali ponekad možemo postati preambiciozni i na kraju se obeshrabriti. Za svoj prvi projekat, dobra je ideja odabrati nešto jednostavno i zabavno. Stranica za e-trgovinu je složenija i bilo bi bolje da se pozabavite kada budete imali više iskustva.
Blog je odlično mjesto za početak. Biće to dobra vežba dizajna i naučićete kako funkcioniše sistem za upravljanje sadržajem (CMS), što će biti važno znati za buduće dizajne sajtova. Najbolje od svega — ne morate početi od nule. Postoji mnogo šablona za blog koji olakšavaju njihovo sastavljanje.
Šabloni su vrijedan alat za učenje. Gledanje kako se HTML, CSS i Javascript elementi stiliziraju i spajaju dat će vam dublji uvid u ono što dizajn čini funkcioniranjem. Možete koristiti šablone kao osnovu za izmjene i prilagođavanja.
Možda ne želite da pokrenete blog – pokušajte da se povučete iz svojih kreativnih aktivnosti ili hobija. Kako bi bilo da napravite izlog za svoje fotografske vještine ili za svoju kolekciju kratkih priča? Kreiranje dizajna koji prikazuje vašu strast čini prvi ugodan projekat.
Pronađite inspiraciju kod drugih dizajnera
Bez sumnje ste naišli na web stranice koje su vas oduševile svojim zadivljujućim dizajnom.
Kreirajte dokument za inspiraciju s vezama do web lokacija koje volite ili ih označite dok idete. Pinterest je odlično mjesto za pronalaženje sjajnog dizajna web-mjesta — možete pronaći i zakačiti ilustracije, korice knjiga, postere, blogove i druge tipove dizajnerskih radova na koje se pozivate. Dizajneri koriste termin “mood board” za ove kolekcije. Mood boards su brzi referentni resurs ako se nađete zaglavljeni. Što ćeš.
Osim otkrića do kojih sami dođete, postoje neke odabrane kolekcije koje biste trebali pogledati.
- Awwwards uvijek ima nove i svježe radove i razne tematske kolekcije
- Behance je fantastična kompilacija dizajna web stranica, gdje je fokus na kvaliteti i kreativnosti
- Dribbble se fokusira na individualne dizajnere, pružajući forum za dobivanje povratnih informacija i komunikaciju s drugima o njihovom radu
I naravno, idite na izlog Webflow da vidite različite načine na koje ljudi koriste našu platformu za dizajn. Ima toliko kul stvari koje možete provjeriti i toliko šablona dostupnih za kloniranje kao vlastitih.
Izvore inspiracije potražite izvan web stranice
Web dizajn je informiran vizualnim jezikom koji se može pronaći bilo gdje, poput naslovnice grafičkog romana ili digitalnog kioska u vašoj banci. Razvijte oko za prepoznavanje dobrog dizajna i počnite analizirati zašto nešto radi ili ne radi, bez obzira na medij.
Obratite pažnju na tipografiju
Često čitamo a da nismo ni svjesni pisama. Obratite pažnju na efekat koji tip ima dok konzumirate sadržaj. Da li je taj font na meniju čitljiv? Zbog čega taj rukom ispisan znak za lokalno poslovanje tako dobro funkcionira? Pisma su posvuda. Zabilježite i dobru i lošu upotrebu tipografije.
Typewolf je odličan resurs za praćenje popularnih fontova. Ima mnogo lista za istraživanje, istaknutu stranicu dana i lookbookove koji imaju spektakularne kombinacije fontova. Korisno je vidjeti stvarne primjere tipografije koja se koristi, a web stranice kao što je Typewolf su odlično mjesto za vidjeti njihove praktične primjene. Upoznavanje s različitim fontovima pomoći će vam da odaberete pravu vrstu za vaš prvi dizajn web stranice.
Istražite različite tipove dizajna
Postoji toliko mnogo disciplina dizajna koje treba upoznati. Poznavanje dizajna proizvoda, ilustracije, pa čak i brendiranja može dodatno razviti vaša kreativna osjetila.
Za inspiraciju koja nadilazi web dizajn, Abduzeedo nudi briljantne primjere. Bilo da se radi o posterima, prtljagu ili namještaju, vidjet ćete fantastične primjere dizajna urađenog kako treba. Budite otvoreni za različite tipove dizajna i aktivno tražite inspiraciju . Što više znanja imate, lakše ćete dizajnirati svoju prvu web stranicu . Obrazovanje informiše intuiciju.
Pripremite sadržaj prije nego što počnete
Stavljanje sadržaja na prvo mjesto znači imati sadržaj spreman za rad prije nego počnete dizajnirati svoju prvu web stranicu.
Ne mora biti savršeno. Uvijek možete kasnije urediti i optimizirati za Google SEO (optimizacija za pretraživače). Ali imati barem grubi nacrt onoga što će biti objavljeno pomoći će da dizajn bude postavljen tako da ga prilagodi. Dizajniranje sa stvarnim sadržajem daje vam bolju predstavu o tome kako će web stranica izgledati i funkcionirati. Takođe vam daje priliku da unesete promjene ranije u procesu dizajna.
Za blogove, moraćete da imate post spreman za testiranje u CMS-u. Ako imate nekoliko postova napisanih prije pokretanja, uštedjet ćete napor da napišete nešto nakon toga.
Neka vaš dizajn bude jednostavan i unikatan
Bilo da se radi o pisanju, navigaciji ili pozivima na akciju, niko ne želi da se bori sa vašim dizajnom.
Vaš pristup dizajnu trebao bi biti ukorijenjen u jednostavnosti i redu. Logika bi nekoga trebala voditi kroz stranicu s lakoćom. A budući da govorimo o onim ljudima koji će komunicirati s onim što ste kreirali, ovo je dobro mjesto za uvođenje UX-a.
Razumjeti osnove korisničkog iskustva (UX).
Web stranica je više od samo plutajućeg teksta u prostoru. Šema boja, sadržaj, tipografija, izgled i slike se spajaju da služe vašoj publici i izazivaju emocije. Neko ko luta kroz digitalni prostor koji ste kreirali trebao bi imati jasan put bez prepreka.
UX se fokusira na razumijevanje vaše publike. Šta traže — i kako će vaš dizajn olakšati pronalaženje? UX se odnosi na ulazak u glave vaše publike i gledanje vašeg dizajna kroz njihove oči.
Kada pravite svoju prvu web stranicu, imajte na umu ove vodeći UX principe:
- Učinite stvari jednostavnim i intuitivnim
- Komunicirajte koncepte u logičkom nizu
- Zadovoljite potrebe svoje publike i oduprite se iskušenju da pokažete svoje vještine na račun upotrebljivosti
Učenje o svojoj publici pomoći će vam da napravite dizajn koji je prilagođen njihovim željama i potrebama. Pogledajte naš vodič za početnike za istraživanje korisnika za više uvida o tome kako to učiniti.
Razumjeti osnove korisničkog interfejsa (UI).
Ako ste novi u web dizajnu, možda ćete biti zbunjeni razlikom između korisničkog sučelja i UX-a . Većina nas je bila. Znajte ovo – to su dva različita koncepta.
Kada se UX bavi cjelokupnim osjećajem dizajna, UI se odnosi na specifičnosti. Da ste u liftu, korisnički interfejs bi bio veličina i raspored dugmadi na podu, dok bi UX obuhvatao boje, teksture i druge izbore dizajna enterijera prostora lifta. UI je da nekome date alate koji su im potrebni da iskuse vašu web stranicu bez komplikacija.
Kada pravite svoju prvu web stranicu, imajte na umu ove principe korisničkog sučelja:
- Funkcionalnost interaktivnih elemenata treba da bude očigledna
- Uniformitet mora voditi upotrebljivost – radnje treba da prate logičke obrasce
- Izbor dizajna bi trebao biti napravljen s jasnom svrhom
Koristite principe dizajna da vodite svoj početni proces web dizajna
Layout
Ako želite dizajnirati i praviti web stranice, razumijevanje dobrog izgleda je ključno. Predlažemo da stvari budu minimalne i da radite sa samo nekoliko elemenata kako biste se fokusirali na savršen položaj.
Kada prvi put počnete dizajnirati, razmislite o mrežama. Mreže poravnavaju elemente, poput div blokova i slika na web stranici, na način koji stvara red.
Struktura izgleda treba da prati vizuelnu hijerarhiju. Koje su važne ideje koje želite da ljudi vide i kojim redoslijedom? Vizuelna hijerarhija treba da se pridržava uobičajenih obrazaca koji ljudi koriste kada čitaju. Postoje dva puta kojima oči ljudi uglavnom prate na webu: F-obrazac i Z-obrazac. Poznavanje načina na koji ovi obrasci funkcioniraju pomoći će vam da organizirate vlastiti sadržaj.
F-obrazac je češći za dizajne sa gustim blokovima sadržaja. Oči ljudi će skenirati lijevu stranu rasporeda sve dok im stvari ne privuku pažnju, a zatim čitaju s lijeva na desno. Zamislite da pregledavate meni u restoranu – možete preskočiti podebljane nazive jela poredanih na lijevoj strani dok ne dođete do nečega što vas zgrabi, što će vas potaknuti da pročitate prateće detalje koji objašnjavaju to konkretno jelo.
Z-obrazac je povezan sa dizajnom koji je manje težak za tekst. Mnoge odredišne stranice odgovaraju ovom obrascu. Ako ste početnik u web dizajneru, ovo je jednostavan trik za izgled koji pomaže upotrebljivosti.
Boja
Evo nekoliko jednostavnih pristupa u odabiru sheme boja za vašu prvu web stranicu.
Monochrome
Koristite jednu boju kao osnovu, mijenjajte količinu zasićenja, uključite svjetla i tama i igrajte se raznim nijansama za ujednačenu shemu boja. Bez obzira na vašu nišu, jednobojna stranica je pametan izbor dizajna. I zapamtite, koju god boju da odaberete za tekst, vodite računa o čitljivosti .
Ne morate biti fensi u vašim početničkim dizajnom, ali je lijepo vidjeti njihovu upotrebu različitih monokromatskih varijacija boja. Primjetite kako je svaki dio napravljen od boja koje se odnose na istaknute torbe? Ovo je lijep dizajnerski trik koji stvara skladnu shemu boja.
Komplementarno
Uzmite boje koje su suprotne na kotaču boja i kombinirajte ih. Dovoljno lako, zar ne?
Pažljivo koristite komplementarne boje. U ovom dizajnu ispod sa Ignisis web stranice, dizajner je koristio plavu i narančastu u različitim kombinacijama zajedno sa razmakom i sivim za izgled koji nikad ne umara oči. Kontrast je oštar i osvježavajući.
Tipografija
“Tipografija je dvodimenzionalna arhitektura, zasnovana na iskustvu i mašti, a vođena je pravilima i čitljivošću.“
Dakle, koja su pravila koja vi, početnici dizajner, trebate znati?
Tipografija daje ton
Zamislite pozivnicu za vjenčanje ili najavu sahrane. Oboje su duboki životni događaji – jedan je radosna proslava, a drugi obično mračniji. Tamo gdje kitnjasto cvjetno pismo dobro funkcionira za vjenčanje, nije dobro za sahranu.
Kada dizajnirate svoju prvu web stranicu, imajte na umu ton. Ako želite laganu atmosferu, poput bloga o hrani, tkanje razigranih fontova ima smisla. Ali ako pravite web stranicu za advokatsku firmu, držite se profesionalnijih slova.
Serifi u odnosu na neserife
Česta greška novih dizajnera je mešanje serifnih i neserifnih fontova. Možete ih razlikovati jer krajevi serifnih slova imaju dodatnu liniju ili crtu dodanu okomito ili vodoravno.
Provjerite razlike između PT Serif i PT Sans (bez serifa).
Evo PT Serif:
A evo i PT Sansa:
Počnite dizajnirati
Tutorijali i istraživanja su od neprocjenjive važnosti za vaše učenje, ali ćete na kraju morati samo da se zadubite u dizajn. Čak i ako stvorite nešto što niko nikada neće vidjeti, to je i dalje vježba rješavanje problema i primjena onoga što ste naučili. Ne brinite ako nije nevjerovatno. Ali budite ponosni što ste prešli taj prag od ambicioznog dizajnera do toga da zaista budete – na putu ste!