Что сейчас используют веб-дизайнеры Figma или Photoshop?

Question

[DredWolf]

Изучаю вёрстку и хочу знать по каким макетам лучше обучаться: Photoshop или Figma? Что сейчас популярнее? Что перспективнее?

Comments

[Михаил]

фигма, она крута, тем что она онлайн и пользоваться может вся команда, удобная, легкая, простая
фш громоздкий, psd'шники весят как паровозы и удобен он только для дизигнира

Answer 1

[archelon]

знать нужно и то, и другое.
и третье-четвертое не помешает: иллюстратор, корел
и zeplin

Answer 2

[McBernar]

Большинство современных дизайнеров работают либо в Фигме, либо в Скетче + Цеплин.

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

Так что просто прикиньте — кто ваша аудитория. Если хотите фрилансить, то psd вам еще лет 10 будут присылать. Если хотите работать в it-компании/стартапе, то, скорее всего, Фотошоп вам никогда не понадобится.

Comments

[govras75]

В Фотошопе работают либо ленивые фрилансеры

ленивые - это те, кто делают линивый дизайн. В 90% дизайн созданный в фигмах и им подобных - ленивый.
Композиционно и дизайнерски построен сугубо блочно и к дизайну не имеет никакого отношения.

В полиграфии такую работу называли версткой!

Сейчас такого "ленивого" дизайна валом и все под копирку.
Технологии убили творчество, а ЛЕНЬ сообщества IT-шников возится и главное ДУМАТЬ - убило дизайн в вебе.

[McBernar]

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

[govras75]

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

В том то и дело, что человек спросил о дизайне, ui я вообще дизайном не считаю - это технология.

не путайте грешное с праведным, не привозносите работу ui-дизайнера работающего по шаблонам, в том числе в известных программах, по сути использующего стандарты проработанные и навязанные другими.
Если бы вы знали, что такое ГОСТы в приборостроении (правила пром. дизайна того времени), то вы бы понимали, что ui-дизайнер всего лишь конструктор собирающий пазлы.
На сегодня, за модными фразами скрываются лишь технологии где в процессе создания мозги отсутствуют. Все, что нужно было продумать, продумали уже за вас другие.

Дизайн - это в первую очередь МОЗГИ!
Не нужно называть дизайном то, что таким не является.
Веб дизайн - это целый комплекс и ui в нем лишь малая техническая составляющая.
И если бы у меня спросили, что нужно для прототипирования (созд. опытного образца) без претензий на внешний вид, продуманность деталей, грамотный визуал, то я бы ответил фигма и ей подобные. Понимаете, так проще вашим менеджерам утверждать проект у заказчика. Во главе бабки, причем "дутые" бабки, а не качество.

Вот скажите мне просто 5 пунктов почему нужно пользоваться фигмой, а не фотошоп.
"Удобство" не используем сразу, понятие относительное...

[McBernar]

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

И те минусы, которые вы вешаете на Фигму, на самом деле являются ее плюсами. Дизайнеры цифровых продуктов не художники, а инженеры. В производстве есть ГОСТы, а в дизайне есть ограничения технологий и платформ и устоявшиеся паттерны.

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

[govras75]

McBernar,

сайт или приложение делается не для глаза потребителя, а для выполнения определенной функции

В первую очередь все это делается ДЛЯ ПОТРЕБИТЕЛЯ!
Эта функция (ради которой делаетс) и будет использоваться потребителем если ему понравятся 2 основные составляющие будь-то сайта или приложения:
1. Удобный, понятный и приятный глазу интерфейс
2. Понятная, доходчивая, простая и приятная подача информации

Второй пункт не решают на 100% фигма и ей подобные, они лишь дают стандартные инструменты которые по мнению кого-то решают преимущественное количество задач.

Функция определяет форму, а не наоборот.

Кто вам сказал, что грамотный веб-дизайнер ставит во главу картинку?

На фигму я ничего не вешаю ))
Если бы речь шла о специфических продуктах, со специализированной ЦА, то я бы и слова не сказал относительно фигмы, скетча, цеплина, авокода, ХД и т.п.

Если речь идет о сайтах, то тут очень спорный вопрос.
Если мы говорим о сайте где функционал - основная его функция используемая ЦА, то не спорю, все эти продукты будут в помощь и ничего искать не нужно. Эти проекты действительно могут быть масштабными и отрисовывать в Шопе все моменты было бы гемором даже для опытного дизайнера. + сюда добавился лет 7-5 назад активно развившийся на сегодня адаптив. Хотяяяяя с последним, сегодняшние горе-разработчики не справляются в 90%. Этот адаптив повлек за собой свою череду "правил" к дизайну, которые ограничили оригинальность, вдумчивый подход к композиции (кстати композиция и есть ЕДИНОЕ ПРАВИЛО позволяющее создать эффективный и правильный дизайн и ниодно правило не научит НЕУЧЕЙ композиции в оригинальном дизайне) опять же в угоду бездумным действиям "на автомате".
Дизайн типа сваливается в минимализм, где функционал выходит на первый план. Нееее, функционал и должен быть на первом плане, но не фунционал ради функционала, а как один из инструментов достижения цели.
Но знайте, что со временем приходит перенасыщение и за "прямоугольничками" последуют другие стили... Даже если вы обажаете лофт, то рано или поздно захотите побывать в театре с его барокко.

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

[McBernar]

govras75, да, мы с вами говорим о разном — это было понятно изначально.

Я говорю о продуктах, которыми пользуются ежедневно миллиарды людей. Вы же говорите о локальных «презентациях» услуг/товаров. К счастью, к этой области я перестал иметь какое-либо отношение примерно тогда, когда появился Скетч. И я вас уверяю — любой бизнес, который поставит себе главной целью конверсии и деньги, очень быстро откажется от «барокко» в пользу функционального дизайна.

А «барокко» будет всегда — полно клиентов, которые хотят поиграть в дизайн и которым нужно «богато, видно, что работали, креативно». Вот только к современной разработке это не имеет отношения. Это всегда будет уделом ленивых дизайнеров с Фотошопом с фриланса.

С чего начинали, к тому и пришли.

[govras75]

McBernar,

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

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

Я не говорю о "локальных презентациях", я говорю о вдумчивом подходе к разработке.
Не отрицаю использование прогресса, но я против ТУПОГО его использования.

Вот только к современной разработке это не имеет отношения. Это всегда будет уделом ленивых дизайнеров с Фотошопом с фриланса

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

Очень плохо, что вернулись в зад (( но честно признаюсь, на некоторые вещи вы мне открыли глаза, точнее разбили мои сомнения. Теперь мне проще осознавать то, что нас ждет в будущем.

Спасибо за общение!

[barykin_n]

govras75, я все никак в толк не возьму, а что такого не умеет figma и xd, из того, что умеет Фотошоп из того, что нужно в вебе? Цветокоррекция растровых картинок? Ретушь? Нормальные люди готовят сложные фоны и фотографии отдельно, а потом используют. Градиенты, тенюшки и деформации текста? Да вроде все это умеют. Что такого возможно сделать только в Фотошопе?

[govras75]

barykin_n,

я все никак в толк не возьму, а что такого не умеет figma и xd...
Нормальные люди готовят сложные фоны и фотографии отдельно, а потом используют.

Расскажу одну быль "Седых времен".
Когда-то пришлось делать видео-заставки для программы новостей (кстати на канале она продержалась и была актуальна более 15ти лет), еще в времена когда Макромедия не была поглощена Адобом, а Премьера тогда имела не однозначные возможности.
Тогда я решился сделать это все на Флеше, который позволял просто и гибко создавать анимацию. Но вы и представления не имеете какой гемор был делать растровые заготовки в Фотошопе, а потом их анимировать в флеше.
В последствии Премьеру подогнали по редакторскому функционалу к Фотошопу и она стала единственной и самой мощной прогой для работы с видео.

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

Дизайн перестает быть продуманным, вариативным... он перестал быть для пользователя.
Один очень простой пример:

На этом главной слайде по мимо цветокоррекции, дорисовок мелких деталей основного фото (если бы это не было проделано, то не было бы фокуса на основное предложение), есть не стандартных 3 затемнения, которые можно реализовать только в шопе. Их практически не видно, они составляют общее восприятие фото, но без них не будет читабелен текст, лого и т.п.
Если делать с умом, то с учетом возможной замены фото, эти затемнения должны быть не на фото, а в верстке страницы, чтоб заказчик не парился с подготовкой и заменой фото в админке.
Делая в фигме мне бы пришлось создавать такой же слайд в фотошопе, с текстом и др. элементами и отрисовать необходимые затемнения, мало того я бы вносил коррекции по величине текста его цвету и т.д. Затем, все это нужно было бы перевоссоздать в фигме, перенеся необходимые слои и стили текстов.
Все это гемор для дизайнера. Но конечно, программеры у нас боги, что им труд "грузчика" дизайнера, они же выше в этой ветке иерархии, главное чтоб им потом не нужно было ломать мозги и многое за них сделает программа. Неееее - это конечно ускоряет процесс, упрощает понимание функционала и т.п. это нормально и даже правильно...

Да, ХД я всеж рассматриваю как более перспективный инструмент, поскольку он адекватно работает/импортит с псд-файлами (было бы смешно Адоб-Адоб) и позволяет быстро совмещать наработки. У него реально большие перспективы, но это в случае совмещения с Дримвьювером и Фотошопом. По крайней мере перспективы таковые нарисовываются.

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

В большой команде подобные программы очень удобны и как-раз ценны возможностью командной работы над проектом. Они и создаются для работы команд. Нужно понимать первосуть для чего все делаеться изначально. Ето не граф. редакторы, вот когда они обростут такими возможностями тогда и выбор будет иметь смысл.
Также не стоит забывать историю поглощения Адобом многих перспективных проектов в Вебе (тот же Макромедия), что монополизирует эту компанию как и Гугл (откуда же ноги растут?) в данном направлении. Эти компании управляют за ниточки всеми веб-разработчиками... С одной стороны они делают все верно и стандартизируют разработку, но с другой - это концентрация бабла и главное информации в одноих руках.

Хотя, что тут говорить, все мы знаем "информация - бабки".

Градиенты, тенюшки и деформации текста? Да вроде все это умеют.

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

[barykin_n]

Я понял, все программисты плохие, потому что не ценят вашего таланта.
Смотрите что я сделал, растушеванная тень от текста и два слоя с background blur-ом. И потратил на это всего три минуты. Две минуты я искал картинку.

И я даже ничего не сказал об уместности этого блура и затемнений. Хотя как фотографа меня это конечно же ломает.

[govras75]

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

Так вот в моем случае заблюренность (не люблю иноязы ((( ) не имеет линейных контуров и сделана чтоб убрать акценты на куче не нужных деталей на фото фокусируя внимание на основном объекте, при это делая это не по тупой геометрии, а имитируя фокус, создавая объем. В вашем случае - это тупая линейная имитация. Да и если бы вы немного вникли в задачу, то не предлагали бы такую размытость, вы же не знаете, что размоете на следующем фото слайдера.
Затемнение под текстом, которого кстати у меня не было на изображении выглядит как в Корале тень в начале 2000-х... Да и то, что вы пытаетесь превознести как достижение современности в верстальных прогах, пройдено еще 20 лет назад. У меня на студии дизайнеры за это по рукам получают.
Вы бы не показывали мне эти примеры, если бы понятие имели хотя бы о насыщенности той же тени в фотошопе. + Такие тени под текстом, нормальный дизайнер не будет использовать - это моветон.

Представляете куда мы откатились в прогрессе?

[govras75]

barykin_n,

И я даже ничего не сказал об уместности этого блура и затемнений. Хотя как фотографа меня это конечно же ломает.

Ок, как "художник - художнику" без предубеждений...

1.

и это изображение уже с обработкой и дорисовками

2.


3.

[barykin_n]

govras75, так я и не претендовал, я лишь показал, что за минуту можно сделать все тоже самое, на что вы потратили годы работы над этим макетом.
Ну да ладно, поехали дальше, для начала вы пойдете почитать что такое глубина резкости и окажется, что стулья справа на переднем плане никак не могут быть не в резкости, как и окно слева. Никому больше не рассказывайте, что вы тут имитируете фокус. Работу вы сымитировали.
Второе, а что если у пользователя монитор с другим разрешением? Ну такое бывает, еще бывают планшеты, телефоны, но это уже совсем деградация, так что просто другой монитор, поуже. Ну или масштаб увеличит. Наверное текст съедет ближе к центру, а заблуренные поля по краям уедут за границы экрана? Ну, это было бы логично. Акценты пропадут, текст окажется на незаблуренном фоне и вся ваша концепция рухнет? У меня вот в дизайне, который я сделал за минуту, можно поменять текст, картинку, сжать, расширить и не сломается вообще ничего.
Ну и текст. Не надо рассказывать, что если заменить текст, то все тоже сломается. Строки "Мебель для вашего бизнеса Офисная мебель для персонала" друг за другом - вот это деградация.

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

[govras75]

barykin_n,

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

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

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

ничего не рушится, размытость убирает лишние элементы для больших площадей, когда их много. Когда они уходят в зарез (эти лишние детали), то и блюр выполнивший свои функции уйдет в зарез вместе с ними. И вот тут свою функцию выполняют затемнения, которые не на фото, а отдельными слоями в верстке.
А в вашем дизайне набейте текст с более длинным словом и он наедет на изображение, перекторет его, а сжимая по ширине произойдет аналогичный эффект даже с этим текстом, а если блюр не оставите на месте и правильно не заверстаете то вообще фото заблюрится. Да и вообще вами изначально подобрано фото (на которое вы правильно потратили 2 мин.) которое не имеет много контрастных деталей, выдержано в едином тоне и универсально как для фонового.

Ну и текст. Не надо рассказывать, что если заменить текст, то все тоже сломается. Строки "Мебель для вашего бизнеса Офисная мебель для персонала" друг за другом - вот это деградация.

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

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

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

не удобно кому станет за свою работу? ))
Судя по вашей фразе - это вы у нас гений, а я так... ленивый грузчик.

[barykin_n]

govras75, ясно, придумываем несуществующую проблему и героически ее решаем.

[govras75]

barykin_n, чего же придумываем?
Просто общаемся, человек задал вопрос, на который я считаю ответ по середине в нашем общении.

Answer 3

[tempick]

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

Это ответ моего знакомого, дизайнера с многолетним опытом.

Comments

[McBernar]

Лол

[Gradysden]

Видимо этот ответ ваш знакомый давал много лет назад)

[govras75]

Gradysden, вопрос не в том где делать дизайн, а как... с коралом это конечно троллинг, но в общем он прав

[tempick]

govras75, запоздало, конечно, отвечаю) Он использовал corel для отрисовки некоторых элементов. Говорит, что иногда лучше векторную графику использовать. Зачем конкретно - хз, я в графике нулевой

Answer 4

[Pavel Shvedov]

У нас фигма

Answer 5

[Марина]

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

Answer 6

[NicholasTheThird]

Лично я использую Figma - лично для меня она быстрее и проще Photoshop, но при сложных задачах захожу и в продукты Adobe. Никак не могу не согласиться с комментариями выше.

Answer 7

[Пес Барбос]

Нужно понимать, что именно для дизайна веба есть фигма, но если нужно стилизовать изображение, вырезать объект и тд, то без фотошопа не обойтись