Kodēšana nekodētājam: dizaineri var domāt kā izstrādātāji

Tikmēr, kamēr mēs veidojam vietnes, pastāv nerakstīta plaisa starp dizaineriem un izstrādātājiem. Cilvēki, kas liek lietām izskatīties labi, salīdzinot ar cilvēkiem, kas liek tai darboties. Šīs dienas ir beigušās.

Katram dizainerim jāiemācās, kā attīstība darbojas digitālajā ainavā. Un katram izstrādātājam vajadzētu saprast pamata dizaina teorijas. Šeit mēs palīdzēsim dizaineriem labāk izprast izstrādātāju valodu, kas ir būtiska prasme mūsdienu tirgū. (Kā papildu piemaksa visi dizaina piemēri ir izveidoti, izmantojot CSS ietvarus.)

Izpētiet Envato elementus

Lietotāja saskarnes un dizains

Aiz katras vietnes mugurkauls ir 1 un 0 virkne. Tas nav īpaši aizraujoši, ja runājam par dizainu. Bet faktiskais interfeiss un savienojums ar lietotāju ir.

Katrā sīkā detaļā ir ietverti dizaina elementi, ar kuriem kādam ir jāiesaistās, sākot ar pogām un beidzot ar navigācijas elementiem līdz formām līdz video skatīšanai vai apavu pāra pirkšanai. Mērķis ir radīt kaut ko tādu, kas izskatās jauks, saistošs un viegli lietojams. Tajā satiekas dizains un attīstība.

Vārdi, kas jums jāzina:

• Ajax: Izmantojot asinhrono JavaScript un XML, tiek radīta interaktīva pieredze, kurā jauna informācija var tikt uzpildīta vietnes lietotāja galā bez atsvaidzināšanas. Izplatīts piemērs ir nepārtraukta ziņu ielāde, kad lietotājs ritina Twitter lapu.
• API: nodrošinot specifikācijas rutīnām, datiem, objektu klasēm un mainīgajiem, kā arī lietojumprogrammu saskarne ļauj dažādām vietnēm vai programmatūrai “sarunāties” savā starpā un strādāt kopā. Padomājiet par to kā virtuālu celtniecības bloku komplektu.
• CSS: kaskādes stila lapas ir valodas pamats, ko izmanto vietņu veidošanai un HTML elementu vizuālai parādīšanai.
• Multivides vaicājums: CSS elements, kas rada īpašus noteikumus noteiktām ierīcēm, kad tiek parādīts vizuālais attēls. (Tas ir burvju spēks, kas vienu un to pašu fotoattēlu padara renderētu un apgrieztu darbvirsmas vietnē un citā veidā - mobilajā ierīcē.)
• Adaptīvs tīmekļa dizains (RWD): tīmekļa dizaina paņēmiens, kas izmantoja elastīgu režģi un attēlus, multividi un tekstu, lai viena vietne pielāgotos vairākiem ierīces izmēriem. (Tas, domājams, šobrīd ir viens no vissvarīgākajiem web dizaina faktoriem.)
• UI: lietotāja saskarne ir viss, ko lietotājs redz un mijiedarbojas ar dizainu. Tas var būt viss, sākot ar to, kā viņi izmanto vietni un ierīci, līdz katram atsevišķam ekrāna elementam.
• UX: lietotāja pieredze ir tā, ko katrs atsevišķs lietotājs atņem no mijiedarbības ar vietni. To mēdz izteikt kā emocionālu saikni un tas attiecas uz uztverto kopējo vērtību.

Padomājiet par jautājumiem

"Katrai no šīm mijiedarbībām vajadzētu justies kā sarunai starp diviem cilvēkiem, kuri uzticas viens otram un ir pelnījuši viens otra uzticību."

Katrā vietnes daļā lietotājiem tiek lūgts iesaistīties vai turpināt sadarboties ar citu vietnes daļu. Neatkarīgi no tā, vai spēlējat spēli, lasāt rakstu vai pērkat dāvanu, katra darbība noved pie kaut kā cita. Bet kā jūs tur nokļūt?

Šeit rodas jautājumu uzdošana. Ja uzdodat jautājumus projektēšanas procesā, varat izveidot saites starp darbībām, izveidojot vienveidīgāku dizainu ar loģisku plūsmu.

Nicole Fenton un Kate Kiefer Lee “Nicai Said” ir rokasgrāmata, kā rakstīt tīmeklim. Tas arī nodrošina jautājumu sistēmu, kas attiecas uz katru tīmekļa dizaina daļu.

Jautājumi, kas jāuzdod ceļā (kā arī vēl daudz vairāk no grāmatas avota):

• Kā cilvēki tagad izmanto šo saturu vai funkciju?
• Kas šeit runā?
• Kādas problēmas mēs cenšamies atrisināt?
• Kā šis saturs kalpo mūsu mērķiem? Kāds ir tā mērķis?
• Kādas ir vietnes iespējas? Kā tas uzvedas?
• Kāds ir galīgais formāts?
• Vai ir kādi tehniski ierobežojumi vai rakstzīmju ierobežojumi?

Fentons rakstīja vēl vairāk par citiem jautājumiem, kurus mājas lapas visu laiku “uzdod”. Mēs runājam par personisko informāciju, kas lietotājiem palīdz piesaistīt vietnes, ar kurām viņi mijiedarbojas. “Katrai no šīm mijiedarbībām vajadzētu justies kā sarunai starp diviem cilvēkiem, kuri uzticas viens otram un ir pelnījuši viens otra uzticēšanos, ” viņa raksta.

Daži no šiem jautājumiem ir:

• Kā mēs varam tev palīdzēt?
• Kur tu šobrīd esi?
• Vai esat ar mieru par to maksāt?

Atbilde uz šiem jautājumiem nosaka saskarnes un lietotāja attiecību raksturu un lielā mērā ietekmē dizainu. Padomājiet par to šādi: ja lietotājs nevēlas pateikt jums savu atrašanās vietu, dizains un lietotāja saskarne nebūs efektīva, ja tā balstās uz ģeogrāfisko atrašanās vietu; dizainam vajadzētu tuvoties lietotājam citā veidā.

Padomājiet par vienkāršību un virzienu

Kad vietnes sanāk, viss mēdz iekrist kaut kur kartē. Jūs varat attēlot kursu no viena lietotāja mijiedarbības uz nākamo. (Kas lieliski der vizuālajiem domātājiem.) Tāpēc domājiet par projektēšanas / izstrādes procesu attiecībā pret A un B: Kāds ir nākamais solis, A vai B?

Katram elementam jābūt vienkāršam mērķim, kuru ir viegli definēt un aprakstīt. (Noklikšķiniet, lai atskaņotu; noklikšķiniet, lai ritinātu.) Ja jūs to nevarat padarīt saprotamu teikumā, iespējams, vēlēsities pārdomāt dizaina stratēģiju.

Uzziniet kodu

Tagad, kad jūs domājat par izstrādātāja metodoloģijas lietām, jums jāiziet un jāattīsta dažas kodēšanas prasmes. Tas nenozīmē, ka jums jābūt galvenajam kodētājam, taču jums tas ir pietiekami jāsaprot, lai veiktu vienkāršas izmaiņas un saskaņoti runātu ar citiem dizaineriem un izstrādātājiem. (Turklāt jūs patiešām varat izveidot dažus izcilus efektus, piemēram, iepriekš minētos.)

Personīgi es sāku ar nelielu HTML ar mērķi. Es sastādīju to lietu sarakstu, kuras es gribēju zināt, kā to izdarīt, un iemācījos tās no iekšpuses (ti, kā mainīt vietnes elementu krāsu, izmantojot CSS vērtību HEX, nevis noklikšķināt uz rūtiņas krāsu atlasītājā.) Tur ir pieejams daudz rīku, sākot no tiešsaistes nodarbībām un konsultācijām līdz apmācībai klātienē jūsu reģionā. Viss, kas jums jādara, ir reģistrēties un sākt darbu.

Četri lieliski kodu izstrādes resursi:

1. Tuts +
2. CodeAcademy
3. Kodskola
4. Hanas akadēmija

Secinājums

Mācības tīmekļa izstrādē nav tikai mācīšanās par ietvariem un kodu. Tas ir par domu procesu. Dizaineri var domāt tāpat kā izstrādātāji ceļā uz veiksmīgas vietnes izveidi. Jums vienkārši jābūt atvērtai idejai.

Izpratne par to, ka daži no domāšanas procesiem ir līdzīgi - vizuālā domāšana un svēršanas risinājumi un rezultāti - ir jebkura dizaina vai attīstības projekta sastāvdaļa. Mēs visi esam dizaineri / izstrādātāji mūsdienu tirgū.

Attēla avots: Marjans Krebeljs.