yakovtsev.ru · система
Дизайн-код
Живая библиотека блоков, из которых собираются заметки. Здесь они выглядят ровно так же, как в постах — один общий стиль, один источник правды.
Принципы
Свободная форма, вдохновлённая Эдвардом Тафти. Содержание важнее рамок: много воздуха, ничего случайного. Но без догмы — графика бывает и просто ради настроения; главное, чтобы помогала читать, а не мешала.
Холодный нейтральный фон. Бумага тёплая, но сдержанная и почти без цвета — это чистый холст. На нём любой акцент (один фиолетовый, картинка, число) сразу звучит и не конкурирует с контентом. Фон молчит — поэтому акценты слышно.
Типографика
Три голоса, три роли — чтобы страница читалась как продуманное издание, а не дефолтный блог. Личность несут шрифты, а не кричащий цвет: бумага тёплая, акцент один — фиолетовый. Шрифт работает, цвет молчит.
Тело набрано засечками — спокойным «прозрачным» шрифтом, чтобы вы видели мысль, а не буквы. В абзаце спокойно живут жирный, курсив, «ёлочки», тире — и цифры старого стиля: в 1984-м, до 30%, в 9:00.
Fraunces
PT Serif
Inter
в тексте · PT Serif
0123456789
…в 1984-м выросли на 30%, релиз — в 9:00.
в статах · Fraunces
0123456789
×3–5
Числа: в тексте — PT Serif (спокойные, чистые), в крупных статах — Fraunces (крупнее и контрастнее, с характером).
Типограф · невидимый слой
Правила русской типографики применяются на сборке автоматически к каждому посту. На входе — обычный markdown, на выходе текст уже «по-типографски». Это часть дизайна: даже идеальный шрифт выглядит сыро, если предлоги висят в конце строки, а кавычки кривые.
сыро · как набрано
ИИ пришёл не помочь - он пересобирает "архитектуру" работы. До 30% горит на передаче смысла...
после типографа
ИИ пришёл не помочь — он пересобирает «архитектуру» работы. До 30% горит на передаче смысла…
Что он чинит сам: «ёлочки» вместо "лапок" · тире — вместо дефиса между словами · неразрывные пробелы (короткие «на», «до», «в» не отрываются и не висят в конце строки) · многоточие … одним знаком · правильные ×, −, № и пр. Всё на сборке, по библиотеке typograf Дениса Селезнёва (а сами правила — в традиции «Ководства» Лебедева).
Врезка с цифрами
Крупные цифры (Fraunces) с курсивной подписью. Когда нужно дать «вес фактам» — рост, доля, срок.
×3–5
рост производительности
−60%
размер команды
Акцент
Акцентная фраза с вертикальной чертой — вытащить ключевую мысль, поставить точку в разделе или закрыть пост.
Выиграют те, кто переосмыслит саму архитектуру того, как их бизнес создаёт продукты.
Картинка с подписью
Иллюстрация или схема с подписью по центру — на всю ширину или узким вертикальным кадром.
Иллюстрации · единая стилистика
Картинки собираю моделью (сейчас GPT Image 2) по референсу: скармливаю эталонные кадры, чтобы держать одну стилистику и гармоничную палитру. Есть отдельный промпт-шаблон. Цель — чтобы иллюстрации выглядели как одна серия, а не случайный сток: метафора вместо буквальности, та же температура цвета, тот же «материал».
Пара-контраст · «день / ночь»
Блок-противопоставление: два состояния рядом, чтобы поймать контраст — «до → после», старое и новое, один подход против другого. Как это устроено у нас:
решениеДве половины слились в одну плашку, а граница между ними — живой волнистый шов вместо зазора. Читается как одно целое, а не две отдельные карточки.
☀ День · решения
Вы делаете то, что машинам нельзя доверить: выбираете архитектуру, снимаете противоречия, проверяете результат.
☾ Ночь · исполнение
Ноутбук закрыт — фабрика не спит. Агенты проверяют зависимости, пишут код, гоняют тесты.
И живая деталь: шов поворачивается вслед за раскладкой. На компьютере половины стоят боками — шов вертикальный, по центру. На телефоне они встают друг над другом — и тот же шов ложится горизонтально (снизу у «дня», сверху у «ночи»). А чтобы не переключать экраны — вот обе раскладки рядом:
Эксперименты · микросторителинг
Иногда идея просится не в лонгрид, а в короткий мобильный формат: разложить её на тезисы и оживить интерактивом — листаешь, как историю под телефон. Не статья, а «сцена». Пара живых примеров:
