Web razvojni koncepti Svi web dizajneri trebaju razumjeti

Ima mnogo toga za reći jaz između dizajnera i razvojnih programera. Odobreno postoji mnogo dizajnerskih / razvojnih hibrida koji mogu razumjeti obje strane novčića, ali malo ih je i daleko.

Kreativni projekti napreduju pravilnu komunikaciju. Međutim, to može biti teško kada dizajneri i programeri nisu sigurni kako razgovarati jedan s drugim. Ne mislim da dizajneri trebaju znati kako pisati odgovarajući JavaScript, niti bi trebali razvijati tipografsku selekciju. Ali postoje neki temeljne teme što mislim da ide u oba smjera.

Sljedeće teme su moje osobno preuzimanje vitalne ideje za web razvoj koje bi svi dizajneri trebali razumjeti. Kao dizajner / programer sam, znam koliko zbunjujuće može proučavati oba područja. No uvijek je vrijedno truda naučiti jer jasno razumijevanje poboljšava komunikaciju i čini kreatora mnogo vrijednijim za kreativni tim.

Ponašanje Frontend koda

Web dizajneri su često mislili da imaju vještine sučelja zajedno sa svojim talentima dizajna. Ovo je tema o kojoj se često raspravlja, uglavnom zato što postoji nema točnog odgovora.

Dizajneri bi trebali raditi ono što oni su zadovoljni. Ako to znači samo raditi vizualni dizajn, neka bude tako. Međutim, kratko razumijevanje tehnologija sučelja može stvoriti istog dizajnera intuitivniji prilikom stvaranja sredstava za programere.

Vjerujem da bi svaki dizajner trebao barem razumjeti tri temeljna jezika razvoja sučelja (HTML, CSS i JS) zajedno s načinom na koji se koriste. Na primjer, većina padajućih izbornika se oslanja na JavaScript, ali postoje i alternative samo za CSS.

Kada dizajner izrađuje padajući izbornik, mogu razmišljati o tome složenosti implementacije putem koda. Dizajner koji razumije koje elemente zahtijeva JavaScript može biti bolje pripremljen za razumijevanje onoga što traži od razvojnih inženjera.

To je moguće bez učenja pisanja jednog retka koda.

CSS je napravljen na stil stranice. To je uglavnom statična osim CSS animacije i CSS-a stvara većinu slika na stranici. Najdinamičnije značajke su izrađene pomoću JavaScripta.

Ako možete razumjeti tu podjelu, ona će udahnuti svjesni napor u rad na dizajnu. Također će natjerati dizajnere UX pokreta da razmotre koliko posla ide u animiranje sučelja.

Odgovarajuće tehnike

Svaki bi web dizajner trebao barem znati taj pojam odgovarajući dizajn. To omogućuje web-lokacijama prilagoditi se različitim veličinama zaslona, na svaki od njih pripada drugačiji izgled. Dimenzije uređaja kada se primjenjuje novi izgled definirano točkama prekida, dodano u (jednu od) CSS datoteka.

Točke prekida određene su s određena širina piksela (i / ili ponekad visina), bilo minimalno ili maksimalno, pri čemu se izgled prilagođava toj veličini zaslona. Tako će odgovarajući izgled izgledati drugačije na monitoru od 1080px nego na pametnom telefonu od 320 piksela.

Da biste vidjeli kako radne točke na stvarnim web-lokacijama rade, provjerite web-lokaciju Media Queries.

Vaš posao kao dizajnera je razmotriti kako bi svaka točka prekida mogla biti utjecati na model. Vi svibanj biti zadatak s dizajniranjem nekoliko comps, svaki uklapanje u različite dimenzije zaslona.

Kada shvatite da CSS prijelomna točka definira uvjete kada se izmjena izgleda, imat ćete puno lakše vrijeme za isporuku tih sredstava u razvojni tim.

Razmislite o modularnom dizajnu

Programeri uvijek žele ponovno koristiti što je više moguće, budući da ovaj pristup čini razvoj manje opširno i smanjuje veličine datoteka - u stvari to je važna tehnika optimizacije koda.

Modularni dizajn opisuje način stvaranja web-lokacija “moduli” to može biti ponovno se koristi tijekom vremena. Razmislite o gumbima, oblikujte ulaze, stilove naslova ili blokove s lijepim stilovima.

Ako ti modularni elementi dizajna, programerima je lakše kodirati izgled CSS klase za višekratnu upotrebu. Uvijek je dobro razmisliti o tome gdje možete razumno ponovno koristiti iste boje, teksture i elemente stranice, ali morate biti pametni u vezi s tim ne šteti cjelokupnoj estetici.

Još je bolje ako ti komentirati koje ste elemente kopirali preko različitih maketa, tako da programeri mogu označite ove dijelove stranice ponovljenim kodom - brži i jednostavniji razvoj.

Modularni dizajn se odnosi na atomski dizajn, oba su pristupa usmjerena prema razvojnim programerima. Međutim vizualizacija može vam pomoći razumjeti kako radi kôd, pa ako se mučite vizualizirati modularni dizajn pogledajte ovaj post da biste vidjeli nekoliko primjera.

Razumijevanje Retina Images & SVG

Obično je posao dizajnera pripremiti slike, snimiti sve potrebne fotografije i dizajnirati ikone od nule. To znači da su dizajneri isključivo odgovorni za to isporukom vizualnih sredstava da programeri na kraju kodiraju u izgled. Zato je važno razumjeti veličine mrežnice i za prolaze sredstva podržana mrežnicom programerima zajedno s konačnim modelima.

Preporučio bih ovu postu Smashing Magazine ako želite saznati više o tijeku rada dizajna mrežnice. Retinize To je besplatna zbirka Photoshop akcija koje mogu automatski stvoriti retina verzije vaše imovine.

Većina dizajnera već zna za podršku @ 2x slike, ali noviji iPhone 6+ uređaji imaju @ 3x razlučivosti. Međutim, neki projekti se ne muče s veličinama @ 3x slike, stoga razgovarajte s voditeljem projekta prije finaliziranja bilo koje imovine.

Još jedna stvar koju treba razmotriti je napredovanje SVG-a na internetu. Svi moderni preglednici podržavaju SVG koji je vektorski format slike. To znači da će SVG ikone automatski skala bez gubitka kvalitete, tako da ne trebate sredstva mrežnice za SVG grafiku.

Nisu svi kreativni timovi spremni ići s SVG-ovima za web-dizajn. Sigurno ih podržavaju preglednici, ali u nekim slučajevima mogu biti i zahtjevni. Zato je komunikacija ključna za uspješan odnos dizajnera / razvojnog programera.

Raspravljajte o prednostima i nedostacima korištenja vektorske grafike i odlučite što će najbolje raditi za svaki projekt. Samo razumijevanjem ovih značajki moći ćete jasno komunicirati s programerima, pa čak im i pomoći kodirati izgled mrežne podrške.

Razumjeti pristupačnost

Progresivno poboljšanje i graciozna degradacija dva različita načina rješavanja istog problema: pristupačnost. Neće svi korisnici biti na uređajima ili pregledavati preglednike koji podržavaju 100% dinamičkih značajki web-lokacije.

Ti korisnici i dalje bi trebali dobiti iskustvo koje radi, i to se mora rješavati s odgovarajućim kodiranjem. Neki čitači zaslona mogu ignorirati sve JavaScript i CSS kodove, ali web-lokaciju treba funkcionirati.

Nedavno sam pokrio post progresivno poboljšanje detaljno, jer je to moja preferirana metoda razvoja. Progresivno poboljšanje počinje s vrlo osnovnim značajkama, zatim radi do više “Napredna” značajke.

Dobroćudna degradacija je suprotan pristup gdje Prvo su dizajnirane sve glavne značajke, tada programer odlučuje kako će se nositi s tim značajkama ako korisnik ne podržava JavaScript ili CSS.

Nije vjerojatno da bi se od dizajnera tražilo da napravi makete za bilo koju od ovih situacija. Ali važno je da dizajneri razumiju te pojmove i što oni znače, jer oni utjecati na razvojni proces. To posebno vrijedi za projekte gdje je dostupnost velika briga.

U zatvaranju

Postoje neke teme koje sam preskočio jer ih smatram neobaveznim. Kontrola verzija, rukovanje pogreškama i JavaScript animacije nekoliko su složenijih tema koje dizajneri možda žele prenijeti.

Ali, istinito, točke na koje se odnosi ovaj post će više nego pomoći dizajnerima razumjeti zahtjeve razvojnog tima. Samo skimming površine web razvoja ćete steći uvid koji će vam pomoći da prenesete ideje i suosjećate s problemima koji se javljaju tijekom proizvodnje.

Ako tražite više povezanih sadržaja, pogledajte ove postove:

• Kako učinkovito komunicirati s razvojnim programerima (Smashingmagazine.com)
• Pomoć dizajnerima i razvojnim programerima da nauče razumjeti jedni druge (Uie.com)
• Učenje kod vam daje prednosti kao UX dizajnera (Jessicaivins.net)