Close

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

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

zygar.ru

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

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

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

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

Содержание

Figma

Онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени.

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

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

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

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

Sketch

Sketch — векторный графический редактор только для macOS, разработанный голландской компанией Bohemian Coding.

Фото: автор: Bohemian Coding — https://www.sketch.com/press/, Общественное достояние, https://commons.wikimedia.org/w/index.php?curid=46979007

ТипВекторный графический редактор
РазработчикBohemian Coding
Операционная системаmacOS
Первый выпуск7 сентября 2010
Читаемые форматы файловDrawIt и Sketch file format
Создаваемые форматы файловSketch file format
ЛицензияПроприетарная
Бесплатная версияДа
Сайтsketch.com

Используется для проектирования интерфейсов мобильных приложений и веб-сайтов. Поддерживает возможность создания интерактивных прототипов.

Впервые был выпущен 7 сентября 2010 года и получил награду Apple Design Awards в 2012 году.

Adobe Experience Design (Adobe XD)

Adobe XD является одним из самых используемых бесплатных инструментов для UI / UX дизайна, а также прототипирования в сфере мобильного дизайна.

Фото: автор Adobe Systems — https://www.adobe.com/products/xd.html, Общественное достояние, https://commons.wikimedia.org/w/index.php?curid=65689708

Типсреда визуальной разработки графических интерфейсов
Разработчик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

Инструмент для прототипирования и дизайна с широкими возможностями. Прототип создается в коде. Приложение использует фреймвок React JS.

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

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

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

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

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

Fluent Design

Fluent Design — это система для создания адаптивных, отзывчивых и красивых пользовательских интерфейсов, разработанная в Microsoft.

Типсреда визуальной разработки графических интерфейсов
Разработчик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

Сервис представляет собой программную среду для работы с макетами таких графических редакторов, как Photoshop, Sketch, Illustrator, Figma, Adobe hd.

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

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

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

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

Zeplin

Инструмент для команды верстальщиков и дизайнеров. Вы можете экспортировать проекты в Zeplin из таких программ, как Sketch, Adobe Photohop, Adobe XD и Figma.

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

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

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

Principle

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

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

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


Комментарий

Larae
14.02.2021 в 23:02

Hmm it appears like your website ate my first comment (it was super
long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog.
I as well am an aspiring blog blogger but I’m still new to the whole thing.
Do you have any points for rookie blog writers?

I’d certainly appreciate it.

Ответить

Добавить комментарий для Larae Отменить ответ

Ваш адрес email не будет опубликован.

Автор: Stas Zygar

Привет! С наступившим новым годом! Всем счастья.