Всем привет, на связи ведущий Project Manager компании Labpics — Никита.
Cегодня я кратко расскажу вам о достаточно долгой истории одного из наших проектов.
1. Брифинг
Брифинг простыми словами - созвон с заказчиком, чтобы понять его концепцию, концепцию продукта и объемы трудозатрат. Без него нет смысла начинать проект.
Всегда узнавайте чего хочет заказчик, спрашивайте про идею, чем он вдохновляется, просите референсы. Расспрашивайте как можно подробнее, чтобы при разработке учитывалась сама идея, а не сухое ТЗ!
24 июня мы созвонились с заказчиком и обсудили примерный план работ. Два дня составляли Техническое Задание и в итоге заключили договор.
В общих чертах нам предстояло разработать:
— Полный брендинг
— Бренд-бук
— Дизайн Web и Mobile версий площадки
— UI-kit
— Личные кабинеты и дизайн функционала
Делать будем Атомарным дизайном.
Пояснение: собираем по «атомам» дизайн, делая последовательно компоненты и экраны.
Данное решение было принято не просто так.
Заказчику было важно, чтобы параллельно с дизайном велась вёрстка, что позволило ему сэкономить ощутимое количество времени.
Пока мы делали компоненты — фронтендер их уже верстал.
2. Начало начал... Брендинг.
Дизайн начинается с логотипа и макета.
Мы всегда делаем 3 варианта лого, каждый из которых подходит для разных версий сайта и приложения.
Определившись с логотипом, мы предоставляем цветовую гамму для клиента, обговариваем будущий дизайн.
Когда выбрана цветовая схема, переходим к наброску макета:
Макет заказчику сразу понравился, нам дали добро, — а это значит, что можно приступать к работе🤘
3. Работааа.. Делаем брендбук.
Углубляться в принципы создания брендбука не буду, на эту тему у нас выйдет еще несколько статей, а потому постараюсь вкратце описать что мы предлагаем.
Главное - заложить фундамент для дальнейшего развития бренда.
Мы ведь хотим сделать так, чтобы дизайн система была гибкой, а значит делаем акцент на правила использования лого и дизайна.
Благодаря брендбуку дальнейшие изменения и доработки можно будет сделать в несколько раз быстрее, удобнее, зная правила.
Также, мы показываем в брендбуке все возможные допустимые цветовые палитры.
А почти готовый брендбук выглядит вот так:
4. Приступаем к дизайну
С заказчиком обговорили, что работа выполняется по принципу «Mobile-first», когда главной и первой разрабатывается, а также верстается мобильная версия.
Мобилку мы делали поэтапно, начиная с главной, карточки товара, фильтров и сортировки:
Последовательно делаем все необходимые экраны по полному ТЗ заказчика, не забыв делать отступы одинаковыми, выносить каждый компонент в UI-kit.
Выслушиваем правки от заказчика (у нас, кстати, первые две - бесплатные), делаем тёмную тему, негрим все компоненты и получаем готовый дизайн мобильной версии и больше половины юи кита🐋:
Кстати, мобилка и брендбук у нас были готовы уже на 16 день с момента первого созвона!
5. UI-kit и дизайн Desktop-версии
Самое сложное позади, осталось уложиться в сроки, отрисовать дизайн десктопа и дополнить UI-kit.
Как ни странно, данный процесс у нас вышел самым трудозатратным.
Первую часть проекта смогли завершить без особого вмешательства проджект менеджера, т.к спринты были понятны всем дизайнерам и проблем не возникало.
ТЗ по десктопу отличалось от мобилки, пришлось много общаться с заказчиком, созваниваться, подключаться мне, продумывать план и отслеживать работу команды.
Для будущих Проджект Менеджеров:
Очень важно каждый таск как можно подробнее прописывать, чтобы дизайнеры не путались и не пришлось потом выслушивать гору правок от заказчика :)
Итак, прописали задачи, смотрим результат (без фейлов не обошлось, конечно же, но о них напишу как-нибудь позже):
На этом всё? Конечно, нет!
Далее самое кропотливое - проверяем, чтобы все экраны дизайн-системы соответствовали ТЗ, общаемся с заказчиком, выслушиваем гору правок от фронтендера, заносим все компоненты в UI-kit и, наконец, сдаём проект.
Подведем итоги
Заказчик доволен, работу протестировали и взяли верстать.
Проект занял у нас чуть больше времени, итоговые сроки составили 30 рабочих дней.
Сегодня мы с вами прошли путь в 1 месяц. Надеюсь, вы подчерпнёте для себя что-нибудь новое и станете чуточку лучше ❤
До новых встреч, Дзен!