В какой программе оптимальнее и проще рисовать макет сайта?

Question

[Александр]

В какой программе на сегодня оптимальнее учиться рисовать макеты Сайта?
В России до сих пор повальная привязанность к PSD. В США уже вроде как многие используют Adobe XD.
Я увидел этот ролик - https://www.youtube.com/watch?v=x2gZc-zxPtU&t=520s там автор настолько лихо, и первый взгляд просто делает дизайн простого сайта за 20 минут в Adobe XD. Очень понравилась программа, не то что фотошоп с миллионом кнопок.
Скажите, на Adobe XD можно сделать полноценный адекватный макет сайта, чтобы его удобно было верстать потом (чтоб код копировался, отступы считались и тд)?
Говорят есть проблема - мол на выходе часто требуется макет в формате psd , а из XD его нельзя конвертировать в PSD?

Answer 1

[Kadzi]

Как создаются современные прототипы сайтов?

Comments

[Александр]

Так я имею ввиду именно полноценный дизайн сайта (макет) а не просто прототип. Прототип Можно на Wireframe За 10 минут нарисовать. Только смысла я вообще не вижу в них

[Kadzi]

Александр, ссылку открой посмотри еп

[Александр]

Kadzi, понятно. спасибо. Там растровая графика? в каком формате имеем макет на выходе, в авокод такое можно открыть для верстки?

[Александр]

Kadzi, Фигма платная?
Смотрите, фотошоп , как я понимаю не подойдет для рисования баннеров например больших размеров (не в вебе, а вообще) для этого нужно иллюстратор например использовать, а фотошоп для каких - то небольших визиток и тд?

[Kadzi]

Александр,

Там растровая графика?

это векторный редактор, куда можно загружать растровую графику

в каком формате имеем макет на выходе

на выходе ссылка, которая расшаривается верстальщику или формат .fig

в авокод такое можно открыть для верстки

есть интеграция с зеплин и авокод

Фигма платная?

платная подписка только для создания команд в фигме и использовании библиотек компонентов. Можно спокойно всё делать в бесплатной версии.

фотошоп , как я понимаю не подойдет для рисования баннеров например больших размеров (не в вебе, а вообще) для этого нужно иллюстратор например использовать, а фотошоп для каких - то небольших визиток и тд?

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

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

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

[Александр]

Kadzi, ну понятно, фигма это тк, набросать какой-то каркас, базовый функционал, но например картинки и фото в нем не отрисуешь, только где -то взять и встаить можно уже готовое, да. Все равно оптимально тогда осваивать связку, например, фотошоп+тильда.

Answer 2

[Mikalai Bulava]

Уже много лет sketch является стандартом в сфере дизайна интерфейсов. Достаточно удобный, гиюкий и объемный инструмент. Рекомендую его для ознакомления, как уже состаявшейся стандарт.
Сам же использую Figma. Проще попробовать, чем что-то обьяснять. Еще стоит посмотреть в сторону Framer X, но это уже для людей интересующися.
Ну и в конце хочется добавить, что это всего лишь инструменты. Проектирует человек.

Comments

[Александр]

В Sketch же только векторная графика? Или растровая тоже есть? В каком формате получаются макеты потом? В PSD можно конверитировать, чтобы потом в фотошопе открыть или авокод?

[Mikalai Bulava]

Александр, В формате sketch. Векторная графика (все же сейчас это стандарт), но есть небольшие возможности по редактированию и растра, но обычно, если требуется обработать что-то, то иду в photoshop. Есть интеграция с avocode, zeplin, invision. В figma, к примеру, и avocode не нужен, все внутри. Если клиент требует PSD, то после небольшого разговора обычно они обычно меняют свою точку зрения, это нормально.

[Александр]

Mikalai Bulava,
Смотрите, фотошоп , как я понимаю не подойдет для рисования баннеров например больших размеров (не в вебе, а вообще) для этого нужно иллюстратор например использовать, а фотошоп для каких - то небольших визиток и тд?

[Mikalai Bulava]

Александр, Photoshop вообще не очень подходит для работ с полиграфией. Для этого есть illustrator or InDesign. Photoshop больше для работы с растром (2d artist, фотообработка и т. п.).
Но опять же - инструмент вторичен, в любом можно делать все что хочется. В своей работе я использую то, что описал выше.