Почему Фигма убила Фотошоп в веб-дизайне? — Личный опыт на vc.ru

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

13 308 просмотров

Разбираем Photoshop

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

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

Уметь все понемногу чаще всего означает не уметь ничего на «отлично». Поэтому, специалисты чаще всего выбирают себе одну нишу и специализируются на ней.

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

Плюсы Photoshop:

  • Действительно мощные возможности для работы с растровой графикой и иллюстрациями.
  • «Все в одном» – можно и рисовать, и обрабатывать фото, и делать макеты, и создавать анимацию.
  • Работает без интернета.
  • Есть версии для смартфона и планшета, но они используются в качестве редактора фотографий. Кстати, это и минус, через такое приложение не откроешь посмотреть psd макеты с мобилки, а в фигме их можно смотреть.

Минусы Photoshop:

  • Очень, ОЧЕНЬ тяжелая программа. Если открыто больше 5-6 макетов, то тормозит даже на моем мощном компьютере.
  • Большое количество функций, многие из которых могут вам не понадобиться. Но есть плюс – интерфейс можно настроить под себя.
  • Чтобы показать макет заказчику, придется сохранять его и отправлять в формате файла. Это не всегда наглядно.
  • Нельзя работать над макетом в одном файле, совместно с коллегами или клиентом, в режиме реального времени. Точнее, можно, но для этого вам и клиенту придется скачать Creative Cloud.
  • Вся графика в растре, а в вебе чаще требуются векторные изображения.
  • Время от времени способен весело крашиться, порождая массу мемов в сети.

Да, в Фотошопе можно создавать реально крутые вещи. Но понадобятся ли все эти инструменты веб-дизайнеру — большой вопрос.

Разбираем Figma

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

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

Интерфейс Фигмы — простой и понятный даже для начинающего веб-дизайнера.

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

Также в Фигме есть множество функций, призванных облегчить работу веб-дизайнера.

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

Плюсы Figma:

  • Только нужные функции — не отвлекает и не пугает количеством инструментов.
  • Не кушает ресурсы компьютера так сильно, как Фотошоп. В Фигме даже 170 макетов банковского софта на среднем железе отображаются быстро и редактируются без задержек.
  • Широкие возможности для командной работы – можно делать макеты совместно с коллегами, давать проект на просмотр клиенту, оставлять комментарии прямо в макете. Стоит отдельно упомянуть возможность следить за экраном коллеги или заказчика — отличная замена Зуму, к слову.
  • Много функций, заточенных под веб-дизайн: возможность создания фреймов (рабочих областей), компонентов, кликабельных прототипов.
  • Не нужно устанавливать на компьютер – работает онлайн. Плюс все плюшки онлайн-редактора: автосохранение и история изменений с возможностью возвращения к одной из версий.
  • Проще для освоения, чем Фотошоп – за счет того, что в ней нет такого огромного количества функций.
  • Подходит для работы с векторной графикой.

И особенно я хочу выделить:

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

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

Минусы Figma:

  • Работает только онлайн. Если нет интернета, а нужно срочно отредактировать макет, я сажусь за Фотошоп. Причем интернет для Фигмы нужен быстрый и стабильный.
  • На смартфоне и планшете можно только просматривать проект – редактировать его нельзя. А если проект будет большим, то на мобильных устройствах он даже не откроется.
  • Для сложной работы с растровой графикой ресурсов Фигмы однозначно не хватит.
  • Платные аккаунты. Сейчас на бесплатной основе можно дать права на редактирование только в 3 своих проектах.

Почему Фигма однозначно выигрывает у Фотошопа при работе над макетами сайтов

Удобство интерфейса

Как я уже и говорила, весь интерфейс Фигмы заточен для работы над веб-интерфейсами. Он максимально прост и удобен для веб-дизайнера – здесь под рукой необходимые инструменты для создания прототипов и макетов, а также для отрисовки простых векторных объектов. В одном проекте можно разместить и прототипы, и дизайн или несколько вариантов макетов для показа заказчику.

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

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

Выбор фрейма в Фигме

И, как я говорила – за что я обожаю Фигму, так это за возможность создания кликабельных прототипов. Это очень легкий для дизайнера процесс, но супернаглядный для клиента, который может уже в макете понажимать на кнопочки, увидеть всплывающие подсказки и в целом посмотреть, как будет вести себя сайт.

Библиотеки

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

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

Так может выглядеть библиотека в Фигме

Плагины

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

  • BeatFlyer Lite – позволяет создавать анимационные эффекты прямо в макете
  • Content Reel – генерирует контент для макета – тексты статей, аватарки, адреса и телефоны и т.д. С ним не понадобится надоевший lorem ipsum.
  • Remove BG – удаляет задний фон у объектов.
  • Blurhash – делает фрейм размытым.
  • HyperCrop Batch Image Resizer – обрезает и изменяет размеры изображений.
  • HTML To Figma – конвертирует веб-страницы в Фигму.
  • Image Extractor – поможет быстро собрать на одной странице все изображения проекта.

Существует множество платных и бесплатных плагинов для Фигмы, и их количество постоянно растет. Конечно, для более сложной работы с графическими файлами и анимацией требуются профильные программы, но многие простые задачи вполне возможно выполнить силами Фигмы. К тому же, есть много «вспомогательных» плагинов, которые позволяют автоматизировать некоторые задачи.

Компоненты

Компоненты используются, когда нужно разместить в проекте несколько однотипных элементов – например, кнопок, карточек товара и т.д. При этом, когда меняются свойства главного компонента, они автоматически применяются и к другим компонентам.

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

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

При изменении главного компонента меняются все остальные.

Командная работа

Фигма предоставляет реально мощные возможности для совместной работы, чего нет в Фотошопе. Рассмотрим их более подробно:

  • В одном проекте могут работать несколько дизайнеров. Можно давать своим коллегам возможность только просматривать или полноценно редактировать файл.
  • Клиент или коллеги могут оставлять комментарии прямо в проекте – очень удобно работать именно с ними, а не со списком правок в отдельном файле.
  • Чтобы показать проект клиенту, не нужно пересылать кучу тяжелых файлов. Можно просто скинуть ему ссылку на проект, тут же созвониться или получить от клиента комментарии в том же проекте. Есть режим презентации – если клиент кликнет на аватарку дизайнера в проекте, то сможет следить за тем, что дизайнер делает на экране. Так можно наглядно провести клиента от экрана к экрану и показать ключевые моменты.
  • Существуют и специальные плагины для более продуктивной командной работы – например, FigChat, который позволяет создавать в проекте настоящий чат.

В Фигме удобно оставлять комментарии на макетах и прототипах, а также отвечать на них.

Резюме от меня

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

Я, как веб-дизайнер, работаю и с Фотошопом, и с Фигмой. Если мне нужно создать сложную графику (или если у меня вдруг отрубят интернет), конечно, я воспользуюсь Фотошопом. Но потом я все равно перенесу эту графику в Фигму и продолжу делать макет там. То есть, для меня, как для веб-дизайнера, Фотошоп – это вспомогательный инструмент.

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

Надеюсь, что мой очередной ликбез был полезен. Если остались вопросы – с удовольствием отвечу на них в комментариях.

Требуется обработка фотографий удаленная — фриланс работа

Главная / Удаленная работа / Фото / Видео / Аудио

Обработка фотографий — занятие, которое может приносить стабильный и достойный доход. Если вы — профессионал в фотообработке, ищите проекты в этом разделе биржи фриланса Pchel.net, где мы собрали для вас большое количество предложение о сотрудничестве от работодателей с нескольких сайтов.

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

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

Читать

Разместить проект / вакансию