# Методика разработки дизайна

## 1. Введение

Процесс разработки дизайна для заказчика требует от специалиста не только владения инструментами и принципами визуальной коммуникации, но и умения выстраивать грамотное взаимодействие с клиентом.  
Главная задача дизайнера заключается в создании эстетически привлекательного и функционального продукта, который решает конкретные задачи бизнеса и пользователей.

Для достижения этой цели дизайнер должен организовать рабочий процесс так, чтобы:

- все ключевые решения фиксировались и согласовывались с заказчиком на ранних этапах;
- коммуникация происходила напрямую, без посредников;
- визуальные и функциональные решения имели обоснование с точки зрения пользовательского опыта и профессиональных стандартов.

---

## 2. Этап визуальной концепции (мудборды)

### 2.1. Назначение и значение этапа

Мудборд (moodboard) — это инструмент визуализации стилистического направления проекта. Он представляет собой подборку изображений, шрифтов, цветовых сочетаний и композиционных решений, отражающих предполагаемое настроение и атмосферу будущего продукта.

Создание мудборда необходимо для:

- согласования визуального направления с заказчиком до начала детальной проработки макетов;
- минимизации количества правок на последующих этапах;
- формирования общего понимания эстетики проекта.

Рекомендуемые материалы:

- [Что такое мудборд — Яндекс.Практикум<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://practicum.yandex.ru/blog/chto-takoe-moodboard/)
- [Мудборд — глоссарий Contented<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://media.contented.ru/glossary/mudbord/)

### 2.2. Практические рекомендации

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

---

## 3. Типографика

Типографика определяет структуру и читаемость интерфейса. Правильный выбор шрифтов и их иерархия обеспечивают удобство восприятия информации пользователями.

Рекомендуемые материалы:

- [10 правил типографики в интерфейсах — Contented<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://media.contented.ru/opyt/instrukcii/10-pravil-tipografiki-v-interfejsah/)
- [Типографика в веб-дизайне в цифрах — VC.ru<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://vc.ru/design/385060-tipografika-v-veb-dizaine-v-cifrah)

### Рекомендации:

- Используйте не более двух-трёх шрифтовых пар в одном проекте.
- Формируйте чёткую иерархию заголовков, подзаголовков и основного текста.
- Проверяйте читаемость на различных разрешениях экранов.

---

## 4. Сетки и структурирование контента

Сетка является основой композиционной организации макета. Она обеспечивает визуальный порядок и согласованность элементов.

Рекомендуемые материалы:

- [Сетки в веб-дизайне — VC.ru<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://vc.ru/design/1060731-setki-v-veb-dizaine)
- [Сетки в веб-дизайне — Skedraw<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://blog.skedraw.ru/articles/setki-v-veb-dizajne)
- [Пример сетки — Figma Community<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://www.figma.com/community/file/960115608622696069)

### Рекомендации:

- Используйте модульные и колоночные сетки.
- Соблюдайте пропорциональность и единообразие отступов.
- Структура должна быть адаптивной для различных устройств.

---

## 5. Цветовое решение

Цветовая палитра формирует эмоциональный отклик и визуальный баланс интерфейса. Цвет должен подбираться осознанно, с учётом целевой аудитории и контекста бренда.

Рекомендуемые материалы:

- [Цветовая палитра для сайта — Яндекс.Практикум<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://practicum.yandex.ru/blog/cvetovaya-palitra-dlya-sayta-kak-podobrat-cvet/)
- [Цвет в веб-дизайне и его влияние — VC.ru<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://vc.ru/id1328489/538417-cvet-v-veb-dizaine-i-ego-vliyanie-na-celevuyu-auditoriyu)

### Рекомендации:

- Используйте ограниченную палитру: 1–2 основных цвета и 1 акцентный.
- Проверяйте контрастность и читаемость текста.
- При наличии брендбука следуйте корпоративным цветовым стандартам.

---

## 6. Композиция

Композиция определяет визуальный ритм, баланс и иерархию элементов интерфейса.

Рекомендуемые материалы:

- [Основы композиции в дизайне — Contented<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://media.contented.ru/znaniya/instrumenty/osnovy-kompoziczii-v-dizayne/)
- [Основные правила композиции — Яндекс.Практикум<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://practicum.yandex.ru/blog/osnovnye-pravila-kompozitsii/)

### Рекомендации:

- Используйте принципы визуального равновесия и акцентирования.
- Избегайте перегруженности экрана второстепенными элементами.
- Соблюдайте целостность восприятия интерфейса.

---

## 7. UI Kit (дизайн-система проекта)

UI Kit — это систематизированный набор компонентов интерфейса (кнопки, поля ввода, карточки, иконки, стили текста и пр.), который обеспечивает единообразие визуальных решений.

Рекомендуемые материалы:

- [UI Kit — Яндекс.Практикум<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://practicum.yandex.ru/blog/ui-kit-chto-eto-i-zachem-nuzhen/)
- [Глоссарий Contented: UI Kit<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://media.contented.ru/glossary/ui-kit/)
- [UI Kits — Figma Community<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://www.figma.com/community/ui-kits)

### Рекомендации:

- Создавайте компоненты со всеми необходимыми состояниями.
- Настраивайте связь UI Kit с автолейаутами.
- Используйте UI Kit как единый источник истины по стилю проекта.

---

## 8. Автолейауты

Автолейаут (Auto Layout) — инструмент Figma, позволяющий создавать гибкие и адаптивные интерфейсы.

Рекомендуемые материалы:

- [Auto Layout в Figma — Contented<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://media.contented.ru/znaniya/instrumenty/auto-layout-figma/)
- [Пример файла — Figma Community<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://www.figma.com/community/file/1106166785003688589)

### Рекомендации:

- Используйте автоотступы и выравнивание для стабильности макета.
- Комбинируйте автолейауты с компонентами и вариантами.
- Применяйте для подготовки кликабельных прототипов.

---

## 9. Кликабельные прототипы

Кликабельный прототип имитирует поведение готового продукта и позволяет наглядно продемонстрировать структуру и логику интерфейса заказчику.

Рекомендуемый ресурс:

- [Бесплатный курс по Figma — Tilda School<svg class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]" data-rtl-flip="" fill="currentColor" height="20" viewbox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"></svg>](https://tilda.school/figma-free-course-0)

### Рекомендации:

- Обязательно предоставляйте заказчику кликабельный прототип перед финальным утверждением.
- Прототип помогает выявить UX-проблемы на раннем этапе.
- Презентацию макета проводите лично, сопровождая её профессиональными комментариями.

---

## 10. Коммуникация с заказчиком

### 10.1. Прямое взаимодействие

Дизайнер должен **всегда взаимодействовать с заказчиком напрямую**, а не через посредников (например, менеджеров без дизайнерской компетенции).  
Прямой контакт позволяет:

- корректно понимать требования и контекст задач;
- оперативно согласовывать решения;
- минимизировать искажения при передаче информации.

Отсутствие прямой коммуникации часто приводит к некорректным правкам и неверному пониманию целей проекта.

---

### 10.2. Работа с брендбуком

Если у заказчика имеется **брендбук**, дизайнер обязан строго следовать указанным в нём правилам:

- использовать утверждённые шрифты, цвета и логотипы;
- соблюдать композиционные и визуальные принципы бренда.

Если брендбук отсутствует, **недопустимо ориентироваться** на формулировки вроде «сделайте, как у нас на сайте».  
Существующий сайт может содержать устаревшие или некорректные решения, поэтому дизайнер должен опираться на профессиональные стандарты, принципы эргономики и визуальной гармонии.

---

### 10.3. Согласование и правки

- Все ключевые визуальные и функциональные решения фиксируются и утверждаются на этапе дизайна.
- После утверждения дизайн считается согласованным. Внесение изменений осуществляется **только при дополнительной оплате** или по технической необходимости.
- Любые корректировки должны иметь обоснование, связанное с задачами продукта, а не субъективными предпочтениями заказчика.

---

## Заключение

Методика разработки дизайна для заказчиков основана на профессиональной экспертизе, чёткой коммуникации и документировании решений.  
Дизайнер обязан выступать не исполнителем пожеланий, а экспертом, формирующим визуальную стратегию проекта.  
Только системный подход, прямой диалог с заказчиком и следование правилам визуальной организации позволяют создать эффективный и качественный продукт.