Concepte de dezvoltare web Toate designerii web ar trebui să înțeleagă

Sunt multe de spus diviziunea găsită între designeri și dezvoltatori. S-a acordat că există mulți hibrizi de designer / dezvoltatori care pot înțelegeți ambele fețe ale monedei, dar sunt puțini și între ei.

Proiectele creative se dezvoltă comunicarea corectă. Cu toate acestea, acest lucru poate fi dificil atunci când designerii și dezvoltatorii nu sunt siguri cum să vorbiți unul cu celălalt. Nu cred că designerii trebuie să știe cum să scrie JavaScript corect, și nici nu ar trebui să selecteze modele de tipografie tip dezvoltator. Dar sunt unele teme fundamentale care cred că merge în ambele sensuri.

Următoarele subiecte sunt ale mele personale ideile ideale de dezvoltare web pe care toți designerii ar trebui să le înțeleagă. În calitate de designer / dezvoltator personal, știu cât de confuză poate fi studierea ambelor domenii. Dar merită întotdeauna efortul de a învăța, deoarece o înțelegere clară îmbunătățește comunicarea și face un designer mult mai valoros pentru o echipă creatoare.

Codul Frontendului Comportament

Designerii de web-uri sunt adesea considerați a avea abilități frontend împreună cu talentele lor de design. Acesta este un subiect foarte dezbătut, mai ales pentru că există nici un răspuns corect.

Designerii ar trebui să facă ceea ce ei sunt confortabile cu. Dacă asta înseamnă doar să faci o lucrare vizuală de design, atunci fii așa. Cu toate acestea, o înțelegere succintă a tehnologiilor frontend poate face același designer mai intuitivă când creați materiale pentru dezvoltatori.

Cred că fiecare designer ar trebui să înțeleagă cel puțin trei limbi fundamentale de dezvoltare frontend (HTML, CSS și JS) împreună cu modul în care sunt utilizate. De exemplu, majoritatea meniurilor derulante se bazează pe JavaScript, dar există și alternative CSS-only.

Când un designer creează un meniu derulant, se poate gândi la complexitatea implementării acestuia prin cod. Un designer care înțelege ce elemente necesită JavaScript poate fi mai bine pregătit pentru a înțelege ce îi cer dezvoltatorilor să construiască.

Este posibil fără a învăța să scrie o singură linie de cod.

CSS este făcută stilul site-ului. Este mai mult decât statică în afară de animația CSS și CSS creează majoritatea imaginilor pe o pagină. Cele mai multe caracteristici dinamice sunt create cu JavaScript.

Dacă înțelegeți această diviziune, ea va respira un efort conștient în lucrarea de proiectare. De asemenea, va forța designerii de mișcări UX să ia în considerare cât de mult lucrează în animarea unei interfețe.

Tehnici receptive

Fiecare designer web ar trebui să cunoască cel puțin termenul design sensibil. Acest lucru permite site-urilor web adaptați la diferite dimensiuni ale ecranului, la fiecare dintre care aparține un alt aspect. Dimensiunile dispozitivului când se aplică un aspect nou sunt definite de puncte de întrerupere, adăugată în (unul din) fișierul (fișierele) CSS.

Punctele de blocare sunt specificate de a o anumită lățime a pixelilor (și / sau uneori înălțime), fie minim sau maxim, la care aspectul se adaptează pentru a se potrivi dimensiunii ecranului. Deci, un aspect receptiv va arăta diferit pe un monitor de 1080px decât pe un smartphone de 320px.

Pentru a vedea cum funcționează punctele de blocare pe site-urile reale, consultați site-ul Media Queries.

Treaba dvs. ca designer este de a lua în considerare modul în care fiecare punct de breakpoint ar putea influența mockup-ul. S-ar putea să aveți sarcina de a proiecta mai multe componente, fiecare care se potrivesc în diferite dimensiuni ale ecranului.

Odată ce ați înțeles că un punct de întrerupere CSS definește condițiile în care se modifică aspectul, veți avea mult mai ușor să livrați aceste active echipei dev.

Gândiți-vă modular cu modele

Dezvoltatorii întotdeauna doresc să codul de reutilizare cât mai mult posibil, deoarece această abordare dă dezvoltare mai puțin verbose și taie dimensiunile fișierelor - de fapt este o tehnică importantă de optimizare a codului.

Design modular descrie o metodă de creare a site-urilor din afara “module” asta poate fi reutilizate în timp. Gândiți butoanele, intrări de formulare, stiluri de rubrică sau bloccoturi cu stil de fantezie.

daca tu elemente de design modulare, devine mai ușor pentru dezvoltatori să codifice aspectul cu clase reutilizabile CSS. Este întotdeauna o idee bună să te gândești unde poți o reutilizare rezonabilă aceleași culori, texturi și elemente de pagină, totuși trebuie să fii inteligent în legătură cu asta pentru a nu prejudicia estetica generală.

Este chiar mai bine dacă tu adnota care elemente pe care le-ați copiat pe machete diferite, astfel încât dezvoltatorii pot marcați aceste părți ale site-ului cu codul repetat - făcând dezvoltarea mai rapidă și mai simplă.

Modulul modular se referă la design atomic, ambele abordări sunt mai degrabă orientate spre dezvoltatori. in orice caz vizualizare vă poate ajuta să înțelegeți cum funcționează codul, deci dacă vă luptați vizualizați designul modular consultați această postare pentru a vedea câteva exemple.

Înțelegeți imaginile Retina și SVG

De obicei este de datoria designerului să pregătească imagini, să capteze fotografiile necesare și să proiecteze icoane de la zero. Acest lucru înseamnă că designerii sunt singurii responsabili pentru livrarea bunurilor vizuale că dezvoltatorii cod în cele din urmă în aspect. De aceea este important să înțelegem dimensiunile retinei și a să păstreze activele cu retină la dezvoltatori, împreună cu macheta finală (e).

Mi-ar recomanda foarte bine acest articol Smashing Magazine dacă doriți să aflați mai multe despre fluxurile de lucru ale retinei. Retinize Este o colecție gratuită de acțiuni Photoshop care pot să creeze automat versiunile retinei din activele dvs..

Cei mai mulți designeri știu deja să sprijine @ 2x imagini, dar noile dispozitive iPhone 6+ au @ Rezoluții 3x. Cu toate acestea, unele proiecte nu se obosesc cu dimensiuni de imagine de 3x, deci discutați cu liderul proiectului înainte de a finaliza orice active.

Un ultim lucru de luat în considerare este avansarea SVG pe internet. Toate browserele moderne acceptă SVG, care este un formatul de imagine bazat pe vectori. Aceasta înseamnă icoane SVG scară automat fără pierderi de calitate, deci nu aveți nevoie de activele retinei pentru grafica SVG.

Nu toate echipele creative sunt dispuse să meargă cu SVG-uri pentru designul web. Acestea sunt susținute de browsere cu siguranță, dar în unele cazuri pot fi dificil de implementat. Acesta este motivul pentru care comunicarea este vitală pentru o relație de proiectant / dezvoltator de succes.

Discutați despre argumentele pro și contra de a folosi grafica vectorială și de a decide ce este mai bine pentru fiecare proiect. Doar prin înțelegerea acestor caracteristici veți putea să comunicați cu dezvoltatorii în mod clar și chiar să îi ajutați să codifice aspectul pentru suportul retinei.

Înțelegeți accesibilitatea

Îmbunătățire progresivă și degradare grațioasă sunt două moduri diferite de abordare a aceleiași probleme: accesibilitatea. Nu toți utilizatorii vor fi pe dispozitive sau vor rula browsere care acceptă 100% din caracteristicile dinamice ale unui site web.

Acești utilizatori ar trebui să obțină încă experiență care funcționează, iar acest lucru trebuie tratat cu o codificare corectă. Unii cititori de ecran ar putea ignora codul JavaScript și codul CSS, dar site-ul Web încă mai trebuie să funcționeze.

Recent am facut un post îmbunătățire progresivă în detaliu, deoarece este metoda mea preferată de dezvoltare. Îmbunătățire progresivă începe cu caracteristici de bază, apoi funcționează până la mai mult “avansat” caracteristici.

Degradare grațioasă este abordare opusă Unde toate caracteristicile principale sunt concepute în primul rând, apoi dezvoltatorul decide cum să se ocupe de aceste caracteristici dacă utilizatorul nu suportă JavaScript sau CSS.

Este puțin probabil ca un designer să fie rugat să facă mockups pentru oricare dintre aceste situații. Dar este important ca designerii să înțeleagă acești termeni și ce înseamnă ei, pentru că ei afectează procesul de dezvoltare. Acest lucru este valabil mai ales pentru proiectele în care accesibilitatea este o preocupare majoră.

În încheiere

Există câteva subiecte pe care le-am ignorat deoarece le consider opționale. Controlul versiunilor, manipularea erorilor și animațiile JavaScript sunt câteva subiecte mai complexe pe care designerii ar putea dori să le pătrundă.

Dar, în mod sincer, punctele abordate în acest post vor ajuta mai mult pe designeri să înțeleagă cerințele unei echipe de dezvoltare. Prin deplasarea doar a suprafeței de dezvoltare web vei face obține o perspectivă care vă vor ajuta să comunicați idei și să simpatizați cu problemele care apar în timpul producției.

Dacă căutați mai multe conținuturi similare, aruncați o privire la aceste postări:

• Cum să comunicați eficient cu dezvoltatorii (Smashingmagazine.com)
• Ajutați designerii și dezvoltatorii să învețe să înțeleagă reciproc (Uie.com)
• Învățarea la cod vă oferă avantaje ca designer UX (Jessicaivins.net)