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

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. И всем этим можно пользоваться бесплатно. Похоже, мы стоим сейчас на пороге еще больших свершений в сфере инструментария для дизайна. Происходит сращение между дизайном и кодом, между визуальным языком и абстракциями. Все это, вероятно, на выходе позволит создавать более целостные, консистентные продукты и радовать конечного потребителя их качеством. По крайней мере, стоит на это надеяться.

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

77
9 комментариев

Статья про дизайн, без картинок...

4
Ответить

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

5
Ответить

В итоге Figma всех победила?

1
Ответить

Моей ошибкой было оставить так мало места для выводов. Для каждого контекста задач, конечно, подходит каждый отдельный инструмент. Но если обратить внимание на то, какими темпами развивается Figma (при всей ее еще местами сырости), а так же то, что на нее мигрируют со Sketch или используют как доп инструмент вместе с ним - пожалуй, она заслуживает такого внимания. :)

4
Ответить

На момент конца года, когда в ней уже есть полноценные smart layouts, с её, кооперативностью, тарифами, гибкими компонентами и возможностью запуститься на любом (чайнике) ПК с почти любым бразуером — да.

1
Ответить

Норм экскурс! 🧐

1
Ответить

Очень интересно, но за счёт монотонного текста очень тяжело читать

Ответить