Veebiarenduse kontseptsioonid Kõik veebidisainerid peaksid aru saama

Seal on palju rääkida disainerite ja arendajate vaheline lõhe. Lubatud on palju projekteerijaid / arendajaid mõista mündi mõlemat külge, kuid nad on vähe ja kaugel.

Loovad projektid õitsevad õige suhtlemine. Kuid see võib olla raske, kui disainerid ja arendajad ei ole kindel, kuidas seda teha rääkige üksteisega. Ma ei usu, et disainerid peavad teadma, kuidas kirjutada õige JavaScripti, samuti ei tohiks arendajad juhtida tüpograafia valikut. Kuid on ka mõningaid põhiteemad et ma arvan, et läheme mõlemale poole.

Järgmised teemad on minu enda isiklikud võtmed olulised veebiarenduse ideed, mida kõik disainerid peaksid mõistma. Nagu disainer / arendaja ise, tean, kui segane see võib olla mõlema valdkonna õppimine. Aga see on alati väärt õppimist, sest selge arusaam parandab suhtlemist ja muudab disainer loomingulise meeskonna jaoks palju väärtuslikumaks.

Eesmise koodi käitumine

Veebidisainerid arvavad sageli, et neil on oma disainilahenduse andeid ja esiplaani oskusi. See on kuumalt arutatud teema, peamiselt seetõttu, et seal on õige vastus puudub.

Disainerid peaksid tegema seda, mida nad teevad on rahul. Kui see tähendab ainult visuaalse disaini tööd, siis olgu nii. Kuid lühike arusaam frontend-tehnoloogiatest võib teha sama disaineri intuitiivsem arendajatele varade loomisel.

Ma usun, et iga disainer peaks vähemalt mõistma kolm peamist keelt (HTML, CSS ja JS) koos nende kasutamisega. Näiteks toetuvad enamik rippmenüüsid JavaScriptile, kuid ka CSS-i alternatiive.

Kui disainer töötab rippmenüüst, saavad nad seda mõelda selle rakendamise keerukust koodi kaudu. Disainer, kes mõistab, millised elemendid vajavad JavaScripti, on paremini valmis mõistma, mida nad arendajatelt küsivad.

See on võimalik ilma ühtegi koodi rida kirjutamata.

CSS on tehtud stiilis veebisaiti. See on enamasti staatiline CSS-i animatsiooni ja CSS-i kõrvale loob enamiku visuaale lehel. Enamik dünaamilisi funktsioone on loodud JavaScripti abil.

Kui te mõistate seda lõhet, siis hingab ta disainitöösse teadlikult. Samuti sunnib see UXi liikumisdisainereid kaaluma, kui palju tööd liigub liidesesse.

Reageerivad tehnikad

Iga veebidisainer peaks mõistet vähemalt teadma tundlik disain. See võimaldab veebisaitidel kohaneda erinevate ekraanisuurustega, igale neist on erinev paigutus. Seadme mõõtmed uue paigutuse rakendamisel on määratluse järgi, lisatud (üks) CSS-failist.

Punktid on määratud a-ga teatud pikslite laius (ja / või mõnikord kõrgus), kas minimaalne või maksimaalne, kus paigutus kohandub selle ekraani suuruse järgi. Niisiis tundub 1080px monitoril tundlik paigutus erinevalt 320px nutitelefonist.

Et näha, kuidas tõmbepunktid reaalsetes saitides töötavad, vaadake meedia päringute veebisaiti.

Teie kui disaineri ülesanne on kaaluda, kuidas iga katkestuspunkt saaks mõjutada maketit. Teile võidakse anda ülesandeks koostada mitu komplekti erinevate ekraanimõõtmetega.

Kui olete aru saanud, et CSS-i murdepunkt määratleb paigutuse muutmise tingimusi, on teil palju lihtsam aeg need varad dev-meeskonnale pakkuda.

Mõtle moodulitele disainilahendustega

Arendajad tahavad alati korduskasutamise kood nii palju kui võimalik, kuna see lähenemine muudab arengu vähem verbose ja kärbib faili suurust - tegelikult on see oluline koodide optimeerimise tehnika.

Modulaarne disain kirjeldab veebisaitide loomise meetodit “moodulid” see võib olla taaskasutatakse aja jooksul. Mõtle nupud, moodusta sisendid, pealkirja stiilid või väljamõeldud stiilid.

Kui sa disainielemendid modulaarselt, arendajatele on lihtsam paigutusega koodi kodeerida korduvkasutatavad CSS klassid. Alati on hea mõelda, kuhu saate mõistlikult taaskasutada samasugused värvid, tekstuurid ja leheküljeelemendid, aga peate selle suhtes nutikas olema mitte kahjustada üldist esteetikat.

See on isegi parem, kui sa märkige millised elemendid on kopeeritud erinevates mudelites, nii et arendajad saaksid seda teha märkige need saidi osad korduskoodi abil üles - muutes arengu kiiremaks ja lihtsamaks.

Modulaarne disain on seotud aatomi disain, mõlemad lähenemisviisid on pigem arendajatele suunatud. Kuid visualiseerimine aitab teil mõista, kuidas kood toimib, nii et kui sa üritad visualiseerida modulaarne disain Vaadake seda postitust, et näha mõningaid näiteid.

Mõista retina pilte ja SVG-d

Tavaliselt on disaineri ülesanne valmistada pilte, jäädvustada kõik vajalikud fotod ja kujundada ikoonid nullist. See tähendab, et disainerid vastutavad ainuisikuliselt visuaalsete varade edastamine et arendajad lõpuks koodi paigutus. Seetõttu on oluline mõista võrkkesta suurused ja läbima võrkkestaga toetatud varasid arendajatele koos lõpliku makettiga.

Sooviksin seda Smashing Magazine'i postitust soovitada, kui soovite rohkem teada saada võrkkesta disaini töövoogudest. Retiniseerimine See on tasuta Photoshopi toimingute kogum, mida saab automaatselt luua võrkkesta versioonid oma varadest.

Enamik disainereid juba teab, et neid toetada @ 2x pildid, kuid uuemad iPhone 6+ seadmed on olemas @ 3x resolutsioonid. Kuid mõned projektid ei muretse @ 3x kujutise suurusega, seega rääkige enne projekti lõpetamist oma projektijuhiga.

Üks viimane asi, mida kaaluda on SVG edenemine veebis. Kõik kaasaegsed brauserid toetavad SVG-d, mis on a vektoripõhine kujutise formaat. See tähendab, et SVG ikoonid hakkavad automaatselt skaala ilma kvaliteedi kadu, nii et teil ei ole SVG graafika jaoks vaja võrkkesta vara.

Mitte kõik loomingulised meeskonnad ei soovi veebi disaini jaoks SVG-sid minna. Brauserid toetavad neid kindlasti, kuid mõnel juhul võivad need olla ka keerulised. Seetõttu on kommunikatsioon väga oluline edukate disainerite ja arendajate vahel.

Arutage vektorgraafika kasutamise eeliseid ja miinuseid ning otsustage iga projekti jaoks kõige paremini. Lihtsalt mõistes neid funktsioone saate suhelda arendajatega selgelt ja isegi aidata neil võrkkesta tuge paigutada.

Mõista ligipääsetavust

Järkjärguline täiustamine ja graatsiline lagunemine on kaks erinevat viisi sama probleemi lahendamiseks: juurdepääsetavus. Kõik kasutajad ei asu seadmetes ega kasutavad brausereid, mis toetavad 100% veebisaidi dünaamilistest funktsioonidest.

Need kasutajad peaksid ikkagi saama kogemus, mis töötab, ja seda tuleb käsitleda nõuetekohase kodeerimisega. Mõned ekraanilugejad võivad ignoreerida kõiki JavaScript- ja CSS-koode, kuid veebisaiti ikka peab toimima.

Ma tegin hiljuti postituse järkjärguline täiustamine üksikasjalikult, kuna see on minu eelistatud arendusmeetod. Järkjärguline täiustamine algab väga põhiliste funktsioonidega, seejärel töötab rohkem “arenenud” Omadused.

Graatsiline lagunemine on vastupidine lähenemine kus kõik peamised funktsioonid on loodud kõigepealt, siis otsustab arendaja, kuidas neid funktsioone kasutada, kui kasutaja ei toeta JavaScripti või CSS-i.

On ebatõenäoline, et disaineril palutakse teha mõni neist olukordadest. Kuid on oluline, et disainerid mõistaksid neid termineid ja mida nad mõtlevad, sest nad mõjutavad arenguprotsessi. See kehtib eriti projektide kohta, kus juurdepääs on suur probleem.

Lõpetamisel

On mõned teemad, mille vahele jätsin, sest minu arvates on need valikulised. Versiooni juhtimine, vigade käsitlemine ja JavaScript-animatsioonid on mõned keerukamad teemad, mida disainerid võiksid sattuda.

Kuid ausalt öeldes on selles postituses käsitletud punktid rohkem kui aidata disaineritel mõista arendusmeeskonna nõudeid. Lihtsalt koorides veebiarenduse pind saada ülevaade see aitab teil ideid suhelda ja kaastunnet tootmise käigus tekkivate probleemidega.

Kui otsite rohkem seotud sisu, vaadake neid postitusi:

• Kuidas tõhusalt suhelda arendajatega (smashingmagazine.com)
• Abi Kujundajad ja arendajad õppivad üksteist mõistma (uie.com)
• Koodide õppimine annab teile eeliseid UX disainerina (jessicaivins.net)