Как сделать приложение красивым, если ты не дизайнер: гайд по дизайн-системам

Ты знаешь, что должно делать приложение. Какие данные показывать, какие действия позволять. Но не знаешь, как оно должно выглядеть. Знакомая ситуация?

Можно начать переставлять блоки в Figma или просить Клода и Codex сгенерировать варианты. Через несколько часов получишь три версии экрана, но так и не поймёшь, какая из них правильная. Я проходил через это и как разработчик, и как редизайнер проектов без дизайнера в команде.

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

Что даёт готовая дизайн-система

Когда мы делаем бэкенд, мы редко пишем собственную базу данных. Выбираем PostgreSQL или MySQL — проверенные инструменты. То же самое стоит делать с интерфейсом. Дизайн-система — это не просто набор компонентов. Это правила типографики, цветов, отступов, иерархии, паттерны адаптивности, готовые шаблоны страниц и документация.

Она избавляет от сотни мелких решений. Добавляешь форму — не думаешь, как выглядят лейблы, ошибки, фокус. Добавляешь диалог — не придумываешь отступы и поведение клавиатуры. Всё уже решено и согласовано.

Но дизайн-система не даёт готовый продукт. Она не скажет, какая информация важна или как устроен процесс. Зато ты начинаешь с целостного фундамента, а не с пустого листа.

Я видел это на реальном проекте: пока работали без дизайн-системы, разработка замедлялась, консистентность страдала. Когда взяли зрелую систему, даже с дизайнером, который был доступен пару часов в неделю, мы за две недели переделали весь интерфейс и сильно подняли его качество.

А если получится как у всех?

Частая отговорка — приложение станет безликим, если все используют одни и те же компоненты. Но похожесть часто полезна. WhatsApp, Signal и Telegram используют одинаковую структуру: список чатов, переписка, поле ввода внизу. Это делает каждое приложение понятным с первого взгляда.

Идентичность живёт в другом. Бренд можно выразить через логотип, акцентный цвет, типографику, иллюстрации и тон текстов. Многие дизайн-системы позволяют настроить акцентный цвет и шрифты под себя. Если трогаешь фундаментальные вещи, проверяй, чтобы контраст оставался достаточным, а шрифт читался в плотном интерфейсе. Не нужно переделывать всё до неузнаваемости — достаточно добавить брендовых деталей.

Как выбрать дизайн-систему

Сначала составь список экранов и рабочих процессов. Для дашборда с таблицами и фильтрами нужен один фундамент, для простого контентного приложения — другой.

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

Проверяй, есть ли в системе компоненты для главных сценариев, шаблоны приложений, доступные состояния, гибкость под бренд, документация и поддержка твоего стека. Понять, что она активно поддерживается, — тоже неплохо.

Из конкретных систем я работал с HeroUI и Untitled UI. У обеих есть бесплатные компоненты, но полные коллекции шаблонов и приложений — только в платных версиях. Это оправданная покупка, если экономит несколько дней работы. Если платить не хочется, есть Astryx — полностью открытая система под MIT с компонентами, темами и шаблонами. Но она пока в бете, так что для продакшена стоит подходить осторожно.

Практический пример: Canopy

Разберём на конкретном экране. Продукт — Canopy, приложение для планирования работ по восстановлению среды обитания. Командам нужна канбан-доска. В Astryx уже есть готовый шаблон канбана с карточками и перетаскиванием. Мы берём его за основу.

Бренд Canopy — спокойный, натуральный. В Astryx нашлась тема Matcha с земляной палитрой — почти то, что нужно. Добавляем логотип. Заменяем рукописный шрифт с заголовков на Figtree — он лучше читается в плотном интерфейсе. Переписываем тексты: вместо общих «Запланировано» и «Добавить задачу» появляются «Ожидает проверки» и «Добавить полевую задачу». Переделываем пустое состояние, добавляем иконку. Каждое изменение маленькое, но вместе они уводят экран от стандартного шаблона и приближают к фирменному стилю.

Как это помогает работать с ИИ и дизайнерами

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

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

Дизайн-система не заменяет вкус или квалификацию. Она даёт разработчикам, ИИ и дизайнерам общую отправную точку. А вот это уже экономит недели работы.