Что я использую вместо тяжёлых UI-библиотек

Коротко. Headless + Tailwind или свой набор компонентов.

Суть

MUI/Chakra на лендинге — лишние сотни KB. Собираю UI из Tailwind + 5–10 своих компонентов под бренд заказчика.

Ниже — практика без лишней теории: что делаю в реальных проектах (лендинги, визитки, MVP).

Что беру

Headless UI или Radix только для сложных паттернов: dialog, combobox.

Иконки

SVG sprite или lucide-react с tree-shaking по иконкам.

Таблицы

На MVP — простая разметка, не AG Grid.

npm i @radix-ui/react-dialog
// один примитив вместо всего MUI

import { Dialog } from '@radix-ui/react-dialog'
// стили — Tailwind

// bundle diff
npm i @mui/material  # +300KB vs свой Button ~2KB

Что я использую вместо тяжёлых UI-библиотек — про визуальную дисциплину без отдельного UI-дизайнера. Это не «сделать красиво», а сделать понятно и дорого при ограниченном бюджете.

Базовые правила визуала

• Одна шкала отступов (4/8/12/16/24/32) — меньше «случайных» px.
• Не больше двух акцентных цветов + нейтрали.
• Крупный заголовок, короткий подзаголовок, один главный CTA.
• Контраст текста по WCAG хотя бы AA на кнопках.
• На мобилке — те же приоритеты, не ужимать всё в кашу.

Типичные ошибки

Перегруз эффектами и библиотеками «на всякий случай»; отсутствие проверки на слабом интернете и старых телефонах; копирование чужого дизайна без адаптации под свою аудиторию; отсутствие явного CTA; ожидание, что «сайт сам продаст» без трафика и оффера.

Для коммерческих проектов отдельно болит размытое ТЗ и бесконечные правки без доплаты — лечится этапами и лимитом итераций.

Когда имеет смысл привлечь разработчика

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

Читать дальше

• Визуально дороже без дизайнера — типографика и отступы
• Портфолио — живые кейсы
• Услуги — лендинг и визитка

Короткие ответы на частые вопросы

Это подойдёт моему бизнесу? Если вам нужен понятный сайт с заявкой или звонком — да; если десятки кабинетов и сложная логика — обсудим отдельный объём.

Что подготовить до старта? Тексты или тезисы, логотип, примеры конкурентов, доступы к домену и хостингу (если уже есть).

Как оценить результат? Скорость на мобилке, ясный CTA, отсутствие «битых» блоков и совпадение страницы с рекламой/поисковым запросом.

Итог по теме «Что я использую вместо тяжёлых UI-библиотек»

Сфокусируйтесь на сценарии пользователя, а не на количестве фич. Остальное — вопрос исполнения и дисциплины в проекте. Готов помочь с оценкой — контакты или Telegram из кнопки ниже.

Быстрый аудит интерфейса

По теме «Что я использую вместо тяжёлых UI-библиотек» пройдитесь по своей главной за 15 минут: отступы между блоками кратны 8 px? Заголовок читается с телефона без зума? Одна главная кнопка на первом экране? Если нет — сначала это, потом декоративные эффекты.

«Дорогой» вид часто даёт не сложный дизайн, а дисциплина: меньше шрифтов, больше воздуха, один акцентный цвет, качественные фото или честный минимализм без стоковых «бизнес-рукопожатий».

• Сравните свой hero с Linear или Stripe — не копируя, а по ритму.
• Проверьте контраст кнопки и ссылок (WCAG AA).
• Уберите блок, который не ведёт к заявке — если сомневаетесь, он лишний.