Сейчас будет серия объёмных постов о вебе, веб-вёрстке, дизайн-системе и дизайне кодом, а заодно о современном мире с его нейросетями и прочими (не)приятностями.

Как обычно, всё закончится тем, что надо купить курс. Если вы уже согласны, то гоу сюда https://intuition.team/ru/how-to-design-with-code, вас ждёт обновлённый продающий лендинг. Если вам не нужен курс, читайте всё равно, потому что это касается всех. Просто до самого конца не дочитывайте, вдруг там курс, а он вам не нужен.

Будет три части. Чтобы было не так страшно, иногда текст прячется в комментариях.

Часть 1
Бесплатное золото

Пару месяцев назад Игорь Петров опубликовал в бюрошных советах штуковину, которая в умелых руках может превратиться в +300 тыщ в месяц. Или в +300 баллов вайба. Или в 300 миллиардов сэкономленных нервных клеток мозга. (Ок, у нас столько и не было.)

https://bureau.ru/soviet/20241219/

Речь о генераторе статических сайтов. Мы много лет собираем сайты на похожих технологиях. Конкретный стек постоянно меняется — довольно долго у нас была связка Node.js + Pug + SCSS, мы между собой называли её Layer 0 — сейчас я скорее склоняюсь к Eleventy, которую показал Игорь. Эта штука умеет только собирать страницы из HTML-шаблонов и всё. В 2025, с современным CSS и JS больше ничего уже и не надо. Всё это живёт под гитом и редактируется напрямую, безо всяких «движков», «цээмесок», конструкторов и их админок.

Если вы дизайнер и умеете собирать сайты на Тильде, Геткурсе, Редимаге или даже Вебфлоу — самое время пойти чуть дальше и раскурить эту технологию.

Почему? Если коротко: потому что нейросети. Если чуть длиннее, см. первый комментарий.

Часть 2
Дизайн-система

Независимо от фреймворка и версии сборщика шаблонов, уже много лет мы собираем сайты на собственной дизайн-системе, которая незамысловато называется IDS (Intuition Design System). Это набор CSS-классов и JS-функций, которые мне самому были нужны чаще всего. Постепенно я устаканил их названия и основные свойства, а недавно мы с ребятами запилили реализацию на голом HTML.

Мы всё никак не дожмём дизайн-систему до официального релиза, но в целом её уже можно смотреть и брать. Вот: https://intuition-tech.github.io/ids/. И вот ещё такая страничка с обещаниями и отмазками: https://intuition.team/ru/ids (строго не судите, я сделал её вчера).

Если вам понравился Eleventy, вы можете засунуть туда IDS и очень быстро собирать всякие лендосы и сайты продуктов. Ну или сначала медленно, а когда научитесь — быстро. И это тоже шаг в сторону эффективности и независимости, потому что наша дизайн-система — не зависимость, а нечто другое.

Подробности снова в комментариях (много текста):
— наш смешной способ дистрибуции дизайн-системы;
— причём тут глобальное неравенство и опять нейросети;
— в какой именно «последний вагон» надо запрыгивать.

Часть 3
Зачем дизайнить кодом

У меня есть курс про дизайн кодом: https://intuition.team/ru/how-to-design-with-code

Я собираюсь перезаписать его в ближайшие дни — там опубликована уже новая программа, и показан результат практической части, к которому мы в конце придём. Он клёвенький, со всякими анимациями. Баланс между полезной базой и всякими приколами знатно сместился в сторону приколов; но база на месте.

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

Как курс связан со всем рассказанным в первых двух постах? Ну так, косвенно. Это одна из множества возможностей как-то потихонечку примыкать к элитному комьюнити Истинных и Свободных Созидателей Цифровых Продуктов.

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

Этот курс находится на пересечении сразу нескольких карьерных путей. Я даже нарисовал для вас схемку, как это устроено. Она чуть ниже. (Да, это не самая красивая моя схема! И это я ещё не всё туда поместил. Торопился.)

В общем, рекомендую свой курс. У меня много всяких авантюр, вы знаете. А это не авантюра, это дерьмо проверено временем. (Кстати, вы же внимательно читали — я собираюсь перезаписать курс. Сейчас там пусто, уроки появятся со 2 по 12 апреля. Есть промокод «ничего, я подожду», он действует как раз до 12 апреля.)

Схема 1. Как разные карьерные пути пересекаются прям где надо

https://intuition.team/ru/how-to-design-with-code

Информация для проскролливших, которым некогда читать: Всё ок! Сохраните эти заметки до момента, когда будете решать, на чём бы сделать новый сайт — тогда и прочитайте.

Ну, вроде всё. Спасибо за внимание! Пойду.

Напишите комментарий.

Буквы с обложки

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

Буквы с обложки — разбор

Выложу из комментариев свое понимание красоты каждой из книжек, которые показывал двумя постами ранее:

1. Семя Грядущего — очень бодрая, но вполне обыкновенная (по меркам времени) надпись. Буквы немного скачут, как будто потрясенные взрывами с маленьких картинок в центре, что добавляет им динамики. Имя автора скромно набрано черным на темно-зеленом, тем самым название выделено и вынесено на передний план.

2. Мичман Тихоня — очень странный выбор характера надписи, напоминающий минускул. Неожиданно в нее вклеена почти антиквенная Х, с контрастом обратным всем остальным буквам (рушится логика инструмента). Понятно, что буквы откуда-то срисовывали, да еще не очень умело, но получилось неожиданно интересно.

3. Тайна секретной комнаты — отличная, бодрая, игривая надпись, сделанная вокруг довольно посредственной иллюстрации. Буквы как будто намекают, что перед нами детектив с загадками.

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

5. Столкновение — прекрасная по динамике и эмоции надпись. В английском есть точное слово: trainwreck. Подстрочник названия очень умело убран на задний план неконтрастной к фону надписью (красный на коричневом).

6. Порог — очень понравилась текстура, за нее и сфотографировал. Есть еще фотка оборота обложки, прямо готовая для использования в каком-нибудь фирменном стиле или плакате.

7. Какой-то великолепный по своей красоте форзац, яркий и теплый. Что за книга не сфотографировал, видимо, обложка была менее интересна.

8. Increase your English — очень интересная композиция левым флагом, с подчеркиванием, наводящим на мысли, что это учебное пособие (как линейки в тесте/теле тетради) с надписью, выполненной рубленным гротеском с интересными решениями в O, U, G. Отдельно отмечу очень красивую N.

9. Александр Дюма — хорошо сбалансированная надпись с интересными локальными решениями (петелька у К, площадка у Р и Ю). Ю и Р справа пересеклись, как шпаги мушкетеров.