Mittekodeerija kodeerimine: disainerid võivad mõelda nagu arendajad

Nii kaua, kui oleme veebisaite loonud, on disainerite ja arendajate vahel olnud see kirjutamata lõhe. Inimesed, kes panevad asjad välja nägema, võrreldes inimestega, kes panevad selle toimima. Need päevad on möödas.

Iga disainer peab õppima, kuidas arendus toimib digitaalmaastikul. Ja iga arendaja peaks mõistma põhilisi disainiteooriaid. Siin aitame disaineritel paremini mõista arendajate keelt, mis on tänapäeva turul hädavajalik oskus. (Lisaboonusena luuakse kõik kujundusnäited CSS-i raamistike abil.)

Uurige Envato elemente

Kasutajaliidesed ja kujundus

Iga veebisaidi selgroog on string 1 ja 0. See pole disaini osas eriti põnev. Kuid tegelik liides ja kasutajaga ühendamine on.

Iga pisike detail sisaldab kujunduselemente, millega keegi peaks tegelema nuppudest navigatsioonielementide ja vormide vahel kuni video vaatamiseni või kingapaari ostmiseni. Eesmärk on luua midagi, mis näeks välja kena, kaasahaarav ja hõlpsasti kasutatav. Seal kohtuvad disain ja arendus.

Sõnad, mida pead teadma:

• Ajax: Asünkroonse JavaScripti ja XML-i kasutamine loob interaktiivse kogemuse, kus uut teavet saab värskendamata veebisaidi lõppu sisestada. Tavaline näide on pidev postituste laadimine, kui kasutaja sirvib Twitteri lehte.
• API: pakkudes rutiinide, andmete, objektiklasside ja muutujate spetsifikatsioone ning rakenduste programmeerimisliides võimaldab erinevatel veebisaitidel või tarkvaral omavahel "rääkida" ja töötada koos. Mõelge sellele kui virtuaalsele ehitusplokkide komplektile.
• CSS: kaskaadlaadistiilid on veebisaidide kujundamiseks ja HTML-i elementide visuaalseks kuvamiseks kasutatava keele selgroog.
• Meediumipäring: CSS-element, mis loob teatud seadmetele kindlad reeglid visuaali renderdamise osas. (See on võlujõud, mis muudab sama foto renderdamiseks ühe küljenduse ja kärpimisega lauaarvuti saidil ja teisel viisil mobiilseadmes.)
• Reageeriv veebidisain (RWD): veebidisaini tehnika, mis kasutas painduvat ruudustikku ja pilte, meediume ja teksti nii, et üks veebisait kohandub mitme seadme suurusega. (See on praegu vaieldamatult üks olulisemaid tegureid veebidisainis.)
• UI: Kasutajaliides on kõik, mida kasutaja disainilahenduses näeb ja sellega suhtleb. See võib olla kõike alates sellest, kuidas nad veebisaiti ja seadet kasutavad, kuni ekraanil olevate üksikute elementideni.
• UX: kasutajakogemus on see, mis iga üksiku kasutaja võtab ära saidiga suhtlemise. Seda kiputakse väljendama emotsionaalse seosena ja see on seotud tajutava üldise väärtusega.

Mõelge küsimustele

"Kõik need suhted peaksid tunduma vestlusena kahe inimese vahel, kes usaldavad üksteist ja väärivad üksteise usaldust."

Veebisaidi igas osas palutakse kasutajatel tegeleda saidi mõne teise osaga või jätkata seda. Ükskõik, kas mängite mängu, loete artiklit või ostate kingituse, viib iga tegevus teid millegi muu juurde. Aga kuidas sinna jõuda?

Siit tulevad küsimuste esitamine. Kui esitate projekteerimisprotsessis küsimusi, saate luua toimingute vahel lingid, luues loogilise vooga sujuvama kujunduse.

Nicole Fentoni ja Kate Kiefer Lee “Kenasti ütles” on veebi kirjutamise juhend. See pakub ka küsimuste raamistikku, mis vastavad veebidisaini kogemuse igale osale.

Küsimused, mida esitada (lisaks veel palju raamatu ressursijuhendist):

• Kuidas inimesed seda sisu või funktsiooni kasutavad?
• Kes siin räägib?
• Milliseid probleeme me püüame lahendada?
• Kuidas see sisu meie eesmärke teenib? Mis on selle eesmärk?
• Millised on veebisaidi omadused? Kuidas ta käitub?
• Mis on lõplik formaat?
• Kas on tehnilisi piiranguid või märgipiiranguid?

Fenton kirjutas veelgi rohkem muudest küsimustest, mida veebisaidid kogu aeg küsivad. Me räägime isiklikest üksikasjadest, mis aitavad kasutajatel suhelda saitidega, millega nad suhtlevad. "Kõik need suhted peaksid tunduma nagu vestlus kahe inimese vahel, kes usaldavad üksteist ja väärivad üksteise usaldust, " kirjutab ta.

Mõned neist küsimustest hõlmavad järgmist:

• Kuidas saaksime teid aidata?
• Kus sa praegu oled?
• Kas olete nõus selle eest maksma?

Nendele küsimustele antud vastus selgitab välja liidese ja kasutaja suhete olemuse ning mõjutab kujundust suuresti. Mõelge sellele nii: kui kasutaja ei soovi teile oma asukohta öelda, pole kujundus ja kasutajaliides tõhusad, kui see põhineb geograafilises asukohas; disain peaks lähenema kasutajale muul viisil.

Mõelge lihtsusele ja suunale

Kui veebisaidid kokku tulevad, kipub kõik kuhugi kaardile jääma. Kursuse saate joonistada ühe kasutaja interaktsiooni juurest teise juurde. (Mis sobib suurepäraselt visuaalsete mõtlejate jaoks.) Mõelge siis kujundus- / arendusprotsessile A ja B osas: mis on järgmine samm, A või B?

Igal elemendil peaks olema lihtne eesmärk, mida on lihtne määratleda ja kirjeldada. (Klõpsake mängimiseks; klõpsake kerimiseks.) Kui te ei saa seda lauses arusaadavaks teha, võiksite mõelda kujundusstrateegiale.

Õppige koodi

Nüüd, kui olete mõelnud arendaja metoodikaga seotud asjadele, peate minema välja ja arendama mõnda kodeerimisoskust. See ei tähenda, et peate olema põhikooder, kuid peaksite seda piisavalt mõistma, et teha lihtsaid muudatusi ja vestelda sidusalt teiste disainerite ja arendajatega. (Lisaks saate tõesti luua mõned lahedad efektid, näiteks need, mis ülaltoodud.)

Isiklikult alustasin väikese HTML-iga eesmärgiga. Tegin nimekirja asjadest, mida soovisin teada, kuidas seda teha, ja õppisin neid seestpoolt (st kuidas muuta saidielemendi värvi kasutades CSS-i HEX-väärtust, mitte klõpsates värvilise valija kastil.) Seal on saadaval palju tööriistu alates veebiklassidest ja õpetustest kuni oma ala isikliku koolituseni. Peate vaid registreeruma ja alustama.

Neli suurepärast koodiarendusressurssi:

1. Juhib +
2. CodeAcademy
3. Koodikool
4. Khani Akadeemia

Järeldus

Veebiarenduse õppimine ei ole ainult raamistike ja koodi tundmaõppimine. Asi on mõtlemisprotsessis. Disainerid võivad mõelda edukate veebisaitide loomisele sarnaselt arendajatega. Peate lihtsalt olema ideele avatud.

Mõistmine, et mõned mõtteprotsessid on sarnased - visuaalne mõtlemine ning kaalumislahendused ja tulemused - on osa igast kujundus- või arendusprojektist. Oleme kõik tänapäeva turul disainerid / arendajad.

Pildiallikas: Marjan Krebelj.