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

1. adn.agency
Проектирование
сточкизрения
дизайна
Шепелин Алексей
Арт-директор

2. adn.agency
В реальном мире
не всегда есть
возможность сделать
все по правилам
Зачем дизайнеру
умение проектировать?
Работая одновременно
с логикой и визуалом
и не имея системы
можно пропустить
что-то важное
Профессии
размываются,
одной области
знаний недостаточно

3. adn.agency
Проектирование
принедостатке
ресурсов

4. adn.agency
Нетвремени
(промо-продукты)
Классическая модель
медленная
Структура продукта проста
Длинная цепочка до ЛПР
Клиенту нужен wow
и чем быстрее,тем лучше
Ограничен
бюджет
Классическая модель
слишком дорогая
Структура продукта проста
ЛПР доступен, но не всегда
хочетпогружаться в процесс

5. adn.agency
Решение
Концепция
продукта
Метод прогрессивного
джипега
+

6. adn.agency
Концепция продукта
Вводная часть
Этотдокумент- наша отправнаяточка,
на которую всегда можно опереться:
Структура
Функционал
Референсы

7. adn.agency
Концепция продукта: Вводная часть
Важно писать эти пункты самому, ошибитьсятутне страшно
(и даже полезно, клиентпоправити будетвовлечен в диалог):
Описание продукта (один абзац отом, что мы делаем)
Целевая аудитория
Текущее состояние и проблемы
Цели (можно делить на локальные/глобальные)

8. adn.agency
Концепция продукта: Структура
Раздел Подразделы/блоки Контент Особенности
Главная 1 экран Баннер, слоган проекта, информация
о призах, ссылка на регистрацию
Используем фоном видео +
параллакс при скролле
2 экран ТОП-5 участников, ссылка перехода на
список всех победителей
Победители Список победителей Выводим по 10 участников на
страницу, сортируем по набранным
баллам
Попробуем эффект псевдо
3D при наведении на
карточку участника
Страница победителя ФИО, фотография, число баллов,
город, видеоролик, который загрузил
пользователь, блок регистрации
Нужна возможность шэригна
для голосования

9. adn.agency
Концепция продукта: Функционал
Элемент Доступность Данные Функция
Меню Доступно на всех
страницах, при скролле
сворачиваем в бургер
Главная, Победители, Игра, Об акции,
Условия участия, кнопка “Принять
участие”
Регистрация
(почта)
Меню,
Главная страница,
Страница участника
Фамилия, текстовое
Имя, текстовое
Город (определяем сами и
предлагаем подтвердить),
Почта, с валидацией поля
Дата рождения, выбор из диапазона
Проверяем почту на
уникальность, добавляем
пользователя в базу,
отправляем письмо с
логином/паролем для входа,
авторизуем пользователя
Вход Меню
Главная страница
Почта
Пароль
Авторизуем пользователя

10. adn.agency
Концепция продукта: Референсы
Готовим подборку материалов, на которые мы будем опираться
в нашей работе. Важно брать нетолькото, что нравится, но ито,
что решаетзадачу,
Похожие решения по функционалу
Похожие решения по дизайну
Элементы интерфейсов, которые мы планируем использовать
Шрифтовое решение (если нетограничений по брендбуку)

11. adn.agency
Метод прогрессивного джипега

12. adn.agency
Этапы
1. Разбираем контентпо страницам
2. Определяемся с цветовой гаммой,типографикой, формируем сетку
3. Показываем клиенту
4. Вносим правки по логике в макет, отражаем их в концепции продукта
5. С этого момента уже можно подключать производство
6. Детализируем, добавляем визуал, готовим анимацию
7. Показываем клиенту
8. Отражаем изменения в концепции продукта и передаем в производство

13. Принципы:
Учимся понимать клиента
на ранних стадиях работы
Концепция продукта
не конечна, в нее можно
и нужно вносить изменения
Не пытаемся делать
все этапы сразу, контент
первичен

14. adn.agency
Проектирование
натендерах/пресейлах

15. adn.agency
Проектирование
на этапетендеров/пресейлов
Длинная цепочка до ЛПР
Не всегда есть возможность
для личного показа
У ЛПР нетвремени
Нетобратной связи
Нужно показывать решение
задачи
Сложная структура продукта
Нужно делать wow
Не всегда есть ресурсы
на исследование

16. adn.agency
Решение
Концепция
продукта
Итерационное
проектирование
+

17. adn.agency
Концепция продукта
Вводная часть
Структура - без детализации
Функционал - без детализации
Референсы
Анализ рынка - подключаем аналитиков
и разбираем решения конкурентов,
сильные и слабые стороны
Гипотезы -теория, предполагаемое
решение, прогнозируемый результат

18. adn.agency
Выбираем и прорабатываем 1-2 гипотезы:
1. Детализируем функционал и структуру связанные с гипотезой
2. Пишем сценарий поведения пользователя
3. Собираем общие элементы интерфейса (сетка,типографика, цветовое
решение)
4. Готовим экраны, который пройдетпользователь в рамках нашего
сценария
5. Переносим в Principle если есть время анимировать,
в InVision, если времени нет
6. Записываем видео с демонстрацией прохождения сценария
(если есть возможность, делаем с озвучкой)

19. adn.agency
Проектирование
вдинамике

20. adn.agency
Проектирование в динамике
Нужна нестандартная подача и wow
Клиентне понимаетстатичные макеты
Планируется много эффектов
Сценарий в рамках отработки гипотезы
сложно реализовать обычными
инструментами

21. adn.agency
На каких этапах анимируем
1. Раскидываем материал по страницам, формируем единую сетку
2. Определяемся с цветовой гаммой,типографикой
3. Анимируем базу (ключевые экшны, вглубь не уходим)
4. Показываем клиенту
5. При необходимости вносим правки в макети отражаем их в концепции продукта
6. Детализируем, добавляем визуал
7. Финализируем базу по анимации, готовим анимацию элементов
8. Показываем клиенту
9. Отражаем изменения в концепции продукта и передаем в производство

22. Принципы:
Двигаемся
короткими этапами
Просто = хорошо
Хорошая анимация
это как балет

23. adn.agency
Спасибо!
Вопросы?
Шепелин Алексей
Арт-директор в ADN Digital Studio
adn.agency
alex@adn.agency
Facebook: barnaulskyzeek