что такое прототипирование в дизайне
Урок 4. Прототипирование
В этом уроке мы с вами разберём основные принципы эффективного прототипирования в дизайн-мышлении. Они помогут вам максимально быстро протестировать сгенерированные ранее идеи, найти их плюсы и минусы.
Содержание:
Начать же этот урок лучше всего с определения центральных понятий.
Прототип и прототипирование
Для начала дадим определение понятию «прототип».
Простыми словами, прототип – это макет решения, который можно собрать из подручных материалов.
Он используется для того, чтобы не тратить время и деньги на создание полноценного продукта, а создать что-то похожее на него и отыскать ошибки, допущенные на этапе проектирования. Собственно говоря, процесс создания прототипа и называется прототипированием, и у него есть свои плюсы и минусы.
Преимущества прототипирования:
Недостатки прототипирования:
Прототипирование является первой стадией Product Evolution Canvas (на русский переводится как «канвас эволюции продукта»), и дальше речь пойдет о нем.
Product Evolution Canvas
Product Evolution Canvas (PEC) – это инструмент для компаний, создающих различные продукты, отлично подходящий для мозговых штурмов. Он состоит из двух компонентов – это:
Временные рамки – это, как понятно из названия, время. А что такое эволюция продукта? Давайте рассмотрим подробнее.
3 этапа эволюции продукта
Эволюция продукта – это весь процесс от создания прототипа до готового товара.
Он делится на три этапа:
Образно говоря, минимально-жизнеспособный продукт – это скейтборд. Основной продукт – велосипед. Полнофункциональный продукт – автомобиль. Скейтборд даёт возможность передвигаться, но не позволяет делать это достаточно быстро. С помощью велосипеда можно ездить довольно быстро и на большие расстояния. А автомобиль перекрывает все потребности, т.к. проезжает расстояния в сотни километров в считанные часы.
Канвас эволюции продукта помогает ответить на вопросы коллег, клиентов и инвесторов о функционале продукта. Например:
Кроме того, Product Evolution Canvas упрощает:
Но чтобы получить от PEC максимальную пользу, с ним нужно научиться работать. Давайте поговорим об этом подробнее.
Как работать с PEC
Работа с PEC предполагает прохождение трех этапов:
На первом этапе спрашивайте себя: «Что делает мой продукт функциональным?»
Канвас можно применять для разработки продуктов и услуг практически в каждой сфере деятельности человека. Нужно выполнить всего лишь четыре простых шага:
А чтобы было понятнее, что все это значит, приведем небольшой практический пример. Представьте, что вы разрабатываете банковское приложение и заполняете канвас. На первом этапе ваш продукт будет обладать лишь самыми необходимыми функциями, без которых невозможно представить банковское приложение – это открытие личного счёта, перевод денег и оплата различных услуг.
На втором этапе вы добавляете счета для индивидуальных предпринимателей, все виды транзакций и возможность оформлять кредиты онлайн. И на третьем – копилки, списки желаний и интеграцию с чат-ботами. Конечно, система выглядит уж очень упрощенно, но суть этот пример передает хорошо.
Прототипировать можно:
В зависимости от того, что мы прототипируем, технологии прототипирования будут различаться.
Моделирование физических объектов
Физические объекты моделируют:
| A | С помощью подручных средств – бумаги, картона, пластилина, скотча, ножниц. |
| B | С помощью «Лего». |
| C | С помощью 3D принтеров. |
| D | С помощью программ для 3D моделирования. |
Давайте подробнее разберём каждую технологию.
Моделирование подручными средствам
При моделировании подручными средствами нужно всего лишь следовать простому алгоритму:
К плюсам данного вида моделирования можно отнести:
Среди минусов есть следующие:
Поэтому при моделировании подручными средствами избегайте перфеционизма, не тратьте много времени на каждый прототип, при создании модели постоянно думайте о том, как люди будут пользоваться продуктом.
Лего-моделирование
Моделипрование с помощью «Лего» выполняется не менее просто:
Для получения наилучшего результата советуем вам прочитать книгу Тима Брауна «Дизайн-мышление в бизнесе», где рассказывается о том, как компания IDEO создавала из конструктора прототипы устройств для введения в кровь инсулиновых инъекций. Каждый раз создавая прототип, представляйте, что вы рассказываете историю.
Моделирование с использованием 3D печати
Для создания 3D моделей используются следующие технологии:
FDM (Fused Deposition Modeling). Материал выдавливается слой за слоем на поверхность. Эта технология применяется в биомедицине, кулинарии и промышленном производстве.
3D-печать – это достаточно сложная технология, поэтому для ее применения лучше всего привлекать квалифицированных специалистов.
Моделирование с использованием программ
То же самое моделирование, что и в случае с 3D, только здесь не надо «марать» руки, ведь весь процесс происходит на экране компьютера. Вот список 10 лучших бесплатных программ, которые помогут вам прототипировать, не выходя из зоны комфорта:
Руководство пользователя для каждой из программ можно найти в свободном доступе в Интернете.
Прототипирование сайтов и интерфейсов программ и приложений
Прототипирование сайта, главным образом, означает проектирование его интерфейса. Оно помогает облегчить задачу программистам, дизайнерам и верстальщикам. Поэтому мы объединили эти два пункта в один.
Например, когда вы заходите на любой сайт, то, скорее всего, ожидаете, что справа или сбоку будет меню и название проекта. Чуть-чуть правее или левее центра – контент (статьи, фотографии, видео). А снизу – надпись «Все права защищены» и правовые документы.
Если же вы зайдёте и увидите совсем другую картину (к примеру, меню будет расположено где-то снизу, контентная часть будет слишком узкой и т.п.), вероятно, вы просто уйдёте на другой сайт – более привычный.
Однако не нужно потакать пользователям во всём, ведь сайт должен решать и ваши задачи. К примеру, человек задал в поиске такой вопрос: «С чего начать саморазвитие?» Увидел ссылку на наш сайт и перешёл на него. Задача человека – получить информацию. Наша задача – не только помочь ему, но и реализовать собственные цели, в том числе и финансовые.
Если мы просто расскажем пользователю о саморазвитии, он прочитает и уйдёт. Чтобы такого не происходило, мы во всех статьях делаем ссылки на тематические материалы, бесплатные курсы и платные тренинги. При этом мы не пишем призывы каждые три абзаца, не мешаем пользователю найти ответ на вопрос и удовлетворить любопытство, не ставим никаких скриптов, которые не дают человеку уйти с сайта, если ему что-то не понравилось.
Как создать прототип
Прототип можно создать в любой программе, где можно рисовать. Если вы новичок, используйте Photoshop, Paint, Adobe Illustrator или даже Google Docs. Профессионалам рекомендуем программу Axure. И вот что нужно сделать дальше (в упрощенной форме):
| 1 | Отрисовать основные элементы шапки – форму поиска, логотип, кнопку обратной связи, описание проекта, кнопку действия («заказать услугу», «купить курс», «совершить звонок»), а если сайт информационный, то либо кнопку «Блог», либо меню с рубриками. |
| 2 | Нарисовать контентную часть и сайдбар (то, что находится сбоку). Как будет располагаться текст, кнопки социальных сетей, комментарии и т.д. |
| 3 | Обрисовать подвал сайта – дополнительные ссылки, значок копирайта и прочее. |
Стиль сайта должен прослеживаться на всех его страницах. Не должно быть так, чтобы на главной странице преобладал минимализм (чёрно-белый дизайн и полное отсутствие лишнего), а в статьях – «рог изобилия», когда кажется, что попал совсем в другую реальность. Элементы нужно делать симметричными по размерам и расположению.
Не заставляйте человека ощущать себя неуютно, т.е. если пользователи мобильных устройств привыкли, что при нажатии на значок «гамбургера» (три горизонтальных черты) открывается меню, не надо выдумывать что-то новое. Если люди привыкли, что курсор мыши меняется на указательный палец, когда на блок можно нажать, делайте на своём сайте (или в приложении) точно так же.
И еще несколько советов о том, чего нужно избегать при создании сайтов и приложений:
Подробнее читайте в материале, подготовленном крупнейшим маркетинговым агентством России Texterra. Там очень хорошо и понятно изложено, что стоит внедрить на своём сайте/приложении, а что – убрать. Однако не старайтесь всё время следовать нашим советам: экспериментируйте и пробуйте выяснить самостоятельно, что хотят видеть потенциальные клиенты на вашем сайте или в приложении.
Прототипирование опыта
Прототипирование опыта – это тип прототипирование, которое представляет собой воссоздание ситуаций для тестирования решений. Чтобы смоделировать опыт, нужно правильно подобрать место и создать обстоятельства, при которых человеку может понадобиться ваш продукт или услуга. С помощью прототипирования опыта можно разыгрывать целые ситуации, объёмные опыты и нахождение в пространствах, где трудно обойтись одним предметом.
Прототипирование опыта проводится так:
Прототип против дизайнера
В последнее время на хабре активно обсуждают надобность прототипов, попробую внести свою ложку дегтя в этот вопрос.
Одни кричат – прототип зло, другие, вооружившись – молчи. Давайте поступим умнее, отойдем от споров и разберемся зачем вообще нужны эти самые прототипы?
Не так давно весь процесс создания сайта был прозаичен и прост. Заказчика осеняло замечательной идеей и он сломя голову обращался к дизайнеру, мол нарисуй мне вот такую мечту. Дизайнер впечатлившись масштабом идеи рисовал красивые картинки и заказчик резво принимал работу. После, программист «превращал картинки в код» и так рождался сайт.
Однако шло время и золотые горы все не рисовались в карманах заказчика. На продвижение сайта тратились огромные деньги, а продаж все не было и не было. В этот момент нашего бизнесмена обычно осеняла мысль, что с сайтом, наверное, что-то не так.
В это время по другую сторону проблемы появлялись люди, гордо трепещущие с трибун профильных конференций о важности включения в процесс разработки потребностей пользователей. Так рождалась новая профессия – проектировщик взаимодействия (названий на самом деле много, мне по душе именно это).
Эти бравые первопроходцы день за днем несли в мир одну простую истину – если мы делаем сайт для людей, то почему бы не спросить этих самых людей что им действительно нужно?
Спустя время легкий шорох превратился в настоящий шум, первопроходцы основали небезызвестные компании и теперь каждый уважающий себя бизнесмен считает должным получить прототип своей идеи.
Что же такое, черт побери, прототип?
Безусловно многие из вас знают что такое прототип, представляют как он выглядит и даже считают, что умеют его делать. Бог с вами, может так оно и есть.
Для тех же кто пока ни о чем не подозревает отвечу словами из википедии:
Прототип — работающая модель, опытный образец устройства или детали в дизайне, конструировании, моделировании.
В контексте проектирования интерфейса – это полнофункциональная html-модель сайта, работающая через браузер и наглядно иллюстрирующая весь принцип взаимодействия для разных сценариев использования.
Стоп! Сценариев использования?
И тут мы подходим к самой интересной части нашего рассказа. Оказывается, прототип не просто иллюстрирует внешний вид страничек, он еще и сценариям каким-то отвечает.
Так повелось, что день за днем мы обращаемся к различным сайтам в поисках решения той или иной задачи. Надо ли нам найти определение слова, купить пылесос или билеты в кино – каждый раз мы выполняем некий паттерн поведения и возлагаем ожидания. И если паттерн навигации и содержимое сайта соответствует нашим привычкам – это приводит нас к достижению желанного, а владельцев бизнеса к конверсии.
Одной из важных задач проектировщика взаимодействия как раз выявить подобные паттерны и ожидания среди предполагаемой или существующей аудитории проекта.
Их может быть много, тогда они группируются по сходным признакам и так рождается персонаж, представляющий из себя архетип определенной группы. Тема персонажей достойна отдельной публикации, по этому скажу лишь что для одного проекта может быть как один персонаж, так и несколько.
Задачей проектировщика взаимодействия является сделать такой прототип, который бы отвечал потребностям всех персонажей и особенно ключевого.
А как же бизнес, детка?
Естественно потребностями одних персонажей работа проектировщика не ограничивается, есть и потребности бизнеса, которые нужно еще правильно понять. Так повелось, что мудрый и сильный оффлайн совершенно бессилен в мире веб.
Мне часто доводилось видеть успешных «пузатых дядь» в шелковых костюмах несущих бред на тему нового сайта. По этой причине также стоит относится с осторожностью и к готовым ТЗ.
Уважающий себя проектировщик всегда обязательно проведет несколько интервью с представителями бизнеса, пытаясь докопаться до сути, после чего назначит еще несколько интервью с «рабочими руками», теми самыми людьми, которые ежедневно удовлетворяют наши с вами потребности – продавцами, консультантами, менеджерами итд.
Имея на руках полную картину того, что нужно бизнесу и того что нужно пользователям, наш труженик народа сможет наконец-то сесть и наколдовать тот самый прототип, о котором так много холиваров.
Конечно, часть процесса проектирования я опустил, не суть важна.
Что же будет дальше?
Теперь, когда прототип готов и отвечает всем возложенным на него задачам, самое время написать подробную спецификацию и передать это дело в руки гордого дизайна и программистам.
И тут хороший проектировщик покажет себя молодцом и проверит работу первых и вторых, а при необходимости настоит на правильном решении.
Вся проблема как раз в том, что хороших проектировщиков еще сыскать нужно. Все больше и больше людей прочитав одну две книги начинают мнить себя великими мастерами дела и браться за работу. От этого и выходят все плачи и стоны. Получая на руки результат работы такого «проектировщика» невольно задумываешься зачем его вообще свет родил и плюёшься в стороны на все эти ваши прототипы.
Должен ли дизайнер делать прототипы?
Нет, ибо прототип – конечное визуальное представление – верхушка огромного айсберга под названием проектирование взаимодействия.
Должен ли дизайнер следовать прототипам?
Да, ибо прототип – результат большой и кропотливой работы, часто целой команды людей, профессионально занимающихся своим делом изо дня в день.
Последняя фраза самая важная – занимайтесь своим делом, изо дня в день поднимая собственный скилл на новый уровень.
Прототипирование в дизайне интерьеров
Эта тема действительно занимала меня довольно продолжительное время…
Прототипы смартфонов и интерьеров автомобилей легко находились в гугле — а вот вопрос о применении прототипирования в дизайне интерьеров так и висел в воздухе. Гуру интерьерного дизайна вещали про настроение, материалы и текстуры, иногда даже про то, что они несколько дней живут в доме своего клиента, чтобы лучше понять его привычки и создать для него идеальный интерьер. Создавалось впечатление, что то ли тема прототипирования — секретные материалы, то ли они действительно не используют этот инструмент в своей работе.
До сегодняшнего дня, единственный пример, который был в моей копилке, рассказала мне подруга. Её знакомый переезжал в новую квартиру и ему нужен был диван. Чтобы подобрать идеальную мебель в гостиную, он положил на пол кусок ткани, имитирующий габариты дивана, который он присмотрел в магазине, и жил с ним какое-то время. Периодически меняя размер и расположение своего прототипа, он определил подходящий размер дивана и подобрал расположение соответствующее его комнате и его привычкам.
А сегодня в моей ленте на фейсбуке появилось выступление потрясающей Айрэн Оу, в котором она на примере строительства собственного дома показала, как и в каких ситуациях архитекторы и дизайнеры использовали физическое прототипирование. Это означает две вещи: что моя коллекция примеров пополнилась, и что прототипирование в дизайне интерьеров существует и его всё же используют успешные архитектурные фирмы.
В этом посте я отразила важные моменты выступления Айрэн, касающиеся прототипирования, которые ускорят проектирование интерьера и помогут избежать ошибок ещё до реализации.
От простого к сложному
Наброски и эскизы — это тоже прототипы, и Айрэн в своём выступлении подчеркнула их значимость на начальном этапе работы над проектом. Их главным плюсом она назвала простоту и минимальную деталировку: “На самом деле, FGY (архитектураная фирма, с которой работала Айрен) даже сказали мне, что иногда, если у них на компьютере есть детальный макет, они намеренно показывают клиентам условный эскиз, просто чтобы направить разговор в нужное русло”.
Прототипирование на продакшн-технологиях
В Яндекс.Деньгах мы сделали БЭМ-платформу основным инструментом дизайнеров для построения интерфейсов, дополнив ее всем необходимым арсеналом для масштабирования.
Недостающее звено, или Предпосылки для прототипов
Обостренная необходимость в прототипах
Осмысленный и кастомизируемый UI
В Яндекс.Деньгах мы руководствуемся простой идеей, что UI должен легко и быстро генерироваться под нужную структуру по заданным параметрам, поэтому для создания масштабируемых и кастомных интерфейсов мы внедрили прототипирование в дизайн-процесс. Для прототипов мы используем БЭМ-технологии, переиспользуем разработческую библиотеку блоков и визуализируем интерфейсные решения, опираясь на конструкции паттернов, в основе которых лежат «живые стайл-гайды» (CSS стайл-гайды).
В соответствии с этим макеты нельзя воспринимать как законченное дизайн-решение. Это скорей черновые наброски: если они и делаются, то лишь для быстрого «поиска» новых визуальных решений. Их впоследствии нужно приземлять на браузерные технологии, иначе интерфейс потеряет свою ценность, как только появятся первые намеки на изменение визуала или сценариев взаимодействия.
Макет провоцирует на бомбардировку вопросами со стороны разработки и заказчиков, ведь по нему не всегда понятно, как это должно работать и как лучше реализовать. К тому же макет принято оценивать как кропотливый результат дизайнерской работы.
В то время как сверстанный прототип — это просто итерация, в результате которой мы получаем UI определенной версии на основе определенных параметров. Плюс интерфейс становится восприимчив к изменениям на лету и рассказывает про себя сам.
Тестирование на раннем этапе
Тестирование — еще одна из многих причин реализации прототипов. При разработке продукта есть острая необходимость получить интерфейс, близкий к реальному, на самых ранних этапах.
Это нужно для внутреннего тестирования: чтобы обкатать первую концепцию, допиливая ее и пробуя различные связки. И для внешнего: чтобы проверить первоначальные гипотезы на пользователях, подсовывая им разные ветки сценариев.
Посылка от разработчиков, или Что под капотом у Brickbox
БЭМ-технологии в дизайне
Нельзя сказать, что вначале мы делаем визуал, а потом дробим его на блоки и элементы в различных модификациях. На деле мы не подстраиваемся искусственно под БЭМ. Это скорей естественная, фундаментальная часть нашего дизайн-процесса.
Мы по умолчанию думаем в этих терминах, описываем смысловую структуру блока, затем преобразуем (стилизуем) ee в наглядный вид. Поэтому при прототипировании используется практически тот же стек технологий, что и при разработке. В нем мы чувствуем себя естественно и органично.
Внешние библиотеки и уровни дизайна
Все собрано в один stub Brickbox, который может развернуть у себя любой участник команды (не обязательно дизайнер) и начать прототипировать. Это позволяет описывать структуру страниц в терминах компонентов (BEMJSON) и смотреть результат в браузере. Вся магия по сборке происходит «под капотом».
В Brickbox подтягиваются все необходимые библиотеки:
От прототипов к дизайн-системе
Зачистка
Несмотря на то, что дизайн-система должна быть не сводом правил, а естественным подспорьем при прототипировании, без наведения первоначального порядка не обошлось. Нужно было исключить инстинктивные решения, которые делали всю систему уязвимой.
Для того чтобы не расползтись стилистически при синхронной работе, мы отстрелили вкусовщину и причесали базовые значения, на которых будет основываться UI.
Мы отобрали минимальный набор необходимых параметров, но при этом не скатились в примитив. Сконцентрировались на возможных состояниях и на правилах соотношения блоков между собой и убрали инстинктивные значения, которые были сделаны на глаз. Затем зафиксированный результат перевели в код.
Визуальный язык в коде
Вычисление цвета
Для того чтобы цвета разных интерфейсных сущностей (блоков, компонентов, типографики) не существовали в вакууме, их значения наследуются от базовых цветов.
Вычисление цвета.
Дальнейшие манипуляции с цветами проводятся через Hue/Saturation/Lightness. Оттенки серого задаются с прозрачностью от чёрного (это дает больше гибкости при изменении заднего фона блоков).
Названия цветовых переменных не приклеиваются к конкретным значениям, а учитывают интерфейсные состояния блоков и типографики. В переменные вынесены все возможные состояния, этого хватает для того, чтобы покрыть основные интерфейсные потребности.
Цветовые переменные сделаны по следующему принципу:
На практике в стилях любого блока ни один цвет не пишется руками, используются только переменные. Это делает блок по умолчанию кастомным и готовым к изменениям.
Структура сложных компонентов
Отступы используются не только для визуального ритма, а в большей степени для обозначения уровней вложенности и разделения смысловых блоков и элементов. Также система отступов подчеркивает информационную иерархию.
Система отступов.
Типографика, или Как покрыть значительную часть визуала
Текст — фундамент практически любой визуальной сущности. Поэтому для ускорения прототипирования и более легкой манипуляции внешним видом блоков любой текст в интерфейсе выводится в блоке text. Мы вынесли блок text с модификаторами для цвета, размера, регистра, жирности, межбуквенного интервала. Их можно использовать в различных комбинациях. В итоге мы получаем все необходимые вариации текста при помощи небольшого количества комбинаций.
Типографика.
В интерфейсе встречается типографика двух типов:
В первом случае мы ко всем текстовым элементам примиксовываем блок text (добавляется класс текстового блока) с нужными модификаторами.
Во втором — к текстовым блокам добавляем еще один модификатор —type. (с учетом семантики), для которого прописаны относительные отступы (они высчитываются с учетом заложенных типографических правил для удобного восприятия текста).
Графика
Вся интерфейсная графика разделяется на три типа:
Библиотека логотипов.
Для использования в интерфейсе любой графической сущности достаточно указать название блока и необходимые модификации.
Вынесение графики в БЭМ-блоки и использование их в интерфейсе позволяет безболезненно и легко экспериментировать с различными библиотеками, просто заменяя SVG-файлы, и мгновенно наблюдать их новое отображение в интерфейсных сущностях.
Паттерны
Вырезаем дублирование стилей
После того как разобрались с базовым параметрами интерфейсных сущностей (цветами отступами, текстом и графикой), самое время задуматься о принципах визуализации — о том, как превратить структуру блока в осмысленную форму. Компонентность, конечно же, дело привычное, но описывать стили каждого нового блока, игнорируя закономерности, становится трудозатратно, а полная изоляция хороша ровно до того момента, пока не началась кастомизация.
Для решения этой задачи у нас появляется фундаментальный уровень — паттерн.
Качественный UI по умолчанию, или Как не думать о стилях
Паттерн — это конструкция с возможными модификациями, которая примиксовывается к блоку и его элементам и определяет его визуальную структуру. Использование паттернов позволяет ускорить (и даже автоматизировать) процесс визуализации. Паттерны с каждым новым прототипом обрастают правилами, по которым генерируются схожие сущности.
Пример блоков на основе паттернов.
70% из коробки, или Как наследовать внешний вид
Все бесконечное многообразие окружающих нас интерфейсных множеств сводится к числу понятных/базовых/фундаментальных конструкций, на основе которых можно получить практически любой визуал (приемлемый для веба).
Сейчас библиотека состоит из восьми основных паттернов:
Этот список расширяется.
Декоратор
Локальная инъекция, или Как победить избыток классов
При прототипировании не всегда нужно строить фабрику блоков, иногда достаточно просто примерить визуал на структуру.
Декоратор выполняет роль контролируемых (ограниченных) инлайн-стилей, относительно которых еще нет понимания по классификации.
Он не несет логического смысла. Это больше косметика, которая нужна для визуальной «подпорки». Декоратор помогает понять, какие локальные стили чаще всего используются, и в каких конструкциях. Вдобавок декораторы являются индикаторами для переноса свойств в модификаторы паттернов.
Сборка интерфейса
UI как комбинация параметров, или Закономерность наслаивания смысла
Блок в дизайнерском понимании — это составная сущность, которая может содержать в себе блоки из других библиотек, основываться на каких-либо формах и иметь собственные уникальные стили.
Глобально у блока есть содержимое и представление.
Интерфейсные слои.
Содержимое:
Представление:
Всё базируется на переменных. У переменных могут быть разные значения, которые в совокупности дают новую тему. Процесс визуализации проходит следующим образом:
1 шаг: в BEMJSON описывается основная структура блока;
2 шаг: контролы берутся из внутренней библиотеки компонентов Lego;
3 шаг: любая графика, кроме контентной, берётся из дизайнерской библиотеки;
4 шаг: к узлам блока миксуется паттерн;
5 шаг: дописываются уникальные стили.
Если уникальные стили начинают повторятся, они выносятся на уровень паттернов. Через несколько итераций паттерн начинает покрывать большинство визуальных потребностей, а в стилях самого блока (на уровне CSS) описываются только косметические особенности.
Процесс визуализации блока.
«Околодизайна», или Бытовуха вокруг нового процесса
Вход в дизайн-систему
Адаптация новых участников и Что делать с неизбежно растущим порогом входа
Без малейшего преувеличения, технологии сильно помогают поднять дизайн-процесс на новый уровень, при условии, что они естественны для дизайнера и не блокируют выполнение задач.
Поэтому новый участник может оперировать высокоуровневыми понятиями или конструкциями для визуализации своего интерфейса, постепенно погружаясь в тонкости. Таким образом, решение любой визуальной задачи становится просто очередной итерацией на основе новых параметров.
Точечное внедрение
По сути нужно выделить несколько инициативных участников, которые сделают всю фундаментальную работу, затем проходить по проектам и сводить все бесконечное многообразие интерфейсных множеств к числу понятных/базовых/фундаментальных конструкций.
Дальше порционно (по мере готовности) добавлять дизайнеров для последующего масштабирования.
Внутренняя экспансия
Как перевернуть игру, или Интеграция в бизнес-процесс
Дизайн — самая несистемная часть процесса, поэтому ее хоть как-то хотят контролировать люди со стороны (менеджеры, владельцы бизнеса и другие люди, отвечающие за сроки).
Под какой бы оболочкой ни продавались дизайн-спринты, это не дизайнерский инструмент, а больше менеджерская уловка, с помощью которой есть возможность более или менее равномерно вытаскивать из дизайнеров результат (какой бы он ни был).
Пока механизмы не выстроены, вы будете играть по тем правилам, которые придумали за вас. Развлекаясь со спринтами, перекладывая листочки с одного края доски на другой и измеряя результат своей работы количеством отрисованных макетов.
Но на самом деле людей успокаивает не тотальный контроль, а системность и предсказуемость. Соответственно, при разработке продукта дизайнер может работать эффективно только после того, как сделает прозрачным процесс своей работы и, при необходимости, сможет погрузить в него любого участника команды (включая менеджеров).
Открытый доступ для всех участников проекта к дизайн-материалам, в которых показывается вся инженерная красота конструкций, включающая в себя составные части и правила, по которым визуализируется интерфейс, здорово помогает в принятии тяжелых решений на любых этапах.
В конечном счете всё направлено к банальному сокращение издержек, увеличению скорости и к стремлению сделать дизайн-процесс открытым и быстрым. Так как зачастую в тот момент, когда вы ввязались в обсуждение новой задачи с внутренним «заказчиком», как правило, вы уже отстаете от сроков. К сожалению, такова реальность, которую нужно менять. Соответственно, для балансировки процесса нет другого варианта, кроме как забирать инициативу на сторону дизайна и выдавать концепты на опережение, по возможности — частично или полностью заготавливая решения заранее.
В процессе решения всех этих вопросов у нас естественным образом появляется дизайн-среда, которая с одной стороны использует коллективный опыт, а с другой — позволяет точечно себя модифицировать под решение конкретных задач и сценариев, оставляя зазор для экспериментов.
С каждым прототипом растет число смысловых и визуальных зависимостей, что в дальнейшем позволяет реализовывать более умные и осмысленные дизайн-решения. У прототипа нет конечной точки и то, что мы видим в продакшене, это состояние, которое замораживается и отправляется в разработку.
По сути мы стремимся к максимально автоматизированной генерации интерфейса, и дизайн-система способствует этому, сильно сокращая рутину, но тем не менее мы оставляем возможность подкрутить все руками, полностью контролируя весь машинный процесс.
Дальнейший вектор
Мы поймали тот вектор, который позволяет эффективно прорабатывать визуальную часть проектов. И в дальнейшем будем бить в два направления.
Во-первых, будут вычленяться принципы и библиотеки, которые можно использовать как дизайн-фундамент для реализации различного типа проектов.
Во-вторых, будет продолжаться непрерывный процесс более плотной оптимизации дизайн-системы под конкретные проекты, с фиксированием всех особенностей и закономерностей, которые можно систематизировать и переиспользовать.
Что касается экспансии и опенсорса, то этот вектор нам интересен. А если говорить начистоту, то мы считаем, что просто эгоистично держать внутри весь опыт и нет причин не делиться лучшими практиками, помогающими системно решать дизайн-задачи любого уровня.