Когда я только начинал заниматься заказным цифровым дизайном, основную категорию интерфейсов представляли сайты-визитки. Очень легко было вообразить всю структуру элементов у себя в голове. Поэтому создание дизайна начиналось сразу с графического редактора (на тот момент с Photoshop).

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

С дальнейшим увеличением проектируемых систем появилось осознание, что объем функциональности продукта меняется от релиза к релизу. Чтобы определить правильный набор функций для первой и последующих поставок, требуется пройти этапы исследований и дизайна.

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

Дизайн цифровых продуктов всегда содержит пять слоев. Впервые эту концепцию представил Джесс Гарретт в 2001 году

Фактически процесс проектирования каждого цифрового продукта включает в себя пять слоев:

1) слой поверхности – определение стиля оформления;

2) слой компоновки – определение взаимного расположения элементов на экране;

3) слой структуры – определение того, как связаны разделы системы с точки зрения навигации;

4) слой скоупа – определение того, какие функции включены в проектируемый релиз продукта;

5) слой стратегии – ответ на ключевые вопросы о том, для какого пользовательского сегмента создается продукт и какие проблемы решаются.

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

Впервые такой послойный подход к дизайну цифровых продуктов представил миру Джесс Гарретт в своей книге «Веб-дизайн. Элементы опыта взаимодействия».[29]

Далее подробно разберем каждый слой проектирования и характерные для него инструменты.