Фронтенд. Полезные инструменты для верстальщика — UI/UX дизайнера. Графические редакторы

Хардкорный верстальщик выберет блокнот и не будет читать дальше.

zygar.ru

Прошли те далекие времена (3 года как вечность), когда верстка сайта с исходников .psd вызывала в уме только один триггер — Photoshop. Сейчас обилие редакторов кружит голову и даже отвлекает, возникает желание объединить их в один супер редактор, но конкуренция — двигатель прогресса и подталкивает крупные компании улучшать свои продукты плюс понижать цены, что несомненно есть гуд для нас пользователей.

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

Итак, я подготовил актуальный список наиболее популярных графических редакторов для интерфейсов в 2021 году.

Interface design tool with real-time collaboration — графический редактор для проектирования и дизайна интерфейсов с возможностью совместной работы.

Содержание

• Figma
• Sketch
• Adobe XD
• inVision Studio
• Framer
• Fluent Design
• Avocode
• Zeplin
• Principle

URL	figma.com
Коммерческий	да
Тип сайта	онлайн-сервис
Расположение сервера	США
Владелец	Figma Inc.
Автор	Дилон Филд
Бесплатная версия	Да
Начало работы	2012

Сервис доступен по подписке, предусмотрен бесплатный тарифный план для двух пользователей. Тарифный план включает 3 проекта и неограниченное место в облаке. Ключевой особенностью Figma является её облачность. Возможность работать офлайн, есть офлайн-версии для различных платформ (Windows, macOS, Linux). Figma требует 64-разрядные системы, на 32-разрядных больше не работает.

Сервис имеет широкие возможности для интеграции с корпоративным мессенджером Slack и инструментом для высокоуровневого прототипирования Framer.

Figma подходит как для создания простых прототипов и дизайн-систем, так и сложных проектов (мобильные приложения, порталы, сложные и высоконагруженные интерфейсы). В 2018 году платформа стала одним из самых быстро развивающихся инструментов для разработчиков и дизайнеров. В 2020 компания привлекла 50 млн. долларов, достигнув оценки 2 млрд. долларов.

Adobe Experience Design (Adobe XD)

Тип	среда визуальной разработки графических интерфейсов
Разработчик	Adobe
Операционная система	Windows 10 версия 1709 и OS X Yosemite
Первый выпуск	5 октября 2015
Бесплатная версия	Да
Сайт	adobe.com/product…

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

inVision Studio

InVision Studio — сравнительно новая программа для создания прототипов пользовательских интерфейсов и анимации с возможностью совместной работы нескольких человек. Вышла в 2018 году. InVision Studio это как Figma + Principle.

Тип	среда визуальной разработки графических интерфейсов
Разработчик	inVision
Операционная система	Windows и OS
Первый выпуск	2018
Бесплатная версия	Да
Сайт	invisionapp.com

Демократичны в ценовой политике — $7 в месяц за про-версию. Бесплатная версия обладает широким набором функций.

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

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

Поскольку дизайнеры работают совместно с такими компаниями, как Airbnb, Spotify и Twitter, Studio предложит общие системы проектирования, в которых в качестве инструментов доступны ассеты, шестнадцатеричные коды и другие компоненты дизайна. Studio позволит пользователям мгновенно загружать свой контент в InVision Cloud для совместной работы в организации и за ее пределами.

Framer

Тип	среда визуальной разработки графических интерфейсов
Разработчик	Framer B.V.
Операционная система	Web, macOS, iOS, Android Figma Importing Sketch Importing
Первый выпуск
Бесплатная версия	Да
Сайт	framer.com

Это почти сайт билдер, намного больше чем инструмент для прототипов. Достоинство Фреймер в том, что можно создавать промо-ролики и анимацию будущего продукта, не нанимая мобильного разработчика, не делая демку, не прибегая к помощи анимации в After Effects.

Вместе с панелью слоев есть несколько режимов: добавление элементов, код-едитор, магазин компонентов и team-store.

Область работы представляет собой рендер React-компонентов, все что вы делаете сразу преобразуется в код. Это накладывает свои ограничения.

У Framer есть своё сообщество на Spectrum, где люди делятся идеями, отвечают на вопросы.

Fluent Design

Тип	среда визуальной разработки графических интерфейсов
Разработчик	Microsoft
Операционная система	Web, Windows, macOS, iOS, Android
Первый выпуск	2017
Бесплатная версия	Да
Сайт	microsoft.com/design/fluent

Fluent Design придёт на смену Modern UI, который использовался в продуктах Microsoft начиная с ОС Windows Phone 7 и ранее в плеерах Zune. Microsoft будет постепенно переходить к использованию нового языка дизайна в Windows и в своих приложениях на операционных системах Windows, iOS, Android и Windows 10 Mobile. Первым среди продуктов Microsoft обновление дизайна получила игровая приставка Xbox One.

Новая дизайн-система базируется на пяти составляющих:

• Свет — помогает пользователю акцентировать внимание на текущем взаимодействии и ближайших к курсору элементах
• Глубина — учитывает расположение элементов в пространстве относительно друг друга
• Движение — является индикацией динамического взаимодействия пользователя с интерфейсом
• Материал — внешний вид элементов определяется не только палитрой, но и физическими свойствами материалов
• Масштаб — элементы интерфейса адаптируются в зависимости от текущего использования — будь то экран мобильного телефона или система виртуальной реальности.

Avocode

Тип	среда визуальной разработки графических интерфейсов
Разработчик	Source
Операционная система	Web,Windows, macOS, Linux
Первый выпуск
Бесплатная версия	Нет, 30-дневный пробный период
Сайт	avocode.com

У программы нет бесплатной версии, однако проводились акции — первая подписка за $1.

Создавать сайт начинают с дизайна в Photoshop или Sketch. Но после завершения макета, разработчику нужно превращать его в спецификацию с отдельными изображениями и CSS-стилями. Именно Avocode призван выполнить роль моста между дизайнерами и разработчиками.

Avocode – это приложение, позволяющее вам работать с файлами .psd и .sketch, перейти от дизайна к коду, даже не открывая Photoshop или Sketch. Программа будет полезна для разработчиков мобильных приложений и верстальщикам. Верстальщики смогут копировать html код с исходников и вставлять прямо в верстку.

Zeplin

Тип	среда визуальной разработки графических интерфейсов
Разработчик	Zeplin / Турция
Операционная система	Web, macOS, Windows
Первый выпуск	2015
Бесплатная версия	Да
Сайт	zeplin.io

Цеппелин, Фердинанд фон — немецкий граф, пионер дирижаблей жёсткой системы.

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

Principle

Principle — понятный и быстрый инструмент UI/UX дизайнера. Must have в списке motion-дизайнера, так как позволяет легко создавать анимированные и интерактивные прототипы.

Тип	среда визуальной разработки графических интерфейсов
Разработчик	Principle
Операционная система	macOS
Первый выпуск
Бесплатная версия	нет, 14-дневный пробный период
Сайт	principleformac.com

Интеграция Figma и Principle открывает большие возможности по сборке не просто анимашек, а целых интерактивных систем приближенных к реальности.