Design VS Code – De ce ar trebui să meargă mână în mână?

Ar trebui designerii să se concentreze doar pe arta brandingului vizual al unui site web? Ar trebui ca dezvoltatorii să știe doar să codifice? Care este semnificația dezvoltării front-end în Drupal? Să găsim răspunsuri la toate întrebările tale în acest articol.

Când ne aprofundăm în această dilemă între design și cod, ne trece prin minte că ambele sunt, de fapt, complementare unul cu celălalt. Dar întrebarea este de ce? De ce designerii UI/UX trebuie să învețe codul și elementele fundamentale ale acestuia și același lucru este valabil și pentru dezvoltatori și în ceea ce privește designul.

Ambele domenii implică a fi creativ, a înțelege utilizatorii și comportamentul acestora. A fi un designer fără a cunoaște abilitățile de bază de codare și structura codului este ca și cum ai pregăti o prăjitură pe jumătate coaptă, care, după ce mănânci, te-ar putea duce la o băi.

Dar, în primul rând, să trecem la elementele de bază cu un exemplu.

Proiectare vs codificare: asemănarea cu o diferență

Pentru un scriitor, trebuie să-și imagineze și să-și încheie gândurile înainte de a le scrie efectiv. Nimeni nu ia doar un jurnal sau nu merge pe un blog sau pe o platformă de socializare și nu începe să scrie imediat. De aceea, întreaga procedură se numește compunere. Și da, scrierea unui e-mail în Gmail se mai numește și „compunere”. Acum, de ce vorbim despre scriitori, compoziții și tot. Să trecem la urmărire. În acest caz, imaginația este designul tău și a-ți însemna gândurile este dezvoltarea. Sper că acum ai o imagine mai bună; să trecem la o altă latură a acestui subiect.

Ar trebui designerii să învețe să codeze, iar dezvoltatorii să învețe despre UI/UX?

În timpul sprinturilor cu codul de proiectare, s-ar putea să întâlniți situații în care toate modelele create nu sunt fezabile. În cele din urmă, produsul final ajunge să fie o versiune modificată a designului original. Au loc discuții, clientul modifică cerințele, dar problema rămâne consistentă. Aceste situații pot fi evitate dacă echipele de proiectare și dezvoltare ar lucra împreună simultan de la bun început. În acest fel, munca devine mai eficientă, deoarece primesc feedback continuu unul de la celălalt cu privire la ceea ce este fezabil sau nu.

Înțelegerea ambelor domenii nu este atât de dificilă pe cât ați putea crede. În oricare dintre ele, este nevoie de imaginație, proces de gândire și practică. Și da, ca să nu mai vorbim, abilitățile fundamentale sunt designul și codul, care este o alegere de învățat, dar nu este obligatorie dacă știi una.

Un designer trebuie să cunoască fezabilitatea, posibilitatea și provocările unui design și nu poți ajunge să știi asta decât atunci când știi cum să realizezi acest lucru prin cod. Același lucru este valabil și pentru dezvoltatori. Când dezvoltatorii înțeleg diferitele scenarii prin care pot trece utilizatorii, experiența lor de utilizator, depanarea, soluția etc., poate simplifica și mai eficient lucrurile.

Iată motivele pentru care o persoană ar trebui să învețe elementele de bază ale oricăreia dintre abilități (cod sau design), în afară de expertiza sa de bază

1. Mai mult control asupra aspectului produsului: ceea ce înseamnă în esență că atunci când un dezvoltator știe cum funcționează analiza de proiectare și ce proces de proiectare este implicat, el poate adapta acele idei de design și poate avea mai mult control asupra produsului final și astfel rezultând o livrare mai rapidă a produsului.
2. Înțelegeți utilizatorii și aplicați acest lucru în design: atunci când un dezvoltator înțelege produsul din perspectiva unui utilizator, îi oferă acestuia/i o putere enormă de a construi ceva de care utilizatorii au cu adevărat nevoie și își doresc. De exemplu, el/ea va înțelege cum vor reacționa utilizatorii la diferite tipografii, diferite stiluri de butoane, scheme de culori etc.
3. Adaptarea designului: este la fel de important pentru designeri care știu să codeze. Când știe cum va fi structurat produsul proiectat în timpul dezvoltării, în mod ideal poate îmbunătăți designul și îl poate face mai eficient, reducând astfel timpul și efortul depus de dezvoltatori.

Elaborarea consecințelor de a avea doar expertiza de bază cu Exemple

Pentru o mai bună înțelegere a motivului pentru care proiectarea și codarea ar trebui să meargă mână în mână, să ne aruncăm în câteva exemple.

Cele de mai sus este un exemplu clasic de utilizare a structurii non-secvențiale. Aici structura este reordonată în timp ce este dezvoltată pentru mobil. Aceasta nu este doar o practică proastă; este, de asemenea, consumatoare de timp și greoaie. Cu toate acestea, dacă un designer ar fi știut structura codului în curs de dezvoltare, ar fi putut fi ușor și posibil evitată.

Luați în considerare acest exemplu de mai sus de suprapunere pop-up cu un scroll. O suprapunere pop-up este concepută astfel încât să distragă atenția utilizatorului către un singur subiect și este folosită doar ca focalizare atunci când o anumită informație trebuie afișată. Aici, suprapunerea pop-up-ului are un defilare în fundal care ar putea distrage atenția utilizatorului și s-ar putea să nu se dovedească că fereastra pop-up este ineficientă

Un dezvoltator se concentrează întotdeauna pe finalizarea sarcinii mai eficient și într-un ritm mai rapid și, în acest proces, ratează unele aspecte ale designului, ceea ce poate crede că este inutil sau ar putea fi realizat prin modificarea puțin designului. Exemplul de mai sus arată scenariul exact când un dezvoltator își face treaba, dar ajunge să compromită designul. Deci, dacă dezvoltatorul ar fi avut o expunere la UI/UX de bază, această problemă ar fi putut fi evitată cu ușurință.

Ca un alt exemplu, să luăm capturile de ecran de mai sus care provin dintr-o aplicație de economisire a banilor. Sarcina în sine nu are niciun câmp de intrare pentru o semnătură digitală. De asemenea, la trimiterea formularului, mesajul de eroare nu oferă utilizatorului nicio îndrumare sau sugestie cu privire la modul de obținere a unei semnături digitale valide. Dacă un dezvoltator cunoștea elementele de bază ale UI/UX, el ar fi putut ghida cu ușurință utilizatorul în procesul următor sau ar fi putut afișa mesajul într-un mod mai simplu, cu o referință adecvată la câmp sau sugestii.

Unde să încep?

A începe este întotdeauna o idee bună. Pentru designeri, elementele de bază de învățat sunt HTML, CSS și puțin JS/jQuery. Există o mulțime de platforme de învățare online și site-uri web cu instrumente IDE live pe care le puteți exersa și învăța.

HTML: Structura de bază a oricărui design este pe primul loc și este codul oricărui produs.
JS/jQuery: Sliderele, ferestrele pop-up, drop-down-urile și multe altele pot fi realizate cu acestea
Sandbox : instrument live pentru a te juca cu codul tău
CSS/SCSS : Stilul structurii este un proces creativ și îl puteți realiza prin CSS/SCSS
W3Schools: O platformă simplă de învățare online și una bună pentru a începe
Codrops (Tympanus): O bibliotecă vastă cu mintea de proiectare și dezvoltatori pe aceeași platformă

Pentru dezvoltatori, puteți începe urmând cele mai bune practici despre UI/UX cu -
Behance: stivă completă de design pentru portofoliu profesional și inspirație
Dribbble: idei de design pentru a posta și pentru a vă inspira
Muzli: Bloguri, inspirații, idei
Mediu: Bloguri despre orice domeniu (aproape), cele mai bune practici și tutoriale
Awwwards: site-uri web nominalizate pentru cel mai bun design și câștigători cu care să se inspire
XD/Figma/Sketch: instrumente pentru a proiecta machete, wireframes pentru UI/UX

Pentru designeri

Pentru Dezvoltatori

Dezvoltare front-end în Drupal

Drupal 8 ca CMS este un cadru de management al conținutului foarte prietenos cu UI/UX, deoarece are multe de oferit imediat, cel mai important fiind varietatea de teme disponibile și design-uri responsive. Desigur, există multe alte funcții la care mă pot gândi chiar acum, dar hai să păstrăm asta pentru o altă zi.

În timp ce designerii UX își aplică abilitățile creative și se concentrează pe prezentarea vizuală a unui site web Drupal, dezvoltatorii Drupal front-end creează diferența dintre designerii UX și dezvoltatorii Drupal back-end. Ei sunt cei care implementează componentele vizuale livrate de designer într-un site web Drupal. Deși atât designerul UX, cât și dezvoltatorul front-end Drupal gândesc în termeni de experiență a utilizatorului și de rezolvare a problemelor legate de UX, aceștia adoptă abordări diferite pentru a le rezolva. Acesta din urmă, însă, găsește întotdeauna o rezoluție prin cod.
Dezvoltatorii Drupal front-end sunt responsabili pentru furnizarea de site-uri web frumoase Drupal lucrând la și personalizând temele Drupal. Ei ar trebui să fie capabili să rezolve problemele front-end pentru care ar trebui să fie echipați cu cunoștințe despre PHP, CSS, jQuery, CSS, HTML și, cel mai important, proiectarea site-urilor mobile-first.

Odată cu popularitatea tot mai mare a site-urilor web Drupal fără cap și a arhitecturii decuplate, dezvoltatorii Drupal front-end care au o înțelegere a cadrelor de dezvoltare frontend precum Angular, ReactJS, Vue.js au întotdeauna un avantaj competitiv.
Deci, una peste alta, pentru a putea excela în dezvoltarea front-end Drupal, trebuie să ieși din zona de confort și să învețe cum pot crea și implementa cel mai bine experiențe digitale moderne echipate cu cele mai noi tehnologii.