Yandex.Metrika Counter

Один из наших первых крупных проектов, на котором дизайн-команда работала вместе с разработчиками (можно сказать, это был проект «под ключ» — дизайн + разработка нового сайта), получился весьма противоречивым. С одной стороны, заказчик остался в полном восторге — он получил то, что хотел + максимум внимания и заботы со стороны всех членов нашей команды. С другой — сам проект оказался для нас убыточным.

Причиной тому стала серьёзная ошибка в оценках дизайнерской части. Мы с командой упустили очень важный этап — подбор и обработку медиаматериалов для сайта (фотографий, иллюстраций и т.д.). В итоге к концу проекта у нас накапало много лишних часов работы дизайн-отдела. Это было очень больно...

И вот, чтобы такого больше никогда не происходило, я детально разобрал весь наш процесс работы над дизайном, разбил его на этапы и сформулировал чек-лист. Он поможет оценить дизайнерскую часть проекта максимально реалистично и ничего не забыть.

Делюсь тем, что у меня получилось.

Оценка объёма работ по дизайну

Сразу отмечу, что этапу оценивания проекта у нас предшествует этап понимания задачи. Это отдельная большая работа, в которой задействованы все участники будущей команды проекта. Мы разбираемся в задаче клиента, задаём ему много вопросов, стараемся максимально погрузиться в его бизнес-процессы. И всё это — чтобы предложить клиенту оптимальное решение.

Понимание задачи — это вообще тема отдельной статьи. И скоро она непременно появится на нашем сайте. А пока давайте представим, что этап понимания задачи у нас позади, и мы согласовали с клиентом решение — нам нужно создать сайт с нуля, с интерфейсом, дизайном и разработкой. Теперь дело за оценками.

Процесс работы над дизайном интерфейса во fuse8 включает в себя несколько основных этапов:

  1. Погружение в предметную область и аналитика.
  2. Проектирование и прототипирование.
  3. Проработка дизайн-концепта или общего визуального решения (ОВР).
  4. Создание дизайн-макетов.
  5. Передача дизайн-макетов разработчикам.

Чтобы оценить проект в часах, нужно сформировать список работ для каждого из этих этапов.

Внимание! Каждый из этапов я постарался расписать по-максимуму. Понятно, что от проекта к проекту список работ может меняться. Поэтому, чтобы сделать чек-лист релевантным именно для вас, просто удалите ненужные пункты из каждого этапа перед оценкой. Или добавьте, если ваши дизайнерские процессы включают себя что-то сверх того, что есть у нас во fuse8.

Погружение в предметную область

Первое, что мы делаем, когда заходим на новый проект, — это досконально изучаем предметную область. На этом этапе фиксируем и оцениваем следующие работы:

погружение в бизнес-процессы заказчика;

анализ решений конкурентов;

изучение данных аналитики (если они есть);

создание персон и пользовательских сценариев;

экспертный UX-аудит текущего решения (если оно есть).

Проектирование и прототипирование

На этом этапе можно выделить следующие работы:

разработка интерактивных прототипов для десктопа;

разработка интерактивных прототипов для мобайла и планшета.

Прототипы для разных устройств мы оцениваем отдельно друг от друга — так оценки получаются значительно точнее.

Проработка дизайн-концепта или общего визуального решения

Общее визуальное решение (ОВР) — это наш способ представить клиенту будущий стиль проекта. По-сути, ОВР представляет из себя минимально-детализированные дизайн-макеты — с сеткой, цветовым решением, элементами управления, типографикой и с некоторыми контентными компонентами. С их помощью мы уже на ранних этапах проекта можем согласовать с клиентом большую часть стилистических решений.

При проработке ОВР мы выделяем следующие работы:

подбор визуальных референсов;

отрисовка макетов ОВР.

Здесь важно отметить, что в зависимости от задачи и договорённости с заказчиком, ОВР может быть представлено только одной главной страницей сайта или же 2-3 вариантами нескольких страниц. Учитывайте это при оценке этапа.

Дизайн-макеты

Вот тут-то у нас и спрятался пункт, про который мы совершенно забыли на проекте, о котором я рассказал в самом начале. Не повторяйте наши ошибки! Заранее договоритесь с клиентом, кто будет подбирать все медиаматериалы. И, если это будете делать вы, прикиньте их объём и обязательно заложите время на это в оценки проекта.

подбор медиаматериалов для сайта (картинки, фотографии, иконки и т.д.);

отрисовка макетов для десктопа;

отрисовка макетов для мобайла и планшета.

Передача макетов разработчикам

После того, как мы создали и согласовали с заказчиком дизайн макеты, наша работа не заканчивается. Мы ещё должны помочь включиться в проект разработчикам. Для этого у нас есть следующие подэтапы:

разработка дизайн-системы проекта (UI-kit);

разработка дизайн-документа — описания поведения всех интерактивных компонентов сайта.

Строго говоря, UI-kit мы формируем на протяжении всего проекта, а не постфактум. Но поскольку относится он именно к этапу передачи макетов разработчиков, прописываем мы его именно тут.

Ещё немного об оценках

Есть ещё пара моментов, которые стоит учесть при оценке дизайна проекта.

Первое — это необходимость декомпозировать некоторые задачи. Самый простой выход тут — это выделить на проекте простые и сложные страницы и оценивать их отдельно.

Простые статичные страницы с базовым набором компонентов (новость, статья, страница «О компании», контакты и т.д. ) можно не декомпозировать. Достаточно просто оценить время их отрисовки в прототипе или на макете.

Страницы со сложной структурой и/или логикой (каталог, страница оформления заказа, корзина, калькуляторы и т.д.) можно «расщепить» на компоненты,а затем каждый из них оценить отдельно.

Второй момент, который важно учесть при оценке проекта, — коммуникации. Мы закладываем на это до 30% от общего времени, в которое оценили проект. Как правило, этого с запасом хватает и на совместные мозгоштурмы, и на внутренние демо, и на презентации и согласования с заказчиком.

На этом всё! Надеюсь, наш чек-лист будем вам полезен. Лично я, как ведущий дизайнер, доволен, что у нас появился инструмент, который облегчает оценку проекта и помогает ничего не потерять в процессе.

Подготовил для вас отдельный документ с чек-листом для оценки дизайна проекта. Берите из него всё, что покажется полезным, добавляйте недостающее и смело отбрасывайте ненужное!

Фото в заголовке: Photo by Alvaro Reyes on Unsplash

Автор статьи: Алексей Пилишков

Редактура: Марина Медведева