Kodiranje za nekoder: dizajneri mogu razmišljati kao programeri

Dizajneri i programeri postojale su nepisane razlike između ljudi dok izrađujemo web stranice. Ljudi koji čine da stvari izgledaju dobro u odnosu na ljude koji to čine. Ti dani su gotovi.

Svaki dizajner mora naučiti kako razvoj funkcionira u digitalnom krajoliku. I svaki bi programer trebao razumjeti osnovne teorije dizajna. Ovdje ćemo pomoći dizajnerima da bolje razumiju jezik programera, što je suštinska vještina na današnjem tržištu. (Kao dodatni bonus, svi primjeri dizajna stvoreni su pomoću CSS okvira.)

Istražite elemente Envatoa

Korisnička sučelja i dizajn

Okosnica iza svake web stranice je niz od 1 i 0. To i nije baš uzbudljivo kada je u pitanju dizajn. Ali stvarno sučelje i povezivanje s korisnikom jest.

Svaki sitni detalj uključuje elemente dizajna s kojima bi se netko trebao baviti, od gumba do navigacijskih elemenata do obrazaca do gledanja videa ili kupnje cipela. Cilj je stvoriti nešto što izgleda lijepo, privlačno i lako za korištenje. Tu se susreću dizajn i razvoj.

Riječi koje morate znati:

• Ajax: Korištenje asinhronog JavaScript-a i XML-a stvara interaktivno iskustvo gdje se nove informacije mogu objaviti na korisničkom kraju web mjesta bez osvježavanja. Čest je primjer kontinuirano učitavanje postova dok korisnik prelistava Twitter stranicu.
• API: Davanjem specifikacija za rutine, podatke, klase objekata i varijabli i sučelje aplikacijskog programiranja omogućava se različitim web stranicama ili softveru da međusobno "razgovaraju" i rade zajedno. Zamislite to kao virtualni skup građevnih blokova.
• CSS: Kaskadne tablice stilova predstavljaju okosnicu jezika koji se koristi za oblikovanje web stranica i vizualno prikazivanje HTML elemenata.
• Media upita: CSS element koji stvara određena pravila za određene uređaje kada je u pitanju način prikazivanja vizuala. (To je čarolija koja omogućuje prikazivanje istih fotografija jednim omjerom i obrezivanjem na radnoj površini, a drugi način na mobilnom uređaju.)
• Odgovarajući web dizajn (RWD): tehnika web dizajna koja koristi fleksibilnu mrežu i slike, medije i tekst tako da se jedno web mjesto prilagođava više veličina uređaja. (Ovo je trenutno jedan od najvažnijih čimbenika web dizajna.)
• UI: korisničko sučelje je sve što korisnik vidi i s kojim komunicira u dizajnu. To može biti sve, od načina na koji koriste web mjesto i uređaj do svakog pojedinog elementa na zaslonu.
• UX: Korisničko iskustvo je ono što svaki pojedini korisnik oduzima od interakcije s web stranicom. To se izražava kao emocionalna povezanost i odnosi se na percipiranu ukupnu vrijednost.

Razmislite u pitanjima

"Svaka od ovih interakcija trebala bi se osjećati poput razgovora dvoje ljudi koji vjeruju jedni drugima i zaslužuju povjerenje jednih drugih."

Svaki dio web stranice traži od korisnika da se uključe ili nastave s drugim dijelom web mjesta. Bez obzira igrate li igru, čitate članak ili kupujete poklon, svaka akcija vodi vas ka nečem drugom. Ali kako do tamo?

Tu se postavljaju pitanja. Ako postavljate pitanja u procesu dizajniranja, možete povezati radnje, stvarajući besprijekorni dizajn s logičkim tokom.

Nicole Fenton i Kate Kiefer Lee "Lijepo rečeno" priručnik je za pisanje za Internet. Pruža i okvir pitanja koja djeluju za svaki dio iskustva s web dizajnom.

Pitanja koja trebate postaviti uz put (plus još mnogo toga iz vodiča o izvorima knjige):

• Kako ljudi sada koriste ovaj sadržaj ili značajku?
• Tko ovdje govori?
• Koje probleme pokušavamo riješiti?
• Kako ovaj sadržaj služi našim ciljevima? Koja je njegova svrha?
• Koje su značajke web stranice? Kako se ponaša?
• Koji je konačni format?
• Postoje li tehnička ograničenja ili ograničenja znakova?

Fenton je napisao još više o drugim pitanjima koja web stranice stalno postavljaju. Govorimo o osobnim podacima koji pomažu korisnicima da se povežu sa web lokacijama na kojima komuniciraju. "Svaka od ovih interakcija trebala bi se osjećati poput razgovora dvoje ljudi koji vjeruju jedni drugima i zaslužuju jedni druge", piše ona.

Neka od tih pitanja uključuju:

• Kako vam možemo pomoći?
• Gdje si sada?
• Jeste li spremni platiti za ovo?

Odgovor na ta pitanja utvrđuje prirodu odnosa sučelja i korisnika i uvelike utječe na dizajn. Razmislite na ovaj način: Ako korisnik nije voljan da vam kaže svoju lokaciju, dizajn i korisničko sučelje neće biti učinkoviti ako se nalaze u geolokaciji; dizajn bi trebao pristupiti korisniku na drugi način.

Razmislite o jednostavnosti i smjeru

Kad se web stranice okupljaju, sve pada negdje na karti. Tečaj možete planirati od jedne korisničke interakcije do druge. (Što je sjajno za vizualne mislioce.) Dakle, razmislite o procesu dizajniranja / razvoja u smislu A u odnosu na B: Koji je sljedeći korak, A ili B?

Svaki bi element trebao imati jednostavnu svrhu koju je lako definirati i opisati. (Kliknite za reprodukciju; kliknite za pomicanje.) Ako to ne možete učiniti razumljivom rečenicom, možda biste trebali preispitati strategiju dizajna.

Saznajte kod

Sad kad razmišljate o stvarima u metodologiji programera, morate izaći i razviti neke vještine kodiranja. To ne znači da trebate biti glavni koder, ali trebali biste ga dovoljno razumjeti da biste napravili jednostavne promjene i dosljedno razgovarali s drugim dizajnerima i programerima. (Plus što zaista možete stvoriti neke cool efekte, poput onih gore.)

Osobno sam započeo s malo HTML-a s namjerom. Napravio sam popis stvari koje sam želio znati kako to učiniti i naučio sam ih iznutra (tj. Kako promijeniti boju elementa web lokacije pomoću HEX vrijednosti u CSS-u, a ne da kliknem na okvir na biraču boje.) postoji puno alata koji su dostupni od internetskih tečajeva i podučavanja do usavršavanja osoba u vašem području. Sve što trebate učiniti je prijaviti se i započeti.

Četiri sjajna resursa za razvoj koda:

1. tuts +
2. CodeAcademy
3. Škola kod
4. Khan Akademija

Zaključak

Učenje web razvoja nije samo učenje o okvirima i kodu. Riječ je o misaonom procesu. Dizajneri mogu razmišljati poput programera na putu za stvaranje uspješne web stranice. Samo morate biti otvoreni za ideju.

Razumijevanje da su neki misaoni procesi slični - vizualno mišljenje i vaganje rješenja i ishoda - dio je bilo kojeg dizajnerskog ili razvojnog projekta. Svi smo dizajneri / programeri na današnjem tržištu.

Izvor slike: Marjan Krebelj.