Эволюция инструментов разработки интерфейсов

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

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

Сегодня мне хотелось бы поделиться с вами наблюдениями об эволюции инструментов для построения интерфейсов. Прошу простить некоторый субъективизм и пунктуационные ошибки. Автор не претендует на истину в последней инстанции.:)

В начале времен ничего не существовало и только курсор кисти летал над пустыми холстами в Photoshop..

За последние 7-10 лет отрасль дизайна интерфейсов шагнула уверенно и далеко вперед. На смену монополисту в лице Photoshop стали приходить молодые и амбициозные инструменты для построения интерфейсов. Так сложилось, что я работал с дизайнерами, которые по-разному относились к PS и оценки его удобства для дизайна интерфейсов расходились от «незаменимый» до «возмутительно неудобный». Кто-то рисовал в Fireworks, кто-то в PS. Приходилось пару раз верстать макеты, созданные в Corel Draw, но сложно спорить с тем, что в те незапамятные времена фразы “дизайн сайта” и “Фотошоп” были единораздельной цельностью. Конечно, существовали и другие инструменты типа Dreamviewer, но здесь так же как и в музыке — практически все знают Metallica и Led Zeppelin, а какой-нибудь GG Allin пользовался значительно меньшей популярностью.

В те незапамятные времена было сложно представить хороший, быстрый, удобный в передаче макетов редактор. Безальтернативный Photoshop (“кто если не он?”), правки в макетах и бесконечные “Final design (5).psd”, расхождения в размерах одинаковых элементов и прочее. Конечно, вы можете сказать, что либо я работал “не с теми дизайнерами”, либо излишне драматизирую. Все это правда, но как и все на свете, правда лишь отчасти.

Дело в том, что в PS не было реализовано нормальных способов по унификации элементов. Сейчас мы называем это “символами” или “компонентами”, тогда в PS это были “смарт-объекты”. И они чертовски неудобны. Более того, я не встречал ни одного дизайнера, который ими пользовался. Нужно ли говорить о требовательности PS к системе? Работу с сетками и прочее? Думаю, те, кто работал с PS в то время помнят эти моменты. Конечно, кто-то может быть категорически несогласным со мной, но поймите - перебирать двигатель через глушитель (даже если вы исключительных умений механик-проктолог) - это идея так себе.

Исторически Adobe допускает ошибку сродни той, которую когда-то допустил Билл Гейтс, не сделав ставку на развитие интернета. Цена этой ошибке - Internet Explorer и с этим сложно спорить. В случае с Adobe ошибкой было игнорирование реальных требований рынка, его запроса на легковесный редактор с возможностью использовать абстракции, компонентов, стилей и прочего. Вы можете меня убить, но Photoshop никогда не подходил для создания интерфейсов, однако наращивание мускулов, прикручивание новых фич, прожорливость до оперативной памяти делали PS мало пригодным для дизайна в промышленных масштабах. Конечно, 80% макетов сайтов еще лет 7 назад создавалась только в нем, но это всегда было болью как для дизайнеров, так и для разработчиков.

Да, Adobe в свое время похоронил такой замечательный редактор, как Fireworks, выкупленный целиком со всей Macromedia и подходящий куда больше для создания интерфейсов, чем Photoshop. И это было коммерчески дальновидно: купить конкурента и со временем перестать выпускать для него обновления. Хотите плюшки, свистелки и это все? У вас есть для этого Photoshop. И куча других продуктов, которые вам точно подойдут. C 2012 года Fireworks больше не обновляется, забудьте про него.

Традиционно дела шли хорошо: пока тенденции дизайна тяготели к скевоморфизму, большому количество ретуши изображений, причудливым комбинациям объемных фигур и прочего “художественного изыска”, сложно было представить дизайн сайта нарисованный в чем-то кроме PS. Осенью 2010 года на край сцены, где-то у закулисья робко вышел Sketch. И сделал свои первые шаги в сторону мирового признания в среде дизайнеров. Простой и легкий, не требовательный к железу, (но привязанный к OS X ввиду использования QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSyn), он год за годом укрепляется как отраслевой стандарт для дизайнеров интерфейсов.

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

Теперь дизайнер может меньше думать о движении пикселей и больше о дизайне. Пожалуй, одно из главных достижений Sketch - это абстракции, которые позволяют удобно масштабировать дизайн, сохраняя его при этом консистентным. Отдельно “задизайненные” модули и блоки (при условии их “правильного” проектирования) позволяют собирать макеты новых страниц гораздо быстрее. При этом они имеют одинаковые отступы, размеры шрифтов, цвета и прочее. И все это только потому, что в Sketch появилась возможность объединить повторяющиеся элементы в символы и стили. Как на счет изменения отступов между одинаковыми блоками? Да, в пару кликов. Может, можно задавать размер фигуры с помощью математических выражений? Да. Простые векторные маски? Конечно. Работа с растром? Нет, для этого есть Photoshop. И в такой парадигме все становится на круги своя. Каждый инструмент используется для того, для чего больше подходит.

Adobe игнорировали молодого и дерзкого конкурента, однако в 2015 году широкой дизайнерской общественности был представлен Adobe XD. Своего рода “наш ответ Sketch”. Кросс-платформенный, от именитого издателя, он заведомо имел неплохие исходные данные. Однако, их разделяла со Sketch бездна в 5 лет. Тем не менее, Adobe XD стал захватывать рынок и оказался хорош для тех дизайнеров, которые по разным причинам (чаще всего экономическим) не могли работать в Sketch.

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

Казалось бы, что нового можно принести в мир, где уже существует Sketch и Adobe XD? Правильно, еще большую кросс-платформенность. В отличии от Adobe XD, Figma можно было запустить даже на Windows 7 и это существенно расширяло возможности дизайнеров, которые по экономическим или каким-либо еще причинам не могли обновиться до 10-ки. А как на счет Figma на Linux? Друзья, это вообще законно?! Такая возможность появилась потому, что наряду с декстопным клиентом существовал еще и браузерный. Вообще, если быть до конца честными, то и десктопный клиент Figma - это, грубо говоря, браузер. Поначалу этот момент больше отторгал. Не вызывало доверия то, что не находилось локально на вашей машине. Нет сети - нет дизайна. С другой стороны, все что вы делаете в браузере или на десктопе сохраняется в облаке. Автоматически. А еще есть версионирование. Со временем я перестал замечать большой разницы между браузером и дэсктопом, но сама идея сделать настолько универсальный продукт до сих пор плохо укладывается в голове. Да, кстати, если это все - облако, то как на счет коллаборативной работы? Да, она есть. Хм.. Может быть, можно отдавать макеты в разработку по ссылке? Да, в пару кликов. Уровни доступа? ДА. Можно обойтись без Zeplin? Да. Можно обойтись без Principle? Теперь - да. Плагины? Да. Построение гибких интерфейсов и auto layout - в той или иной степени тоже да. К слову, примерно год назад мне попадался материал о запуске Sketch в браузере версии и с тех пор я больше ничего об этом не слышал.

Конечно, может показаться предвзятым мнение, что Figma “перевернула игру” в дизайне интерфейсов, но она точно увлекла за собой большое количество дизайнеров, которые не имели возможность купить что-то яблочное и тех, кто застрял на уже ретроградской Windows 7. Вместе с этим, браузерная версия и облако расширили возможности использования продукта и дали возможность для удобных коллабораций. Figma стала комбайном, в котором можно дизайнить, прототипировать, анимировать, плюс недавно запустила свое казино с блэкджеком, похожим на что-то среднее behance между github. И всем этим можно пользоваться бесплатно. Похоже, мы стоим сейчас на пороге еще больших свершений в сфере инструментария для дизайна. Происходит сращение между дизайном и кодом, между визуальным языком и абстракциями. Все это, вероятно, на выходе позволит создавать более целостные, консистентные продукты и радовать конечного потребителя их качеством. По крайней мере, стоит на это надеяться.

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