Școala Web

Cum am făcut un site pentru client

Cum am făcut un site pentru client

Echipa de la Programming Gurus vă prezintă un studiu de caz despre primul nostru proiect pentru un client extern. Fie că vrei să vezi un mod de lucru profesionist, sau vrei să lucrezi cu noi, sperăm că această poveste vă va ajuta.

Echipa Programming Gurus, care întreține Școala Web, este condusă de Cornel, un programator cu peste 11 ani de experiență. La acest proiect au lucrat Nico (Design și Development), Octavian (Dev), și Simina (Design), tehnic juniori, dar cu mult potențial.

În cei 11 ani, Cornel a lucrat în mare parte la proiecte corporate, care au nevoie să fie stabile și eficiente. Programming Gurus și Școala Web reprezintă dorința de a face și proiecte pentru publicul larg. Proiectul Pat's Cabin a fost făcut pentru un fost șef al lui Cornel, Jim. Ca firmă de software nouă, practic fără experiență în auto-promovare, se dovedește foarte greu să găsim clienți altfel decât prin cunoștințe.

Dacă ești la început și vrei să faci freelancing într-o zi, nu neglija partea de networking. Păstrează legătura cu cât mai mulți colegi, șefi, sau pur-și-simplu oameni pe care îi întâlnești la diferite ocazii. Atunci când te desparți de la un loc de muncă, din orice motiv, nu arde poduri. Nu vei ști niciodată ce oportunități pot apărea.

Analiza proiectului

Jim este unul dintre cei mai buni clienți pe care îi poți avea. Chiar și așa, am avut nevoie de câteva ședințe pentru a clarifica dorințele. Ca programatori și designeri, suntem obligați să avem o imaginație bogată, așa că ne e greu să concepem că nu toți au așa ceva. Uneori, oricât i-ai povesti unui client, nu va înțelege până nu îi arăți măcar o schiță.

Am făcut o primă schiță de design, pe baza informațiilor pe care le aveam în acel moment: Jim voia un site de prezentare pentru o cabană pe care o închiriază, cu multe poze, video-uri, și să se poată face închirieri. Nu am folosit nimic de acolo. Pe baza acelei schițe, Jim a putut să ne dea mai multe informații: că își dorește ceva care să atragă atenția, dar este și puțin conservator.

Prima versiune de design a Pat's Cabin

Având aceste detalii, am putut să estimăm de cât timp avem nevoie pentru a realiza proiectul, și să negociem cu Jim. În contract am detaliat toate serviciile pe care le-am agreat. Uneori poate părea că am intrat în prea multe detalii, dar acesta este un mecanism de protecție împotriva abuzurilor.

Chiar și în acest caz au mai apărut cerințe pe parcurs. Însă am reușit să le adaptăm astfel încât să nu fie nevoie de re-negociere. Ca exemplu este când ni s-a cerut să facem un formular de contact și am adaptat formularul de la rezervări.

Altă cerință care a venit târziu a fost de a face o interfață de administrare. Însă aceasta a venit aproape de finalizarea proiectului, în condițiile în care am specificat clar în contract (pe lângă faptul că i-am spus și verbal lui Jim) că trebuie să știm dacă își dorește asta încă de la începutul dezvoltării.

Cerințe găsite de noi

Oricât de multe ar ști un client, e probabil să nu poată să exprime toate cerințele unui proiect. O echipă de dezvoltare trebuie să identifice inclusiv dorințele pe care clientul nici nu știe că le are. Ideal ar fi cineva din echipă dedicat pentru asta.

Prima cerință pe care am identificat-o noi a fost aceea de a poziționa site-ul mai bine în rezultatele Google. Chiar dacă traficul din această sursă nu e esențial pentru Jim, era puțin trist că la o căutare simplă „Pat's Cabin” primul rezultat era AirBNB. Motivul pentru care Jim și-a dorit site a fost tocmai pentru a evita să mai plătească la AirBNB comision. La câteva săptămâni de la publicare, site-ul a ajuns pe prima poziție. Probabil ar fi ajuns mai devreme dacă nu era altă versiune a site-ului salvată de Google.

Apoi, din faptul că se dorea un site cu multe poze, ne-am dat seama că trebuie să avem grijă să optimizăm site-ul astfel încât această cerință să nu-l îngreuneze. Am făcut astfel încât imaginile să se încarce inteligent doar atunci când sunt vizibile pe ecran, și mereu la rezoluție potrivită.

Nu în ultimul rând, site-ul urma să primească input de la utilizatori, la rezervare și prin formularul de contact. În asemenea cazuri, știam că pot fi o problemă boții care trimit formulare de pe site-uri. Din modul în care am construit site-ul, versiunile clasice ale unor asemenea boți nu ar fi funcționat. Ca să fim și mai siguri, am folosit și clasicul serviciu de Recaptcha de la Google. În ultima versiune, acesta nu mai are nevoie ca utilizatorul să identifice imagini, ci funcționează automat. De fapt funcționează atât de bine încât ne-a blocat și nouă formularele de câteva ori.

Modul de lucru

Cum nici noi nu suntem experți în cabane la munte, ne așteptăm ca nici clientul să nu știe suficient despre web-development. Așa că îi protejăm de deciziile tehnice pentru care nu au calificarea să le ia. Le răspundem la orice întrebări, le explicăm orice vor să știe, și le luăm sugestiile în considerare. Dar deciziile tehnice noi le luăm și ni le asumăm.

Deși cunoșteam că Jim mai cunoaște câteva chestii tehnice, pentru acest proiect am colaborat cum ne-am dori să colaborăm cu orice client:

  1. Am clarificat specificațiile proiectului.

  2. Am făcut câteva concepte grafice (design-uri) din care clientul a ales unul.

  3. S-a făcut design pentru întregul site în Figma, cu prototip atunci când s-a putut. Clientul a avut acces la fiecare pagină de îndată ce a fost finalizată.

  4. Design-ul a fost discutat și aprobat.

  5. În urma aprobării design-ului, am început implementarea.

  6. Atunci când am avut un site cât-de-cât funcțional, chiar dacă nu complet, l-am arătat clientului.

  7. Pe baza dorinței clientului, am configurat serviciul de găzduire în numele său.

  8. Am publicat site-ul și am dat clientului acces la cod.

  9. Am înregistrat site-ul pe motoarele de căutare Google și Bing.

Alte variante de design pe care le-am avut. În versiunea finală, am împrumutat idei de la mai multe.

De ce nu am folosit editoare grafice?

Fiind un proiect foarte mic, poate fi făcut în multe feluri. Acum câțiva ani, e posibil să fi încercat să îl facem în Wordpress. Însă modul în care funcționează Wordpress nu se mai potrivește Web-ului zilelor noastre. L-am putea folosi ca interfață de administrare, dar nu și pentru site-ul public.

O alternativă interesantă ar fi platforme precum Squarespace sau Wix, care îți permit să desenezi site-ul cu o interfață vizuală. Ar fi fost o opțiune interesantă dacă aveam experiență cu aceste platforme. Or fi suficient de ușor de folosit pentru cei care nu știu HTML, CSS și JS, care poate nici nu știu foarte clar ce vor. Dar noi aveam o viziune destul de clară asupra a ce vrem să facem, și știam cum se face cu tehnologiile ce ne erau deja familiare.

Cea mai mare problemă a Squarespace sau Wix este că te fac să depinzi de o platformă privată. Dacă mâine Squarespace nu mai există, iar tu știi să faci doar site-uri în Squarespace, va trebui să consumi timp pentru a te adapta la altă platformă. Fiind o companie, poate să dispară de la o zi la alta. HTML, CSS, și JS, sunt limbajele pe care funcționează web-ul - poate vor dispărea într-o zi, dar vom avea timp suficient să ne adaptăm.

Am ales să folosim ceea ce știam deja la alte proiecte: Vue prin Nuxt, și câteva biblioteci mai mici.

Epilog

Ne-a făcut plăcere să realizăm site-ul Pat's Cabin pentru Jim. A fost un proiect relativ simplu, față de altele la care am lucrat și lucrăm, precum Școala Web, sau Miorița.

Dacă vrei să lucrezi cu noi, ne poți lăsa un mesaj pe email: contact@programminggurus.ro.

Dacă ești la început de carieră, sau te gândești să faci freelancing, sperăm că acest articol te-a ajutat să vezi un exemplu cum se lucrează un site simplu pentru clienți.

Designed by