Как облегчить веб-дизайнеру жизнь


Друзья, в этой публикации мы разберем плюсы и минусы работы над веб-дизайном в Photoshop, дополнительных к нему плагинов: Zeplin и Avocode, а также графическом редакторе Figma. Мы делали этот обзор, опираясь на знания и опыт нашего веб-дизайнера, который изучил перечисленные инструменты и составил свое мнение касательно преимуществ и недостатков работы с ними. Здесь мы делимся опытом, обращая внимание наших читателей на более удобные сервисы.

Стоит ли отказываться от плагинов Zeplin, Avocode и полностью перейти на работу с Figma, и чем этот графический редактор может вас удивить, читайте ниже.

А стоит ли?

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

Это первый облачный инструмент для разработки пользовательского интерфейса, позволяющий совместную работу в режиме реального времени как в Google Docs.

Однако, полностью отказаться от работы в Photoshop у веб-дизайнера не получится, так как графический редактор Figma предназначен только для веба. Если нужно обработать фотографию, либо совершить какие-то манипуляции для более сложных изображений, то Figma этого не позволит. Банально даже убрать белый фон с картинки товара в Figma нельзя. Сначала придется обрабатывать фото в Photoshop, а уже потом закидывать в графический редактор.

Чем Photoshop проигрывает:

· он перегружен другими возможностями, которые не используются дизайнерами;

· в разрешении макетов 4к очень сильно пожирает ресурсы компа и все проседает. Для качественной работы нужен мощный компьютер;

· отсутствует экспорт в PDF и SVG;

· по сравнению с Photoshop в Figma удобнее сделаны линейка и позиционирование объектов (перемещение, выставление отступов);

· в 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 недели.


Пример работы с дизайном в Zeplin


Экспорт дизайна из Photoshop в Zeplin

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

В отличие от Figma сервисы Zeplin и Avocode нуждаются в установке десктопного приложения. Прежде чем начать работу с ними дизайнеру нужно загрузить свой проект через плагин Photoshop или Sketch. Напрямую через веб-приложение загрузить свой дизайн в Zeplin или Avocode нельзя. Приложения больше похожи на просмотр дизайна с возможностью экспорта деталей этого дизайна.

Все преимущества, которые мы перечислили для Figma, в Zeplin и Avocode отсутствуют. В этих инструментах для разработки веб-дизайна есть возможность демонстрации проекта. Однако, совместная работа нескольких дизайнеров над одним проектом там недопустима.

Чего вы еще не найдете в Zeplin и Avocode:

· оптимизации под мобильные устройства;

· возможности отставлять комментарии;

· контроля версий;

· готовых шаблонов;

· библиотеки элементов.

Однако Avocode все-таки будет отличаться от Zeplin бОльшими возможностями. В Avocode веб-дизайнер может напрямую загружать макеты проектов. Здесь все достаточно интуитивно, просто и не требует дополнительных знаний. Для того, чтобы перенести макет в Zeplin, понадобится сначала создать монтажную область в Photoshop, которая потом и переносится в приложение. Многие начинающие дизайнеры теряются на моменте первого переноса, так как не особо понятно, что такое монтажная область и как ее создать. Для этого нужно потратить время в поисковике. Также в Avocode есть контроль версий, чем не может похвастаться Zeplin.


Работа в Avocode во вкладке браузера


Десктопное приложение Avocode

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

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

Задав вопрос нашему веб-дизайнеру на счет того, что он подумал, когда ему предложили перейти на незнакомый графический редактор и его ощущения о работы с Figma, мы получили такой ответ:

«Подумал, почему бы и нет. Если этого требует время, обстоятельства и коллектив, то нужно развиваться. Да, я советую Figma, она удобнее для коллективной работы. От нее ощущения легкости и простоты в работе. Это, наверное, многим не понять, кто с 4к не столкнулся: очень заметны проседания ресурсов в программах, рендеренге и так далее, а Figma– это просто окно браузера, которому на это все равно».

Подписывайтесь на канал, ставьте лайк и спасибо за интерес к нашей деятельности!


Comments 0


My pageSettingsLogout
Cancel Confirm
100%
Cancel Confirm
Cancel Confirm