Дизайн Nik Blinkov
1 359

Главный претендент на революцию в мобильном дизайне. Первые впечатления от бета-версии 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, а также по дизайну и проектированию интерфейсов на info@dh.company или в наш Telegram @DigitalHeroes. Будем рады на них ответить.

PS

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Nik Blinkov", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d","_"], "comments": 37, "likes": 18, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 36162, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 36162, "author_id": 154134, "diff_limit": 1000, "urls": {"diff":"\/comments\/36162\/get","add":"\/comments\/36162\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/36162"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

37 комментариев 37 комм.

Популярные

По порядку

Написать комментарий...
8

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

Ответить
5

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

Ответить
6

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

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

Ответить
3

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

Ответить
5

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

Ответить
0

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

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

Ответить
2

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

Ответить
1

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

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

Ответить
2

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

Не Area17 случаем?

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

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

Ответить
5

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

Ответить
1

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

Ответить
2

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

Ответить
0

инвижн вышел уж давно, а вы только ща узнали

Ответить
0

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

Ответить
0

сам по себе уже миллион лет существует, для мобильных вроде уже год как

Ответить
1

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

Ответить
0

дело, наверное, не в инструментах...

Ответить
1

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

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

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

Ответить
2

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

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

Ответить
2

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

Ответить
2

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

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

Ответить
0

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

Ответить
2

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
2

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

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

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

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

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

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

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

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

Пишите ваши вопросы по работе с InVision, а также по дизайну и проектированию интерфейсов на info@dh.company или в наш Telegram

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

Ответить
0

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

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

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

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

Ответить
1

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

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

Ответить
1

кул

Ответить
1

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

Ответить
0

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

Ответить
0

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

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

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

Ответить

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

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления