Про порядок розробки сайту

Ролі розробників.

Можна виділити членів команди розробки сайту, а це: Проєкт-менеджер (Project Manager – PM), веб-дизайнер, html-верстальник він же front-end developer, програміст, тестувальник.

Тепер докладніше про кожен, їх взаємозамінність.

Проект-менеджер (Project Manager – PM)

Розробка сайту починається з того моменту, коли клієнт звертається до веб-студії, digital агенції або будь-якої іншої компанії, яка пропонує йому створити сайт. Проект-менеджер (Project Manager – PM) надсилає клієнту бриф (анкета, опитувальник – називають по різному) на розробку сайту, яку заповнює клієнт. Саме на основі опитувальника складається технічне завдання (ТЗ) на розробку сайту.

Після цього можна зробити остаточну оцінку робіт і встановлюються терміни на розробку. Приблизну оцінку можна сказати тільки на основі подібних проектів, тож якщо фіксується ціна до брифу, то, найімовірніше, ціна вказана з чималим запасом або просто взята “зі стелі”.

Сам по собі Проект-менеджер (PM) – це людина, яка взаємодіє як з командою, так і з клієнтом, слідкує за термінами та за виконанням усіх вимог, прописаних у ТЗ. Крім цього, знає методи управління проектами, такі як Waterfall, Agile, Scrum, Kanban та інше. Але важливо не плутати з менеджером по роботі з клієнтом, це абсолютно дві різні людини. Менеджер по роботі з клієнтом тільки комунікує з клієнтом, не знає технічної частини, як правило, дуже сильно ускладнює всім життя, якщо його ставлять на управління проектом – а це буває дуже часто. Тому ще дійсно досвідчений ПМ коштує дуже дорого.

Scram-мастер відповідно до специфікації Agile це не ПМ, це людина, яка слідкує за додержанням командою вимог до Agile. На відміну від Scrum-мастера, основна функція ПМ це контроль. Контроль строків, вимог, якості.

Веб-дизайнер

Після узгодження ТЗ потрапляє до веб-дизайнера, який на основі ТЗ готує растрові дизайн-макети. Але не плутайте з графічним дизайнером. Графічний дизайнер, здебільшого, готує макети для друкарні у векторі – флері, каталоги та інше. Професійний веб-дизайнер (графічний дизайнер) макети для подальшого передання у верстку готує в Adobe Photoshop або подібній програмі для роботи з растровою графікою чи в онлайн-інструментах, таких як Figma, Invision, Zeplin – найпопулярніші на сьогоднішній день. Сенс у тому, щоб макет був у 72dpi і мав шари (шрифти, зображення).

Якщо макет буде виготовлений в Adobe Illustrator, Adobe Indesign або Coreldraw – їх робила людина, яка до веб-дизайну має дуже далекий стосунок та не знає як що працює. Навіть якщо клієнт замовляє тільки дизайн-макети і в нього є свої програмісти, то йому на виході мають віддати макети з шарами, а не jpg/png картинки.

html-верстальник

html-Верстальник, front-end developer, html-кодер – кодує надані дизайнером макети в статичний html, підключаючи необхідні скрипти, зазвичай це jQuery. Верстальник – це окрема спеціальність, не перехідна, як багато хто вважає. Якщо ти програміст – і будеш програмувати потім, якщо дизайнер – працювати як дизайнер. Верстальник не зможе однаково добре опанувати як верстку, так і дизайн чи програмування, як і дизайнер чи програміст не зможе професійно верстати. Крім цього, верстка і програмування мають різні підходи, і програмісти не можуть верстати в принципі, тому що верстка не завжди сувора і логічна.

Але не плутаємо установку верстки на CMS (Content Management System) – систему управління сайтом, таких як Joomla або WordPress. Створення теми (шаблону) це не програмування як таке.

Як правило, верстка надається клієнту на затвердження – це є проміжний етап. На цьому етапі можна безболісно ще внести будь-які зміни. Але, на жаль, клієнти, здебільшого, несерйозно ставляться до цього етапу або зовсім його ігнорують і з усіма побажаннями або змінами повертаються після останнього етапу. Головне завдання верстальника – зробити в точності з макетом і ТЗ, а це можна зробити на 100%, звісно, якщо у дизайнера були мізки, коли малював макет.

Програміст

Підтверджені (клієнтом та ПМ) дизайн-макети у вигляді html-сторінок передаються програмісту для подальшої роботи. Він створює або шаблон на CMS з усіма необхідними розширеннями, це може бути написанням додаткових модулів/плагінів, або створює сайт на основі якогось кастомного фреймворка, наприклад, це може бути фреймворк Yii, Symfony, Django.

Тестувальник

Тестує сайт на основі заявлених у ТЗ вимог і перевіряє на відповідність із макетами. Відправляє на доопрацювання верстальнику або програмісту.

Це фінальний етап. Після нього PM відправляє сайт на затвердження клієнту і погоджує терміни для розміщення сайту на сервері клієнта.

Щодо взаємозамінності

На жаль, що описано вище – це ідеал. Таке буває рідко у невеликих компаній. Дуже часто роль проект-менеджера тягнуть двоє – менеджер по роботі з клієнтами і дизайнер або взагалі тільки дизайнер, і ніякого ТЗ взагалі не пишуть, обмежуються прототипом. Як результат – втрачається частина інформації, доводиться домальовувати макети, а то і весь проект – вимог то ніде не описано.

Якщо немає веб-дизайнера, то макети виконує графічний дизайнер, який й гадки не має про вимоги до макету та й узагалі про тенденції у веб-дизайні, адже стиль постійно змінюється. Поганий макет – поганий код. Якщо людина й гадки не має, як працює сайт, то й не зможе нормально намалювати.

Ще варіант, коли немає верстальника і це виконує програміст. Результат – зроблено “дуже близько” до макету, саме в лапках. Плюс кривий код. Це впливає на кросбраузерність (однакове відображення сайту в усіх браузерах).

Найбезболісніший варіант – це відсутність тестувальника. Його, як правило, замінює дизайнер, перевіряючи на відповідність, і будь-яка інша уважна людина, яка в змозі покликати кожне посилання і переглянути сайт на мобільному телефоні, а то й декількох. Але тестувальник необхідний на великих і складних проектах.

Спеціальність тестувальника буде першою, яку замінить ШІ (штучний інтелект), як і звичайного кодера – просто не треба буде тестувальніка, так як код буде якісним.

Вас може зацікавити