Как/где нынче визуально рисуют сайты?

Как сейчас принято делать веб-дизайн? Как и в благословенные 90-ые - в текстовом редакторе теги прописывают один за одним (даже для страничек с очень сложной структурой? не задалбываются ли?)? Где-то в "фигме" (слышал такое слово)? Мне кажется, что явно какая-то автоматизация должна была появиться (раз уж код пишем не в vim, а в vscode), но я это пропустил.

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

Дополнительно:

не задалбываются ли?

нет. повторное использование компонентов вполне себе работает.

Где-то в "фигме"

в фигме делают дизайн и, иногда, "прототип" с парой кликов для презентаций.

Такое же есть?

Нет

неужто исключительно в текстовом редакторе?

Да. Текстовые редакторы сильно развились. + всякие фичи типа HotUpdateReload позволяют на втором мониторе сразу увидеть результат.

Ответы:

Вопрос - а как сейчас принято делать веб-дизайн?

1. Создание чернового макета (прототипа).
2. Создание дизайна на основе п1. в Figma (все целевые страницы + минимум под 3 разрешения дисплея) и Photoshop (для сложной обработки изображений).
3. Фронт:
- Верстка и натяжка на CMS (bootstrap + свои компоненты).
- Или более сложная разработка фронта на React (mantine + свои компоненты).
+ Сборщик webpack/nextjs с компиляцией, оптимизацией, нарезкой изображений и прочей мартышкиной работой.
4. Тесты.
5. Публикация.

неужто исключительно в текстовом редакторе?

Нет, в ide webstorm/phpstrom/pycharm.

• Спасибо. Из Figma что выходит - уже HTML/CSS (для п.3) или просто картинки согласования и чтобы потом (в текстовом редакторе) повторить что-то похожее?
• Ярослав, просто картинки. Ну может ещё с расширением можно стили и цвета получить. Но в основном всё руками.

  Никакого смысла в wysiwig в вебе нет - это уже пройденная история.

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

  Вот если бы в вебе активно использовалась система как на десктопе - когда программа сама себе UI рисует на условном canvas или через обращение к GPU - тогда в принципе можно было бы говорить о wysiwig, тк тогда бы не было ограничений html

• Ярослав,
  
  

  Из Figma что выходит - уже HTML/CSS

  Из фигмы выходит говно-код.

  и чтобы потом (в текстовом редакторе) повторить что-то похожее?

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

• Михаил Р., а IDE - vscode и что-то подобное, или есть специальные, более правильные для HTML?
• Ярослав,
  
  

  а IDE - vscode и что-то подобное

  vscode - это не ide, это редактор кода, который при попытке сделать из него ide - сожрет оперативы больше, чем продадут Вам в магазине 😉
  По ide все достаточно однозначно - jetbrains (они монополист по большинству популярных ЯП), для C#/C++ еще имеется альтернатива visual studio code (это не vscode).

• Михаил Р.,
  

  visual studio code (это не vscode)

  Соврамши, это именно оно. Полноценная Студия суффикса Code не имеет.
  Для Крестов IDE, на самом деле, куда как больше - тот же бесплатный QtCreator мне верно служит, например.
  Но тут это явный оффтоп.

Крупные популярные и качественные сайты как рисовались - неужто исключительно в текстовом редакторе?

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

Но "нарисовать" - так же далеко от сайта, как коробка для спичек от шашлыка.

Сайты не рисовались ни в 90е ни сейчас.
До появления движков сайты кодились в "блокнотах" и разных фронтпейджах.
Сейчас же подавляющее большинство сайтов создаются на базе CMS и фрейворков. И для подавляющего большинства не рисуется вообще ничего - всё, что надо уже есть. Ну разве что всякую мелочёвку типа кнопок, полосок, логотипов.

Фокус в том, что сейчас давно не принято собачить в страничке HTML и тут же стили.
Стили собираются в CSS-фреймворк, и на странице остаются только классы.
А потом дизайн рисуется реактивным фреймворком из компонентов, и те классы уходят в шаблоны компонентов, где упоминаются ровно столько раз, сколько необходимо.
Так что на самой странице не остается ничего, кроме вызова фреймворка (ну, и шаблона самого сайта, разумеется).
И все это аккуратно разобранное - уже не требует рутинных правок, так что автоматизировать писанину просто незачем, а WYSIWYG тут только навредит.

Дизайн тоже развился, сидишь в кодинге и дальше сиди. А макеты надо покупать или искать готовые. А то будешь со своим сайтом как чудак. Вот для примера: https://themewagon.com/