Главный претендент на революцию в мобильном дизайне. Первые впечатления от бета-версии InVision Studio

@DH.company

В настоящее время основной инструмент в работе дизайнеров из команды DH.company - это Sketch. В этом мы не отличаемся от большинства современных студий, ведь программа давно доказала, что является наиболее удобной и эффективной для прототипирования всего что угодно: от обычных баннеров до сложных пользовательских интерфейсов.

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

Вот такой прототип для наших партнеров мы сделали в Principle

Этих двух программ, плюс Adobe After Effects для особенно изощренных анимаций и видео со звуком, вполне достаточно, чтобы сегодня отвечать требованиям рынка. Есть еще Zeplin - популярный инструмент для передачи прототипов разработчикам. Это удобный софт, но у нас он как-то не прижился. Многие также вспомнят Figma, браузерный аналог Sketch для командной работы. Но и он нам не подошел.

Естественно, что в в работе с этими программами, как и с любыми другими, есть свои проблемы. Главная из них выглядит примерно так: дизайнер создает прототип в Sketch, анимирует его в Principle, отдает макеты разработчикам в Zeplin, расшаривает прототипы менеджерам и заказчикам, у которых может не быть Mac, экспортируя для этого файлы из Sketch в Figma. Выходит, вместо того, чтобы творить, дизайнер тратит огромное количество времени на подготовку файлов для дальнейшей с ними работы коллег и партнеров.

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

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

Лаунчер Studio сразу дает понять, что легко откроет любой Sketch-файл

Studio сразу радует хорошей интеграцией с программой Sketch. В DH.company мы грузили в приложение файлы разных величины и сложности. В случае импорта особенно крупных объектов работает несколько задумчиво, но главную функцию выполняет - импортирует без ошибок. Пожалуй, уже за это программу можно полюбить - не нужно перерисовывать все текущие проекты - просто импортируй их в новую среду и готово. Причем, переносит даже объектные символы (!).

Тестируем наш самый тяжелый Sketch-файл в Studio. Приятный темный интерфейс понравится любителям работать по ночам.

С самого начала может напугать зум кнопкой "Control", а не обычной для яблочников "Command", но это дело привычки. В остальном InVision Studio управлять так же легко, как и Sketch. Единственное, что раздражает в первое время, - отсутствие знакомых линеек. Но у каждого артборда есть масштабируемые гриды, которые достаточно удобны, и к ним быстро привыкаешь. Впрочем, линейки все же стоило бы добавить. В остальном вопросов нет - все круто и стабильно работает.

Отдельное спасибо разработчикам InVision Studio надо сказать за возможность анимировать прототипы. Это именно то, что должен был сделать Sketch в 49-й версии, но так и не сделал. Motion-дизайн в последнем Sketch - это нелепое и абсолютно убогое занятие, приходится продолжать работать в Principle. Зато ребята из InVision показали, как должна выглядеть среда Principle внутри векторного редактора.

Привычные глазу таймлайны расположены слева. И правильно

Уже сейчас, на стадии открытого бета-тестирования, программа очень достойно анимирует объекты, предоставляя доступ к редактированию таймлайнов и кривой Безье. InVision Studio умеет интегрировать скроллы и различные ивенты, есть и возможность закреплять (пинить) отдельные элементы. Однако, все еще не хватает дополнительных наворотов с вариативностью анимаций, какие есть у Principle. К релизу их обещают прикрутить. Studio также еще не очень уверенно ворочает PNG-файлы, но тенденция к реализации данной функции явно прослеживается.

В целом, уже с тем, что есть сейчас, можно работать. Более того, у InVision есть приложение в AppStore - оно подтягивает из облака все прототипы с вашего аккаунта и позволяет взаимодействовать с ними на iPhone и iPad. Подобные приложения есть и у Sketch, и у Principle, но оба не очень удобны, а вот all-in one решение Studio подходит больше. Стоит заметить, что пока приложение еще не научилось съедать файлы .studio напрямую, надеемся что в ближайшее время эту опцию добавят. Тогда можно будет в привычном режиме получать файл в Telegram и открывать его в InVision Studio на смартфоне или планшете.

Встроенный мессенджер в InVision- можно обсуждать макеты с командой или клиентами

Киллер-фича. В настоящее время на рынке нет ни одного инструмента, позволяющего корректно отображать дизайн в коде для разработчиков. То, как это реализуется в Zeplin, для нас выглядит крайне неудобным решением. Команда InVision, в свою очередь, обещает, что приложение Studio будет корректно отгружать информацию о макете в Swift. Хочется надеяться на то, что это будет действительно так. Сейчас такой функционал только анонсирован - мы его очень ждем, чтобы потестить.

Хотим пожелать команде InVision успехов, ведь они делают действительно крутое приложение, которое понравится уже на стадии раннего доступа. Если все, что заявлено на релизную версию InVision Studio, будет реализовано, а по итогам открытого бета-тестирования будут внесены необходимые изменения, получится ультимативный продукт для комплексного решения задач по мобильной разработке.

Пишите ваши вопросы по работе с InVision, а также по дизайну и проектированию интерфейсов на [email protected] или в наш Telegram @DigitalHeroes. Будем рады на них ответить.

PS

У InVision очень крутой канал на YouTube - рекомендуем всем посмотреть их видео. Там масса полезного контента для дизайнеров, включая туториалы.

#дизайн [_ #_]инструменты

0
37 комментариев
Написать комментарий...
Kostya Levin

Решено, каждый месяц буду делать макеты в новой проге.

Ответить
Развернуть ветку
Даниил Жуков

Нет, можно всю жизнь рисовать макеты в Paint, на новый софт переходить не нужно. Не выходи из комнаты, не совершай ошибку.

Ответить
Развернуть ветку
DxdV

Если его макеты в Paint будут отвечать ожиданиям заказчиков и удовлетворять разработчиков, то в чём проблема?

Знаешь поговорку такую хорошую: не трогай то, что работает.

Ответить
Развернуть ветку
Nik Blinkov
Автор

Знакомые ребята очень круто рисовали в Illustrator, была своя студия, клиенты, денежка приличная. И как-то незаметно для себя пропустили выход Sketch и переход большинства дизайнеров на MacOS, продолжили работать, как раньше. В итоге через пару лет клиенты все куда-то делись - они ушли к тем, кто освоил более релевантный рынку инструмент. Сейчас выходит InVision. И это по ощущениям реально крутая штука. Никто не говорит, что Sketch, Figma, Zeplin плохи. Наоборот, это крутые приложения, но всегда стоит следить за новыми продуктами на рынке.

Ответить
Развернуть ветку
DxdV

До сих пор не пользуюсь Sketch, а проблем ни с работой, ни с доходом нет. Что я делаю не так?

Ответить
Развернуть ветку
Denis Bystruev

Да и в Apple не все используют Sketch:

https://developer.apple.com/videos/play/wwdc2016/805/

Ответить
Развернуть ветку
Ive Opa

Да, keynote для презентаций не зашёл — давайте использовать его для прототипирования.

Ответить
Развернуть ветку
Denis Bystruev

Каждой задаче свой инструмент. На Keynote мокапы с интерактивностью клепаются очень быстро. Когда у вас из 12 дизайнов 11 идут в корзину (как в Apple), делать их все в профессиональном инструменте накладно.

Когда остаётся последний дизайн, переделываете его в Sketch / Origami / InVision и передаёте в отдел разработки.

Ответить
Развернуть ветку
Pixel Lens
Знакомые ребята очень круто рисовали в Illustrator

Не Area17 случаем?

переход большинства дизайнеров на MacOS

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

Ответить
Развернуть ветку
DxdV

Не мешай людям придерживаться имиджа)) Дизайн-студия без пачки аймаков на столах - не дизайн-студия.

Ответить
Развернуть ветку
Nik Blinkov
Автор

Комменту про пачку аймаков ++. Мы, конечно, все яблочники. Но уверен, что гораздо важнее не пачка аймаков, а кто за ними сидит.

Ответить
Развернуть ветку
DxdV

То же самое касается и софта для работы ;)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Nik Blinkov
Автор

InVision Studio вышел осенью и по-прежнему находится в стадии early access.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Nik Blinkov
Автор

Мы именно про studio написали. Старые продукты InVision имеют немало недочетов.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Ive Opa

Выступаем против прогресса инструментов производства?

За свою практику ни разу не встречал заказчика, который принимал бы макеты, сделанные в пейнт. Макеты сейчас — это не красивые картинки. Это проекты, которые целиком передаются в отдел разработки как шаблоны, которые нужно оживить, из которых понятны все визуальные параметры, такие как, например: размер, тип шрифта, отступы для элементов и т.д. Причём тенденция в сторону максимальной оптимизации процесса перевода макетов в рабочий код очевидна: посмотрите на Origami Studio от Facebook. Они используют его в своём рабочем процессе, проектируя и шлифуя анимации. Это настолько продвинутая утилита, что от неё до рабочего UI уже в среде разработки остался один шаг, и он наверняка будет сделан в ближайшие года 3-4.

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

Ответить
Развернуть ветку
DxdV

Я думаю вам не нужно объяснять, что Paint здесь в метафорическом смысле?

Ваша оценка моей занятости меня не очень интересует)

Ответить
Развернуть ветку
DxdV

И нет, не выступаю против какого-то там прогресса. Выступаю за "каждый работает в том, в чём хочет если его это устраивает", пусть это будет хоть пэйнт.

Ответить
Развернуть ветку
Pixel Lens
Решено, каждый месяц буду делать макеты в новой проге.

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

Ответить
Развернуть ветку
Diana Kolyadovs

Но но. Figma - это дар божий для человека с видной) как я бесилась делать макеты в Фотошопе или изголялась с иллюстратором.

Ответить
Развернуть ветку
DxdV

Раз уж мы тут за софт перетираем, хочу предложить всем обратить внимание на Affinity Designer. Лично для меня - открытие этого года, от которого я буквально в восторге.

Ответить
Развернуть ветку
Pixel Lens

Тут нужно уточнять для чего юзаем и что до этого юзали. У меня со временем требования к продуктам адобы снизились - фш щас юзаю в основном для растра или для колхозных проектов, в котором колхозники требуют исходники в псд. Люстру - для иконок и вёрстки одно- и двухстраничной полиграфии. Ну и старые проекты по интерфейсам поддерживаю в люстре, там уж разработчики к ней привыкли сами. Индиз - ну он как обычно, для многостраничной туфты всякой. Интерфейсы переехали в фигму. Но для остального замены Адобы я не нашел - таки удобные проги, как ни хейть.

Ответить
Развернуть ветку
DxdV

Ну вот Affinity Designer - это фотошоп в векторе. Реально, преемственность управления сохранена донельзя, но с кучей плюшек для дизайна интерфейсов (нормальные артборды, сохранение элементов как символов и тд). Крутейшая вещь, короче. И главное - без ебучей подписки, с разовой оплатой за софт и будущие обновления.

Ответить
Развернуть ветку
DxdV

Короче для меня это теперь основной инструмент для дизайна интерфейсов, который отлично экспортирует без потерь и в PSD и импортирует из PSD, и сохраняет в svg и так далее. Обучаться не пришлось практически совсем, всё привычно после продуктов адоб. Так что люто бешено рекомендую, он стоит каждой копейки.

Ответить
Развернуть ветку
Pixel Lens

Что насчёт передачи макетов в разработку? Как она (передача) выглядит? После зеплина и фигмы программист избалованный пошёл, там код сразу можно извлекать - от этого тяжело отучить :)

Ответить
Развернуть ветку
DxdV

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

Ответить
Развернуть ветку
Ярослав Белов

О да. В прошлом году открыл для себя будто новый мир.

Ответить
Развернуть ветку
Nik Blinkov
Автор

присмотримся, потестим инструмент

Ответить
Развернуть ветку
Pixel Lens
дизайнер создает прототип в Sketch, анимирует его в Principle, отдает макеты разработчикам в Zeplin, расшаривает прототипы менеджерам и заказчикам, у которых может не быть Mac, экспортируя для этого файлы из Sketch в Figma. Выходит, вместо того, чтобы творить, дизайнер тратит огромное количество времени на подготовку файлов

Если вычесть из этого уравнения Principle - то все проблемы решались бы использованием Фигмы изначально.

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

Отгрузка корректного кода для Андроид и iOS - уже давно в фигме

То, как это реализуется в Zeplin, для нас выглядит крайне неудобным решением

Еще один повод выкинуть связку <программа>+Zeplin.

Хотим пожелать команде InVision успехов

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

Пишите ваши вопросы по работе с InVision, а также по дизайну и проектированию интерфейсов на [email protected] или в наш Telegram

Забыли, видимо, канал создать - находится только юзер, который Last seen within a month.

Ответить
Развернуть ветку
Nik Blinkov
Автор

Спасибо за комментарии по делу. Именно для этого и делался пост.

В нашей практике так сложилось, что нужен motion. Поэтому без principle ну никак.

Про версию под винду - да, в этом смысле InVision точно молодцы. Надо работать от аудитории, а винда - большой кусок рынка.

Про телегу - создали @digitalheroes давно. Пользуем редко, все работа работа, да личные аккаунты. Сейчас как раз начинаем развивать.

Ответить
Развернуть ветку
Pixel Lens
Про телегу - создали @digitalheroes давно. Пользуем редко, все работа работа, да личные аккаунты. Сейчас как раз начинаем развивать.

Ну вы уж давайте) Или хотя бы ссылку на телегу уберите из статьи, а то люди вроде меня сунутся туда - и ничего не обнаружат

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Ярослав Белов

Ребята, это нереально крутой продукт. Затестил. Даже в бете он рвет всех конкурентов, как скетч или хд. Просто wow. Очень рекомендую.

Ответить
Развернуть ветку
Pixel Lens

промахнулся веткой

Ответить
Развернуть ветку
Александр Фудин

И опять мои пять копеек. Я тестил студию еще почти месяц назад.
Потенциал инструмента очень крутой.

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

Ждем выхода какой-то более стабильной беты, а пока сидим на фирме.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
34 комментария
Раскрывать всегда