Web izstrādes koncepcijas Visiem tīmekļa dizaineriem ir jāapzinās

Par to ir daudz ko teikt atšķirība starp dizaineriem un izstrādātājiem. Piešķirot, ir daudz dizaineru / attīstītāju hibrīdu, kas var saprast abas monētas puses, bet viņi ir maz un tālu.

Radošie projekti attīstās pienācīga komunikācija. Tomēr tas var būt grūti, ja dizaineri un izstrādātāji nav pārliecināti par to, kā to izdarīt runājiet viens ar otru. Es nedomāju, ka dizaineriem ir jāzina, kā uzrakstīt pareizu JavaScript, kā arī izstrādātājiem nav jāizstrādā tipogrāfijas izvēle. Bet ir daži pamatjautājumiem ka es domāju, ka iet abos virzienos.

Šādas tēmas ir mana personīgā uzņemšana svarīgas tīmekļa izstrādes idejas, kas visiem dizaineriem jāsaprot. Kā pats dizainers / attīstītājs es zinu, cik mulsinoši tas var mācīties abās jomās. Bet tas vienmēr ir vērts mācīties, jo skaidra izpratne uzlabo komunikāciju un padara dizaineri daudz vērtīgāku radošai komandai.

Frontend koda uzvedība

Tīmekļa dizaineri bieži vien domā, ka viņiem ir frontendas prasmes, kā arī viņu dizaina talanti. Tas ir ļoti diskutēts temats, galvenokārt tāpēc, ka tur ir nav pareizas atbildes.

Dizaineriem vajadzētu darīt to, ko viņi dara ir apmierināti. Ja tas nozīmē tikai vizuālā dizaina darbu veikšanu, tad arī tā. Tomēr īsa izpratne par frontend tehnoloģijām var padarīt to pašu dizaineru intuitīvāka veidojot aktīvus izstrādātājiem.

Es uzskatu, ka katram dizainerim vismaz jāsaprot trīs galvenās valodas priekšplānā (HTML, CSS un JS) kopā ar to, kā tās tiek izmantotas. Piemēram, lielākā daļa nolaižamo izvēlņu balstās uz JavaScript, bet ir arī tikai CSS-alternatīvas.

Kad dizainers izstrādā nolaižamo izvēlni, viņi var domāt par tā īstenošanas sarežģītība, izmantojot kodu. Dizainers, kurš saprot, kuri elementi pieprasa JavaScript, var būt labāk sagatavots, lai saprastu, ko viņi lūdz izstrādātājiem.

Tas ir iespējams bez mācīšanās rakstīt vienu kodu.

CSS tiek veikts veidojiet mājas lapu. Tas galvenokārt ir statisks, izņemot CSS animāciju un CSS rada vizuālo lielāko daļu lapā. Dinamiskākās funkcijas tiek izveidotas ar JavaScript.

Ja jūs sapratīsiet šo plaisu, tā ieelpos apzināti centienus projektēšanas darbā. Tas arī liks UX kustības dizaineriem apsvērt, cik daudz darba tiek izmantots saskarnes aktivizēšanai.

Reaģējošas metodes

Katram tīmekļa dizainerim vismaz jāzina šis termins atsaucīgs dizains. Tas ļauj tīmekļa vietnēm pielāgoties dažādiem ekrāna izmēriem, katram no tiem ir atšķirīgs izkārtojums. Ierīces izmēri, kad tiek izmantots jauns izkārtojums, ir definēti ar pārtraukumiem, pievienots (viens no) CSS failiem.

Pārtraukuma punkti ir norādīti a noteiktu pikseļu platumu (un / vai dažreiz augstums), vai nu minimālais, vai maksimālais, pie kura izkārtojums pielāgojas, lai atbilstu šim ekrāna izmēram. Tātad atsaucīgs izkārtojums izskatīsies 1080px monitorā citādāk nekā 320px viedtālrunī.

Lai redzētu, kā pārtraukuma punkti darbojas reālajās vietnēs, skatiet vietni Media Queries.

Jūsu, kā dizainera, darbs ir apsvērt, kā katrs pārtraukuma punkts varētu būt ietekmē maketu. Jums var būt uzdots izstrādāt vairākus compus, katrs uzstādīšana dažādos ekrāna izmēros.

Kad esat sapratis, ka CSS pārtraukuma punkts definē nosacījumus, kad izkārtojums mainās, jums būs daudz vieglāk nodot šos aktīvus dev komandai.

Domājiet par moduļiem ar dizainu

Izstrādātāji vienmēr vēlas atkārtoti izmantot kodu cik vien iespējams, jo šī pieeja veicina attīstību mazāk verbose un samazina failu izmērus - patiesībā tā ir svarīga koda optimizācijas metode.

Moduļu dizains apraksta tīmekļa vietņu izveides metodi “moduļiem” tas var būt laika gaitā. Domājiet pogas, veidojiet ievades, virsraksta stilus vai bloknotes ar iedomātu stilu.

Ja jūs dizaina elementi, izstrādātājiem ir vieglāk kodēt izkārtojumu ar atkārtoti izmantojamas CSS klases. Vienmēr ir laba ideja domāt par to, kur jūs varat pamatoti atkārtoti tās pašas krāsas, faktūras un lapu elementi, tomēr jums par to ir jābūt gudri nekaitēt vispārējai estētikai.

Tas ir vēl labāk, ja jūs komentēt kurus elementus esat kopējis dažādos maketos, lai izstrādātāji varētu atzīmējiet šīs vietnes daļas ar atkārtotu kodu - padarīt attīstību ātrāku un vienkāršāku.

Moduļu dizains attiecas uz atomu dizains, abas pieejas ir drīzāk orientētas uz izstrādātājiem. Tomēr vizualizācija var palīdzēt jums saprast, kā darbojas kods, tādēļ, ja jums ir grūtības vizualizēt modulāro dizainu apskatiet šo ziņu, lai redzētu dažus piemērus.

Saprast Retina attēlus un SVG

Parasti dizainera uzdevums ir sagatavot attēlus, iegūt nepieciešamos fotoattēlus un dizaina ikonas no nulles. Tas nozīmē, ka par to ir atbildīgi tikai dizaineri vizuālo aktīvu piegādi ka izstrādātāji galu galā iegrāmato kodu. Tāpēc ir svarīgi saprast tīklenes izmēri un uz nodot tīklenes atbalstītos aktīvus izstrādātājiem kopā ar galīgo maketu (-iem).

Es ļoti ieteiktu šo Smashing Magazine ziņu, ja vēlaties uzzināt vairāk par tīklenes dizaina darbplūsmu. Retinizēt Tā ir bezmaksas Photoshop darbību kolekcija, kas var automātiski izveido tīklenes versijas jūsu aktīviem.

Lielākā daļa dizaineru jau zina, ka tie atbalsta @ 2x attēli, bet jaunākās iPhone 6+ ierīces ir @ 3x rezolūcijas. Tomēr daži projekti neuztraucas ar @ 3x attēla izmēriem, tāpēc pirms jebkādu aktīvu pabeigšanas konsultējieties ar savu projekta vadītāju.

Viena pēdējā lieta, kas jāapsver, ir SVG attīstība tīmeklī. Visas mūsdienu pārlūkprogrammas atbalsta SVG, kas ir a vektoru balstīta attēla formāts. Tas nozīmē, ka SVG ikonas būs automātiski skalas bez kvalitātes zudumiem, tāpēc SVG grafikai nav nepieciešami tīklenes līdzekļi.

Ne visas radošās komandas ir gatavi iet ar SVG tīmekļa dizainam. Pārlūkprogrammas tos noteikti atbalsta, bet dažos gadījumos tās var būt sarežģītas. Tāpēc komunikācija ir būtiska veiksmīgai dizainera / attīstītāja attiecībām.

Apspriediet vektorgrafikas izmantošanas priekšrocības un trūkumus un izlemiet, kas vislabāk darbojas katram projektam. Tikai ar izpratni par šīm funkcijām jūs varat skaidri sazināties ar izstrādātājiem un pat palīdzēt viņiem kodēt tīklenes atbalsta izkārtojumu.

Saprast pieejamību

Progresīvs uzlabojums un graciozs degradācija ir divi dažādi veidi, kā rīkoties ar to pašu problēmu: pieejamība. Ne visi lietotāji atradīsies ierīcēs vai palaidīs pārlūkprogrammas, kas atbalsta 100% vietnes dinamisko funkciju.

Šiem lietotājiem joprojām ir jāsaņem pieredze, kas darbojas, un tas jārīkojas ar pienācīgu kodēšanu. Daži ekrāna lasītāji var ignorēt visu JavaScript un CSS kodu, bet tīmekļa vietni joprojām ir jādarbojas.

Es nesen veicu postu pakāpeniska uzlabošana detalizēti, jo tā ir mana vēlamā attīstības metode. Progresīvs uzlabojums sākas ar ļoti pamata funkcijām, pēc tam darbojas vairāk “uzlabotas” Iespējas.

Graciozs degradācija ir pretēja pieeja kur visas galvenās funkcijas ir izstrādātas vispirms, tad attīstītājs nolemj, kā rīkoties ar šīm funkcijām, ja lietotājs neatbalsta JavaScript vai CSS.

Maz ticams, ka dizainerim lūgtu veikt maketus jebkurai no šīm situācijām. Bet ir svarīgi, lai dizaineri saprastu šos noteikumus un to, ko viņi domā, jo viņi ietekmē attīstības procesu. Tas jo īpaši attiecas uz projektiem, kuros pieejamība ir liela problēma.

Noslēgumā

Ir dažas tēmas, kuras es izlaidu, jo uzskatu, ka tās ir izvēles. Versiju vadība, kļūdu apstrāde un JavaScript animācijas ir dažas sarežģītākas tēmas, kuras dizaineri varētu vēlēties ienirt.

Bet patiesībā šajā postenī aplūkotie punkti vairāk nekā palīdzēs dizaineriem izprast attīstības komandas prasības. Tikai noslīpējot web izstrādes virsmu gūt ieskatu tas palīdzēs jums sazināties ar idejām un simpatizēt problēmas, kas rodas ražošanas laikā.

Ja meklējat papildu saistītu saturu, skatiet šīs ziņas:

• Kā efektīvi sazināties ar izstrādātājiem (smashingmagazine.com)
• Palīdziet dizaineriem un izstrādātājiem iemācīties saprast viens otru (uie.com)
• Mācīties kodēt dod jums priekšrocības kā UX dizainers (jessicaivins.net)