Share
Felicitări! Ați proiectat site-ul dvs. și vă simțiți gata să fie trimis la o echipă de codificare. S-ar putea să aveți un dezvoltator în minte, sau ați putea fi compararea populare PSD> magazinele HTML care sunt acolo ... s-ar putea chiar să plănuiți să codificați-vă totul. Indiferent de soluția pe care o decideți, există câteva trucuri care cred că fiecare designer ar trebui să știe când pregătesc desenele pentru a fi codificate în site-uri web pe deplin funcționale.
Philo Hermans este un dezvoltator de web independent din Utrecht, Olanda. Are peste 9 ani de experiență și deseori lucrează cu designeri pentru a transforma desenele sau modelele lor în site-uri sau aplicații web codate pe deplin. Philo este, de asemenea, un dezvoltator de pluginuri de succes pe CodeCanyon și a scris frecvent la Nettuts +. Odată cu introducerea, trebuie să începem cu sfaturile!
Teoria din spatele creării compselor "pixel perfect" poate fi formulată astfel: Pentru noi coderi, ce noi vezi ce este tu obține! Majoritatea programatorilor nu vor interpreta desenele tale pentru tine. Dacă vă predați o compunere de design cu margini care se potrivesc în mod greșit, cu umplutură, dimensiuni ale fontului, culori etc., majoritatea dezvoltatorilor o vor codifica exact așa cum o vedem - inclusiv erorile! Acest lucru poate însemna o mulțime de frustrare și timp pierdut (și bani) face revizuiri; astfel încât să vă salvați o durere de cap și să trimiteți pixel-comps perfect dacă doriți pixel-perfect de codificare.
Înainte de a trimite design-ul dvs. la faza de codificare, luați o oră sau două pentru ao revizui cu un pieptene fin.
Soluția fluxului de lucru aici este simplă - Înainte de a trimite proiectul dvs. la faza de codificare, luați o oră sau două pentru ao revizui cu un pieptene fină cu dinți. Nu aveți nevoie să documentați întregul design (deși unii dezvoltatori vor cere acest lucru), dar aveți grijă să vă asigurați că următoarele elemente sunt exact cum doriți:
Este, de asemenea, merită să faceți un moment pentru a stabili unele "linii directoare" în interiorul fișierelor de design pe care le predați. O modalitate ușoară este să utilizați un șablon de rețea, cum ar fi site-ul web 960.gs. Instrucțiunile din șablonul grilajului vă asigură că lățimile elementelor sunt toate precise. Deci, în loc să aveți un container cu lățimea de 957 pixeli, va fi exact 960 de pixeli pe care ați intenționat-o.
Dacă doriți ceva care nu este evident, cum ar fi un meniu de navigare care trebuie să alunece în jos atunci când mutați mouse-ul în partea de sus a ecranului. Asigurați-vă că clarificați prin adăugarea de note. Există câteva moduri în care puteți face acest lucru (am văzut totul, de la documentele PowerPoint la tipărituri cu scris manual), dar modul meu preferat este de fapt destul de simplu: Utilizați Notă Instrumentul în Photoshop (a se vedea imaginea de mai jos). Instrumentul de notare va face în mod automat notite să apară atunci când un dezvoltator deschide fișierul și este ușor să citiți rapid ceea ce a intenționat un designer.
Dacă nu utilizați Photoshop, este bine. Cele mai multe programe grafice pe care le-am găsit (de la Fireworks la Illustrator) au un mod similar de a adăuga note. Dacă dintr-un anumit motiv aceasta nu este o opțiune, trebuie doar să faceți notele într-un fișier text pe care îl includeți cu fișierele livrate de dezvoltator.
Cu cât designul este mai detaliat în ceea ce privește interacțiunea, cu atât este mai ușor pentru dezvoltator să îl codifice. Asigurați-vă că adăugați câteva exemple cu privire la aspectul designului dvs. atunci când este interacționat cu acesta. Fiecare design va fi diferit, dar interacțiunile importante care nu trebuie uitate includ:
Motivul din spatele acestui sfat este următorul: dacă nu arătați unui dezvoltator cum vă așteptați să se uite la o anumită interacțiune, este posibil să se folosească un design generic nemodificat, care ar putea iesi ca un deget mare. Sigur, sunt unii coderi (ca mine!) Care vor face tot posibilul pentru a ghici ceea ce v-ar fi dorit, de ce sa lasati ceva atat de important pentru a ghici atunci cand va dura doar cateva minute pentru a va proiecta singuri?
Timpul este bani, așa că dacă proiectați un site web cu un cursor frumos și știți exact ce scenariu ar fi perfect pentru el, spuneți dezvoltatorului înainte de a începe codarea de la zero! Dacă nu aveți în minte un anumit scenariu, probabil că vă merită timpul să petreceți câteva minute în căutarea dacă există sau nu unul. Scripturile personalizate pot costa o mulțime de timp și bani - și este mult mai ușor pentru dvs. să creați un design cu un anumit script în minte decât să creați un script personalizat de la zero pentru a se potrivi designului dvs..
Folosirea de scripturi pre-făcute nu este un lucru rău! Acest lucru poate părea un sfat pentru a vă zdrobi creativitatea, dar gândiți-vă în acest fel: poate dura cu ușurință 20 de ori mai mult timp pentru a codifica ceva de la zero decât pentru a folosi o bucată de cod pre-făcută. Scripturile pre-construite sunt de obicei ușor de adaptat și redesenate, iar mii și mii dintre ele sunt disponibile printr-o căutare simplă de la Google. Envato are chiar propria piață pentru scripturile premium dacă nu puteți găsi unul gratuit care să funcționeze: CodeCanyon!
Să ne imaginăm că sunteți un designer pe un proiect major. Voi petreceți saptamâni de muncă pe un design și, în final, obțineți aprobarea clientului dvs. ... doar pentru a afla o săptămână mai târziu că designul este aproape imposibil de codat și că va costa 10 ori mai mult decât bugetul clientului; Toate pentru că ați proiectat întregul site fără o înțelegere pentru ce este și nu este posibil cu o anumită tehnologie (Flash, HTML, etc.).
Una dintre cele mai importante sfaturi pe care le pot da este aceasta: Este vital ca fiecare designer web să aibă niste cunoștințe despre platforma pe care o proiectează. Aceasta ar putea fi HTML, Flash, PHP sau chiar un dispozitiv ca un telefon sau tabletă. Cât de mult învețiți depinde de dvs., dar înțelegerea de bază a modului în care funcționează o platformă vă va economisi multă durere pe termen lung. De prea multe ori mi se dă un design superb, care nu este practic (sau accesibil) de cod, deoarece nu a fost conceput cu caracter practic.
De prea multe ori mi se dă un design superb, care nu este practic (sau accesibil) de cod, deoarece nu a fost conceput cu caracter practic.
Nu vă sugerez să vă limitați creativitatea (aproape orice poate fi codificat cu suficient timp și energie); și de asemenea nu sugerez să ieșiți și să deveniți un guru de codificare (mi-ai fi dat afară dintr-o slujbă!) ... Dar având chiar și o cunoaștere de bază a tehnologiei pe care o proiectați, vă va ajuta să vă informați cu câteva reguli de bază de bază care le vor face mai ușor și mai accesibile.
De exemplu: dacă ați proiectat un site pentru a fi construit ca o pagină web statică, ar fi logic să învățați puțin despre modul în care funcționează HTML și CSS. Având chiar și o înțelegere de bază a modului în care HTML și CSS se raportează unul la celălalt, va fi suficient pentru ca dvs. să luați decizii mai bune atunci când proiectați. Cu cât este mai informat un designer despre tehnologia pe care o proiectează, cu atât vor deveni mai bine la proiectare!
* Da, HTML nu este singura tehnologie acolo, asa ca daca proiectati cu Flash sau o alta tehnologie in minte, faceti ca obiectivul cercetarii dvs. ... sa-l obtineti, desi arhitectul ar trebui sa stie cum sa faca un ciocan, chiar dacă nu o face niciodată.Nu este nevoie să furnizați un ghid de stil pentru 20 de pagini pentru fiecare site pe care îl proiectați, dar principiile de comunicare care ar putea să nu apară în comps pot fi foarte importante pentru succesul oricărui proiect de codificare. Dacă designul dvs. are cerințe speciale (adică: trebuie să fie îndeplinite anumite standarde de accesibilitate, sau trebuie să fie 100% compatibil cu IE5.1 etc.), asigurați-vă că lăsați coderul să cunoască în față, astfel încât să putem planifica înainte . Identificarea cerințelor majore DUPĂ proiectarea este codificată este o rețetă pentru revizuiri costisitoare, care nu sunt la fel de distractive sau lucrative pentru coderi cum vă puteți imagina! Cei mai mulți dintre noi ar prefera mai degrabă să treacă la un alt proiect interesant, decât să-și petreacă luni făcând revizii cu un client frustrat.
Ultimul lucru pe care il voi mentiona este urmatorul: daca urmati aceste sfaturi, nu numai ca veti gasi ca desenele dumneavoastra devin mai usoare si mai accesibile la cod, probabil ca, de asemenea, veti observa ca munca dumneavoastra se va imbunatati ca rezultat. Efectuând câțiva pași suplimentari pentru a vă asigura că aveți un sens în lumea practică a dezvoltării web poate fi diferența dintre un bun site web și un site web excepțional. Sper că ți-a plăcut acest articol!
Accentsconagua