Статья посвящена анализу технологий разработки веб-интерфейсов. Рассматриваются функции программ, анализируются их недостатки и достоинства, приводится сравнительная характеристика.
Ключевые слова: веб-дизайн, веб-интерфейсы, Sketch, Figma, Adobe XD, Adobe Photoshop.
Введение
До недавнего времени дизайнеры по всему миру отдавали своё предпочтение исключительно Adobe Photoshop по причине широких функциональных возможностей. В основном он работает с растровыми изображениями и имеет некоторые векторные инструменты. Однако для ряда задач, в которых работа с растровыми изображениями не требуется, данный продукт от Adobe является сложным в применении. По этой причине начали создавать инструменты с более узкой областью применимости, решающие специфические задачи, такие как создание веб-интерфейсов.
Sketch
Sketch — векторный графический редактор для macOS, разработанный голландской компанией Bohemian Coding. Впервые выпущен 7 сентября 2010 года, получил награду Apple Design Awards в 2012 году. Sketch не использует собственных средств для отображения создаваемого контента — эти функции возложены на встроенные инструменты macOS: QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSync [1].
Программа узконаправленная и создана специально для создания веб-интерфейсов. Её интерфейс интуитивно понятный и достаточно простой в использовании, все необходимые инструменты появляются в процессе работы, благодаря чему рабочая область не загромождается. Sketch имеет функцию экспорта графики в нескольких разрешениях, что является неоспоримым достоинством при создании дизайна приложений. Также программа имеет утилиту Sketch Mirror, которая позволяет просматривать созданный дизайн на мобильном устройстве в реальном времени. Sketch регулярно обновляется, в него добавляется новый функционал, также он имеет приемлемую цену.
Так как функции отображения создаваемого контента возложены на встроенные инструменты macOS, версии под Windows вероятнее всего не будет, что является большим недостатком. Также у Sketch нет совместимости с продуктами Adobe, что является проблемой при передаче проекта от одного дизайнера другому.
Figma
Figma— онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени. Позиционируется создателями как основной конкурент программным продуктам компании Adobe. [2].
Figma, так же, как и Sketch, имеет интуитивно понятный и простой в использовании интерфейс. При этом можно работать как в браузере, так и в приложении. Особенностью программы является возможность совместной работы нескольких людей одновременно, причем все пользователи могут отслеживать все изменения в реальном времени. Все курсоры подписываются, а в истории операций помечено, какие изменения внёс тот или иной пользователь. Вся работа хранится не локально у дизайнера, а в облаке. Также имеется возможность создания зависимых копий оригинала элемента. Все изменения в элементе-оригинале отображаются в элементах-копиях, при этом изменения в копиях никак не влияют на оригинал или другие копии. Это значительно упрощает работу над веб-интерфейсом и экономит время, так как при внесении правок не нужно менять каждый элемент, достаточно поменять оригинал. Также в Figma создана удобная функция векторной сети, это простое и быстрое изменение векторного объекта без необходимости выделения векторных точек. Неоспоримым достоинством Figma является её условная бесплатность, оплата открывает такие функции, как одновременная работа в реальном времени с большим количеством пользователей.
AdobeXD
Adobe Experience Design (Adobe XD) — программа для разработки интерфейсов от Adobe Systems. Поддерживает векторную графику и веб-верстку и создает небольшие активные прототипы [3].
Главной особенностью Adobe XD является то, что это продукт Adobe, отсюда вытекает то, что программой можно пользоваться при наличии подписки на Adobe Creative Cloud, у большинства дизайнеров эта подписка имеется как минимум из-за Adobe Photoshop. Проекты легко перемещать в другие продукты Adobe. Так же, как и Figma, Adobe XD поддерживает совместную работу над проектом в реальном времени.
Сравнение программ
Выделенные требования к программам для наглядности представлены в таблице 1.
Таблица 1
Сравнение программ
|
Характеристики |
Sketch |
Figma |
Adobe XD |
Adobe Photoshop |
|
Высокая производительность |
+ |
+ |
+ |
- |
|
Интуитивно понятный и простой интерфейс |
+ |
+ |
+ |
- |
|
Функция экспорта элементов |
+ |
+ |
+ |
- |
|
Использование векторной графики |
+ |
+ |
+ |
+ |
|
Возможность совместной работы над проектом |
- |
+ |
+ |
- |
|
Привязка к adobe creative cloud |
- |
- |
+ |
+ |
|
Кроссплатформенность |
- |
+ |
+ |
+ |
|
Возможность прототипирования |
+ |
+ |
+ |
- |
|
Возможность хранения проекта в облаке |
- |
+ |
+ |
+ |
|
Приемлемая цена |
+ |
+ |
- |
- |
|
Техподдержка через live-chat |
- |
+ |
- |
- |
|
Возможность трансляции макета на мобильное устройство |
+ |
- |
- |
- |
|
Регулярные обновления |
+ |
- |
+ |
+ |
Заключение
В итоге были рассмотрены функции программ для разработки веб-интерфейсов, проанализированы их недостатки и достоинства, приведена сравнительная характеристика программ. Но несмотря на все достоинства узконаправленных программ для разработки веб-интерфейсов до сих пор многие дизайнеры отдают предпочтение Adobe Photoshop, так как на выбор программы помимо объективных требований имеет существенное влияние субъективное восприятие.
Литература:
- Sketch // Википедия. URL: https://ru.wikipedia.org/wiki/Sketch (дата обращения: 21.02.2020);
- Figma // Википедия. URL: https://ru.wikipedia.org/wiki/Figma (дата обращения: 21.02.2020);
- Adobe XD // Википедия. URL: https://ru.wikipedia.org/wiki/Adobe_XD (дата обращения: 21.02.2020).
