InVision против всех
Когда веб-дизайн зарождался, инструментов для создания сайтов почти не было. Был Photoshop, который редактирует и ретуширует фотографии. Использовали его. Со временем пришло понимание, что Photoshop не так удобен для создания интерфейсов.
Рынок развивается, и сейчас есть четыре крупных игрока. Это — Adobe XD, Sketch, Figma и недавно анонсированный InVision Studio.
Photoshop вечен
Судя по комментариям в сети, от Photoshop отказался каждый, однако число пользователей растет.
Пользуемся им в студии и считаем крутым, но для своих задач. В первую очередь Photoshop — графический редактор. Ретушь, рисование, технический дизайн — его сильные стороны. И конкуренты в этой области у него свои.
Когда просят сосчитать до десяти, не начинай с алфавита. Докрутить фотографию — используй Photoshop. Создать прототип сайта или дизайн интерфейса — используй Adobe XD, Sketch, Figma, InVision Studio.
Встречайте, Studio
Новый продукт для проектирования графических интерфейсов. Изначально позиционировался как дополнение к Photoshop для совместной работы. Однако компания пошла дальше. Подняла проблемы интерактивного прототипирования, анимации и сыграла на этом.
При запуске встречает знакомое окно. Здесь выбирается пресет устройств, открываются последние файлы, есть обучения и обратная связь. Возможность импорта Sketch-файлов.
Панель слоёв организована следующим образом: создаются страницы, в них создаются артборды, в них — слои.
Понятный интерфейс. Создать заливку и добавить обводку просто. Изменение цвета, градиента, прозрачности — в пределах одного курсора.
Поговорим о функциональности и сравним с другими инструментами.
Studio против Adobe XD и Sketch
Цена
Пока Studio не выйдет окончательно, оценить стоимость трудно. Разработчики утверждают, что сделают цену максимально доступной. Пока ждём.
Sketch стоит $99 за одного пользователя в год. Работает только под OS X.
Adobe XD, который до недавнего времени стоил 750 рублей за месяц использования, теперь бесплатный.
Функциональность или инструменты
Бесплатный продукт от компании Adobe — весомый плюс в его пользу. Но и минусов хватает. Создается ощущение, что XD делали не для людей.
В Studio хочешь увеличить длину объекта на 100 — пишешь в поле длины »+100». Размер меняется. Adobe XD не рассчитает это сам, не умеет.
При работе с текстом все буквы в один клик можно сделать маленькими или большими, чего тоже не хватает в XD.
Ты не сделаешь интерфейс, который растягивается под мобильные и планшетные версии — в XD отсутствует «резиновый» дизайн. В Sketch эта функция достигалась за счёт установки расширения. В последних версиях стала встроенной.
Компоненты
Подход к компонентам в Studio такой же, как у Adobe XD и Figma. Текст редактируется прямо в артборде. Не нужно лезть в какие-то блоки, искать поля ввода, как в Sketch. Выбираешь компонент и меняешь сразу в нём.
Создаёшь кнопку с текстом. Выделяешь два объекта, кликаешь «Создать новый компонент» — готово.
Хочешь поменять фон у одного компонента, не затронув его на другом артборде, — кликай по фону на панели инструментов и меняй цвет только у того компонента, который выбрал.
В Studio и XD взаимодействие между элементами настраивается внутри программы. В Sketch ты ставишь плагин для Marvel, экспортируешь в него артборды и возишься уже там.
Расширения
У Sketch много сторонних расширений, и часть из них давно не обновлялась. Ещё большая часть несовместимы друг с другом. Последний гвоздь в крышку — использование одних и тех же горячих клавиш одновременно влияют на несколько расширений и создают конфликт. Стоит ли говорить, что один из популярных плагинов для Sketch — «Craft» создали Studio.
У Studio и Adobe XD внутренняя экосистема, которая позволяет прототипировать и отдавать разработчикам готовые файлы. Сторонних расширений нет.
Быстродействие
В Sketch медленное перемещение между версиями. Разработчики часто отключают функцию — слишком загружает дисковое пространство. Внутренняя система управления версиями Applе создаёт копию файла при сохранении. Каждое нажатие ⌘ + S на клавиатуре добавляет в папку файл в 30 мегабайт. Со временем папка вырастает до размера в сотни гигабайт.
Удаление папки не решает проблемы — пользователи жалуются на низкую производительность системы. Рабочее решение — отключить контроль версий.
Команда следующая:
defaults write -app 'sketch' ApplePersistence -bool no
Продукты Adobe требовательны к железу — XD не исключение. Быстродействие напрямую зависит от мощности вашего компьютера.
Скорость работы Studio под стать цене — пока не ясна. На стадии тестирования сложно оценить, «подлагивает» продукт или требует мощности. В целом показывает себя довольно шустрым.
Востребованность
Открой сайт вакансий. Востребованность дизайнеров, работающих в Adobe XD и Sketch, в среднем один к десяти. Даже Studio в бета-версии превосходит количество вакансий на XD в два с половиной раза.
Studio против Figma
Цена
Сейчас у Figma есть два командных пакета: бесплатный стартовый и профессиональный — $12 в месяц.
Бесплатная версия — истории версий ограничены в 30 дней.
Профессиональная версия — неограниченная история версий и количество проектов.
Функциональность или инструменты
Основное отличие Figma от Studio — автономность. Пользователи ругаются, говорят, что браузерный инструмент — это хрень. Или отличная возможность освободить место на устройстве. Если сильно нужно, можно сохранить копию файла в формате .fig. Это позволяет открыть проект без интернет-соединения. Как только связь появится — проект обновляется в облаке. Кроссплатформенность строит рабочий процесс на Mac, PC или Linux.
У FIgma есть Intercom — техподдержка прямо в приложении! Не нужно искать email или другие контакты. Помощь оперативная. Если что-то непонятно — не поленятся, запишут скринкаст.
В Figma видно, когда редактировали проект, кто это сделал, есть возможность вернуться в ранние версии. Файл можно скопировать с конкретного изменения. Это встроенная функция. Не понадобится ни Studio, ни Dropbox. Каждый проект и его версии хранятся на отдельном сервере. Это облегчает задачу итераций.
Есть зеркало дизайна. С его помощью проецируешь прототип с десктопа на мобилку и смотришь адаптированность. У Studio и Figma проекция на устройство доступна по Wi-Fi, у XD — только по кабелю. Figma проецирует только скриншот, Studio — проект в реальном времени.
Figma перевернула командную игру. Одновременное проектирование с дизайнерами и программистами ускоряет разработку. Помимо действующих лиц, за проектом могут наблюдать менеджер и арт-директор. Отличный способ для командной работы — показывай, а не рассказывай.
Studio в этом не отстаёт. Организуй команду целостной дизайн системы продукта, которая хранит и использует все компоненты — шрифты, иконки, логотипы, Hex-коды.
А ещё Figma «зарелизила» API для разработчиков. Теперь она может преобразовать дизайн в код для React. Также появилась интеграция с Zeplin, Avocode и Slack.
Компоненты
Создаёшь в Figma компонент, добавляешь его в командную библиотеку, и если обновить корневой компонент, изменения затронут каждый экземпляр.
Тексты в артбордах, взаимодействие между элементами — как в Studio.
Figma — инструмент, который обновляется сам. При запуске системы ты не увидишь уведомление «доступно обновление».
Расширения
Figma — браузерный инструмент. Соответственно, имеет внутреннюю экосистему прототипирования. Сторонних расширений не установить.
Быстродействие
Входной порог в Figma низкий. Мощности вам понадобятся, но не такие значительные, как для продуктов Adobe. Инструмент быстр и без проблем обрабатывает 15–20 артбордов в одном документе.
Не смотря на то, что инструмент браузерный, слабое железо навряд ли справится. Например, на встроенной видеокарте Figma может не работать.
Востребованность
В этом показателе инструменты друг другу не уступают. На hh.ru равное количество вакансий для обеих программ.
Киллер-фича в создании интерфейсов
Preset-анимация
Примитивная есть в XD, Sketch — ей никого не удивить.
Studio — первый редактор интерфейсов, в который встроены инструменты для работы с анимацией.
В настройках анимации есть два вида триггеров:
- Тач-взаимодействия (свайпы в разные стороны, «тапы», «двойные тапы»);
- Взаимодействие с курсором (при наведении, если курсор «ушёл» с объекта, клики или двойные клики).
Есть запуск анимации по таймеру и обработка нажатий клавиш с клавиатуры.
Motion-анимация
В этом режиме артборды работают как ключевые кадры. Присутствует редактирование таймлайна. Детально настраиваются начало и конец анимации каждого объекта. Можно создавать шаблонные «кривые» анимаций. Вручную задавать графики анимаций — заставлять её подпрыгивать, переворачиваться, исчезать. Пользуясь Studio, получаешь встроенный After Effect.
Sketch в связке с Principle тоже способен реализовать motion-анимацию. Но для этого придётся заплатить за Principle ещё сотню баксов.
Стоит ли надеяться на Studio
Определённо. Редактор уже в бета-версии показывает себя неплохо. Motion-анимация — веская причина пересесть на Studio. Фишка крутая.
В магазин завезли приложения. Ищите изображения, делитесь макетами с коллегами и публикуйте шоты на Dribbble прямо в Studio. На момент запуска в магазине уже доступны приложения от партнёров Studio, среди которых Google, Slack, Trella, Dribbble.
В дальнейшем магазин позволит дизайнерам продавать свои наработки и пользоваться готовыми шаблонами и библиотеками.
Будем надеяться, что Studio на этом не остановится и с официальным выходом покажет новые крутые особенности.
Революция цифрового дизайна. Скоро
Пока известные компании бьются за место в топе, появляется теневая фигура. Имя ей — Phase. Об инструменте знают немногие.
Компания ведёт себя самоуверенно и говорит, что это новый продукт для цифровой эпохи. В нём создаются прототипы, которых раньше не видели.
Тестирование инструмента начнётся летом этого года. Тогда и посмотрим, тратить на него время или пройти мимо.
#дизайн #инструменты
© vc.ru
