Рейтинг инструментов для дизайна и проектирования 2016

1. Какие тренды вы бы могли отметить в развитии инструментов для дизайнеров и проектировщиков в последние годы? Развивается ли эта индустрия и нуждается ли она в развитии?

Артем Геллер, Lab.Ag
Наконец-то по-умному начали смешиваться функции frontend-инструментов, еще ближе сдвигая смежные специальности. У новых компаний-продуктов пропал комплекс «мы не догоним Adobe», а это способствует развитию.

Дмитрий Карпов, Британская высшая школа дизайна
Основная тенденция — в создании и развитии инструментов прототипирования, которые гибридно помогают решать и задачи кода, позволяя использовать все потенциальные возможности платформы, и сразу же отладки параметров человеческого взаимодействия. Будет развиваться Sketch и целые семейства расширений функциональности. Тенденция разработки в сообществе нужных расширений и открытый доступ к ним сохранится, и софт будет обрастать разного качества довесками. Будут развиваться и Framer.js,и Origami Studio, и сервисы проектного менеджмента, подобные Slack или Trello. Революций не будет, но появится заметная взаимная интеграция аудиторий — дизайнеры найдут для себя удобным использовать код и скрипты, а кодеры будут больше уделять внимания визуальной разработке и проектированию UX.

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

Сергей Попков, AIC
Ключевой тренд — это постоянное упрощение и минимализм в дизайне. Мы уже привыкли ко всему плоскому. Теперь все становится еще проще и легче. Значительное давление на это оказывают развитие мобильных платформ и популярность всего мобильного. Mobile First из чего-то нового и необычного становится стандартом. Все это влияет и на инструменты.

Популярный Adobe Photoshop упустил момент перемен в дизайне и на сцене появился Sketch. Простой, быстрый, дешевый. Идеальный инструмент для проектирования и визуального дизайна нового формата. На рынке digital design инструментов впервые за десять лет появляется конкуренция среди производителей софта.

Material Design от Google добавил еще немного сумбура в этот коктейль. Теперь дизайнерам необходимо делать плоский дизайн «живым». Анимация добавляет интерфейсам больше смысла, логики и той самой изюминки, которую теперь невозможно взять на статических полях минимализма. В этом деле набирают популярность такие инструменты как Principle, Origami, Flinto и т.д. Этот сегмент пока очень слаб. Инструментов много, но они весьма ограничены. Однако это уже лучше, чем объяснять на пальцах frontend-специалисту или уходить в суровый AfterEffects.

Александр Гладких, Charmer
За последние годы у дизайнеров появилась потребность в предварительной верстке и тестировании интерактивных макетов. Соответственно, в инструментарий некоторых программ эти функции уже интегрированы. Например, Sketch или Macaw.

Иван Васильев, Альфа-Банк
Основной тренд — появление продуктовых команд, гибкая разработка. При таком подходе само понятие прототипа меняет свой смысл, серые квадратики больше никому будут не нужны, проектирование (в смысле написания технических заданий и подобной бесполезной беллетристики) преобразовывается в постоянные улучшения продукта и исследования. Дизайн, как его понимали последние лет 10–15, при таком подходе обретает совсем иную ценность и цель, а когда задача — работающий сервис/ продукт, а не макет, то инструментарий уже не столь существенен. Может быть, отсюда растут корни у другого старинного тренда (ирония): следует осваивать инструменты разработки.

Андрей Класс, НТВ
Индустрия развивается в направлении подписных сервисов, дублируя те или иные услуги, которые могут приносить доход их владельцам, в надежде на то, что данные сервисы будут выкуплены, и инвестиции в проекты окупятся. Сами инструменты пока не эволюционируют. Управление кривыми Безье было идеальным во FreeHand, с тех пор повторить эту логику никто не сумел.

Максим Орлов, ONY
Глобально заметен тренд автоматизации рутинных процессов по части работы с контентом и передачей дизайна в продакшн. Но в этом направлении пока еще есть куда двигаться. Сейчас не хватает единого инструмента. Используется 3–4 различных инструмента, чтобы получить готовый продукт. В каждом свой интерфейс, методология и процесс.

Максим Павлов, Notamedia
Упрощение. Люди хотят пользоваться простыми инструментами и не «забивать гвозди микроскопом». Значительная часть UI-специалистов нашла утешение в Sketch. Он легкий, простой, с низкой ценой лицензии, заточенный сразу под веб. В отличие от Photoshop, функционал которого используется веб-дизайнерами процентов на 20–30.

Как и любая отрасль, эта нуждается в развитии.

Олег Чулаков, Студия Олега Чулакова
В последние годы вектор направлен на расширение интерактивных возможностей дизайнера.

Многочисленные сервисы прототипирования позволяют избежать написания большого количества кода для тестирования приложений, даже если внедряются нестандартные решения.

То же касается и сайтов, созданных через онлайн-конструкторы, которые доказали состоятельность.

Артур Арсенов, Looi Factory
Тренды: автоматизация средств получения обратной связи, более технологичный подход к анимации и упрощение ее производства. С точки зрения рынка появляются очень сильные и быстрые игроки. То, о чем мы мечтали в 2013–14-х годах — уже сейчас реальность. Сейчас для того, чтобы появился качественный и быстрый прототип, в котором можно обсудить правки с командой и партнерами, нужно просто несколько часов работы. Качество же инструментов прототипирования и проектирования не перестает удивлять. Если вчера нужна была лаборатория для получения вводных данных о том, как будет работать гипотеза, сейчас ее заменяет несколько удобных и быстрых приложений. Индустрия развивается невероятно быстро, и я в восторге от прогресса.

Никита Михеенков, Nimax
Рынок неожиданно проснулся и уже появились сразу несколько новых и мощных инструментов — мы постоянно тестируем что-то новое и все больше работаем с новыми сервисами: Sketch и Adobe Experience Design. Старые системы тоже начали быстро подстраиваться под изменения, тот же Photoshop уже неплохо подтянулся под требования цифровых дизайнеров.

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

Для больших сложных проектов все осталось так же: Axure и Photoshop.

Леонид Борисов, Redmadrobot
Последние два года активно развивается индустрия продуктов и сервисов, специализированных на проектировании интерфейсов и прототипировании. Основные фокусы развития инструментов: скорость отрисовки экранов интерфейса; прототипирование пользовательского взаимодействия, приближенное к нативному; снижение трудозатрат на этапе передачи интерфейса в разработку; интеграция прототипа интерфейса со средой разработки приложения.

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

Влад Меркулов, Beta
Популярность Sketch заставила Adobe двигаться вперед; здоровая конкуренция между ними, без сомнения, приведет к значительному улучшению обоих продуктов. Большое значение стало уделяться интерактивной анимации в интерфейсах. В ближайшей перспективе этот функционал станет базовым для графических программ.

Евгений Гаврилов, «Собака Павлова»
Инструменты начинают делать для людей: думают об удобстве и скорости работы. А в целом заметно, что инструменты все больше обретают дизайнерские черты и приближают нас к реальности: больше дизайна, больше интерактивности. Проектирование и эстетика все ближе друг к другу.

Еще — проектирование сразу с версткой (сокращение времени разработки) и «рисование картинок» для бизнеса — для инвестиционных проектов или для случаев, когда нет готового продукта, но хочется и есть общее понимание (такой продукт через итерационность).

Здесь вопрос скорее не в развитии индустрии, а в потребностях рынка, иногда вслух неозвученных: запуститься побыстрее, с меньшими потерями, понять что-то и побежать дальше.

2. Есть ли рыночная потребность в появлении каких-то принципиально новых средств для работы дизайнеров и проектировщиков?

Артем Геллер, Lab.Ag
Безусловно, абсолютно пустая ниша для хорошего продукта. Ситуация показывает, что нишу могут занять как мэйджоры, так и совсем новые игроки. Профессиональное сообщество инертно, оно интересуется, пробует и готово платить и внедрять новые инструменты в свои процессы.

Дмитрий Карпов, Британская высшая школа дизайна
Фактически не существует инструментов для предварительных исследований проблем дизайна, тестирования, специализированного сбора информации для начала работы над проектами. Пока с этими задачами справляются разные инструменты от Evernote до Trello, но явно не хватает интеграции с инструментами разработки, чтобы удобно подглядывать за вдохновляющими примерами, видеть собранные вместе интерфейсы конкурентных продуктов, иметь быстрый доступ к техническому заданию и выводам.

Александр Ковальский, CreativePeople
Весь инструментарий по-прежнему крутится вокруг оперативного создания макетов, которые помогают проверить за минимальный срок максимальное количество гипотез.

Некоторые инструменты помогают работать с элементами, как с CSS: одним кликом вы сразу меняете на всех макетах заголовок, стиль текста и т.д.
Оптимизация времени на внедрение гипотезы в проект — это следующий шаг. Тут большое поле для работы. Общая тенденция сводится к тому, чтобы в процессе (от проектирования до публикации проекта) участвовало как можно меньше специалистов. Есть решения, которые имеют хороший инструментарий для создания информационного дизайна и фактически полностью устраняют потребность в технических специалистах для публикации.

Сергей Попков, AIC
Становится очевидно, что современный дизайнер интерфейсов — вновь универсальная единица. Идеальный продукт должен быть спроектирован, отрисован и сверстан с учетом всех анимаций взаимодействий одним лицом, автором. Именно такое решение будет самым качественным и продуманным. В этом сегменте и будут развиваться инструменты. Все в одном. Самый удобный должен победить. Пока отдаленно стоит посмотреть на Framer.js.

И не стоит ставить крест на инструментах Adobe. Уверен эти парни, учитывая их объемы и возможности, еще могут дать угля индустрии. По крайней мере, анонсы их новых продуктов впечатляют.

Александр Гладких, Charmer
Я пока не сталкивался ни с одной программой, которая бы была до конца удобной или включала в себя все необходимые функции. Так что думаю, я не одинок в этом.

Степан Бурлаков, Freeger
Эта область достаточно насыщена качественными инструментами с почти одинаковым функционалом. Отличия в UI и каких-то «фишках» для удобства — это не «киллерфича», которая перетянет огромное количество юзеров. Когда нет революционного предложения, нет смысла менять те программы, к которым привык.

Иван Васильев, Альфа-Банк
Насчет «рыночной потребности» не знаю, но у человечества целиком есть биологически обусловленная тяга к совершенствованию и поиску нового: эволюция. Поэтому принципиально новые продукты тоже будут появляться. А у рынка «принципиально новых» потребностей быть не может, именно потому что они — принципиально новые. Такие принципиально новые средства как раз формируют (новые) рынки по определению. Другими словами, подвох скрыт в самом вопросе. Если появится что-то принципиально другое, то либо будет другой рынок, либо не будет нужды в дизайнерах-проектировщиках.

Андрей Класс, НТВ
Рынок диктует стилистику, скорость, результат, но не инструментарий. Если дизайнеры не будут забывать такие инструменты как ножницы, линейку и карандаш, рынок будет в порядке.

Максим Орлов, ONY
Не хватает одного или двух инструментов, идеально работающих в связке, оптимизированных под работу с интерфейсом.

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

Олег Чулаков, Студия Олега Чулакова
По поводу новых инструментов сказать сложно, всегда скептически относились к очередному убийце Photoshop, но появился Sketch, который даже при наличии большого числа багов в ранних версиях завоевал свою аудиторию.

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

Артур Арсенов, Looi Factory
Конкуренция сама говорит все. Быть дизайнером сейчас уже сильно проще, и одновременно сменилась парадигма: если раньше дизайнер реализовывал четкие инструкции, то сейчас его задачи — больше продуктового характера, а богатый и растущий инвентарь дает возможность это делать еще быстрее и погружаться с большей скоростью в задачи бизнеса, а не в самореализацию самого дизайнера. Говоря о потребностях — завтра наверняка профессия изменится в корне, и на это повлияет то, как изменится инструментарий.

Никита Михеенков, Nimax
По-прежнему остаются несколько нерешенных проблем в системах проектирования и дизайна. Все еще нет инструмента, который позволяет органично преобразовать прототипы в полноценные макеты внутри одной системы: проектируем в одном инструменте, затем пересобираем макеты в другой. Системы мастеров и шаблонов для работы с большими интерфейсами, в которых одни и те же элементы повторяются многократно, реализованы далеко не везде. Анимация интерфейса невозможна в большинстве инструментов, и при этом она играет все более критичную роль в дизайне.

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

Дмитрий Иваночек, qb
Того, что есть сейчас, вполне хватает для создания качественного продукта. Хотя не исключаю появления чего-то, что поможет на уровне дизайна создавать проекты, с помощью которых можно будет сразу показать клиенту, что получится в итоге. Этакий Axure с возможностью Photoshop.

Леонид Борисов, Redmadrobot
На рынке с десяток продуктов и сервисов, призванных помочь дизайнеру интерфейсов: от отрисовки экранов и прототипирования до подготовки к передаче интерфейса в разработку. Каждый из этих сервисов закрывает только часть потребностей дизайнеров, при этом дизайнеры тратят время на освоение каждого продукта, а компания тратит деньги на покупку лицензий. Шагом развития этого рынка станет появление единой платформы, которая могла бы закрыть потребности дизайнера интерфейса.

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

Влад Меркулов, Beta
Скорее есть потребность в единой платформе для организации процесса проектирования, дизайна и ведения проекта. Сейчас же у команды есть несколько никак не взаимосвязанных инструментов, между которыми приходится постоянно переключаться.

Евгений Гаврилов, «Собака Павлова»
Есть. Для VR, AR и прочих MR. «Поле не пахано». Разработчики принюхиваются. А рынок начинает реагировать.

В более приземленных вещах рынок уже отреагировал, и такие средства есть и создаются (Sketch, Invision, Adobe XD и прочие «фотошопы»). А там посмотрим.

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

3. Каковы перспективы и проблемы внедрения систем контроля версий макетов? Какие существуют способы установления связи между версиями прототипов, дизайна и верстки?

Артем Геллер, Lab.Ag
К сожалению, проектировщиков и дизайнеров все еще не включили в git-подобные экосистемы разработки. Каждая компания изобретает свой, особенно хитрый «велосипед», базой для которого является педантичность проектировщика-дизайнера или существующий на рынке недопродукт.

Дмитрий Карпов, Британская высшая школа дизайна
Не вижу большой необходимости, поскольку культура разработки у профессионалов уже выработала простейшие и эффективные приемы ведения каталога версий, присваивания имен файлам, сохранения альтернатив в облачном сервисе.

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

Александр Гладких, Charmer
Мы до сих пор в студии не можем оптимизировать этот процесс, особенно когда работа над дизайном проекта ведется сразу несколькими людьми. У Adobe появилась облачная библиотека, в которой можно хранить все иконки, цвета, стили текста, но и она работает далеко не идеально.

Иван Васильев, Альфа-Банк
Обычно самый актуальный макет — работающее приложение/сайт, потому что даже в самом идеальном случае, когда, казалось бы, все продумано до мелочей, бой накладывает свой отпечаток, и появляется расхождение с макетами. Не помню случаев, чтобы всерьез в макеты переносили результаты изменений на фронте: жизнь богаче.
Задачу пробовал решить наш бывший коллега, Антон Виноградов, с проектом Protein, но решение затянулось, и наблюдаем за решением без былого энтузиазма. Но от всей души желаю этому проекту развития, и если он появится — кому-то может принести пользу.

Андрей Класс, НТВ
Внедрение контроля версий — прерогатива довольно крупных проектов и больших распределенных команд, и данная проблема решается всегда на частном уровне в зависимости от большого числа вводных. Глобально — системы есть, но должны быть стандартизованы, чтобы применяться как в крупных, так и в мелких процессах на уровне API.

Максим Орлов, ONY
Контроль версий в дизайне — один из самых сложных и пока не решенных на комфортном уровне вопросов. Мы решаем проблему организацией правильного процесса и созданием микрофреймворков с поддержкой версий в каждом проекте.

Максим Павлов, Notamedia
На масштабных проектах, где количество макетов в разных состояниях исчисляется не десятками, а сотнями, проблема особенно заметна.

Олег Чулаков, Студия Олега Чулакова
Если все в отдельности, то существует сервисы для контроля, никаких проблем нет.

Артур Арсенов, Looi Factory
Версионность — это веселая тема. На данный момент на 100% эту задачу так и не смог реализовать никто и никак. Все еще приходится находить свой путь по достижению актуализации и говорить о том, что можно легко держать несколько дизайнерских репозиториев, близких по духу GIT — это, увы, пока утопия. Хотя попыток было много. Мой личный фаворит — это Dropbox и хорошая структура папок. Это весьма емко по месту и требует дополнительной организации от команды. Но такого решения, чтобы «взял, и завелось», особенно в продуктовой работе, когда релизов много (есть тестовые версии, текущие и грядущие) — это всегда сложный процесс, где приходится искать подходящую модель под продукт, команду и потребности.

Никита Обухов, FunkyPunky
Мне кажется такой проблемы давно уже нет. Есть инструменты, которые хорошо и просто справляются с задачей. Делать более сложные штуки можно. Скорее всего, это будут плагины.

Дмитрий Иваночек, qb
Нормальная система постановки и контроля задач решает эту проблему. Все исходники по ключевым точкам дизайна «прикрепляются» к соответствующей задаче в проекте. Остальное — вопрос аккуратности и последовательности в наименовании файлов самим исполнителем.

Леонид Борисов, Redmadrobot
Во внедрении специальной системы контроля версий макета пока нет целесообразности. Материалы по проекту, включая документацию, ваерфреймы, дизайн, карты экранов можно хранить в папке проекта в облачном хранилище, которая доступна рабочей группе.

Сергей Никишкин, ADV
Контроль версий — это «святой грааль», все обсуждают, хотят, но мало кто может похвастаться рабочей системой. Основная проблема — нет универсального базового решения, которое можно будет адаптировать под свои нужды. Каждая команда решает проблему контроля версий на основе своих потребностей, возможностей и доступного инструментария. Другая немаловажная проблема — это человеческий фактор. На этапе внедрения и последующей «обкатки» любого решения необходимы подробный инструктаж и жесткий контроль за людьми, вовлеченными в процесс, в противном случае, перспективная задумка медленно скатится в борьбу с ветряными мельницами.

Влад Меркулов, Beta
На данный момент все, как правило, решается в голове самого дизайнера или проектировщика с помощью организации правильных процессов внутри команды и написания четких инструкций. У разработчиков есть Git и аналогичные удачные решения; нет сомнения, что в ближайшее время их опыт будет использован разработчиками программного обеспечения для дизайна.

Евгений Гаврилов, «Собака Павлова»
Самая большая проблема — внедрить это в компании и начать пользоваться. Git, BitBucket, Invision, тот же Sketch все это умеют.

4. Как и на каком этапе должна продумываться адаптация контента сайта под разные версии разрешений и устройств? Возникают ли проблемы с проектированием и демонcтрацией адаптива?

Артем Геллер, Lab.Ag
Никаких безоглядных mobile-first идеологий! Всегда нужно исходить из задач. Финальный продукт должен быть продуман и адаптирован под все размеры, форматы и разрешения. Мы предпочитаем думать о всех версиях параллельно и с самого начала закладывать это в сроки. Практически мгновенно поднимаем стенд с текущими результатами, и клиент всегда видит, на каком этапе мы находимся, заходя на ресурс со своего телефона или ноутбука.

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

Александр Ковальский, CreativePeople
Объем макетов и вариантов адаптации стремительно увеличивается даже при создании простого корпоративного сайта, и клиенту все сложнее уследить за всеми деталями. Мы все чаще для проектов собираем гайдлайны, где описываются критерии и правила, которые потом используют при сборке адаптивных макетов. И все реже согласовываем каждый макет по-отдельности.

Александр Гладких, Charmer
Мы стараемся это делать на этапе прототипирования, так как стараемся уже на этом этапе выдавать достаточно близкие по структуре и пропорциям макеты.

Степан Бурлаков, Freeger
Это зависит от типа проекта. Если дизайн блочный, то сразу складывается понимание как и что будет ресайзиться, в том числе под мобильные устройства. Когда дизайн нестандартный, для мобильных устройств обычно требуется переосмысление визуальной концепции и получается не адаптив, а полноценная мобильная версия.

Иван Васильев, Альфа-Банк
Mobile First. Проблем не возникает.

Андрей Класс, НТВ
Проблема в том, что не контент сайта должен подстраиваться под дизайн, а дизайн должен подстраиваться под контент. Когда дизайнеры начнут это понимать, проблемы с адаптацией дизайна не будет.

Максим Орлов, ONY
Работа с контентом начинается еще на стадии стратегии и исследований. Уделяется этому до 20% времени. На вайрфреймах контент детализируется, и подключается копирайтер. Адаптация начинается на этапе концептинга и далее продолжается уже по всем дизайн-шаблонам. Также после сборки и отладки продукта делается пост-дизайн, и некоторые контентые блоки оптимизируются в зависимости от экрана и скорости работы девайса.

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

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

Артур Арсенов, Looi Factory
Адаптив — это «новый черный», он просто стандарт, более 40% трафика — это мобильный трафик в разных итерациях. Сложнее всего показывать на прототипах пограничные состояния: приходится собирать «живую» верстку для того, чтобы показать переходные моменты от телефона к планшету и от планшета к компьютеру, и от компьютера к ультрашироким экранам. С точки зрения этапов, на старте уже надо понимать, что сайт — это не монопродукт для компьютера, а это веб-приложение, которое работает на нескольких типовых платформах, игнорировать это глупо. Потому адаптацию нужно продумывать со старта. Проблем как таковых нет. Можно и «гифку» показать, и видео сделать, и верстку собрать.

Никита Обухов, FunkyPunky
Задача с демонстрацией решена — можешь использовать сложные системы проектирования, можешь просто сделать кликабельные прототипы. Адаптация контента — все очень индивидуально. Мы больше не разделяем это на разные этапы производства. Все делается в одну итерацию.

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

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

Евгений Гаврилов, «Собака Павлова»
На этапе формализации идеи и аналитики. Понять, для кого делаем, а потом уже делать. Тут важно помнить, что фокус внимания и кейсы на разных устройствах и в разных средах использования отличаются.

С проектированием адаптива сейчас действительно есть проблемы: по сути нужно проектировать еще одну такую же страницу десктопа под разные разрешения. Вносить правки — большая боль.

5. Как решать проблему демонстрации интерактивного взаимодействия в интерфейсе? Как визуализировать и согласовывать это с клиентами?

Артем Геллер, Lab.Ag
Клиенту очень просто продавать продукт, когда прототип интерактивен — психологическая закономерность. В штате нужен специалист, который со знанием дела, еще на презентации, сможет «дать потрогать» первый этап нашего понимания задачи.

Дмитрий Карпов, Британская высшая школа дизайна
Клиент очень любит магию двигающихся картинок. Так что лучший способ презентовать — это показать короткое видео о том, как полсотни людей пользуются прототипом будущего проекта. Это помогает понять контекст использования разделов, увидеть реальную аудиторию и при возможности самому проверить гипотезу на надежность. Очень легко создать интерактивный прототип, собрав несколько сценариев пользователя в один макет и соединив все ссылками и анимацией переходов. Но самая важная задача — это показать связь выработанных поведенческих ожиданий с конкретными интерфейсными решениями, а это уже частично зависит от понимания и дизайнерами, и клиентом бизнес-процессов и их отражения в дизайне.

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

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

Александр Гладких, Charmer
Особо сложные динамические макеты, например, с фиксированными элементами или блоками мы стараемся подверстывать в облегченной форме еще на этапе дизайна.

Степан Бурлаков, Freeger
В процессе производства все, что ты придумываешь, обычно переделывается по несколько раз и итоговый продукт может очень сильно в плане интерактива отличаться от первоначальной идеи. Мы крайне редко показываем клиенту как будет работать сайт в динамике, но иногда бывают такие просьбы. Можно делать короткие видеоанимации для показа ключевых моментов, но потом они, как правило, меняются в значительной или незначительной мере.

Иван Васильев, Альфа-Банк
Показать рабочий и протестированный интерфейс. Если работать спринтами и поставлять рабочий продукт, а не части продукта (дизайн, прототип и т. п.), то такого вопроса не встанет. А так — куча инструментов для прототипирования и анимации интерфейсов.

Андрей Класс, НТВ
Анимировать.

Максим Орлов, ONY
Всю анимацию интерфейса и интерактив удобно показывать в виде анимированной презентации по одному или нескольким юзер-кейсам. Это позволяет посмотреть на интерфейс со стороны. Также делается кликабельный прототип с черновой анимацией.

Максим Павлов, Notamedia
Если речь про логику работы и заказчик готов смотреть на серые прямоугольники, то в прототипе. Если речь про динамику и визуальные фишки, то в дизайне, анимированном специально для этого. Во втором случае берется «нарезка» макета в состояниях, хороший аниматор колдует над этим, например, в АfterЕffect, и это в видеоформате презентуем заказчику. Если по дизайну хочется покликать, берем Invision.

Олег Чулаков, Студия Олега Чулакова
Для клиентов мы часто делаем видеоролики концепций, это значительно сокращает сроки согласования.

Артур Арсенов, Looi Factory
Существуют разные способы: от видео до технических прототипов. Согласовать можно только аниматик и дальше сделать его в верстке. Если скорость производства крайне высокая, можно и на пальцах, и на статичных картинках показать, что будет, и предоставить референсы. Проблемы как таковой на этом этапе не бывает. Надо просто понимать, что будет, и иметь сильных разработчиков, способных реализовать желаемое на всех платформах и сквозь все ограничения.

Никита Обухов, FunkyPunky
Подходов очень много. Есть инструменты, которые позволяют простым способом эмулировать взаимодействие с приложением или сайтом, есть те, что дают возможность в очень простой форме согласовывать дизайн и писать комментарии.

Дмитрий Иваночек, qb
Данная задача легко решается на уровне презентации интерактивных адаптивов.

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

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

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

Евгений Гаврилов, «Собака Павлова»
Презентовать посценарно. Отделять «мухи от котлет»: каждый комментарий клиента класть в свою корзину — идея / дизайн / функционал и после этого обсуждать детально (отметать «не нравится» или «слишком много оранжевого»).

Интерактивность, салфетка, видео со звуковыми эффетками, Keynote? Все зависит от задач и от клиента. Если с клиентом договоритесь, то не забывайте о разработчиках. Чтобы они поняли, что и как работает.