Один из наших первых крупных проектов, на котором дизайн-команда работала вместе с разработчиками (можно сказать, это был проект «под ключ» — дизайн + разработка нового сайта), получился весьма противоречивым. С одной стороны, заказчик остался в полном восторге — он получил то, что хотел + максимум внимания и заботы со стороны всех членов нашей команды. С другой — сам проект оказался для нас убыточным.
Причиной тому стала серьёзная ошибка в оценках дизайнерской части. Мы с командой упустили очень важный этап — подбор и обработку медиаматериалов для сайта (фотографий, иллюстраций и т.д.). В итоге к концу проекта у нас накапало много лишних часов работы дизайн-отдела. Это было очень больно...
И вот, чтобы такого больше никогда не происходило, я детально разобрал весь наш процесс работы над дизайном, разбил его на этапы и сформулировал чек-лист. Он поможет оценить дизайнерскую часть проекта максимально реалистично и ничего не забыть.
Делюсь тем, что у меня получилось.
Оценка объёма работ по дизайну
Сразу отмечу, что этапу оценивания проекта у нас предшествует этап понимания задачи. Это отдельная большая работа, в которой задействованы все участники будущей команды проекта. Мы разбираемся в задаче клиента, задаём ему много вопросов, стараемся максимально погрузиться в его бизнес-процессы. И всё это — чтобы предложить клиенту оптимальное решение.
Понимание задачи — это вообще тема отдельной статьи. И скоро она непременно появится на нашем сайте. А пока давайте представим, что этап понимания задачи у нас позади, и мы согласовали с клиентом решение — нам нужно создать сайт с нуля, с интерфейсом, дизайном и разработкой. Теперь дело за оценками.
Процесс работы над дизайном интерфейса во fuse8 включает в себя несколько основных этапов:
- Погружение в предметную область и аналитика.
- Проектирование и прототипирование.
- Проработка дизайн-концепта или общего визуального решения (ОВР).
- Создание дизайн-макетов.
- Передача дизайн-макетов разработчикам.
Чтобы оценить проект в часах, нужно сформировать список работ для каждого из этих этапов.
Погружение в предметную область
Первое, что мы делаем, когда заходим на новый проект, — это досконально изучаем предметную область. На этом этапе фиксируем и оцениваем следующие работы:
✓ погружение в бизнес-процессы заказчика;
✓ анализ решений конкурентов;
✓ изучение данных аналитики (если они есть);
✓ создание персон и пользовательских сценариев;
✓ экспертный UX-аудит текущего решения (если оно есть).
Проектирование и прототипирование
На этом этапе можно выделить следующие работы:
✓ разработка интерактивных прототипов для десктопа;
✓ разработка интерактивных прототипов для мобайла и планшета.
Прототипы для разных устройств мы оцениваем отдельно друг от друга — так оценки получаются значительно точнее.
Проработка дизайн-концепта или общего визуального решения
Общее визуальное решение (ОВР) — это наш способ представить клиенту будущий стиль проекта. По-сути, ОВР представляет из себя минимально-детализированные дизайн-макеты — с сеткой, цветовым решением, элементами управления, типографикой и с некоторыми контентными компонентами. С их помощью мы уже на ранних этапах проекта можем согласовать с клиентом большую часть стилистических решений.
При проработке ОВР мы выделяем следующие работы:
✓ подбор визуальных референсов;
✓ отрисовка макетов ОВР.
Здесь важно отметить, что в зависимости от задачи и договорённости с заказчиком, ОВР может быть представлено только одной главной страницей сайта или же 2-3 вариантами нескольких страниц. Учитывайте это при оценке этапа.
Дизайн-макеты
Вот тут-то у нас и спрятался пункт, про который мы совершенно забыли на проекте, о котором я рассказал в самом начале. Не повторяйте наши ошибки! Заранее договоритесь с клиентом, кто будет подбирать все медиаматериалы. И, если это будете делать вы, прикиньте их объём и обязательно заложите время на это в оценки проекта.
✓ подбор медиаматериалов для сайта (картинки, фотографии, иконки и т.д.);
✓ отрисовка макетов для десктопа;
✓ отрисовка макетов для мобайла и планшета.
Передача макетов разработчикам
После того, как мы создали и согласовали с заказчиком дизайн макеты, наша работа не заканчивается. Мы ещё должны помочь включиться в проект разработчикам. Для этого у нас есть следующие подэтапы:
✓ разработка дизайн-системы проекта (UI-kit);
✓ разработка дизайн-документа — описания поведения всех интерактивных компонентов сайта.
Строго говоря, UI-kit мы формируем на протяжении всего проекта, а не постфактум. Но поскольку относится он именно к этапу передачи макетов разработчиков, прописываем мы его именно тут.
Ещё немного об оценках
Есть ещё пара моментов, которые стоит учесть при оценке дизайна проекта.
Первое — это необходимость декомпозировать некоторые задачи. Самый простой выход тут — это выделить на проекте простые и сложные страницы и оценивать их отдельно.
Простые статичные страницы с базовым набором компонентов (новость, статья, страница «О компании», контакты и т.д. ) можно не декомпозировать. Достаточно просто оценить время их отрисовки в прототипе или на макете.
Страницы со сложной структурой и/или логикой (каталог, страница оформления заказа, корзина, калькуляторы и т.д.) можно «расщепить» на компоненты,а затем каждый из них оценить отдельно.
Второй момент, который важно учесть при оценке проекта, — коммуникации. Мы закладываем на это до 30% от общего времени, в которое оценили проект. Как правило, этого с запасом хватает и на совместные мозгоштурмы, и на внутренние демо, и на презентации и согласования с заказчиком.
На этом всё! Надеюсь, наш чек-лист будем вам полезен. Лично я, как ведущий дизайнер, доволен, что у нас появился инструмент, который облегчает оценку проекта и помогает ничего не потерять в процессе.
Фото в заголовке: Photo by Alvaro Reyes on Unsplash
Автор статьи: Алексей Пилишков
Редактура: Марина Медведева
