10 koncepata dizajna koje svaki web programer mora znati

Posljednjih nekoliko godina predavao sam radionicu o osnovama vizualnog dizajna namijenjenu programerima. Kao i kod većine stvari na webu, i kod učenika koji su išli na moju radionicu, kao i kod programera s kojima sam radio, pronašao sam raznoliku razinu dizajnerskog znanja i interesa.

Ovaj je popis namijenjen užem izboru koncepata koje bih volio da programeri s kojima radim razumiju o dizajnu. Namijenjen je usmjeravanju programera u pravom smjeru kao uvod u razmišljanje i komunikaciju o dizajnu.



01. Dizajn nije samo vizualni

Dizajn nije samo fasada; to je osobnost ispod. Iz nekog razloga dizajn ima stigmu kao samo vizualni dio web stranice. Ovo ne može biti lažnije ili pogrešnije shvaćeno. Dizajn je cjelokupno iskustvo od trenutka kada korisnici uđu na vaše web mjesto pa sve do nakon odlaska.



kako okrenuti fotografiju na

Dizajn je 'kako' i 'zašto' ljudi žele koristiti stranicu; brzina kojom se stranica učitava; interakcija između zadržavanja pokazivača miša, klika i dodira; i tempom kojim pružate nove značajke i sadržaj. Svi ovi koncepti obuhvaćaju dizajn.

Budući da je dizajn više od vizualnih aspekata i utječe na cjelokupno iskustvo, svaka osoba na projektu je dizajner. Bilo koji član tima koji želi otkriti kako korisnik komunicira sa stranicom dizajner je. Interfend, pozadina i upravljanje projektima trebali bi razmišljati o dizajnu.



02. Budite usmjereni na korisnika

Korisnici su najvažniji i uvijek bi trebali biti na čelu svake odluke o vašoj web lokaciji ili aplikaciji. Dizajn bi trebao vašim korisnicima omogućiti da svoje ciljeve postignu brzinom, učinkovitošću i, što je najvažnije, zadovoljstvom.

U svojoj radionici studente nagovaram da kreiraju početni sažetak o dizajnu nakon što odaberu projekt na kojem će raditi. Iako im dajem jednostavne smjernice koje treba slijediti, oni su uglavnom fokusirani na korisnika: tko su oni, što rade na vašoj web lokaciji i kakav je osjećaj koji želite da imaju kada posjete, kao i kada odlaze?

Iako ovo dobro uspijeva za male projekte radionice, kada je riječ o većim projektima, trebali biste razmišljati o ovom temelju u većem opsegu. Dizajneri koriste persone, pripovijedanje priča i još mnogo toga da naznače tko su korisnici web stranice i što žele raditi na web mjestu. Istražite ove smjernice u bilo kojem obliku na vašem projektu i upotrijebite ih kako biste utjecali na sve vaše odluke o dizajnu.



Dizajner ne bi trebao prihvatiti sve korisničke doživljaje; dizajneri bi to jednostavno trebali voditi. Umjesto toga, iskustvo bi trebao dijeliti cijeli tim (ako takav postoji). Postoje mnogi slučajevi u kojima sam se oslanjao na programere koji će mi pomoći da shvatim najbolji način za stvaranje najvećeg korisničkog iskustva. Ne samo da bolje znaju svoje granice, već imaju i jasniju predstavu o svim mogućnostima.

03. Dizajn je detaljan

Pojedinosti mogu 'dobar' dizajn učiniti 'sjajnim'. Pozornost na detalje u korisničkom iskustvu može biti razlika između zadovoljnog i iznerviranog korisnika. Imati odgovarajuću nijansu plave boje ili omotati vezu oko određenog teksta zaista je važno. Problem pojedinosti je u tome što ih je lako uhvatiti. Prerano fokusiranje na detalje je nepotrebno i može usporiti proces. Važno je znati kada se usredotočiti na određene detalje ili kada je korisno vizualizirati cjelokupnu, veću sliku.

04. Prilikom dizajniranja često skicirajte

Povlastice od skiciranje korisničkih iskustava jesu dobro dokumentirano . Skiciranje vam pomaže da razmišljate o sadržaju, hijerarhiji i tijeku među ostalim aspektima. Skice su jeftine, lako se izvode i vrlo brzo. Svakih trideset sekundi trebali biste moći stvoriti jednu novu ideju. Skiciranje je također jedan od najboljih načina komunikacije ideja o izgledu, korisničkom iskustvu i protoku korisnika za web mjesto.

Skice vam omogućuju brzo ponavljanje ideja i uštedu puno vremena eksperimentirajući u maketama ili kodu

Skice vam omogućuju brzo ponavljanje ideja i uštedu puno vremena eksperimentirajući u maketama ili kodu

To mi je ukorijenio moj prvi profesor na fakultetu dok sam bio student. Nije nam dopustila da se služimo računalom dok ne vidi stranice na stranicama skica. Mladi dizajneri obično štede na skicama ili ih posve izostavljaju. Još uvijek vidim kako mnogi dizajneri prerano prelaze sa skica na dizajn veće vjernosti, a da prethodno nisu istražili sva moguća rješenja.

photoshop kako promijeniti veličinu četke

Najbolji dio skiciranja je da to može učiniti bilo tko. Svi znaju crtati kutije, izmigoljene crte i strelice. Ovo su temeljni alati koji su vam potrebni da započnete s dizajniranjem - zaista je tako jednostavno. Ne tražimo neprocjenjive umjetničke radove i zasigurno vam ne treba otmjena umjetnička diploma. Samo trebate biti sposobni jasno komunicirati svoje skice i misaoni proces koji stoji iza njih.

05. Upotrijebite razmak

Čini se da je programer najteži koncept za njega: najveća korist od odgovarajuće količine praznog prostora daje korisniku odmor. Prekidi su važni za obradu informacija, pogotovo kada postoji prilična količina za obradu. Zbog toga imamo odlomke i rečenice umjesto samo jednog, dugog bloka tekućeg teksta.

Ključno je osigurati da razmaci imaju odnos s drugim objektima na stranici, uključujući i drugi razmak. Ako imate jedan stupac praznog prostora, pobrinite se da postoji još jedan stupac praznog prostora kako biste ga uravnotežili.

Za okomiti prostor samo upotrijebite razlomke veličine fonta tijela. Obično stvari pojednostavnim i koristim ljestvicu od 0,25, ali postoje nekoliko drugih ljestvica koje možete koristiti . Na primjer, ako je veličina fonta tijela 16px (1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. To omogućuje odabir veličina fonta jednostavnim pomicanjem ljestvice gore-dolje kao što sam želite veći ili manji tip.

Apple jako dobro koristi bijeli prostor kako bi istaknuo i predstavio svoje proizvode

Apple jako dobro koristi bijeli prostor kako bi istaknuo i predstavio svoje proizvode

06. Mreže nisu samo CSS okviri

Ludo, zar ne? Mreže su prvo pronašle istaknuto mjesto u dizajnu u onome što se danas naziva Međunarodni tipografski stil .

Mrežu treba koristiti za:

  • Stvorite odnose između predmeta
  • Osigurajte osnovni sustav za vizualno poravnanje
  • Pomozite u stvaranju vodoravnog i okomitog ritma
  • Pomozite u stvaranju optičke ravnoteže

Svi ovi koncepti rade zajedno kako bi vam na najbolji način omogućili stvaranje boljeg vizualnog sustava za vaše korisnike. Rešetka koju odaberete utječe na jedinstvo dizajna; odabir mreže na temelju koje je najlakše implementirati neće nužno biti najbolji izbor dizajna za vaš sadržaj i korisnike. Na kraju je to još uvijek samo alat i bit će onoliko dobar koliko je osoba kojom njime raspolaže.

Don

Nemojte misliti samo na mrežu kao CSS okvir. To je alat za dizajn koji bi se trebao koristiti sa svrhom

07. Kad sve ima naglasak, ništa nema

To je kao da razgovarate s grupom ljudi koji svi istovremeno viču na vas da radite različite stvari. Samo jedan element trebao bi imati naglasak na stranici: najvažniji. Isticanje pojedinog elementa i jasna hijerarhija pruža čitateljima protok i treba ih usmjeriti u željenom smjeru.

08. Držite mapu nadahnuća

Zadržite galeriju svih stvari koje vas vizualno nadahnjuju. To mogu biti fotografije, videozapisi, plakati, majice i web stranice; sve što može pokrenuti ideje za rješenje određenog problema s dizajnom s kojim se suočavate.

Ne samo da ovo djeluje kao referentna točka, već vas prisiljava da neprestano tražite i ocjenjujete dizajn. Jednostavan postupak odabira dijelova dizajna i spremanja u mapu prisiljava vas da koristite te mišiće analize dizajna.

Zadržite galeriju inspiracije. Od fotografija do majica, mogućnost referenciranja fotografija, dizajna ili bilo čega drugog moglo bi vam pomoći da pokrenete ideju za vlastite dizajne

Zadržite galeriju inspiracije. Od fotografija do majica, mogućnost referenciranja fotografija, dizajna ili bilo čega drugog moglo bi vam pomoći da pokrenete ideju za vlastite dizajne

09. Dizajn se bavi rješavanjem problema

Dizajnu biste trebali pristupiti kao skupu problema koji zahtijevaju rješenja. Sve na stranici mora imati razlog za prisustvo i rješavanje određenog problema za korisnika ili dizajn. Sklon sam uklanjanju značajki iz skupa značajki dok problem koji rješavam ne postane vrlo očit.

Ponekad nam je teško iznijeti probleme, a ne prijeći na rješenje. Rad unatrag stvarno pomaže u tome. Kad odlučujete da li nešto treba biti crveno, na primjer, zaustavite se i razmislite o razlozima zbog kojih ste uopće željeli da bude crveno. Zapitajte se: što pokušavam postići crvenom bojom? Kakav je bio moj proces razmišljanja? Možda ćete se vratiti tamo gdje ste započeli, ali bolje ćete razumjeti zašto i što radite.

10. Znati razgovarati i kritizirati dizajn

Siguran način da iznervirate dizajnera jest reći im da crveni blok treba biti plav, da se dio teksta premjesti ili da logotip postane veći. Mislim da ste shvatili ideju.

Najbolji način davanja konstruktivnih povratnih informacija jest skretanje pozornosti na probleme s dizajnom. Imajte dokaze koji se temelje na korisnicima, tijeku web stranice, ciljevima dizajna i vizualnim načelima koji podržavaju probleme koje vidite s dizajnom. To onda podržava vaše mišljenje o tome što bi se trebalo promijeniti i pruža snažnu osnovu za uspjeh korisnika, kao i dizajn.

wd moja putovnica vs moja putovnica ultra

Tada će, nadamo se, dizajner surađivati ​​s vama kako bi oblikovao rješenje problema. Ovo je vaša prilika da predložite rješenje; samo nemojte tražiti da logotip bude veći.

Resursi i radionica

Ako vam je ovo bilo zanimljivo, slobodno pogledajte moju dizajn za resurse za programere i dizajnirati staze za učenje . Također bih vas volio vidjeti u bilo kojem od njih internetska verzija ili na verzija licem u lice radionice.

Riječi: Kyle Fiedler

Kyle Fiedler je dizajner u thinkbot-u, pomažući u izradi Rails-a i iOS aplikacija. Dizajnirao je i razvijao se, u nekom obliku, još od dot-com buma (i propasti) i od tada se nije zaustavio.

Ovaj se članak izvorno pojavio u neto magazin izdanje 244.

Sviđa li vam se ovo? Pročitajte ovo!

Imate li sjajan savjet za dizajn? Podijelite to u komentarima!