Друзья, в этой публикации мы разберем плюсы и минусы работы над веб-дизайном в Photoshop, дополнительных к нему плагинов: Zeplin и Avocode, а также графическом редакторе Figma. Мы делали этот обзор, опираясь на знания и опыт нашего веб-дизайнера, который изучил перечисленные инструменты и составил свое мнение касательно преимуществ и недостатков работы с ними. Здесь мы делимся опытом, обращая внимание наших читателей на более удобные сервисы.
Стоит ли отказываться от плагинов Zeplin, Avocode и полностью перейти на работу с Figma, и чем этот графический редактор может вас удивить, читайте ниже.
А стоит ли?
Если вы работаете в команде, где каждый может вносить изменения в дизайн, если вы занимаетесь веб-разработкой и вам важно, чтобы шаблоны подходили к любому устройству, и вы просто хотите получать удовольствие от графического дизайна, смело выбирайте Figma.
Это первый облачный инструмент для разработки пользовательского интерфейса, позволяющий совместную работу в режиме реального времени как в Google Docs.
Однако, полностью отказаться от работы в Photoshop у веб-дизайнера не получится, так как графический редактор Figma предназначен только для веба. Если нужно обработать фотографию, либо совершить какие-то манипуляции для более сложных изображений, то Figma этого не позволит. Банально даже убрать белый фон с картинки товара в Figma нельзя. Сначала придется обрабатывать фото в Photoshop, а уже потом закидывать в графический редактор.
Чем Photoshop проигрывает:
· он перегружен другими возможностями, которые не используются дизайнерами;
· в разрешении макетов 4к очень сильно пожирает ресурсы компа и все проседает. Для качественной работы нужен мощный компьютер;
· отсутствует экспорт в PDF и SVG;
· по сравнению с Photoshop в Figma удобнее сделаны линейка и позиционирование объектов (перемещение, выставление отступов);
· в Figma удобнее работа с макетами и слоями.
Figma
Какие мы выделили преимущества Figma перед другими графическими редакторами:
1. Потребляет меньше ресурса компьютера и при разработке больших макетов сервис "не виснет".
2. Можно работать с любого компьютера, так как сервис не требует установки дополнительного ПО.
3. Легко переносить проекты с одного аккаунта на другой.
4. Удобно работать с большим количеством макетов.
5. Есть возможность работать над проектом сразу в команде в реальном времени.
6. Удобно работать с выгрузкой и экспортом макетов и иконок.
7. Можно сохранять макет в SVG или PDF, что удобно для просмотра в хорошем качестве.
8. Каждый проект может весит 200-500мб, иногда и больше. Для большого количества проектов нужно много места на ПК. Однако Figma от этого освобождает. Все данные хранятся в специальном облаке редактора.
9. Можно просмотреть историю изменений.
Если вы ни разу до этого не работали в Figma, советуем попробовать. Это очень комфортный в использовании инструмент, не требующий установки дополнительных утилит. Адаптироваться к новому графическому редактору будет несложно. Чтобы привыкнуть к новому интерфейсу и работать с Figma на автомате, придется потренироваться несколько недель, желательно изучить горячие клавиши.
Плагины Zeplin и Avocode
Zeplin — инструмент для совместной работы дизайнеров UI и фронтенд-разработчиков. Avocode — это сервис, ориентированный на веб-разработку.
Сервис Zeplin предоставляет своим пользователям пробный период работы с инструментом и бесплатный тариф. Сервис Avocode не такой щедрый: в нем возможно работать бесплатно только 2 недели.
Обычно веб-дизайнеры начинают создавать сайт с дизайна в Photoshop или Sketch. После завершения макета, разработчику нужно превращать его в спецификацию с отдельными изображениями и CSS-стилями. Именно такие плагины, как Avocode и Zeplin призваны выполнить роль моста между дизайнерами и разработчиками.
В отличие от Figma сервисы Zeplin и Avocode нуждаются в установке десктопного приложения. Прежде чем начать работу с ними дизайнеру нужно загрузить свой проект через плагин Photoshop или Sketch. Напрямую через веб-приложение загрузить свой дизайн в Zeplin или Avocode нельзя. Приложения больше похожи на просмотр дизайна с возможностью экспорта деталей этого дизайна.
Все преимущества, которые мы перечислили для Figma, в Zeplin и Avocode отсутствуют. В этих инструментах для разработки веб-дизайна есть возможность демонстрации проекта. Однако, совместная работа нескольких дизайнеров над одним проектом там недопустима.
Чего вы еще не найдете в Zeplin и Avocode:
· оптимизации под мобильные устройства;
· возможности отставлять комментарии;
· контроля версий;
· готовых шаблонов;
· библиотеки элементов.
Однако Avocode все-таки будет отличаться от Zeplin бОльшими возможностями. В Avocode веб-дизайнер может напрямую загружать макеты проектов. Здесь все достаточно интуитивно, просто и не требует дополнительных знаний. Для того, чтобы перенести макет в Zeplin, понадобится сначала создать монтажную область в Photoshop, которая потом и переносится в приложение. Многие начинающие дизайнеры теряются на моменте первого переноса, так как не особо понятно, что такое монтажная область и как ее создать. Для этого нужно потратить время в поисковике. Также в Avocode есть контроль версий, чем не может похвастаться Zeplin.
По сравнению с Figma приложения Zeplin и Avocode проигрывают во многих аспектах. Они больше подходят для экспорта и структуризации макетов, создания рабочей области.
Всем тем, кто только открывает для себя графический редактор Figma, мы советуем терпения, чтобы привыкнуть и не бросить затеянное на полпути. Управление и горячие клавиши здесь полностью отличаются от других редакторов, из-за чего может возникнуть путаница. Это вывод, который мы вынесли для себя в процессе работы со всеми перечисленными сервисами.
Задав вопрос нашему веб-дизайнеру на счет того, что он подумал, когда ему предложили перейти на незнакомый графический редактор и его ощущения о работы с Figma, мы получили такой ответ:
«Подумал, почему бы и нет. Если этого требует время, обстоятельства и коллектив, то нужно развиваться. Да, я советую Figma, она удобнее для коллективной работы. От нее ощущения легкости и простоты в работе. Это, наверное, многим не понять, кто с 4к не столкнулся: очень заметны проседания ресурсов в программах, рендеренге и так далее, а Figma– это просто окно браузера, которому на это все равно».
Подписывайтесь на канал, ставьте лайк и спасибо за интерес к нашей деятельности!
