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

Question

[Ярослав]

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

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

Answer 1

[Антон Антон]

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

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

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

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

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

Нет

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

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

Answer 2

[Михаил Р.]

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

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

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

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

Comments

[Ярослав]

Спасибо. Из 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).

[Adamos]

Михаил Р.,

visual studio code (это не vscode)

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

Answer 3

[Refguser]

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

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

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

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

Answer 4

[Adamos]

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

Answer 5

[psiklop]

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