[{"data":1,"prerenderedAt":48},["ShallowReactive",2],{"$fysRQPyV6A9tWTQ49DsH3J5c6-vfuuuzImKwIDTYBz14":3},{"article":4,"relatedArticles":26,"tagCounts":46},{"slug":5,"content":6,"headings":7,"notes":18,"groupedNotes":19,"title":20,"date":21,"description":22,"tags":23,"author":25},"wathan-adam-schoger-steve-refactoring-ui","\u003Ch4 id=\"1-общее-описание\">1. Общее описание\u003C\u002Fh4>\n\u003Cp>\u003Cstrong>Refactoring UI\u003C\u002Fstrong> — это \u003Cstrong>практический самоучитель\u003C\u002Fstrong> по визуальному дизайну, написанный специально для разработчиков и людей, считающих, что у них нет «врожденного художественного таланта». Книга не является справочником по инструментам (вроде Figma или CSS), а представляет собой \u003Cstrong>свод методологических правил и системных подходов\u003C\u002Fstrong>. Читатель учится принимать дизайнерские решения, основываясь на логике и иерархии, что позволяет создавать профессиональные интерфейсы без участия профессионального дизайнера.\u003C\u002Fp>\n\u003Ch4 id=\"2-структура-и-карта-охвата\">2. Структура и карта охвата\u003C\u002Fh4>\n\u003Cp>Книга организована по принципу \u003Cstrong>«от общего процесса к частным деталям»\u003C\u002Fstrong>, что позволяет сначала выстроить правильный рабочий цикл, а затем постепенно «полировать» интерфейс.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Подробно разбираются:\u003C\u002Fstrong> визуальная иерархия, системы отступов и размеров, типографика, работа с цветом в пространстве HSL и создание глубины с помощью теней.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Упоминаются:\u003C\u002Fstrong> выбор шрифтов, работа с пользовательским контентом и иконками.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Остается за скобками:\u003C\u002Fstrong> UX-проектирование (исследования пользователей), глубокая теория цвета, создание сложных иллюстраций и техническая верстка.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4 id=\"3-описание-разделов\">3. Описание разделов\u003C\u002Fh4>\n\u003Cp>\u003Cstrong>Процесс и основы (Starting from Scratch)\u003C\u002Fstrong> В этой части авторы призывают \u003Cstrong>начинать с функционала, а не с макета\u003C\u002Fstrong> оболочки (сайдбаров или навигации). Основная идея — проектировать в низком качестве (черно-белые наброски, толстые маркеры), чтобы не отвлекаться на детали вроде шрифтов и теней на ранних этапах. Рекомендуется работать короткими циклами: спроектировать одну фичу и сразу реализовать её в коде, прежде чем переходить к следующей. Также вводится концепция «выбора личности» дизайна через шрифты и цвета.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Визуальная иерархия (Hierarchy is Everything)\u003C\u002Fstrong> Центральный раздел, объясняющий, что «хороший дизайн» — это прежде всего \u003Cstrong>управление вниманием пользователя\u003C\u002Fstrong>. Авторы доказывают, что размер — это не единственный способ выделить главное: шрифт можно делать жирнее или менять его цвет на более контрастный. Ключевой прием — \u003Cstrong>акцентирование через деакцентирование\u003C\u002Fstrong> второстепенных элементов (например, сделать текст серым, чтобы основной заголовок «заиграл»). Также разбирается отказ от лишних ярлыков (Labels) там, где формат данных (email, телефон) понятен из контекста.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Макет, сетки и отступы (Layout and Spacing)\u003C\u002Fstrong> Авторы советуют \u003Cstrong>начинать с избыточного количества свободного пространства\u003C\u002Fstrong> и удалять его только при необходимости, а не наоборот. Главный инструмент здесь — \u003Cstrong>ограничение выбора\u003C\u002Fstrong>: вместо произвольных пикселей нужно заранее создать систему размеров (например, кратную 16px или 8px). Критикуется слепое следование сеткам (grids); утверждается, что фиксированная ширина для таких элементов, как сайдбары, часто лучше процентной.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Типографика (Designing Text)\u003C\u002Fstrong> Здесь осваивается создание \u003Cstrong>шрифтовой шкалы\u003C\u002Fstrong>, чтобы избежать использования слишком большого количества размеров. Даются советы по выбору качественных шрифтов (например, наличие более пяти начертаний — признак хорошего семейства). Разбираются технические нюансы: длина строки должна быть в пределах 45–75 символов для комфортного чтения, а межстрочный интервал должен увеличиваться пропорционально длине строки.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Цвет (Working with Color)\u003C\u002Fstrong> Предлагается \u003Cstrong>отказаться от HEX в пользу HSL\u003C\u002Fstrong>, так как это интуитивно понятнее для человеческого глаза (тон, насыщенность, яркость). Читатель учится составлять палитру не из 5 цветов, а из 10 оттенков для каждого цвета (серые, основные, акцентные). Важный инсайт раздела: при изменении яркости нужно менять и насыщенность, а иногда и проворачивать цветовой тон, чтобы цвета не выглядели «грязными».\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Глубина и изображения (Creating Depth & Images)\u003C\u002Fstrong> Раздел учит \u003Cstrong>имитировать источник света\u003C\u002Fstrong>, находящийся сверху, для создания эффекта приподнятых или вдавленных элементов. Тень рассматривается как инструмент указания на высоту элемента над страницей (z-axis). При работе с фото даются приемы наложения текста: использование темных оверлеев или размытия для сохранения контрастности. Также вводится запрет на масштабирование мелких иконок до больших размеров из-за потери детализации.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Финальные штрихи (Finishing Touches)\u003C\u002Fstrong> Описываются приемы «полировки»: замена стандартных буллитов в списках на иконки, добавление ярких цветных границ к карточкам и \u003Cstrong>проработка «пустых состояний»\u003C\u002Fstrong> (empty states) приложения, которые часто игнорируются. В завершение дается совет \u003Cstrong>реконструировать чужие интерфейсы\u003C\u002Fstrong> без заглядывания в код, чтобы развить дизайнерское зрение.\u003C\u002Fp>",[8,12,15],{"id":9,"text":10,"depth":11},"1-общее-описание","1. Общее описание",3,{"id":13,"text":14,"depth":11},"2-структура-и-карта-охвата","2. Структура и карта охвата",{"id":16,"text":17,"depth":11},"3-описание-разделов","3. Описание разделов",[],{},"Refactoring UI","2026-07-16","Практический самоучитель по визуальному дизайну интерфейсов для разработчиков без профильного художественного образования.",[24],"Программирование","Wathan, Adam; Schoger, Steve",[27,34,40],{"slug":28,"title":29,"description":30,"date":31,"author":32,"tags":33},"brooks-frederick-p-jr-the-mythical-man-month-essays-on","The Mythical Man-Month: Essays on Software Engineering (1995)","Классика управления разработкой — мифический человеко-месяц, хирургические бригады, концептуальная целостность и отсутствие серебряной пули.","2026-07-22","Brooks, Frederick P., Jr.",[24],{"slug":35,"title":36,"description":37,"date":31,"author":38,"tags":39},"mdn-contributors-css-performance-optimization-2025","CSS performance optimization (2025)","Оптимизация CSS для быстрого рендера — блокировка отрисовки, reflow, анимации на GPU, шрифты и CSS Containment.","MDN Contributors",[24],{"slug":41,"title":42,"description":43,"date":31,"author":44,"tags":45},"simpson-kyle-you-don-t-know-js-async-performance-2015","You Don't Know JS: Async & Performance (2015)","Асинхронность и производительность в JavaScript — событийный цикл, промисы, генераторы, Web Workers и практики бенчмаркинга.","Simpson, Kyle",[24],{"Программирование":47},9,1785324880330]