Работя като front-end разработчик от около две години и съм участвал в създаването на голямо разнообразие от проекти. Един от уроците, които научих, е, че сътрудничеството между различни екипи от разработчици, които споделят една и съща цел, но имат различни задачи и отговорности, не е лесно.
В консултация с други членове на екипа, дизайнери и разработчици, създадох цикъл за създаване на уебсайт, предназначен за малки екипи (5-15 души). Той включва инструменти като Confluence, Jira, Airtable и Abstract. В тази статия ще споделя характеристиките на организирането на работния процес.
Skillbox препоръчва: Двугодишен практически курс .
Напомняме ви: за всички читатели на "Habr" - отстъпка от 10 000 рубли при записване във всеки курс Skillbox, използвайки промоционалния код на "Habr".
Защо е необходимо всичко това?
Минималният екип, необходим за създаване на уебсайт от нулата, е дизайнер, програмист и ръководител на проекта. В моя случай екипът беше сформиран. Но след пускането на няколко сайта имах чувството, че нещо не е наред с него. Понякога просто не разбирахме напълно отговорностите си и комуникацията с клиента остави много да се желае. Всичко това забавяше процеса и смущаваше всички.
Започнах да работя по разрешаването на проблема.
Търсене в Google дава добри резултати по нашия проблем.
За да направя извършената работа по-визуална, създадох диаграма на работния процес, която дава представа как се извършва работата тук.
Кликнете върху изображението, за да го отворите в пълна резолюция.
Цели и цели
Една от първите техники, които реших да тествам, беше „каскадният модел“ (Водопад). Използвах го, за да подчертая проблемите и да разбера как да ги разреша.
Проблем: Най-често клиентът не оценява процеса на създаване на уебсайт модулно, както правят разработчиците. Той го възприема като обикновен сайт, тоест мисли в рамките на отделни страници. Според него дизайнерите и програмистите създават отделни страници една след друга. В резултат на това клиентът просто не разбира какво следва по време на същинския процес.
Задача: Няма смисъл да убеждавате клиента в противното, най-добрият вариант е да разработите модулен процес за създаване на уеб сайт в рамките на компанията по модел страница по страница.
Токените и компонентите на универсалния дизайн се управляват както от разработчици, така и от дизайнери.
Проблем: Това е често срещана ситуация, с която се справят много стратегии. Има много интересни решения, в повечето случаи се предлага да се създаде система за дизайн, която се контролира от ръководство за стил / генератори на библиотека. Но в нашата ситуация добавянето на друг компонент към процеса на разработка, който би ни позволил да управляваме нивата на достъп за дизайнерите, просто не беше възможно.
Задача: изграждане на универсална система, в която дизайнери, разработчици и мениджъри могат да работят синхронно, без да си пречат.
Точно проследяване на развитието
Проблем: Въпреки че има много полезни инструменти за проследяване на проблеми и измерване на цялостния напредък, повечето не са гъвкави или оптимални. Инструментът може да бъде полезен, като спести време на екипа, което обикновено би било изразходвано за въпроси и разяснения по конкретни задачи. Освен това улеснява живота на мениджърите, като им дава по-точно разбиране на целия проект.
Задача: създайте табло за проследяване на напредъка на задачите, изпълнявани от различни членове на екипа.
комплект инструменти
След като експериментирах с различни инструменти, се спрях на следния набор: Confluence, Jira, Airtable и Abstract. По-долу ще разкрия предимствата на всеки от тях.
Сливане
Роля на инструмента: информационен и ресурсен център.
Работното пространство на Confluence е сравнително лесно за настройка, има много функции, интеграции с различни приложения и има индивидуални шаблони с възможност за персонализиране. Това не е универсално решение, но е идеално като информационен и ресурсен център. Това означава, че всяка справка или технически подробности, свързани с проекта, трябва да бъдат въведени в базата данни.
Инструментът ви позволява да документирате правилно всеки компонент и всякакви други подробности за проекта.
Основното предимство на Confluence е персонализирането на шаблоните на документи. Освен това може да се използва за реализиране на единно хранилище на спецификации и различна проектна документация, разделяйки нивата на достъп на участниците. Сега не е нужно да се притеснявате, че имате под ръка стара версия на спецификацията, както се случва, когато изпращате документи по имейл.
Повече информация за инструмента .
Jira
Роля на инструмента: наблюдение на проблеми и управление на задачи.
Jira е много мощен инструмент за планиране и управление на проекти. Основната част от функционалността е създаването на персонализирани работни процеси. За да управляваме ефективно проблемите (от което се нуждаем), си струва да обърнем специално внимание на правилното използване на типа на заявката и типа на проблема (тип проблем).
Така че, за да сме сигурни, че разработчиците изграждат компоненти въз основа на правилния дизайн, те трябва да бъдат уведомявани всеки път, когато нещо се промени в дизайна. Веднага след като компонентът бъде актуализиран, дизайнерът трябва да отвори проблем, да назначи отговорен разработчик, като му присвои правилния тип проблем.
С Jira можете да сте сигурни, че абсолютно всички участници в процеса (нека ви напомня, в нашия случай те са 5–15) получават правилни задачи, които не се губят и намират своя изпълнител.
Научете повече за Jira .
Airtable
Роля на инструмента: управление на компоненти и табло за прогрес.
Airtable е смесица от електронни таблици и бази данни. Всичко това дава възможност за персонализиране на работата на всички инструменти, обсъдени по-горе.
Пример 1: Управление на компоненти
Що се отнася до генератора на ръководство за стил, той не винаги е удобен за използване - проблемът е, че дизайнерите не могат да го редактират. Освен това не би било добро решение да използвате библиотеката с компоненти на Sketch, тъй като тя има много ограничения. Най-вероятно просто няма да можете да използвате тази библиотека извън програмата.
Airtable също не е перфектен, но е по-добър от много други подобни решения. Ето демонстрация на шаблона за таблица за управление на компоненти:
Когато разработчикът приеме компонент на дизайна, той оценява получения ABEM, като записва компонента в таблица. Има общо 9 колони:
- Име - името на компонента според принципа ABEM.
- Преглед – Това е мястото, където се поставя екранна снимка или изображение на компонента, изтеглен от друг източник.
- Свързаната страница е връзка към страница на компонент.
- Дъщерен компонент - връзка към дъщерни компоненти.
- Модификатор - проверява за наличието на стилови опции и ги дефинира (например активен, червен и т.н.).
- Категорията на компонента е обща категория (текст, промоционално изображение, странична лента).
- Състояние на разработката - действителният напредък на разработката и нейното определение (завършено, в процес и т.н.).
- Отговорен - разработчикът, който отговаря за този компонент.
- Атомното ниво е атомната категория на този компонент (според концепцията за атомен дизайн).
- Данните могат да бъдат посочени в една и съща или в различни таблици. Свързването на точките ще предотврати объркване при мащабиране. В допълнение, данните могат да бъдат филтрирани, сортирани и променяни без никакви проблеми.
Пример 2: напредък в разработката на страницата
За да оцените напредъка на разработката на страницата, имате нужда от шаблон, който е създаден специално за тази цел. Масата може да обслужва както нуждите на самия екип, така и на клиента.
Всяка информация за страницата може да бъде маркирана тук. Това е краен срок, връзка към прототипа на InVision, дестинация, дъщерен компонент. Веднага се забелязва, че операциите са много удобни за изпълнение, както по отношение на документирането и актуализирането на дизайна, така и по отношение на състоянието на разработката на предния и задния край. Освен това тези операции се извършват едновременно.
абстрактен
Роля на инструмента: един източник на контрол на версиите за дизайнерски активи.
Abstract може да се нарече GitHub за активи в Sketch и спестява на дизайнерите необходимостта да копират и поставят файлове. Основното предимство на инструмента е, че предоставя хранилище за дизайн, което действа като „единствен източник на истина“. Дизайнерите трябва да актуализират основния клон до най-новата версия на одобреното оформление. След това те трябва да уведомят разработчиците. Те от своя страна трябва да работят само с дизайнерски активи от основния бранш.
Като заключение
След като внедрихме новия процес на разработка и всички инструменти, споменати по-горе, скоростта на нашата работа се увеличи поне два пъти. Не е идеалното решение, но е много добро. Вярно е, че за да работи, трябва да положите много усилия - изисква се „ръчна работа“, за да актуализирате и поддържате всичко в работно състояние.
Skillbox препоръчва:
- Практически курс .
- Онлайн курс .
- Практически годишен курс .
Източник: www.habr.com