{"id":13827,"url":"\/distributions\/13827\/click?bit=1&hash=c40d87c2e9241b4dec3daa5e00aba54f022662a886ce414d47751f3bb544f906","title":"\u0411\u0438\u0437\u043d\u0435\u0441\u044b \u00ab\u043f\u0440\u043e\u0436\u0430\u0440\u0438\u0432\u0430\u044e\u0442\u00bb \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u0438\u0437\u043d\u0435\u0441\u044b","buttonText":"\u042d\u0442\u043e \u043a\u0430\u043a?","imageUuid":"c56f5afd-b182-533a-9023-5eca56ca88dc","isPaidAndBannersEnabled":false}

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
0
72 комментария
Написать комментарий...
Аккаунт удален

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

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

где-то тихо плачет Affinity designer

Ответить
Развернуть ветку
1 комментарий
Александр Кондратенко

На поле обработки фотографий да.

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

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

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

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

Ответить
Развернуть ветку
2 комментария
Ivan Shendrikov

Figma – топчик. При создании дизайна сайтов, пользуюсь Фигмой уже год и это лучшее, с чем мне приходилось работать.

Можете заценить работы на моем сайте:
https://shendrikov.com/

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

"На моем опыте более 400 работ"

бля

Ответить
Развернуть ветку
16 комментариев
Alexander Vorontsov

Нечитаемые шрифты? 10 из 10!

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

UX специалист, у тебя на сайте шрифт #484b4c совсем не виден на чёрном фоне. Тоже самое со всеми логотипами, которые ты вставил

Ответить
Развернуть ветку
9 комментариев
Unreal Person

Вань пофиксил тебе контрастность, бесплатно:

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

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

Ответить
Развернуть ветку
Дмитрий Горкун

Судя по количеству работ в портфолио и логотипам - они подбирались по принципу "Я ищу в гугле, пью пепси, обслуживаюсь в альфа-банке, публикуюсь на dizkon, значит они мои партнеры"

Ответить
Развернуть ветку
2 комментария
Eugene Danilov

спасибо, Вань, ты сделал наш день

Ответить
Развернуть ветку
Алина Леухина
Ответить
Развернуть ветку
Yura Frolov

UI.UX

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

Sketch или Figma или Ivan

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

Насколько полезен личный сайт для поиска клиентов? Мне кажется что примерно ни на сколько или я не прав?

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

простите, но текст на лэндинге как будто в промте переводили. и есть подозрение, что 8 лет назад вам было лет 13) вы молодец, но заходить надо по-другому и не приписывать себе лишнего :)

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

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

Развернуть ветку
Андрей Нефедов

идеал

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

А что только лэндинги? Что-то посерьезней можете показать?

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

Серым на чёрном - вот что топчик)

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

Всем спасибо за хайп :)

Ответить
Развернуть ветку
Максим Капралов

Несколько раз садился за Фигму, и хоть убей - не могу в ней работать после Скетча. Особенно дико не хватает плагинов, интерфейс непривычный и не такой отзывчивый и интуитивный, как в скетче

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

А как же XD?

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

Никак. Родовая травма у него. Наследие Адоп.

Ответить
Развернуть ветку
1 комментарий
Roman Slobodyanyuk

xD

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

В Skyeng много команд и мы, например, используем Фигму, а не скетч.

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

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

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

Я бы послушал Юрия Ветрова и студию Чулакова.

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

Не успел отправить комментарий, ребята уже отдали материал в печать :)

Ответить
Развернуть ветку
Дмитрий Горкун

Я, как разработчик, встану на сторону Фигмы, Скетч очень плохо экспортирует в svg сложные конструкции, которые дизайнеры так легко и красиво в нем иногда
делают.

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

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

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

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

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

В чем начали — так быстрее всего.

Ответить
Развернуть ветку
1 комментарий
Egor Frolov

А юикспином (UXPin) кто-нибудь пользуется?

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

В ответе Сергея Кондаурова, указана неправильная ссылка на слове «Abstract».

Она ведет на https://www.getabstract.com/ru/ а должна на https://www.goabstract.com.

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

вот и я удивился

Ответить
Развернуть ветку
Дмитрий Берко

Дно
Тититттттттттттттттттттттттттттттттттититттттттттттттттт р

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

На работе только фотошоп,увы. Представьте мою боль в работе с ним без ссд и 6гб озу.

Дома практикуюсь в фигме, нравится очень. Но анимировать из нее не в чем. По непонятно причине экспорт в свг происходит странно и когда ты его открываешь иллюстратором для пересохранения в ai, люстра не видит картинки. Хотя если открыть свг в хроме то все гуд. В итоге я нарезал на картинки все слои и анимировал их.

Адоб ХД тоже неплох, но он тоже не поддерживается нативно в Афтерэффектсе. Ждем программу для анимации от китайцев, которая будет поддерживать фигму. Пока что она только в бете и только для мака(кто бы сомневался-то)

Прототипы не делаю либо от руки.

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

Если анимация не навороченная, попробуй Хайку или Принципл. Они влюбляют своей простотой.

Ответить
Развернуть ветку
1 комментарий

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

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

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

Развернуть ветку
Игорь Бессмертный

Только тильда, только хардкор. Шутка) Скетч рулит, клиенты хеппи http://mr-undying.art/portfolio

Ответить
Развернуть ветку
Читать все 72 комментария
null