Radim kao front-end developer oko dvije godine i učestvovao sam u kreiranju širokog spektra projekata. Jedna od lekcija koju sam naučio je da suradnja između različitih timova programera koji dijele isti cilj, ali imaju različite zadatke i odgovornosti nije laka.
Uz konsultacije sa ostalim članovima tima, dizajnerima i programerima, kreirao sam ciklus kreiranja web stranica dizajniran za male timove (5-15 ljudi). Uključuje alate kao što su Confluence, Jira, Airtable i Abstract. U ovom članku ću podijeliti karakteristike organizacije toka posla.
Skillbox preporučuje: Dvogodišnji praktični kurs .
Podsećamo: za sve čitaoce "Habra" - popust od 10 rubalja pri upisu na bilo koji Skillbox kurs koristeći "Habr" promotivni kod.
Zašto je sve ovo potrebno?
Minimalni tim potreban za kreiranje web stranice od nule je dizajner, programer i projekt menadžer. U mom slučaju, tim je formiran. Ali nakon objavljivanja nekoliko stranica, imao sam osjećaj da nešto nije u redu s tim. Ponekad jednostavno nismo u potpunosti razumjeli svoje odgovornosti, a komunikacija s klijentom ostavljala je mnogo željenog. Sve je to usporavalo proces i uznemiravalo sve.
Počeo sam da radim na rešavanju problema.
Google pretraga daje dobre rezultate o našem problemu.
Da bi posao učinio vizualnijim, napravio sam dijagram toka posla koji daje razumijevanje kako se ovdje radi.
Kliknite na sliku za otvaranje u punoj rezoluciji.
Ciljevi i ciljevi
Jedna od prvih tehnika koju sam odlučio testirati bio je “kaskadni model” (Waterfall). Koristio sam ga da istaknem probleme i shvatim kako ih riješiti.
Problem: Klijent najčešće ne evaluira proces kreiranja web stranice modularno, kao što to rade programeri. On ga doživljava kao običan sajt, odnosno razmišlja o pojedinačnim stranicama. Po njegovom mišljenju, dizajneri i programeri kreiraju pojedinačne stranice, jednu za drugom. Kao rezultat toga, kupac jednostavno ne razumije šta slijedi u toku samog procesa.
Zadatak: Nema smisla uvjeravati klijenta u suprotno, najbolja opcija je razviti modularni proces izrade web stranice unutar kompanije po modelu stranica po stranicu.
Tokenima i komponentama univerzalnog dizajna upravljaju i programeri i dizajneri.
Problem: Ovo je uobičajena situacija s kojom se rješavaju mnoge strategije. Postoji mnogo zanimljivih rješenja, u većini slučajeva se predlaže stvaranje sistema dizajna koji kontrolira stilski vodič / generatori biblioteke. Ali u našoj situaciji, dodavanje još jedne komponente u proces razvoja koja bi nam omogućila da upravljamo nivoima pristupa za dizajnere jednostavno nije bilo moguće.
Zadatak: izgradnja univerzalnog sistema u kojem dizajneri, programeri i menadžeri mogu raditi sinhrono bez ometanja jedni drugih.
Precizno praćenje razvoja
Problem: Iako postoji mnogo korisnih alata dostupnih za praćenje problema i mjerenje ukupnog napretka, većina njih nije fleksibilna ili optimalna. Alat može biti koristan uštedom vremena tima koje bi se inače trošilo na pitanja i pojašnjenja određenih zadataka. Također olakšava život menadžerima dajući im preciznije razumijevanje cijelog projekta.
Zadatak: kreirajte kontrolnu tablu za praćenje napretka zadataka koje obavljaju različiti članovi tima.
Set alata
Nakon eksperimentiranja s različitim alatima, odlučio sam se za sljedeći set: Confluence, Jira, Airtable i Abstract. U nastavku ću otkriti prednosti svakog od njih.
Sotočje
Uloga alata: centar informacija i resursa.
Confluenceov radni prostor je relativno jednostavan za postavljanje, ima mnogo funkcija, integracije s različitim aplikacijama i ima individualne, prilagodljive šablone. To nije rješenje za sve, ali je idealno kao centar informacija i resursa. To znači da se svaka referenca ili tehnički detalj u vezi sa projektom mora unijeti u bazu podataka.
Alat vam omogućava da pravilno dokumentirate svaku komponentu i sve druge detalje o projektu.
Glavna prednost Confluencea je prilagođavanje šablona dokumenata. Osim toga, može se koristiti za implementaciju jedinstvenog spremišta specifikacija i različite projektne dokumentacije, odvajajući nivoe pristupa učesnika. Sada ne morate da brinete da imate staru verziju specifikacije pri ruci, kao što se dešava kada dokumente šaljete e-poštom.
Više informacija o alatu .
Jira
Uloga alata: praćenje problema i upravljanje zadacima.
Jira je vrlo moćan alat za planiranje i upravljanje projektima. Glavni dio funkcionalnosti je kreiranje prilagodljivih tokova posla. Da bismo efikasno upravljali problemima (što nam je potrebno), vredi obratiti posebnu pažnju na ispravnu upotrebu tipa zahteva i tipa problema (tip problema).
Dakle, da bi bili sigurni da programeri grade komponente na osnovu ispravnog dizajna, moraju biti obaviješteni svaki put kada se nešto promijeni u dizajnu. Čim se komponenta ažurira, dizajner treba da otvori problem, dodijeli odgovornog programera, dodijelivši mu ispravan tip problema.
Uz Jira možete biti sigurni da apsolutno svi učesnici u procesu (da podsjetim, u našem slučaju ih je 5-15) dobiju ispravne zadatke koji se ne izgube i pronađu svog izvršioca.
Saznajte više o Jira .
Airtable
Uloga alata: upravljanje komponentama i tabla za napredak.
Airtable je mješavina proračunskih tabela i baza podataka. Sve ovo omogućava prilagođavanje rada svih gore navedenih alata.
Primjer 1: Upravljanje komponentama
Što se tiče generatora vodiča za stil, on nije uvijek pogodan za korištenje - problem je što ga dizajneri ne mogu uređivati. Osim toga, ne bi bila dobra odluka koristiti biblioteku komponenti Sketch, jer ona ima mnoga ograničenja. Najvjerovatnije jednostavno nećete moći koristiti ovu biblioteku izvan programa.
Airtable također nije savršen, ali je bolji od mnogih drugih sličnih rješenja. Evo demo predloška tablice upravljanja komponentama:
Kada programer prihvati komponentu dizajna, on procjenjuje rezultirajući ABEM tako što bilježi komponentu u tablicu. Ukupno ima 9 kolona:
- Naziv - naziv komponente prema ABEM principu.
- Pregled – Ovdje se postavlja ili snimak ekrana ili slika komponente preuzete iz drugog izvora.
- Povezana stranica je veza do stranice komponente.
- Podređena komponenta - veza do podređenih komponenti.
- Modifikator - provjerava prisutnost stilskih opcija i definira ih (na primjer, aktivno, crveno, itd.).
- Kategorija komponente je opšta kategorija (tekst, promotivna slika, bočna traka).
- Status razvoja - stvarni razvojni napredak i njegova definicija (završeno, u toku, itd.).
- Odgovorni - programer koji je odgovoran za ovu komponentu.
- Atomski nivo je atomska kategorija ove komponente (prema konceptu atomskog dizajna).
- Podaci se mogu referencirati u istoj ili u različitim tabelama. Povezivanje tačaka će spriječiti zabunu prilikom skaliranja. Osim toga, podaci se mogu filtrirati, sortirati i mijenjati bez ikakvih problema.
Primjer 2: napredak razvoja stranice
Za procjenu napretka razvoja stranice potreban vam je predložak koji je kreiran posebno za tu svrhu. Stol može poslužiti i potrebama samog tima i klijenta.
Sve informacije o stranici mogu se označiti ovdje. Ovo je rok, veza do InVision prototipa, odredište, podređena komponenta. Odmah postaje uočljivo da su operacije veoma zgodne za izvođenje, kako u pogledu dokumentovanja i ažuriranja dizajna, tako iu pogledu statusa front-end i back-end razvoja. Štaviše, ove operacije se izvode istovremeno.
sažetak
Uloga alata: jedan izvor kontrole verzija za sredstva dizajna.
Apstrakt se može nazvati GitHub za sredstva u Sketch-u i štedi dizajnere od potrebe da kopiraju i lijepe datoteke. Glavna prednost alata je u tome što pruža dizajnersko spremište koje djeluje kao „jedinstveni izvor istine“. Dizajneri moraju ažurirati glavnu granu na najnoviju verziju odobrenog izgleda. Nakon toga moraju obavijestiti programere. Oni bi, zauzvrat, trebali raditi samo sa dizajnerskim sredstvima iz glavne grane.
Kao zaključak
Nakon što smo implementirali novi razvojni proces i sve gore navedene alate, brzina našeg rada se povećala najmanje dva puta. Nije savršeno rješenje, ali je vrlo dobro. Istina, da bi to funkcioniralo, morate uložiti mnogo truda - potreban je "ručni rad" da se sve ažurira i održava u radnom stanju.
Skillbox preporučuje:
- Praktični kurs .
- Online kurs .
- Praktična godina kursa .
izvor: www.habr.com