Глава 14: Инструментарий
Уверен, ваши руки уже чешутся, хочется начать рисовать новый ультрамодный инновационный интерфейс. Я вас прекрасно понимаю! И теперь я вкратце пробегусь по актуальным на 2019 год инструментам UI/UX-дизайнера.
Время сейчас стремительное, за год может многое измениться. К тому же вам могут подойти и другие программы — дело, в конце концов, за вами. Не бойтесь экспериментировать!
Miro (ранее Realtime Board) (miro.com)
Продукт, сделанный нашими соотечественниками. Возможностей и областей применения у него много, но лично мне он подошёл для прикидки пользовательских сценариев и описания моделей данных. Если вам интересно не быть лишь UI-дизайнером, то перед началом проекта можете раскидать модель данных и базовую архитектуру навигации приложения в Miro.
Sketch app (sketchapp.com)
Самый популярный инструмент для дизайна интерфейсов. Его концептуальное отличие от конкурентов — огромное количество плагинов, которые пользователи пишут сами по мере необходимости расширения стандартного функционала. При поддержке комьюнити разработчиков Sketch app стал индустриальным стандартом. У него есть лишь один минус — Mac only.
Abstract (abstract.com)
Это GIT для Sketch app. Если коротко, то это система хранения слепков файла. Считайте это системой контроля версий, которая позволяет нескольким дизайнерам одновременно работать над одним или несколькими файлами в проекте. А так как Abstract хранит все записанные в него изменения, то вы сможете в любой момент времени откатиться к любой версии. Даже если вы работаете один, то Abstract станет для вас идеальной заменой Dropbox за те же деньги.
Invision app (invisionapp.com)
Одна из самых популярных систем для создания интерактивных прототипов для самых популярных платформ (iOS, Android, WatchOS, Android Wear, веб-приложение). При помощи бесплатного плагина Craft by Invision вы можете прямо из Sketch app экспортировать в Invision не только целые экраны, но и отдельные области (например, кнопки) дабы ваш прототип можно было бы прокликать на любом подходящем устройстве. Идеальный инструмент для презентации своих идей команде и заказчику.
Zeplin (zeplin.io)
Система для разработчиков. Вместо того, чтобы заставлять разрабов лазить по Sketch-файлу и смотреть размеры и отступы, вы просто экспортируете экраны в Zeplin, предварительно создав проект и указав тип платформы. И дальше разработчик с лёгкостью выделяет нужные ему элементы и видит цвета, размеры, отступы. Там же он может скачать иконки в нужных размерах. Какая польза для нас, дизайнеров? Дизайн экрана, который сделает разработчик, пользуясь Zeplin, на 80–90% будет соответствовать макету в Sketch. Без использования Zeplin рассчитывать больше, чем на 60% не приходится.
Плагины для Sketch app
Их очень много, тысячи полезных и не очень плагинов разбросаны по всем уголкам интернета. Большинство из них бесплатные. Есть один плагин, который заслуживает отдельного упоминания: Anima app. При помощи него можно делать сайты прямо в Sketch app. Но жемчужина этого плагина — Auto-layout. С его помощью вы можете экономить множество часов. Недавно Sketch добавили похожие функции, но они всё равно не полностью копирует все возможности Auto-layout. Пока...
———
Альтернативы Sketch app
Альтернатив достаточно много и для Mac, и для PC. Многие из них похожи на Sketch app, но каждое из них в чём-то, увы, не дотягивает. Почти нигде нет поддержки плагинов, что сильно удручает общую ситуацию. И тем не менее, знакомьтесь:
Figma (figma.com)
Не взирая на спорное название, Figma является инструментов, не имеющих аналогов. Вы можете одновременно с коллегами работать в одном и том же файле, видя курсоры мыши друг друга =)) Это супер круто! Функционал очень похож на Sketch app, но в Figma есть возможность оставлять комментарии на экране. Figma работает как в браузере, так и на PC, Mac, Linux. Дружит с Framer и Zeplin. Недавние обновления сделали Figma ещё удобнее, но отсутствие плагинов явно мешает ей стать дизайн-хабом как Sketch app.
Framex X (framer.com)
Новый продукт, являющийся попыткой уйти от основного продукта Framer, заточенного, в первую очередь, под навороченную анимацию. По старой традиции добавили букву «Х», чтобы дифференцировать продукт как новый, стильный, молодёжный. Основной изюминкой Framer X является крепкие узы с React. Насколько хорош React и насколько он изменит жизнь человечества судить сложно, потому что кто бы что не говорил, а мобильные приложения как писали, так и пишут на Object C (хотя есть Swift, но не все на него переехали) и Java (как вариант, Kotlin). Продукт интересный и очень подойдёт любителям делать классные анимации интерфейса, пускай до их реализации у разработчиков никогда не дойдут руки... С точки зрения плагинов и интеграций ситуация пока не ясна, но перспектива есть.
Adobe XD (adobe.com)
Он до сих пор жив (что странно). Входит в пакет Adobe CC. Если он у вас куплен, просто установите его и получайте удовольствие. В нём совмещены Sketch app и Invision: дизайн и прототипирование. С недавних пор Adobe XD обзавёлся возможностью экспорта экранов в Zeplin, что сделало его чуть более серьёзным инструментом, но на практике он печален.
Adobe Photoshop (adobe.com)
Долгое время Adobe Photoshop был единственно верным инструментом для рисования дизайна интерфейсов. А потом Sketch app выпустил версию 3.2 и с этого момента популярность титана мира графического дизайна пошла на спад.