Мы делали веб дизайн сайтов на Фотошопе когда-то, а сегодня в моде Figma. Но мир идет дальше и даже Figma уже начинает умирать. Так как же делать дизайн веб сайтов?
Вот интересный перевод статьи про то как делают дизайн веб сайтов в 37signals.
По всем отзывам, Figma – удивительный инструмент для дизайнеров. Мы широко используем его в 37signals, и я уверен, что большинство других компаний-разработчиков тоже.
Adobe не заплатила 20 миллиардов долларов просто так. Но мы не выполняем основную часть нашей работы по дизайну с помощью Figma при разработке Basecamp или HEY для веба. Веб сайты мы делаем иначе.
Все это делается напрямую в HTML и CSS, и так это должно быть. Потому что, несмотря на то, насколько хорош Figma, это промежуточный слой абстракции, как и Photoshop раньше. Если вы работаете с вебом, вы будете работать быстрее без такого слоя абстракции в процессе дизайна, который фильтрует сотрудничество между программистом и дизайнером.
Это, возможно, самая большая открытая тайна производительности и жизнеспособности наших команд из двух человек в 37signals. Все наши веб-дизайнеры работают непосредственно с родными материалами HTML, CSS и, обычно, даже с немалым количеством JavaScript и Ruby. Процесс дизайна и его итерации проходят через обновления реального кода, который запускает реальное приложение и, как можно скорее, на реальных данных. Кажется, что это не является общей практикой для многих компаний-разработчиков. Я часто слышу о процессах, в которых дизайнеры работают так же, как и я, когда я только начинал свою работу с вебом. Дизайны создаются на уровне абстракции, а затем передаются программистам для “реализации”.
Иногда оправдывается тем же аргументом, который я слышал еще в конце 90-х годов по поводу передачи файлов Photoshop программистам для реализации: Вы можете быть более креативными, если не ограничены тем, что необходимо сделать, чтобы это произошло. Я думаю, что это именно неправильный вывод. Креативность процветает на ограничениях. Знание того, как правильно работать с материалами, делает получение максимальной отдачи от материала намного проще. Хотя мы, к счастью, избавились от абсурда “пиксель в пиксель”, с его spacer gifs и изображениями с закругленными углами, неконтролируемое мышление сегодня все еще существует в том умственном пространстве.
Чтобы ваши дизайнеры стали опытными в работе с материалами веба, им не обязательно становиться оракулами разработки фронтенда. Но они должны стремиться к самодостаточности в управлении инструментами своей профессии. И относиться к улучшению своих навыков работы с HTML, CSS, JavaScript и, возможно, даже с бэкенд-языком как к основному элементу своей карьеры. В мире веб-разработки, который все больше дробится на все меньшие специализации, это может показаться немного утопическим квестом: Великие дизайнеры, которые могут также сделать свои творения реальными? Удачи в поиске таких людей! И тем не менее, мы нашли их неоднократно в 37signals, и получаем от этого огромные дивиденды в производительности.
Оставьте Figma на начальных этапах концептуального дизайна для веба. Или используйте его в хорошем качестве для разработки нативных мобильных приложений, когда у вас редко есть выбор.
Но примите тот факт, что основная часть дизайна для веба должна быть выполнена непосредственно в основных элементах его периодической таблицы.
37signals https://world.hey.com/dhh/design-for-the-web-without-figma-4bc3a218
В этом блоге уже был пост на эту тему от Артемия Лебедева про дизайн веб сайтов будущего.
В целом мы видим что история продолжается. То что Лебедев предсказал в 2017 году – тут подтверждают ребята из 37signals про 2023 год.
Но смысл то один – сайты сегодня можно делать без дизайнеров, без программистов, просто грамотно применяя конструкторы и WordPress.
У меня тут проект довольно крупной компании, и по привычке я даже боялся предложить готовую тему на WP. Но мы собрали сайт и базу за 1 час, показали как работает и клиенту понравилось.
Минус 3 месяца дизайна, минус 3 месяца разработки – просто собираем сайт на WordPress, Gutenberg и готовой теме )
Просто 6 месяцев работы превращается в 1-2 часа. Вот так это и работает )
