Sketch или Figma
Узнали у дизайнеров «Яндекса», Badoo, «ВКонтакте», Skyeng, Readdle, «Рокетбанка» и Aviasales об инструментах, которые они используют в работе над интерфейсами.
У нашей команды простой набор инструментов «как у всех», но, возможно, используем мы их не как все. Дизайн рисуем в Sketch, перешли на него три года назад и пока не планируем менять.
Плюс использования Sketch — в кастомизации плагинов под нужды команды и компании. Один из наших плагинов помогает адаптировать скриншоты продуктов под 20 языков — плагин пробегает по таблице, заменяет текст в макетах и нарезает ассеты.
Другой плагин в один клик экспортирует нужные ассеты в нужную папку. Плагин знает, что и куда сохранить. Сейчас работаем над плагином, который упростит работу с библиотекой, так как дефолтные средства ограничены и часто приходится изобретать костыли.
В связке со Sketch используем Sympli для передачи макетов разработчикам. Одно время думали о переходе на Figma из-за шума вокруг API, но пока продукт ограничен в возможностях по сравнению с Sketch и не работает в офлайне.
С темпами как у Figma, Sketch в ближайшее время сильно отстанет, как это произошло у Adobe, когда появился Sketch, и все перейдут на Figma.
Анимацию и интерактив собираем в Principle. В 9 из 10 случаев инструмент покрывает нужные кейсы. Также собираем полноценные прототипы, что позволяет лучше понять новый флоу, протестировать внутри команды и объяснить детали разработчику перед началом работы.
Аналоги (Framer, Origami, Kite) не оправдывают себя из-за времени, которое приходится тратить на создание такого же прототипа в Principle. С микроанимациями помогает After Effect и крутой плагин Airbnb — Lottie. Сильно сокращает время работы над анимацией разработчику, так как Lottie генерирует JSON, который в приложении превращается в векторную анимацию. Разработчику достаточно один раз подключить библиотеку.
Файлы храним в Dropbox, а заметки и документы храним в Paper — он намного проще Google Doc, без лишней функциональности и удобен для совместной работы. Не хватает инструментов для работы с библиотекой и дизайн-системой. Приходится кастомизировать под себя.
Наверное, каждая третья продуктовая команда работает над дизайн-системой и у всех похожие потребности и проблемы. Пока еще мало кто работает над инструментами, которые упростят работу с системой, а если и работает, то делает только для себя. Думаем, в ближайшее время таких инструментов будет появляться больше и больше.
И хотелось бы уже, чтоб графические редакторы стали чуточку умнее. Могли с легкостью адаптировать макет, сетку и размеры объектов в зависимости от контента, размеров экрана. А пока приходится изощряться плагинами и костылями внутри редакторов.
Павел Шумаковдизайнер Badoo
Расскажу только про базовые инструменты, так как нишевых разработок слишком много и если описывать все, получится многотомное сочинение.
Визуализация интерфейса
Почти все макеты у нас отрисованы в Sketch. Не вижу смысла подробно его описывать — это стандарт индустрии.
Figma работает в облаке, поэтому отлично подходит для совместной работы и комментирования. Мы иногда используем её в распределённых командах, когда в проекте участвует несколько дизайнеров: удобно видеть, кто над какой частью работает, перед глазами всегда находится самая свежая версия дизайна, а обсуждение с командой идёт прямо в макетах. Инструмент молодой, по функциональности пока отстаёт от Sketch, , но развивается в правильном направлении.
Лично мне недостаточно отзывчивости интерфейса Figma, свойственного десктопному программному обеспечению, и возможности поработать без интернета — например, в самолёте.
Photoshop до сих пор является лучшим редактором растровой графики. Иногда используем в промопроектах, где этой графики много. Многообещающе выглядит Invision Studio — жду, когда инструмент выйдет из беты.
C Adobe XD революции не случилось. Знаю, что его любят студенты, так как можно использовать бесплатно на Windows.
Прототипирование и анимация
Invision — для быстрого прототипирования, чтобы посмотреть прохождение основного сценария, слинковать группу картинок. Подходит, чтобы составить общее впечатление о дизайне, провести коридорное тестирование, опрос.
After Effects используем для быстрых набросков анимаций, для создания анимации, которую нет в планах переводить в код.
Principle, Flinto, Webflow, Origami — основные инструменты для прототипирования. У всех есть свои плюсы и минусы, про это можно отдельную статью написать. В целом ребята вокруг пользуются теми продуктами, чьи интерфейсные решения кажутся качественнее, и здесь нет явного лидера. Все инструменты подходят, чтобы провести тестирование простой функциональности и пользовательского сценария из небольшого количества шагов.
Framer — тяжёлая артиллерия. Когда надо создать детализированный прототип, возможно, с подключением реальных данных. Подходит для тестирования большей части интерфейсных решений, но на создание и поддержку такого решения уходит много времени.
Обмен наработками
Zeplin — для передачи макетов в разработку. Abstract — для шеринга макетов и контроля их версий. Wake — чтобы все дизайнеры были в курсе, в каком продукте над чем работают, такой Pinterest для дизайнеров «Яндекса», куда они выкладывают финальные макеты, концепты и наброски. Там же идут обсуждения и брейнштормы.
Сергей Кондауровруководитель службы дизайна сервисов поискового портала «Яндекса»
Aviasales поделен на небольшие команды и даже внутри одного продукта может быть несколько рабочих групп, поэтому дизайнеры сами выбирают удобный инструмент.
Скажем, ребята из нашей партнерской сети Travelpayouts остановились на Figma, а десктопные сервисы делаются в Sketch. При этом у маркетинга в ходу еще и Photoshop с Illustrator.
В целом и Figma и Sketch прекрасные инструменты для проектирования интерфейсов. Figma, будучи браузерным продуктом, подкупает простотой совместной работы и кроссплатформенностью.
Моя команда решила пока использовать Sketch, потому что перенос библиотеки компонентов может занять слишком много времени, которого нет. Кроме того, некоторые интерфейсные решения в Figma немного непривычны — что вызывает дискомфорт, но это дело привычки.
Sketch, на мой взгляд, лучше интегрирован с другими приложениями, но и Figma идет в этом направлении. В выборе между двумя этими сервисами я бы ориентировался в первую очередь на команду, и ее нужды, и, конечно, в первую очередь рекомендую обратить внимание на Figma тем командам, которые используют в работе Windows.
Figma недавно выпустила свой Web API, что может дать интересное развитие этому продукту. Мне бы хотелось видеть на этой платформе больше решений для анимаций и генерации готовых HTML- и CSS-шаблонов.
Валерий Назароварт-директор Aviasales
Ещё в 2015 году мы всей командой быстро перешли с Photoshop на Sketch для дизайна интерфейсов и были безумно рады приросту производительности. Файлы меньше, а работа быстрее и удобнее. Редизайн веб-версии «ВКонтакте» рисовали уже в нём. В то время не хватало пары фич (тогда даже для примитивных переходов приходилось мучаться с InVision), но быстрая работа программы покрывала большинство минусов.
Теперь уже все процессы у нас построены вокруг Sketch. Однако время идёт, а лучше не становится. Несмотря на то, что функциональность растёт, сильно страдает производительность. И теперь даже тривиальные задачи делаются с задержкой. В этом плане Figma становится всё более привлекательна. Стабильная работа, текстовые стили, совместное редактирование, система контроля версий — это то, чего очень не хватает в Sketch, и то, что уже давно есть в Figma. Наверное, останавливает лишь отсутствие ряда плагинов, делающих работу удобнее.
Для проектирования сложных анимаций мы используем разные инструменты. Principle нужен для совсем простых штук, Framer и Origami уже на порядок сложнее. Framer привлекателен своей лёгкостью переиспользования разных кусков кода. Origami сложнее, но благодаря возможности интегрироваться в клиент на устройстве появляется доступ к такой функциональности, как Taptic Engine. Ожидаемо, производительности на сложных проектах не хватает и здесь. Для совсем простых переходов вполне достаточно внутренного инструментария Sketch.
Илья Гришиндизайнер «ВКонтакте»
В работе над всеми нашими приложениями и сайтами используем Sketch и Zeplin — это давно уже знакомо многим настоящим дизайнерам и разработчикам.
Про Sketch рассказывать нет смысла, у них на сайте все с картинками, буквами и анимациями рассказано. Мы сами подписаны на RSS-канал создателей и следим за развитием и появлением новых фич.
Вот, интерактивное прототипирование появилось, чем бы это ни было. Из Sketch в Zeplin залили и всё — все в восторге, приложение почти готово, годик допилить по мелочам всяким.
Вопросы анимации доносим до разработчиков с помощью Flinto, предварительно потыкав и оценив красоту с удобством на устройстве. Идеи и походы на обед обсуждаем в Notion и Telegram. Конечно, главный инструмент — это наши головы. Sketch это или Hooetch — не так важно, если ты дурачок.
Константин Аверьяновдизайн-директор продукта «Рокетбанка»
Продуктовые дизайнеры работают в Sketch, маркетинговые — в Photoshop и Illustrator. Не сговаривались, так вышло стихийно. Исходники и библиотеки храним на Dropbox. А еще носим Nike, пьём кофе в «Даблби» и сидим за икеевскими столами. Скучно живем.
Прототипы ребята собирают в InVision и Principle. Я весь интерактив собираю в Origami. Даже если на странице одно несчастное видео или простейшая анимация — всё нужно проверять в движении. Бывает, что думаешь «тут и так понятно, хватит и статичных макетов». Нет, ни черта не понятно, пока своими глазами не увидишь. Много раз обжигался. Но тут важно научиться в скорость.
Синхронизация исходников и общих компонентов в Sketch — дизайнерская боль. Но русский народ привык страдать, ведь деды воевали, и нам надо мужаться. Говорят, с этим помогают git-сервисы вроде Abstract, но у нас пока не дошли руки проверить.
Когда-нибудь, когда в Figma будут расширения, когда для выбора цвета тени не нужно будет открывать три диалоговых окна, а Роскомнадзор прекратит блокировать случайные IP-адреса, мы всерьез подумаем о переезде.
В связке Sketch + InVision, Principle, Origami дичайше неудобно переключаться между инструментами. Хочется бесшовной работы и полной синхронизации. И чтобы можно было рисовать кодом. В общем, нужен тот инструмент, который так долго обещали ребята из Framer, но так нормально и не сделали — их собственный графический редактор не дружит с редактором кода из соседней вкладки. Ну ничего, ещё лет пять подождём.
Константин Замуренкодизайнер Skyeng
Все дизайнеры в Readdle в основном используют два пакета для работы: Sketch и Adobe Suite. Мы научились совмещать оба инструмента и не испытываем особых проблем с передачей друг другу тех или иных ресурсов, так как все они основаны на общем UIKit — по крайней мере, так сделано в b2b-департаменте, который я веду.
Изредка и не тратя особо много времени пробуем новые инструменты. Мы сфокусированы на работе и результате, а не на погоне за идеальным инструментом. Если он вдруг когда-нибудь и появится, индустрия сама нам об этом скажет. Из последнего: пытались внедрить Abstract для версионности исходников. Но проект сейчас еще слишком сырой, чтобы на продакшене можно было его полноценно использовать.
Для прототипирования работаем в основном с Principle. Я очень полюбил этот инструмент и все больше его использую для проверки своих идей. Сейчас, например, практически полностью рабочий прототип нового iOS-клиента для нашего b2b-продукта Fluix я сделал именно в Principle.
Он прост в использовании, очень гибок, и основную часть всего, что необходимо создать для интерфейса, можно создать имеющимися в нем средствами. Из недостатков — в Principle нет никаких опций для работы с текстом (только базовые: шрифт, размер, выравнивание). Поэтому в моем личном флоу он отлично работает в связке с Adobe Photoshop.
Есть вполне себе хороший импорт Sketch-исходников, но в нем больше недостатков и неудобств, чем плюсов, если необходимо сделать что-то больше, чем какой-то микроитерекшн.
Некоторые наши ребята используют InVision для проработки карты перемещений пользователя. Также иногда используем Framer и подумываем полноценно его внедрить в наш процесс работы в будущем. Раньше пробовали Origami, но не пошло.
Дмитрий Коваленкоруководитель продуктового дизайна Readdle
#дизайн #инструменты #sketch #figma
© vc.ru
