Web-kehityskonseptit Kaikkien web-suunnittelijoiden tulisi ymmärtää

On paljon sanottavaa suunnittelijoiden ja kehittäjien välinen ero. Annetaan, että on olemassa monia suunnittelijoita / kehittäjiä ymmärtää kolikon molemmat puolet, mutta he ovat vain vähän ja kaukana.

Luovat projektit menestyvät asianmukainen viestintä. Tämä voi kuitenkin olla vaikeaa, kun suunnittelijat ja kehittäjät eivät ole varmoja siitä, miten puhu toisilleen. Luulen, että suunnittelijoiden ei tarvitse tietää, miten kirjoittaa oikea JavaScript, eikä kehittäjien tulisi myös kirjoittaa typografian valintaa. Mutta on joitakin keskeisiä aiheita että ajattelen menevän molempiin suuntiin.

Seuraavat aiheet ovat oma henkilökohtainen otteeni elintärkeitä web-kehitysideoita, jotka kaikkien suunnittelijoiden tulisi ymmärtää. Itse suunnittelijana / kehittäjänä tiedän, miten sekava se voi olla molempien alueiden opiskelu. Mutta aina kannattaa oppia, koska selkeä ymmärrys parantaa viestintää ja tekee suunnittelijalle paljon arvokkaampaa luovalle tiimille.

Frontend-koodin käyttäytyminen

Web-suunnittelijoiden uskotaan usein pitävän etuosan taitoja yhdessä suunnittelukyvynsä kanssa. Tämä on kiihkeästi keskusteltu aihe, lähinnä siksi, että siellä on ei ole oikeaa vastausta.

Suunnittelijoiden pitäisi tehdä mitä he tekevät ovat tyytyväisiä. Jos tämä tarkoittaa vain visuaalisen suunnittelun tekemistä, niin olkoon niin. Kuitenkin lyhyt käsitys frontend-tekniikoista voi tehdä saman suunnittelijan intuitiivisempi kun kehität resursseja kehittäjille.

Uskon, että jokaisen suunnittelijan pitäisi ymmärtää ainakin kolme perusliittymän kieltä (HTML, CSS ja JS) sekä niiden käyttö. Esimerkiksi useimmat pudotusvalikot luottavat JavaScriptiin, mutta myös CSS-vaihtoehtoisia vaihtoehtoja.

Kun suunnittelija valmistelee pudotusvalikkoa, he voivat ajatella sen monimutkaisuus koodin avulla. Suunnittelija, joka ymmärtää, mitkä elementit vaativat JavaScriptin, voivat olla paremmin valmiita ymmärtämään, mitä he kehottavat kehittäjiä rakentamaan.

Tämä on mahdollista oppimatta kirjoittamaan yhtä koodiriviä.

CSS on tehty tyyli verkkosivuilla. Se on useimmiten staattista CSS-animaation ja CSS: n ohella luo suurimman osan kuvista sivulla. Useimmat dynaamiset ominaisuudet luodaan JavaScriptin avulla.

Jos ymmärrät tämän jaon, se hengittää tietoisella tavalla suunnittelutyötä. Se pakottaa myös UX-liikkeen suunnittelijat pohtimaan, kuinka paljon työtä tehdään käyttöliittymän animoimiseksi.

Reagoivat tekniikat

Jokaisen web-suunnittelijan tulisi tietää ainakin termi herkkä muotoilu. Tämä mahdollistaa verkkosivustojen sopeutua eri kuvaruutuihin, kullekin, johon kuuluu erilainen ulkoasu. Laitteen mitat, kun uutta asettelua käytetään, ovat määritelty katkaisupisteillä, lisätty (yhteen) CSS-tiedostoon.

Rikkopisteet määritetään a tietty pikselileveys (ja / tai joskus korkeus), joko vähimmäis- tai enimmäismäärä, jossa asettelu mukautuu näytön koon mukaan. Niinpä reagoiva ulkoasu näyttää erilaiselta kuin 1080px-monitorissa kuin 320px-älypuhelimessa.

Jos haluat nähdä, miten katkaisupisteet toimivat todellisissa sivustoissa, tutustu Media-kyselyjen verkkosivustoon.

Sinun tehtäväsi suunnittelijana on pohtia, miten kukin katkaisupiste voisi vaikuttaa mockupiin. Sinulle voidaan antaa tehtäväksi suunnitella useita yhdistelmiä sopivat eri näytön mittoihin.

Kun olet ymmärtänyt, että CSS-katkaisukohde määrittelee olosuhteet, kun ulkoasu muuttuu, näiden resurssien toimittaminen dev-tiimille on paljon helpompaa.

Ajattele modulaarisia malleja

Kehittäjät haluavat aina koodin uudelleenkäyttö mahdollisimman paljon, koska tämä lähestymistapa tekee kehityksestä vähemmän verbose ja leikkaa tiedostokokoja - Itse asiassa se on tärkeä koodin optimointitekniikka.

Modulaarinen rakenne kuvaa menetelmää verkkosivustojen luomiseksi “moduulit” se voi olla uudelleen. Ajattele painikkeita, muodostaa sisääntuloja, otsikkotyylejä tai lohkokaavioita, joissa on hieno muotoilu.

Jos sinä muotoiluelementit modulaarisesti, kehittäjien on helpompi koodata asettelun uudelleenkäytettäviä CSS-luokkia. On aina hyvä ajatella, missä voit kohtuudella uudelleen samat värit, tekstuurit ja sivun elementit, mutta sinun täytyy olla älykäs ei vahingoita yleistä estetiikkaa.

Se on vieläkin parempi, jos muistiinpanoja mitä elementtejä olet kopioinut eri malleissa, niin että kehittäjät voivat merkitse nämä sivuston osat uudelleen koodilla - nopeammin ja yksinkertaisemmin.

Modulaarinen rakenne liittyy atomimalli, molemmat lähestymistavat on melko suunnattu kehittäjille. kuitenkin visualisointi voi auttaa sinua ymmärtämään, miten koodi toimii, joten jos kamppailee visualisoi modulaarinen rakenne katso tämä viesti nähdäksesi muutamia esimerkkejä.

Ymmärtää Retina Images & SVG

Tavallisesti suunnittelijan tehtävänä on valmistaa kuvia, tallentaa kaikki tarvittavat kuvat ja muotoilukuvakkeet tyhjästä. Tämä tarkoittaa, että suunnittelijat ovat yksin vastuussa visuaalisen omaisuuden toimittaminen että kehittäjät lopulta koodittavat ulkoasuun. Siksi on tärkeää ymmärtää verkkokalvon koot ja siirtää verkkokalvon tukemia varoja kehittäjille yhdessä lopullisen mallin kanssa.

Suosittelisin tätä Smashing-lehden viestiä, jos haluat lisätietoja verkkokalvon suunnittelusta. Retinize Se on ilmainen kokoelma Photoshop-toimia, jotka voivat luo verkkokalvoversiot automaattisesti omaisuutesi.

Useimmat suunnittelijat tietävät jo tukevansa @ 2x kuvat, mutta uudemmilla iPhone 6+ -laitteilla on @ 3x-resoluutiot. Jotkin projektit eivät kuitenkaan häiritse @ 3x-kuvakokoa, joten keskustele projektijohtajan kanssa ennen kuin lopetat kaikki varat.

Viimeinen asia, jota on harkittava, on SVG: n eteneminen verkossa. Kaikki modernit selaimet tukevat SVG: tä, joka on a vektoripohjainen kuvamuoto. Tämä tarkoittaa, että SVG-kuvakkeet tulevat näkyviin skaalata automaattisesti ilman laatuhäviötä, joten sinun ei tarvitse verkkokalvon omaisuutta SVG-grafiikalle.

Kaikki luovat tiimit eivät halua mennä web-suunnitteluun SVG: hen. Selaimet tukevat niitä varmasti, mutta joissakin tapauksissa ne voivat myös olla hankalia toteuttaa. Siksi viestintä on elintärkeää onnistuneen suunnittelijan / kehittäjän suhteen kannalta.

Keskustele vektorigrafiikan käytön etuja ja haittoja ja päättää, mikä toimii parhaiten kullekin projektille. Vain ymmärtämällä nämä ominaisuudet voit kommunikoida kehittäjien kanssa selkeästi ja jopa auttaa heitä koodittamaan verkkokalvon tuen asettelua.

Ymmärtäkää esteettömyyttä

Progressiivinen parannus ja karkea hajoaminen ovat kaksi eri tapaa käsitellä samaa ongelmaa: saavutettavuus. Kaikki käyttäjät eivät ole laitteissa tai käyttävät selaimia, jotka tukevat 100% sivuston dynaamisista ominaisuuksista.

Näiden käyttäjien pitäisi silti saada kokemus, joka toimii, ja tätä on käsiteltävä asianmukaisella koodauksella. Jotkin näytönlukijat saattavat jättää huomiotta kaikki JavaScript- ja CSS-koodit, mutta verkkosivusto täytyy vielä toimia.

Tein äskettäin postitse progressiivinen parannus yksityiskohtaisesti, koska se on minun suosituin kehitystapa. Progressiivinen parannus alkaa hyvin perusominaisuuksilla, sitten toimii enemmän “pitkälle kehittynyt” ominaisuudet.

Graceful degradation on päinvastainen lähestymistapa missä kaikki tärkeimmät ominaisuudet on suunniteltu ensin, sitten kehittäjä päättää, miten käsitellä näitä ominaisuuksia, jos käyttäjä ei tue JavaScriptiä tai CSS: ää.

On epätodennäköistä, että suunnittelijaa pyydettäisiin tekemään malleja mihin tahansa näistä tilanteista. Mutta on tärkeää, että suunnittelijat ymmärtävät nämä ehdot ja mitä he tarkoittavat, koska he eivät vaikuta kehitysprosessiin. Tämä pätee erityisesti hankkeisiin, joissa esteettömyys on suuri huolenaihe.

Sulkemisessa

Joitakin aiheita ohitetaan, koska pidän niitä valinnaisina. Versioiden hallinta, virheenkäsittely ja JavaScript-animaatiot ovat muutamia monimutkaisempia aiheita, joita suunnittelijat saattavat haluta kaivaa.

Mutta totuudenmukaisesti, tässä viestissä käsitellyt kohdat auttavat suunnittelijoita ymmärtämään kehitystiimin vaatimuksia. Pelkällä web-kehitystyön pinnan tasoittaminen saada tietoa se auttaa sinua viestimään ideoista ja myötätuntoa tuotannon aikana ilmenevistä ongelmista.

Jos etsit lisää siihen liittyvää sisältöä, katso nämä viestit:

• Miten tehokkaasti kommunikoida kehittäjien kanssa (Smashingmagazine.com)
• Ohje Suunnittelijat ja kehittäjät oppivat ymmärtämään toisiaan (Uie.com)
• Koodin oppiminen antaa sinulle etuja UX-suunnittelijana (Jessicaivins.net)