Cum un singur inginer front-end poate înlocui o echipă de doi

Gândind cu două minți

Cererea în scena designului web s-a schimbat în ultimii ani: designerii cu abilități front-end și dezvoltatorii front-end cu abilități de design sunt din ce în ce mai solicitați. Da, ați putea argumenta că locurile de muncă sunt complet diferite – și poate că nu vă place nici unul dintre ele – dar adevărul să fie spus, în cei șase ani ai mei ca dezvoltator web independent și doisprezece ani ca designer, am am învățat că este mult mai greu să te descurci doar ca designer web sau doar ca dezvoltator front-end decât ca inginer front-end care cunoaște ambele roluri.

Purtarea ambelor pălării are o mulțime de avantaje: numai din perspectivă profesională, poți să găsești mai ușor de lucru și să percepi un tarif mai mare pentru că aduci mai mult la masă.

Dar lucrul ca inginer front-end hibrid are, de asemenea, câteva dezavantaje despre care trebuie să știi și despre cum să le rezolvi. În calitate de designer creativ, vă veți folosi „creierul drept”, jumătate responsabil pentru informațiile vizuale, spațiale și perceptuale – cu alte cuvinte, toate lucrurile frumoase în design web. În calitate de dezvoltator tehnic front-end, îți vei folosi „creierul stâng”, partenerul logic și analitic al artistului tău nebun din dreapta.

Și, din moment ce ești o singură persoană, asta înseamnă că lucrezi la două locuri de muncă total diferite în același timp, cu același creier – și asta poate deveni de-a dreptul confuz pentru creierul tău. Dacă nu vă puteți descurca, nu veți produce o muncă de calitate și nu vă veți atinge potențialul maxim. Și, dacă ești un freelancer care încearcă să fie la înălțimea unei fișe hibride de inginerie front-end, probabil că concurezi cu o echipă de doi (dezvoltator și designer), așa că va trebui să lucrezi în același interval de timp în timp ce păstrând calitatea. (Desigur, poți fi și plătit ca și cum ai fi o echipă de doi!)

A ști ce parte a creierului tău să folosești și când să o folosești este cheia pentru a-ți eficientiza procesele și pentru a produce cele mai bune rezultate, fără frustrare și timp suficient de folosit în termenul limită. Indiferent de locul în care vă lipsește, în stânga sau în dreapta, această postare vă va ajuta să înțelegeți abilitățile de care aveți nevoie și modalitățile în care le puteți dobândi.

O singură noapte cu proiectul dvs

Bine gata? Grozav! Să presupunem că vi s-a cerut să proiectați site-ul pentru miniCloud, un startup în devenire care oferă soluții VPS personalizate. De unde începi?

Înainte de a începe orice lucru „adevărat” la un proiect, îmi place să mă culc cu el. Aceasta înseamnă să faceți cercetări amănunțite despre produsul, serviciile, concurența, etc. ale clientului dvs. Pe scurt, Google la dracu. După aceea, gândește-te la proiect toată ziua: cum va arăta când vei termina cu el? Ia-l la cină și adormi cu noul tău design sexy în minte. În această etapă, aveți întotdeauna un creion (sau un telefon mobil) pregătit pentru a nota ideile pe măsură ce vă vin. Acest tip de lucru mental ajută de obicei la definirea aspectelor cheie ale procesului dumneavoastră.

Lasă-ți sucurile creative să curgă: procesul de proiectare

Acum că aveți câteva idei de construit, este timpul să începeți adevăratul proces de proiectare. Acesta constă din trei pași: 1) schiță, 2) cadru și 3) grafică. Aceasta este partea în care lași jumătatea artistică a creierului să-și facă treaba și să înnebunești cu creionul, hârtie și Photoshop.

În această etapă de proiectare, este esențial să lăsați partea „dezvoltatorului” să vă țină sub control, astfel încât să nu înnebuniți cu unele aspecte ale site-ului web care vor fi aproape imposibil de recreat rapid folosind HTML, CSS și jQuery. Dacă încerci să reinventezi browserul, dezvoltatorul tău front-end te va urî pentru asta. Și dezvoltatorul tău front-end ești tu — îți amintești?

Așadar, ghidați-vă de cele mai bune practici de web design (și de un pic de bun simț), pentru că este foarte puțin probabil că veți deschide noi baze prin reproiectarea site-ului de rochii de mireasă a prietenului dvs. Acest lucru nu înseamnă că nu ar trebui să urmăriți să creați un design fantastic și impresionant. Ci mai degrabă, veniți cu ceva ce știți că este fezabil. Proiectele care reinventează web-ul se desfășoară de obicei în timpul liber, fără un termen limită.

1. Schiță : Încep cu un caiet de hârtie pătrată și câteva creioane. Hârtia pătrată este deosebit de grozavă, deoarece o puteți folosi pentru modele bazate pe grilă. Nu vei avea nicio problemă mai târziu când vei traduce schița în wireframes și, la sfârșit, pe un site web bazat pe grilă. Pentru miniCloud, schița noastră ar putea arăta cam așa:

Vă rugăm să rețineți că detaliile suplimentare de pe schiță, cum ar fi zăpada, păsările și norii, sunt produsul amânării mele și nu sunt obligatorii în nicio parte a procesului dvs. de proiectare, dar arată bine.

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. Wireframe : Acum că avem o idee de bază despre cum va arăta site-ul nostru, este timpul să creăm wireframes pe care să le arătăm clientului. Există o mulțime de modalități de a realiza acest lucru. În unele cazuri, puteți sări peste pas cu totul dacă simțiți că nu este nevoie. Personal, folosesc Photoshop pentru a-mi modela ideea, deoarece este instrumentul cu care sunt cel mai familiarizat. Există o mulțime de kituri wireframe gratuite în .EPS sau .PSD care vă fac să începeți în câteva secunde, așa că nu este nevoie să vă creați și să desenați toate elementele de la zero. Există și câteva soluții online, dacă doriți să evitați Photoshop, dar sunt mai mult un tip offline. Oricum, extinzându-ne în afara schiței noastre, ne-am putea configura site-ul web astfel:

1. Grafică : Aceasta este partea mea preferată: să ne transformăm wireframe într-un site web frumos. Dar nu toți sunt eu. Dacă sunteți în principal un dezvoltator și aveți un talent slab pentru design, culori, tipografie etc., aș sugera să începeți cu alte site-uri web pentru inspirație pentru design. Sunt multe dintre ele și sunt acoperite de idei grozave — cine știe, poate că există un designer în tine care așteaptă să apară? Mi se pare util să păstrez un dosar cu marcaje de site-uri web pe care le consider deosebit de arătoase sau bine concepute. Picasso (?) a spus: „Artiștii buni copiază, dar artiștii mari fură” – asta nu înseamnă că iei designul altcuiva și îți pui autocolantul pe el. În schimb, inspiră-te din munca altcuiva și adaugă-ți propria întorsătură și abordare.

Îmi fac toată proiectarea în Photoshop. În mod ideal, clientul dvs. vă va furniza materii prime cu care să lucrați, cum ar fi fotografii și text de copiere pe care le puteți utiliza în loc de substituenți. Arată mult mai bine când îl trimiți la revizuiri.

 So, for step three, we take our wireframe and bring it to life: 

Apropo: dacă ajungeți să utilizați Photoshop, există o mulțime de resurse interesante care vă vor face procesul mult mai rapid, cum ar fi plug-in-urile și stilurile. Aș putea scrie o postare întreagă despre ele singur, așa că voi sublinia doar câteva pe care le folosesc des.

1. CSS3Ps : plug-in gratuit Photoshop bazat pe cloud care vă convertește straturile în CSS3.
2. Divine Elemente : creează teme WordPress direct din PSD-urile tale. Este grozav pentru a începe rapid proiectul dvs. WordPress. Deși spun „Nu sunt necesare abilități HTML”, veți avea nevoie de unele dacă doriți să obțineți rezultate extraordinare.
3. Modele subtile : colecție de modele gratuite pentru a le folosi în desenele dvs., de obicei ca fundal. Detalii ca acestea fac toată diferența atunci când încercați să vă duceți modelele de la bune la minunate.

„Slice It Up”: Procesul Front-End

După ce am terminat cu etapa de design și am primit un OK de la clientul fericit, sunt gata să-mi transform imaginile statice în site-uri web live. Amintiți-vă, în acest moment, designul nostru este încă doar atât: un design. Avem câteva drumuri de parcurs înainte ca acesta să fie gata pentru web.

În acest stadiu, este timpul să folosiți jumătatea stângă, mai analitică, a creierului.

În lumea designului web, ne referim la acest proces ca „slicing”. Deși termenul a fost mai precis în urmă cu ceva timp, înainte ca CSS să devină principalul bloc vizual al web-ului și să trebuiască să tăiați fiecare bucată mică din PSD sau PNG și să o puneți în tabele îngrozitoare, a rămas.

Dacă ești un designer web și nu știi încă cum să faci „front-end”, ai noroc – pentru că codarea poate fi învățată (spre deosebire de a avea un talent natural pentru design). V-aș recomanda să investiți în câteva tutoriale video online precum Lynda.com și să treceți peste elementele de bază ale dezvoltării front-end. (O listă mai definitivă de resurse poate fi găsită aici.) În câteva ore, veți trece de la zero la citirea codului. Și în câteva zile, o vei scrie singur. Și în câteva luni, veți deveni un maestru în HTML și CSS - atunci nu vă va opri când vine vorba de joburi de inginerie front-end.

Acum, dacă ați creat niște wireframes grozave (în etapa anterioară) conform unei grile cu care vă simțiți confortabil, veți ști exact cum doriți să fie codificat site-ul dvs. Cea mai rapidă modalitate ar fi să utilizați un fel de cadru front-end, cum ar fi Bootstrap.

Odată ce vă familiarizați cu designul bazat pe grilă, veți începe să vedeți fiecare parte a site-ului dvs. ca un grup de rânduri și coloane. Primul lucru pe care îl fac când îmi stabilesc structura HTML, înainte de a adăuga conținut real sau CSS, este să scriu în rânduri, apoi coloane, apoi lucruri de bază precum navigarea, urmate de substituenți de text și imagine. Acest lucru vă permite să coborâți mai întâi structura de bază și să construiți de acolo. Privind acest cadru, putem vedea șase rânduri:

1. Logo / Navigare
2. Glisor de imagine
3. Text introductiv
4. Imagini de categorie
5. Ultimele știri/oferte
6. Subsol

După ce le-am încadrat în structura HTML a Bootstrap, am avea ceva de genul acesta:

Multe site-uri web de bază folosesc același cod (sau similar) și, pe măsură ce lucrați la tot mai multe proiecte, veți vedea că dezvoltarea site-ului web este în mare parte un proces iterativ și nu are rost să scrieți același cod la fiecare iterație. . Acesta este motivul pentru care cadrele sunt utile! Indiferent dacă v-ați creat propriul dvs. sau ați decis să utilizați Bootstrap sau Foundation, nu contează. Ceea ce contează este că îl puteți menține mai târziu și îl puteți extinde dacă este necesar.

Aproape orice aveți nevoie pentru un proiect a fost făcut înainte și apoi refăcut de câteva ori. Deci, pentru orice sarcină majoră, căutați în jur și întrebați-i pe alții dacă au sugestii înainte de a trece cu capul întâi printr-un perete. Majoritatea cadrelor mari au comunități foarte active care creează cod și pluginuri suplimentare pentru a vă ușura munca. Așa că lucrează inteligent, nu din greu - și învață în fiecare zi. Și, dacă aveți nevoie de ceva pe care nimeni nu a mai construit-o înainte, ei bine, atunci deschideți un teren nou! Scrieți despre asta și împărtășiți comunității - vă va ajuta să creșteți ca designer și dezvoltator.

Alegerea unui CMS

Pentru unele proiecte de inginerie front-end, veți termina imediat ce designul dvs. există pe o pagină web live. Acestea sunt de obicei site-uri mai mici (de exemplu, pentru întreprinderi mici, avocați, stomatologi etc.). Dar de multe ori, dvs. sau clientul dvs. veți dori să aveți control asupra conținutului site-ului. În acest caz, aveți nevoie de un sistem de gestionare a conținutului (CMS). Scopul unui CMS este să vă permită să editați și să publicați conținut pe o pagină web fără a fi nevoie să codificați manual fiecare detaliu nou sau chiar să codificați deloc.

Dintre toate CMS-urile mari, m-aș numi un evanghelist WordPress: mă bucur de asta pentru alți dezvoltatori, în special pentru începători, datorită versatilității, ușurinței de utilizare, a documentației cuprinzătoare pentru dezvoltare, a comunității mari, a numărului mare de plug-in-uri gratuite, și așa mai departe, și așa mai departe...

Dacă cineva vă spune că Joomla! este mai bine, mai ales pentru proiecte mai mici - atunci nu știu despre ce vorbesc. Oricum, nu mă crede pe cuvânt: descărcați WordPress și Joomla! teme de pornire, aruncați o privire la fiecare folder și apoi întrebați-vă: pe care doriți să explorați în noul dvs. rol de front-end?

Aș avea nevoie de un articol întreg ca să scriu despre acest subiect, dar ai încredere în mine pe acesta, așa cum ai avea încredere în Baz Luhrmann pentru protecție solară.

Dacă proiectul dvs. este deosebit de mic și aveți nevoie doar de un CMS simplu care poate fi implementat fără abilități de codare, vă recomand să utilizați CouchCMS. Cu doar câteva etichete XHTML, îl puteți pune în funcțiune în câteva minute și chiar și bunica va ști cum să-l folosească.

Menținerea site-ului dvs. web

După ce ți-ai livrat site-ul web și ai un alt client mulțumit, tot ce-ți mai rămâne de făcut este să întreții site-ul. Dacă ați creat un site HTML simplu care nu va avea conținut nou, probabil că ați terminat.

Dacă ați folosit un CMS, va trebui să vă asigurați că tehnologia este mereu la zi, astfel încât să evitați orice încălcare a securității. Aceasta include CMS-ul în sine și orice plug-in-uri pe care le-ați folosit. Dacă ai urmat sfatul meu și ai folosit WordPress, vei fi notificat prin e-mail pentru fiecare actualizare disponibilă.

Acesta este stadiul procesului meu. Desigur, acest lucru nu va funcționa pentru toată lumea și cu siguranță nu se va aplica fiecărui proiect. Dar sper că acest lucru vă va ajuta, designerii de acolo, să dobândiți abilitățile de care aveți nevoie pentru a deveni ingineri front-end grozavi și invers, astfel încât să putem continua să ne dezvoltăm talentele ca dezvoltatori front-end.

Nu pot decât să-ți arăt ușa. Tu ești cel care trebuie să treacă prin ea. - Morpheus, Matrix

PS: Puteți găsi un PSD cu șablonul de mai sus și alte modele interesante în portofoliul meu dribbble.