9 Bitnih savjeta za web dizajn za početnike sam

Osnovni principi web dizajna & najbolje prakse za pomoć početnicima bilo koje razine da vizualno dizajniraju profesionalca & glatko web mjesto koje izgledaju sami.


Savjeti za web dizajn za početnike

Ovih je dana moguće da je web dizajner svatko. Da, to je odvažna izjava – ali s povećanom pristupačnošću softvera za dizajn otvorenog koda poput širit, i s platformama za izradu web lokacija uradi kao što su Wix i Weebly preplavljuju tržište, granica između amater i bona fide web dizajner od kasnog je vremena postao mnogo tanji i maglovitiji. Zanimljivost kod kreativnosti je da nitko ne može odlučiti za vas kad ste “spremni” ispuniti određenu ulogu. Mnogo rock zvijezda nikada nije uzelo časove glazbe; mnogi uspješni umjetnici nikada nisu proučavali ljudsku anatomiju; a većina web dizajnera tamo nema formalni stupanj. Dakle, ako ste izradili web lokaciju vlastite tvrtke, možete li sa sigurnošću reći da ste “web dizajner”? To ćete utvrditi.

Moguće je da je bilo tko web dizajner s platformama za izradu web stranica koje radi sam.

Kliknite za Tweet

Ako ste sljedbenik ovog bloga, vjerojatno ste već donijeli odluku da sami napravite web stranicu. Iako se možda osjećate potpuno preplavljeni nevjerojatnom količinom informacija koje postoje o učenju o web razvoju, možete biti sigurni znajući da vlasnici tvrtki s čak vrlo malo dizajnerskog iskustva zaista mogu stvoriti web stranice koje izgledaju profesionalno. Sve započinje slijeđenjem nekoliko osnova koje, ako se pravilno primijene, mogu prijeći kilometre prema vjerodostojnosti dizajna i korisničkog iskustva vaše web lokacije..

Što je ovaj vodič (a što nije)

Da budemo jasni, ovdje govorimo o osnovama web dizajna – i nećemo se baviti naprednijim temama kao što su mrežni sustavi, JavaScript ili CSS. Ovaj vodič također pretpostavlja da upotrebljavate neku vrstu alata za crtanje i ispuštanje web mjesta kako biste mogli dizajnirati web mjesto bez kodiranja. Bez obzira koristite li postojeći predložak svog graditelja web mjesta ili započinjete ispočetka (ambicioznija opcija za početnike), ovaj će vam vodič pomoći u vezi s osnovnim načelima i praksama web dizajna koje biste trebali primijeniti na svojoj web stranici. Jedan članak o web dizajnu neće vas odmah pretvoriti u stručnjaka, pa smatrajte ovo svojim prvim korakom u širi svijet.

BRZI SAVJET: Temeljno znanje HTML-a i CSS-a bit će velike koristi za svakog novog dizajnera. Ako zaista želite svoje ruke kodirati, predlažem da provjerite W3Schools da saznate više o zakladi.

Osnove web dizajna za početnike

Spustimo se na to, zar ne? Evo nekoliko najkorisnijih trendova i smjernica koje morate znati prilikom izrade prve web stranice:

1. Otkloni miša, podigni olovku

Vaša web stranica možda već postoji kao lijep, cjelovit entitet u vašem umu – i zato odmah uskočite u Photoshop (ili još gore, preglednik i HTML) da biste to planirali. Whoa, whoa – ohladite mlaznice na sekundu! Ne stavljaj kolica prije konja. Prvo izvadite olovku i jastučić od papira i počnite uvoditi svoje ideje u nešto lako opipljivo. Ovo je važna faza za mapiranje strukture vaše web stranice koristeći samo pravokutnike, crteže i nadahnute ideje (često nazvane wireframing). Stvari u ovom trenutku mogu biti super grube; to neće vidjeti niko osim vas.

Primjer mrežnog okvira web mjestaŽični okvir web mjesta pomaže vam da razvijete izgled i strukturu svoje web stranice, poboljšavajući korisničko iskustvo (UX) i štedite vrijeme.

U ovoj je fazi daleko lakše mijenjati nacrte za koje ste prvotno mislili da će funkcionirati, ali sada otkrijte da su na papiru zbrkani i zbunjujući. To će vam uštedjeti mnogo sati frustracije za razliku od otkrivanja istog otkrića kad se web mjesto kodira i u pregledniku. Uz to, značajno pomaže izgraditi web stranicu kad imate preporuku za savjetovanje, a ne slijepo.

2. Slijedite hijerarhiju

Činjenica je da većina web surfera skine samo skeniranje web stranica, a ne da im treba vremena da zapravo sve pročitaju. Na to trebate biti spremni stavljajući najvažniji sadržaj na prvo mjesto. To znači da bi korisnik trebao biti u mogućnosti probaviti najvažnije informacije na stranici sve na jednom zaslonu pri početnom učitavanju, bez potrebe za zumiranjem ili pomicanjem. To je, naravno, mnogo lakše reći nego učiniti. Evo nekoliko savjeta koji će vam pomoći da bolje shvatite značaj ove teorije dizajna:

Zadržite sadržaj “Iznad nabora”

Taj početni zaslon učitanog sadržaja nazivamo “preklopom”, a sve ispod njega koje se mora pomicati da bi se vidjelo smatra se sekundarnim. Općenito, vaše najvažnije informacije nalaze se “iznad preklopa”. Glavno što treba postići u ovom području je navesti korisnika da poduzme mjere ili stvoriti poticaj za pomicanje prema dolje.

Korištenjem slike “Hero”

Danas je uobičajeni trend web dizajna ispuniti ovo područje iznad preklopa onim što se naziva “herojem” slikom ili natpisom. To su pozadinske slike preko cijelog zaslona s vrlo jezgrenim i tačnim preklapanim tekstom, obično uparenim s gumbom za poziv na radnju. Vjerojatno bi se cijela svrha web stranice mogla nalaziti unutar tog područja banera, ali ona također služi i kao sjajan temeljni sadržaj za sadržaj koji slijedi.

Primjer slike heroja / banera

“Preklop” se može mijenjati ovisno o uređaju

Evo gdje stvari postaju komplicirane – i zašto se ne biste preopterećivali pokušavajući uklopiti sve iznad ove čarobne crte. Ovisno o korisnikovom uređaju, dimenzije zaslona mogu se nevjerojatno razlikovati. 5K zaslon koji pada s čeljusti ima vertikalnu rezoluciju od 2880 piksela, dok iPhone 5 ima manje od polovice. To znači da korisnici mobilnih uređaja jednostavno neće moći uklopiti što više sadržaja u svoje zaslonske nekretnine. (Više o tome kasnije.)

BRZI SAVJET: Opće je pravilo da se osigura da se sadržaj iznad preklopa uklapa u najniži zajednički nazivnik dimenzija zaslona. To se obično prihvaća kao 768 piksela okomite rezolucije.

3. Tipografija je vaš dizajn

Ako ne vodite fotografski posao, tekst je najvažniji element bilo koje web stranice, tako da je važno da ovaj dio učinite kako treba. Hijerarhija vaše web stranice uvelike ovisi o odabranoj tipografiji: kako vam zaglavlja, podnaslovi i tekst tijela slijede prirodni tijek i ostaju vizualno različiti jedan od drugog. Za sveobuhvatan pregled tipografije, pogledajte naš vodič najboljih praksi. Evo nekoliko važnih postupaka:

  • Provjerite je li tekst čitak (izbjegavajte cvjetne fontove!) i dovoljno velik (obično oko 16 px za tijelo).
  • Držite se svega dva slova– i pobrinite se da se dobro druže!
  • Dajte svojim paragrafima malo prostora da dišu jedni drugima i dovoljno ih je postavljeno gornja obloga ili margina na svojim naslovima označavaju jasne prijelome u sadržaju.
  • Izbjegavajte duge redove teksta. Na očima je lakše da redovi stavaka budu otprilike više 15 riječi dugačko– i nešto manje nego za mobilne zaslone.
  • crtica fontovi su obično najbolji samo u ispisu – osim ako se ne koriste u velikim naslovima na webu.

4. Boje & Kontrast je presudan

Dugo smo govorili o psihologiji boja, ali koncept se ponavlja. Boje koje odaberete za svoju web stranicu igraju ogromnu ulogu u načinu na koji korisnici percipiraju vašu marku, kao i kako motivirani mogu osjećati radnju (tj. Kupnju stvari) putem vaše web stranice. Zašto? Pa, svaka boja izaziva određene osjećaje, bilo zbog svoje prirođene prirode, bilo zbog kulturnih uvjeta, ove su boje postale povezane s određenim vrstama poslovanja. Ako bi dječja tvrtka za igračke ili financijski savjetnik obojila cijelu web stranicu u crno crnu boju, apsolutno bi poslali pogrešne signale njihovoj predviđenoj publici. S druge strane, svijetla narančasta ili ugodna plava boja privlačila bi savršen ton i svjesnost svojih kupaca.

Primjer boja za web dizajnPlava je boja koja evocira povjerenje i popularan izbor za web stranice povezane s financijama.

Ako ste već uspostavili boje vašeg branda, upotrijebite ih na svojoj web lokaciji. Najbolje je, međutim, to nastaviti ne više od tri boje za vašu web lokaciju; poput fontova, ovdje ne želite pretjerivati ​​ili bi na vašoj web lokaciji moglo doći do poremećaja višestruke ličnosti. Pazite i na previše prskanja boje na vašoj web stranici; naše oči privlače ih poput zamki meda i one bi mogle prekinuti prirodni tijek vašeg sadržaja. Koristite boju samo kad je najpotrebnija, primjerice, za veze ili gumbe.

Na temu kontrast, od presudne je važnosti da se vaš tekst ističe iz pozadine. Korištenje svijetlih nijansi sive, žute ili zelene boje za vaše fontove gotovo će ih učiniti nevidljivima na stranici. Crno na bijeloj pozadini najveća je kombinacija kontrasta i općenito je ono čega se trebate držati.

BRZI SAVJET: Najbolje je izbjegavati puna zasićenost s bojama na webu. Čista crvena (hex vrijednost # ff0000) malo je previše bolna na očima. Slično tome, čista crna (# 000000) za fontove previše vibrira za oči, dok malo smanjena crna (# 333333) olakšava čitanje.

Također želite da se vaš tekst pokaže na pozadinskim slikama. Upotreba vrlo zauzetih fotografija može odvratiti tekst, tako da izbjegnete ovaj problem ili upotrijebite manje detaljne fotografije ili upotrijebite sloj od, recimo, rgba (51,51,51,0.5) kako bi se olakšala slika ispod teksta..

primjer prekrivanja slikeUpotrijebite sloj iza teksta kako biste mu pomogli da iskoči iz pozadine.

Kontrast također igra ulogu u tome kako su korisnici privučeni određenim ključnim elementima vaše web lokacije. Vaši najvažniji gumbi za pozivanje na akciju moraju privući oko koristeći kontrastne boje. Plavi “Kupi odmah!” gumb gubi na žurnosti i vrijedi kada ga proguta web mjesto koje svugdje koristi plavu boju, ali crveni gumb na istoj stranici privlači pažnju korisnika vičući “Hej! Klikni me! “

6. Upotreba slika

Odabir pravih slika za upotrebu na vašoj web stranici djelomično se svodi na vašu umjetničku sposobnost, ali postoje i intelektualna razmatranja koja bi trebala pomoći u vašem odabiru. Prvo, izbjegavajte uljepšati svoju web lokaciju stranim fotografijama samo zato što mogu izgledati lijepo. Umjesto toga, razmislite kako svaka slika koju koristite služi svojoj svrsi i još važnije kako djeluje sadržaj. Dobro odabrana fotografija može pružiti vašu marku, uslugu, proizvod ili publiku mnogo učinkovitije od riječi. Koristite fotografije kako biste korisnicima pomogli da nešto razumiju, da pozovu emocije ili da potaknu povjerenje; njihovo korištenje samo iz estetskih razloga trebalo bi biti sekundarno.

Razumijevanje vrsta datoteka & Kompresija

Dodatni je korak koji se mora poduzeti za upotrebu slika na webu. One fantastične fotografije koje dobijete s web lokacija poput Shutterstock i Istockphoto mogu biti prilično masivne (5000+ vodoravnih piksela i 10+ megabajta) što je u redu za ispis, ali nisu prikladne za web stranice. Nema svatko superbrzi Fiber Internet, tako da morate smanjiti veličinu slika kako bi se prilagodili vremenu učitavanja (a da ne spominjemo 40% posjetitelja će otići ako se web lokaciji treba duže od 3 sekunde!). Svaku svoju sliku obično želite zadržati u najviše od 500 kilobajta u veličini, mada bi vam prosječna veličina datoteke vjerojatno trebala biti oko 100 kilobajta.

  • JPEG je standardni format za fotografije. To je gubitnički format, što znači da se kvaliteta slike smanjuje kada se komprimira. Ako koristite JPEG za pozadinsku sliku pune širine, preporučujem vam da njegova vodoravna razlučivost bude na ne manje od 1200px. Općenito, izbjegavajte upotrebu bilo koje slike s manje od 600 px horizontalna razlučivost, jer će se vjerojatno pojaviti mutno na modernim ekranima.
  • PNG je preferirani izbor grafike ili slika koje zahtijevaju prozirnost. To je format bez gubitaka, koji je izvrstan za zadržavanje kvalitete slike, ali također može povećati veličinu datoteke. Upotrijebit ćete PNG grafiku za ilustracije, ikone ili manje slike koje se zbog njihove transparentnosti mogu složiti na druge elemente. Rijetko će vam trebati PNG veći od 1000 px.
  • SVG (skalabilni vektorski grafički prikaz) noviji je format koji zamjenjuje GIF pa čak i PNG u nekim slučajevima. Ljepota SVG-a je u tome što može biti velik ili maleni zaslon koliko vam treba, a sve to zadržava savršenu jasnoću i bistrinu (i dalje će biti mala veličina datoteke). Razmislite o upotrebi SVG-a za bilo koji logotip, ikonu ili vektorska grafika na vašoj web stranici; kako su visoki DPI zasloni postali uobičajena pojava, oštrina SVG će pružiti najveću kvalitetu slike.

Primjeri vrste slikovnih datoteka

6. Mobile-prvi dizajn

Sada smo došli do vremena kada većina ljudi konzumira online sadržaj putem telefona, a ne na stolnom računalu. Kao rezultat toga, daleko je veći prioritet u web dizajnu posebno prilagoditi mobilnom iskustvu, što je dovelo do filozofije dizajna “mobilni prvi”.

U osnovi to znači da je, tijekom početne faze skiciranja i planiranja na papiru, najbolje se prvo usredotočiti na mobilni izgled web lokacije. Na manjim se ekranima prikazuju samo najvažniji sadržaji potrebni za funkcioniranje vaše web stranice. To vas prisiljava na pojednostaviti tvog izgleda i od početka isjeći sve elemente koji ometaju pažnju. Osvrnite se na sadržaj iznad preklopa: ako prvo osigurate da se sve važne informacije mogu uklopiti na početni zaslon telefona, tada ćete sigurno znati da će se uklopiti na veće zaslone. Nakon što prikucate osnovni mobilni izgled, možete početi dodavati ukrase ili veće slike za radne zaslone.

Vaš mobilni izgled pretpostavlja vertikalniji dizajn koji nadahnjuje pomicanje, a ne široki krajolik radne površine. Ako, recimo, stranica vašeg proizvoda prikazuje popise u mreži od 3 na stolnim računalima, obično će ih vaš mobilni izgled prikazati kao jedan jedini stupac.

Da, to znači da u osnovi trebate stvoriti nekoliko izgleda za svaku stranicu vaše web stranice. Srećom, svaki dobar graditelj web stranica trebao bi pružiti odgovarajuće predloške koji automatski prilagođavaju ove nacrte, pa ćete ih tada morati samo precizno prilagoditi..

BRZI SAVJET: Provjerite nije li niti jedan element na vašoj web lokaciji, pogotovo ako je interaktivan, manji od 44px od 44px u veličini. Zašto? Ovo je najmanja meta koja može biti tamo gdje prst još uvijek može precizno dodirnuti.

7. Neka stvari budu poravnane

Kada se čini da se elementi sporadično postavljaju na vašu web lokaciju, to se često događa zbog problema s usklađivanjem. Zamislite svoju web stranicu na listu grafičkog papira. Odvojite ga u jednake stupce crtajući, na primjer, šest ravnih linija. Sada želite osigurati da su lijevi rubovi vaših elemenata raspoređeni i poravnati samo ovih šest okomitih linija.

8. Neka bude jednostavno

Često se kaže da najbolji web dizajn prolazi nezapaženo; samo je loš dizajn koji privlači pažnju na sebe. Kao što je spomenuto ranije, najvažniji aspekt bilo koje web stranice je jednostavno njezin tekst. Ako možete pružiti izvanrednu tipografiju koju je rado čitati, velike su šanse da nećete morati raditi mnogo više. Pokušaj preoblikovanja vaše web stranice stvari će samo zakrpiti i komplicirati.

Jesu li potrebne sjene okvira? Ludi, ukrašeni uzorci? Deseci boja? Vjerojatno ne.

9. Veliki otvoreni prostori

Vašem sadržaju treba prostor za disanje. bijeli prostor je preovlađujući izbor dizajna za moderne web stranice: široki, otvoreni prostori ništavila do područja među sadržajima. To je ugodniji način za probavljanje informacija, a također vas potiče da uklonite suvišni tekst i slike da bi web mjesto bilo čisto.

Zaključak

Web dizajn može biti široko polje tehnologije za učenje, koncepata za vježbanje, jezika za proučavanje i umjetnosti za savladavanje. Tek će s iskustvom sve ove komponente početi imati smisla, ali već ste na dobrom putu shvaćajući osnove onoga što čini dobro djelovanje web stranice. Nadam se da će vam ovaj vodič poslužiti kao mjesto pokretanja i da će vam dati samopouzdanje da uzmete svoju web stranicu u svoje ruke i izgradite je onako kako samo vlasnik tvrtke najbolje zna.

Rođen je dizajner!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map