Spletni razvojni koncepti Vsi spletni oblikovalci morajo razumeti

Veliko je treba povedati razkorak med oblikovalci in razvijalci. Odobreno obstaja veliko oblikovalcev / razvijalcev hibridov, ki lahko razumeti obe strani kovanca, vendar jih je malo.

Ustvarjalni projekti uspevajo pravilno komunikacijo. Vendar je to lahko težavno, če oblikovalci in razvijalci niso prepričani, kako pogovor z enim drugim. Ne verjamem, da bi morali oblikovalci vedeti, kako napisati ustrezen JavaScript, prav tako pa tudi razvijalci ne bi smeli izbrati tipografije. Toda nekaj jih je temeljne teme da mislim, da gre v obe smeri.

Naslednje teme so moje osebno prevzemanje idejne spletne razvojne ideje, ki bi jih morali razumeti vsi oblikovalci. Kot oblikovalec / razvijalec sam, vem, kako zmedeno lahko preučuje obe področji. Vedno pa je vredno truda naučiti se, ker jasno razumevanje izboljšuje komunikacijo in naredi oblikovalca veliko bolj dragocenega za ustvarjalno skupino.

Obnašanje kode Frontend

Spletnim oblikovalcem se pogosto zdi, da imajo sprednje spretnosti skupaj s svojimi oblikovalskimi talenti. To je zelo vroča tema, predvsem zato, ker je tam ni pravilnega odgovora.

Oblikovalci bi morali storiti, kar so ste zadovoljni. Če to pomeni samo delati vizualno oblikovanje, potem je tako. Vendar pa lahko kratko razumevanje tehnologij frontendov postane isti oblikovalec bolj intuitivna pri ustvarjanju sredstev za razvijalce.

Verjamem, da bi moral vsak oblikovalec vsaj razumeti tri temeljne jezike razvoja frontendov (HTML, CSS in JS) skupaj s tem, kako se uporabljajo. Večina spustnih menijev se na primer zanaša na JavaScript, vendar obstajajo tudi alternativne možnosti samo za CSS.

Ko oblikovalec oblikuje spustni meni, lahko razmišlja o zahtevnost izvajanja prek kode. Oblikovalec, ki razume, kateri elementi zahtevajo JavaScript, je lahko bolje pripravljen razumeti, kaj zahtevajo razvijalci.

To je mogoče brez učenja pisanja ene vrstice kode.

CSS je narejen slog spletnega mesta. To je večinoma statična poleg CSS animacije in CSS ustvarja večino slik na strani. Najbolj dinamične funkcije so ustvarjene s JavaScriptom.

Če boste razumeli ta razkorak, boste v projektno delo vnesli zavestno prizadevanje. Oblikovalce gibanja UX bo tudi prisilil, da razmislijo, koliko dela gre v animacijo vmesnika.

Odzivne tehnike

Vsak spletni oblikovalec mora vsaj poznati izraz odzivno oblikovanje. To omogoča spletnim mestom prilagodite se različnim velikostim zaslona, vsakemu izmed njih pripada drugačna postavitev. Dimenzije naprave, ko uporabite novo postavitev opredeljene z mejnimi vrednostmi, dodal (-jo) v datoteko (-e) CSS.

Prelomne točke so določene z a določena širina pikslov (in / ali včasih višina), najmanjša ali največja, pri kateri se postavitev prilagodi tako, da ustreza velikosti zaslona. Tako bo odzivna postavitev na monitorju 1080px drugačna kot pri pametnem telefonu 320px.

Če si želite ogledati, kako delujejo prekinitvene točke na resničnih spletnih mestih, si oglejte spletno mesto Media Queries.

Vaše delo kot oblikovalec je, da preučite, kako bi lahko bila vsaka prelomna točka vplivajo na model. Lahko ste zadolženi za oblikovanje večih kompasov vgradnjo v različne dimenzije zaslona.

Ko ugotovite, da točka prekinitve CSS določa pogoje, ko se postavitev spremeni, boste imeli veliko lažji čas, da dostavite ta sredstva v razvojno skupino.

Razmislite modularno z modeli

Razvijalci vedno želijo ponovno uporabite kodo kolikor je mogoče, saj ta pristop omogoča razvoj manj verbose in zmanjša velikost datoteke - pravzaprav je to pomembna tehnika optimizacije kode.

Modularna zasnova opisuje način ustvarjanja spletnih mest iz “modulov” to je lahko ponovno uporabljen skozi čas. Pomislite na gumbe, oblikujete vnose, sloge naslovov ali blokovne sloge z elegantnimi stili.

Če ti modularno oblikovani elementi, razvijalcem postane lažje kodirati postavitev ponovno uporabljivi CSS razredi. Vedno je dobra ideja razmisliti, kje lahko razumno ponovno uporabo enake barve, teksture in elemente strani, vendar morate biti pametni glede tega ne škoduje celotni estetiki.

Še bolje je, če ti pripisati elemente, ki ste jih prekopirali po različnih modelih, tako da lahko razvijalci označite te dele strani s ponovitveno kodo - hitrejši in enostavnejši razvoj.

Modularna zasnova se nanaša na atomsko oblikovanje, oba pristopa sta precej usmerjena k razvijalcem. Vendar pa vizualizacija vam lahko pomaga razumeti, kako deluje koda, tako da, če se trudite vizualizirati modularno zasnovo Oglejte si to objavo, če si želite ogledati nekaj primerov.

Razumeti Retina Images & SVG

Običajno je delo oblikovalca pri pripravi slik, zajemanju vseh potrebnih fotografij in oblikovanju ikon iz nič. To pomeni, da so oblikovalci izključno odgovorni za to dostavo vizualnih sredstev da razvijalci sčasoma kodo v postavitev. Zato je pomembno razumeti velikosti mrežnice in do sredstva, ki jih podpira mrežnica razvijalcem skupaj s končnimi modeli.

Zelo priporočam to objavo Smashing Magazine, če želite izvedeti več o delovnih poteh za načrtovanje mrežnice. Retinize To je brezplačna zbirka Photoshop dejavnosti, ki lahko samodejno ustvari različice retine sredstev.

Večina oblikovalcev že ve, da jo podpirajo @ 2x slike, vendar novejše naprave iPhone 6+ imajo @ 3x ločljivosti. Vendar pa se nekateri projekti ne trudijo z velikostjo slik @ 3x, zato se pred dokončnim oblikovanjem sredstev pogovorite z vodjo projekta.

Še zadnja stvar, ki jo je treba upoštevati napredovanje SVG na spletu. Vsi moderni brskalniki podpirajo SVG, ki je a format slike na osnovi vektorjev. To pomeni, da bodo ikone SVG avtomatsko umerjanje brez izgube kakovosti, zato za grafiko SVG ne potrebujete sredstev za mrežnico.

Vse kreativne skupine pa niso pripravljene sodelovati s SVG-ji za spletno oblikovanje. Zagotovo jih podpirajo brskalniki, v nekaterih primerih pa so lahko tudi zapleteni. Zato je komunikacija ključnega pomena za uspešen odnos oblikovalca / razvijalca.

Pogovorite se o prednostih in slabostih uporabe vektorske grafike in se odločite, kaj bo najbolje za vsak projekt. Z razumevanjem teh funkcij boste lahko jasno komunicirali z razvijalci in jim celo pomagali kodirati postavitev za podporo mrežnice.

Razumeti dostopnost

Progressive enhancement in dobrohotno degradacijo sta dva različna načina obravnavanja iste težave: dostopnost. Vsi uporabniki ne bodo v napravah ali brskalniki, ki podpirajo 100% dinamičnih funkcij spletnega mesta.

Ti uporabniki morajo še vedno dobiti izkušnje, ki deluje, in to je treba obravnavati s pravilnim kodiranjem. Nekateri bralniki zaslona lahko ignorirajo kodo JavaScript in CSS, vendar spletno mesto še vedno mora delovati.

Pred kratkim sem objavil post postopno izboljšanje podrobno, saj je to moj najprimernejši način razvoja. Progressive enhancement se začne z zelo osnovnimi lastnostmi, potem deluje do več “napredovala” Lastnosti.

Dobrohotna degradacija ali je nasprotni pristop kje vse glavne funkcije so zasnovane najprej, nato razvijalec odloči, kako bo ravnal s temi funkcijami, če uporabnik ne podpira JavaScripta ali CSS-ja.

Malo je verjetno, da bi se od oblikovalca zahtevalo, da izvede makete za katerokoli od teh situacij. Vendar je pomembno, da oblikovalci razumejo te izraze in kaj pomenijo, ker ti vplivajo na razvojni proces. To še posebej velja za projekte, kjer je dostopnost velika skrb.

V zapiranju

Obstaja nekaj tem, ki sem jih preskočil, ker menim, da so izbirne. Nadzor nad različicami, ravnanje z napakami in animacije JavaScripta so nekaj bolj zapletenih tem, v katere se lahko ukvarjajo oblikovalci.

Resnično, točke, obravnavane na tem mestu, bodo več kot pomagale oblikovalcem razumeti zahteve razvojne skupine. Z le posnemanjem površine spletnega razvoja boste pridobite vpogled to vam bo pomagalo pri komunikaciji idej in sočustvovanju s težavami, ki se pojavljajo med proizvodnjo.

Če iščete več sorodnih vsebin, si oglejte te objave:

• Kako učinkovito komunicirati z razvijalci (smashingmagazine.com)
• Pomagajte oblikovalcem in razvijalcem, da se naučijo razumeti drug drugega (uie.com)
• Učenje kode vam daje prednosti kot UX Designer (jessicaivins.net)