1. Общее описание
Refactoring UI — это практический самоучитель по визуальному дизайну, написанный специально для разработчиков и людей, считающих, что у них нет «врожденного художественного таланта». Книга не является справочником по инструментам (вроде Figma или CSS), а представляет собой свод методологических правил и системных подходов. Читатель учится принимать дизайнерские решения, основываясь на логике и иерархии, что позволяет создавать профессиональные интерфейсы без участия профессионального дизайнера.
2. Структура и карта охвата
Книга организована по принципу «от общего процесса к частным деталям», что позволяет сначала выстроить правильный рабочий цикл, а затем постепенно «полировать» интерфейс.
- Подробно разбираются: визуальная иерархия, системы отступов и размеров, типографика, работа с цветом в пространстве HSL и создание глубины с помощью теней.
- Упоминаются: выбор шрифтов, работа с пользовательским контентом и иконками.
- Остается за скобками: UX-проектирование (исследования пользователей), глубокая теория цвета, создание сложных иллюстраций и техническая верстка.
3. Описание разделов
Процесс и основы (Starting from Scratch) В этой части авторы призывают начинать с функционала, а не с макета оболочки (сайдбаров или навигации). Основная идея — проектировать в низком качестве (черно-белые наброски, толстые маркеры), чтобы не отвлекаться на детали вроде шрифтов и теней на ранних этапах. Рекомендуется работать короткими циклами: спроектировать одну фичу и сразу реализовать её в коде, прежде чем переходить к следующей. Также вводится концепция «выбора личности» дизайна через шрифты и цвета.
Визуальная иерархия (Hierarchy is Everything) Центральный раздел, объясняющий, что «хороший дизайн» — это прежде всего управление вниманием пользователя. Авторы доказывают, что размер — это не единственный способ выделить главное: шрифт можно делать жирнее или менять его цвет на более контрастный. Ключевой прием — акцентирование через деакцентирование второстепенных элементов (например, сделать текст серым, чтобы основной заголовок «заиграл»). Также разбирается отказ от лишних ярлыков (Labels) там, где формат данных (email, телефон) понятен из контекста.
Макет, сетки и отступы (Layout and Spacing) Авторы советуют начинать с избыточного количества свободного пространства и удалять его только при необходимости, а не наоборот. Главный инструмент здесь — ограничение выбора: вместо произвольных пикселей нужно заранее создать систему размеров (например, кратную 16px или 8px). Критикуется слепое следование сеткам (grids); утверждается, что фиксированная ширина для таких элементов, как сайдбары, часто лучше процентной.
Типографика (Designing Text) Здесь осваивается создание шрифтовой шкалы, чтобы избежать использования слишком большого количества размеров. Даются советы по выбору качественных шрифтов (например, наличие более пяти начертаний — признак хорошего семейства). Разбираются технические нюансы: длина строки должна быть в пределах 45–75 символов для комфортного чтения, а межстрочный интервал должен увеличиваться пропорционально длине строки.
Цвет (Working with Color) Предлагается отказаться от HEX в пользу HSL, так как это интуитивно понятнее для человеческого глаза (тон, насыщенность, яркость). Читатель учится составлять палитру не из 5 цветов, а из 10 оттенков для каждого цвета (серые, основные, акцентные). Важный инсайт раздела: при изменении яркости нужно менять и насыщенность, а иногда и проворачивать цветовой тон, чтобы цвета не выглядели «грязными».
Глубина и изображения (Creating Depth & Images) Раздел учит имитировать источник света, находящийся сверху, для создания эффекта приподнятых или вдавленных элементов. Тень рассматривается как инструмент указания на высоту элемента над страницей (z-axis). При работе с фото даются приемы наложения текста: использование темных оверлеев или размытия для сохранения контрастности. Также вводится запрет на масштабирование мелких иконок до больших размеров из-за потери детализации.
Финальные штрихи (Finishing Touches) Описываются приемы «полировки»: замена стандартных буллитов в списках на иконки, добавление ярких цветных границ к карточкам и проработка «пустых состояний» (empty states) приложения, которые часто игнорируются. В завершение дается совет реконструировать чужие интерфейсы без заглядывания в код, чтобы развить дизайнерское зрение.