что такое invision studio
Обзор программы Invision studio
Графический и Веб-дизайн
603 поста 11.5K подписчиков
Правила сообщества
Публиковать свои посты / обзоры, и я до сих пор удивлен почему этого никто еще не делает. Практически любой более-менее вменяемый пост можно запилить, и я уверен, что его лампово примут.
Вставить свои 5 копеек. Если будет своя альтернативная точка зрения или совет по какой-то теме, то это приветствуется.
1. Публиковать сообщения, картинки, не соответствующие тематике;
2. Размещать ссылки рекламного характера;
3. Перегибать палку;
в случае нарушений, доступ в группу будет закрыт, а пользователь занесен в бан-лист;
Знакомые работающие в UI\UX не спешат переходить, т.к. очень много «но», и бета. Да и таких «убийц» скетча часто выплывают, бультыхаются в бете и умирают из-за невозможной реализации обещаний, улучшений того что сделали.
чет форму заполнил а скачать не дает
долго сообщение ждать?
как-то очень на бесплатный Adobe XD смахивает.
Не работайте «по дружбе» и без договора
Внимание, простыня текста.
Работаю в маленькой Сибирской веб-студии. Делаем сайты, приложения, внедрения CRM и много-много чего разного. А еще берем заказы на разработку фирменного стиля. И логотипов в том числе. О них, родимых, речь и пойдет.
Предыстория. Когда-то в 2017 году сделали мы сайт для одной местной компании, которая работала по франшизе другой Московской компании. Я тогда только устроилась в студию и с этим клиентом не пересекалась. Но поняла, что это какие-то дружественные лица для нашего руководителя, а еще очень интересные дамы.
Ну ок, работы сдали, деньги получили, актами закрыли. И все было вроде бы неплохо, они даже пришли к нам на рекламные услуги: таргет и контекст (отдельная история, каких капризов мы хапанули и как расставались с выбиванием задолженностей). Итого, с 2019 года они на связь особо не выходили. Так, периодически теряли доступы от сайтов, забывали проплачивать домен и просили у нас помощи. Все стандартно.
И вот, настоящее время. Компания покидает франшизу и москвичи требуют прекратить использовать их фирменный стиль. Все логично и справедливо. А значит. Нужен новый логотип! Ну и небольшие изменения на сайте. Конечно же, они пришли к нам. Напрямую к руководителю. Он на радостях и по старой дружбе продал им услугу разработки логотипа. Причем без договора с описанием всех условий, а просто по счету. Вроде как они вносят 50% предоплату и полетели. Да, так тоже можно, но условий и сроков нигде не оговорено. В этом и есть грабли.
Надо ли говорить, что ТЗ или даже брифа никакого не было? Все содержание задачи от моего руководителя: «Да там ничего выдумывать не надо, просто взять старый лого, заменить название и сделать практически то же, что и было». Окееей, покривилась немного, но отгружаю задачу дизайнеру. И начинается.
1 итерация. Получаю три варианта, отправляю заказчику. Получили? Получили. Ждем.
З (заказчик): Добрый день, mininirime. Что-то мне не нравится. Вот наше КП для клиентов.
Я: Спасибо, с КП ознакомились. Дизайнеру отправляю референс с пометкой, что есть направление, которое хочется отразить в логотипе. Предложим еще несколько вариантов.
И дальше пояснения о том, что лого делается не чтобы вам душу грело, а для бизнес-задач и т.д. Предлагаю заполнить бриф, но предложение игнорируется.
А что было в их КП? Совершенный растровый кошмар из двух совмещенных реалистичных картинок и названия компании курсивом (прикреплять не буду по понятным причинам).
2 итерация. Дизайнеру направление работы ясно, вдохновляемся полученной картинкой из 90-х, делаем новые варианты. Отправляю. Получили? Получили. Ждем неделю, ответа нет. Пишу снова, прошу обратную связь.
З (дословно): Здравствуйте, mininirime. Что-то нам не нравится. Давайте, что-то покреативней, сделайте пожалуйста несколько вариантов, что бы можно было выбирать.
Я слегка. удивляюсь и прошу утонить задачу. Референсы, пожелания, описание. Снова предлагаю заполнить бриф. И тишинаааа в ответ. Подождала день и возобновила дизайнеру задачу. С запросом на максимальный креатив, как только он может. Дизайнер послал меня на. принял задачу в работу.
3 итерация. Получаю еще 3 варианта. Отправляю. Получили? Получили. Жду неделю и пишу узнать, как там дела.
З: Получили, нам ничего не нравится. Такое ощущение что просто в ворде набрано.
Я: Длинное вежливое (правда) письмо о том, что дизайнеров-экстрасенсов у нас в штате нет, мы без понятия, что вам нравится и без ТЗ результат ХЗ. А в ворде мы не работаем. И вообще, какого хрена?
З: я обратилась к вам как к специалистам, если бы я была дизайнером я бы сама все сделала и не платила ХХ т.р. У меня нет примеров и пожеланий, просто нужно что бы дизайнер посидел подумал и покреативил, а не набирал в ворде разными шрифтами и цветами.
Я: Еще более длинное и вежливое письмо с попыткой убедить сотрудничать, поднапрячься и выдать свои хотя бы минимальные пожелания. И что в 4 заход без этого мы не пойдем.
Пока гробовое молчание. Подозреваю, что состоится звонок руководителю с жалобой на меня, конечно же. Да, моя ошибка в том, что я послушалась директора, не отбрифовала заказчика и все изначально сделала неправильно. Можно было сэкономить кучу времени. Еще косяк в том, что нет договора с нашими стандартными условиями (3 раза предлагаем варианты, а каждый следующий за оплату). Поэтому случилось вот это классическое «поиграйтесь цветами/шрифтами» и есть все шансы переделывать до бесконечности, пока ее величество не скажет «Да».
Моя задача разрулить этот конфликт и сделать так, чтобы все были счастливы. Но как это теперь сделать? Непонятно. Можно предположить, что в этой истории одна я умная в белом пальто стою красивая и вокруг дураки. А на деле я плохой специалист и не шарю. Скорее всего так и есть 🙂
Но вот о чем я думаю, сталкиваясь с такими ситуациями:
1. Не может быть никаких заказов «по давней дружбе» и на особых условиях. Съедят весь мозг, а объем работ будет в разы больше, чем с обычным клиентом. А еще можно не дождаться оплату.
2. У некоторых заказчиков абсолютно потребительское отношение. Почему-то считается, что если они заплатили, то получают в свое владение рабов, которые будут бесконечно выполнять их пожелания и игнорировать просьбы. Причем чем меньше оплата, тем больше королевских замашек и требований.
3. Если ты какой-то линейный специалист, то придется терпеть, глотать и бесконечно оправдываться перед клиентами (в т.ч. за чужие ошибки).
4. Работа с людьми должна стоить больше (если бы вы знали мою зарплату и перечень обязанностей, вы бы заплакали).
5. Грабли, будь они неладны. Одни и те же. Каждый раз получая проблемы с «дружескими» заказами без ТЗ, мы продолжаем продолжать. А я повлиять на это не могу.
P. S. Сменить место работы пока нет возможности. К жалости и сочувствию не взываю. Просто одна из будничных историй. За ошибки простите. И огромное спасибо всем, кто дочитал мой первый пост Показать полностью
InVision против всех
Photoshop вечен
Судя по комментариям в сети, от Photoshop отказался каждый, однако, число пользователей растет.
Пользуемся им в Студии и считаем крутым, но для своих задач. В первую очередь Photoshop — графический редактор. Ретушь, рисование, технический дизайн — его сильные стороны. И конкуренты в этой области у него свои.
Когда просят сосчитать до десяти, не начинай с алфавита. Докрутить фотографию — используй Photoshop. Создать прототип сайта или дизайн интерфейса — используй Adobe XD, Sketch, Figma, InVision Studio.
Встречайте, Studio
Новый продукт для проектирования графических интерфейсов. Изначально, позиционировался как дополнение к Photoshop для совместной работы. Однако, компания пошла дальше. Подняла проблемы интерактивного прототипирования, анимации и сыграла на этом.
При запуске встречает знакомое окно. Здесь выбирается пресет устройств, открываются последние файлы, есть обучения и обратная связь. Возможность импорта Sketch-файлов.
Панель слоев организована следующим образом: создаются страницы, в них создаются артборды, в них — слои.
Понятный интерфейс. Создать заливку и добавить обводку просто. Изменение цвета, градиента, прозрачности — в пределах одного курсора.
Поговорим о функционале и сравним с другими инструментами.
Studio VS Adobe XD и Sketch
Цена
Пока Studio не выйдет окончательно, оценить стоимость трудно. Разработчики утверждают, что сделают цену максимально доступной. Пока ждем.
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 мегабайт. Со временем папка вырастает до размера в сотни гигабайт.
Удаление папки не решает проблемы — пользователи жалуются на низкую производительность системы. Рабочее решение — отключить контроль версий.
Продукты Adobe требовательны к железу — XD не исключение. Быстродействие напрямую зависит от мощности вашего компьютера.
Скорость работы Studio под стать цене — пока не ясна. На стадии тестирования сложно оценить «подлагивает» продукт или требует мощности. В целом — показывает себя довольно шустрым.
Востребованность
Открой сайт вакансий. Востребованность дизайнеров, работающих в Adobe XD и Sketch, в среднем, один к десяти. Даже Studio в бета-версии превосходит количество вакансий на XD в два с половиной раза.
Studio VS Figma
Цена
Бесплатная версия — истории версий ограничены в 30 дней.
Профессиональная версия — неограниченная история версий и количество проектов.
Функционал или инструменты
У FIgma есть Intercom — техподдержка прямо в приложении! Не нужно искать e-mail или другие контакты. Помощь оперативная. Если что-то непонятно — не поленятся, запишут скринкаст.
В 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 может не работать.
Востребованность
В этом показателе инструменты друг другу не уступают. На хедхантере равное количество вакансий для обеих программ.
Киллер фича в создании интерфейсов
Preset-анимация
Примитивная, есть в XD, Sketch — ей никого не удивить.
Studio — первый редактор интерфейсов, в который встроены инструменты для работы с анимацией.
Есть запуск анимации по таймеру и обработка нажатий клавиш с клавиатуры.
Motion-анимация
В этом режиме артборды работают как ключевые кадры. Присутствует редактирование таймлайна. Детально настраиваются начало и конец анимации каждого объекта. Можно создавать шаблонные «кривые» анимаций. Вручную задавать графики анимаций — заставлять ее подпрыгивать, переворачиваться, исчезать. По сути, пользуясь Studio, получаешь встроенный After Effect.
Sketch в связке с Principle тоже способен реализовать motion-анимацию. Но для этого придется заплатить за Principle еще сотню баксов.
Стоит ли надеяться на Studio?
Определенно. Редактор уже в бета-версии показывает себя неплохо. Motion-анимация — веская причина пересесть на Studio. Фишка крутая.
В магазин завезли приложения. Ищите изображения, делитесь макетами с коллегами и публикуйте шоты на Dribbble прямо в Studio. На момент запуска в магазине уже доступны приложения от партнеров Studio, среди который Google, Slack, Trella, Dribbble.
В дальнейшем, магазин позволит дизайнерам продавать свои наработки и пользоваться готовыми шаблонами и библиотеками.
Будем надеяться, что Studio на этом не остановится и с официальным выходом покажет новые крутые фишки.
Революция цифрового дизайна. Скоро
Пока известные компании бьются за место в топе, появляется теневая фигура. Имя ей — Phase. Об инструменте знают немногие.
Компания ведет себя самоуверенно и говорит, что это новый продукт для цифровой эпохи. В нем создаются прототипы, которых раньше не видели.
Тестирование инструмента начнется летом этого года. Тогда и посмотрим, тратить на него время или пройти мимо.
Автор: Саша Окунев
Автор «/designer» — сайта и телеграм-канала о дизайне интерфейсов.
InVision выпустил в «ранний доступ» редактор InVision Studio, который по замыслу разработчиков должен стать конкурентом для Sketch и служить в качестве основного инструмента для интерактивного дизайна и создания прототипов. Специально для Awdee я написал обзор этого инструмента и рассказал о своих впечатлениях.
Я давно слежу за этой компанией и много пользовался её продуктами. В своём обзоре я постараюсь быть объективен и избегать своего личного мнения о InVision.
Ощущения от работы в InVision Studio интересные. С одной стороны, это старый добрый Sketch в урезанном виде. С другой, в нём есть что-то новое и переосмысленное, чего не хватает в Sketch.
Импорт скетч-файлов
Представим реальную ситуацию, когда дизайнер по какой-то причине недоволен Sketch и хочет поменять его на InVision Studio.
Первое, что бросается в глаза — в приветственном окне InVision видны все скетч-файлы, которые вы недавно открывали в Sketch. Таким образом, InVision обещает полноценно открывать скетч-файлы.
Естественно, обратно в Sketch их сохранить нельзя. Война редакторов бъёт исключительно по пользователям.
InVision Studio работает на Windows
То, что InVision Studio кроссплатформенный — огромное стратегическое преимущество перед Sketch. Это может значительно расширить аудиторию до всех тех дизайнеров, кто не жаелает покупать потёртый Macbook Pro на Avito. Однако, опыт Adobe Experience Design показывает, что мало иметь версию на обе платформы, чтобы конкурировать со Sketch. Нужно ещё давать необходимый минимум полезных функций.
Работаем со скетч-макетом
Специально для этого обзора я создал простой скетч-макет, на котором пофантазировал на тему редизайна Awdee для мобильной ширины. Его можно скачать по ссылке на Sketch Cloud.
В нём я сделал всё то, что обычно делаю в макетах: прописал общие стили текста и использовал вложенные символы. Посмотрим, как проект откроет InVision на Windows.
Сам экспорт простого макета занимает значительное время, хотя компьютер мощный. Накрутив лоадер всласть, InVision открывает файл и предупреждает нас, что символы и настройки внешнего вида, которые не поддерживаются, могут выглядеть иначе, чем в Sketch.
Дизайн InVision Studio совершенно беспардонно слизан со Sketch, и это работает на пользователя: если вы работали со Sketch, вы уже знаете InVision Studio. Ничего не надо учить заново. Даже знакомые горячие клавиши вроде Ctrl + 1 и Ctrl + G работают. Всё на своих местах до мельчайших деталей: слои слева, настройки слоя справа, экспорт в нижнем правом углу. Единственное нововведение — переключатель Layers / Library, в котором поиск слоёв уехал вверх.
Слева: InVision Studio, справа: Sketch
В Sketch инспектор получился погуще, потому что через него нужно настраивать оверрайды, в то время как в InVision Studio компонент можно менять.
Создание хотспота:
» data-medium-file=»https://i2.wp.com/awdee.ru/wp-content/uploads/2018/03/hots.png?fit=168%2C300&ssl=1″ data-large-file=»https://i2.wp.com/awdee.ru/wp-content/uploads/2018/03/hots.png?fit=553%2C989&ssl=1″ loading=»lazy» src=»https://i2.wp.com/awdee.ru/wp-content/uploads/2018/03/hots.png?resize=553%2C989&ssl=1″ alt=»» width=»553″ height=»989″ srcset=»https://i2.wp.com/awdee.ru/wp-content/uploads/2018/03/hots.png?w=553&ssl=1 553w, https://i2.wp.com/awdee.ru/wp-content/uploads/2018/03/hots.png?resize=168%2C300&ssl=1 168w, https://i2.wp.com/awdee.ru/wp-content/uploads/2018/03/hots.png?resize=500%2C894&ssl=1 500w» sizes=»(max-width: 553px) 100vw, 553px» data-recalc-dims=»1″ />
Сверху: InVision Studio, снизу: Sketch
Сетка и лэйаут
В InVision неплохо реализовано, как настраивается базовая и модульная сетка: в панели настроек артборда можно задать нужное значение в блоках Layout и Grid. Когда артборд выделен в Sketch, никакой полезной информации в инспекторе не отображается.
Однако, в InVision настроить значение сетки по умолчанию не удалось. Артборд всегда создаётся с шагом 15 px. Шаг свдига объектов тоже не настроить. Зато модульная сетка настраивается не только по вертикали, но и по горизонтали. Классная функция.
Library: список всех компонентов проекта
Cимволы тут называются компонентами. Когда я открыл скетч-проект в InVision Studio, обратил внимание на вкладку Library в левой части интерфейса. В ней списком доступны все компоненты, которые в скетч-проекте были символами. Место для этой панели выбрано удачное. Из панели Library компоненты можно перетаскивать на рабочую область, быстро собирая макет из готовых компонентов.
Это гораздо удобнее, чем вставлять их через меню Insert в Sketch. Однако, пока неясно, как сортировать компоненты в библиотеке. Перетаскивать их вверх-вниз нельзя, после нумерации они тоже в желаемом порядке не выстраиваются.
В Sketch до сих пор очень не хватает подобного списка символов. Частично эту проблему решает плагин Runner, но в нём нужно печатать название каждого вставляемого символа, а в InVision только выбирать и тащить.
Компоненты из библиотеки в InVision Studio можно вставлять только внутри файла-проекта. В этом вопросе Sketch пока впереди.
Оверрайды в InVision Studio реализованы лучше
Проясню пару терминов для начинающих: мастером символа я называю артборд, на котором находится содержимое символа. Экземпляр символа — объект, в котором показывается содержимое мастера. Оверрайд — перезаписывание данных экземпляра.
В Sketch экземпляр символа видоизменять можно только через панель в правой части интерфейса, и это не слишком удобно. Нужно вбивать новый текст в специальное поле ввода и переключать вложенные символы.
В InVision Studio можно как угодно видоизменять экземпляры, не делая детач (Detach from symbol), то есть не разрывая связи с мастером. Это даёт больше гибкости при работе с символами. Всегда можно одним кликом вернуть экземпляр в состояние мастера.
Два экземпляра компонента. Один красим в зелёный, перезаписав его внешний вид. Sketch так не умеет. Затем, редактируем мастер, сужая бургер. Изменение затронет оба экземпляра.
Редактировать мастер-компонент можно по нажатию на Edit Component, аналог Cmd + Enter в Sketch.
Когда находишься в режиме редактирования компонента, он показывается в виде единственного артборда, изолированого от всех остальных компонентов и этим напоминает смарт-объект в Photoshop. Редактируя компонент, я попытался дублировать артборд, на что InVision ругнулся: несколько видов состояний пока не поддерживаются. Очевидно, в будущем можно будет в виде нескольких артбордов рисовать состояния одного компонента. Хорошая логика.
Компоненты могут быть вложенными
В Sketch внутри символа logo-block я использовал символ с кнопкой subscribe. В InVision Studio внутри logo-block она осталась в виде компонента, хотя я опасался, что связь будет разорвана. Это ключевая функция, которая ставит InVision Studio на один уровень со Sketch и Figma. Вложенные компоненты — хорошая почва для создания дизайн-систем и сложных интерфейсов.
Общих стилей нет в принципе
Такого понятия как Shared Styles в InVision Studio нет. Каждый текстовый объект нужно настраивать индивидуально. Это большое упущение.
Анимация и прототипы: сильная сторона InVision Studio
В InVision встроен хороший инструментарий для создания анимации прототипов, который напоминает очень упрощённый After Effects.
Здесь InVision Studio далеко обыгрывает Sketch. В нём удобно делать сложные бесшовные переходы между экранами. Как и в Sketch, можно выбирать нужный объект и делать его ссылкой на другой артборд.
Если слой имеет одно и то же название на начальном и конечном артбордах, обе копии этого слоя можно связать функцией Auto Link Layers. InVision сам просчитает смещение или изменение других свойств.
В специальном режиме редактирования анимации Timeline можно индивидуально задавать скорость анимации и конечное положение каждого свойства для любого слоя на артборде. Пример прототипа с анимацией.
Редактор ключей анимации в InVision Studio даёт хорошие возможности для дизайна переходов между экранами.
Глюки
Текущая ранняя версия полна глюков. Studio сперва вообще отказался корректно работать на моём Mac Book Air mid 2011. Вместо рабочей области я увидел пустое чёрное окно, которое починилось после перезагрузки.
Интерфейс утверждает, что прямоугольник залит красным и полностью видим. InVision, ты пьян, иди домой.
Совершенно неожиданно может отвалиться инспектор или другие элементы интерфейса. Вместо него остаётся серая пустота. Попытка загрузить прототип в веб-сервис InVision тоже привела к самым неожиданным последствиям: InVision сбросил авторизацию.
Сравниваем функции
Итоги
Сейчас юный проект переживает переходный возраст и лечит баги. Для комфортной промышленной работы над интерфейсами пока не годится.