Лабораторная работа №3: Каркасное проектирование (Wireframing)

Курс: Веб-дизайн и проектирование интерфейсов
Модуль: UI Design Foundation (Основы UI)
Трудоемкость: 8 академических часов (4 недели) Оценка: Максимум 10 баллов
Тип задания: Индивидуальный сквозной проект (Этап 3)

---

1. Теоретическая база: Уровни детализации

Вайрфреймы делятся по степени проработки (Fidelity).

• Low-fidelity (Низкая детализация): Набросок от руки на бумаге или салфетке. Служит для быстрой фиксации идей и проверки гипотез на ранних этапах.
• High-fidelity (Высокая детализация): Цифровой ч/б макет, выполненный в Figma.

В рамках этой работы мы создаем именно High-fidelity Wireframes. В них:

1. Соблюдены реальные размеры и пропорции элементов.
2. Используются реальные тексты (Lorem Ipsum запрещен).
3. Иконки и изображения схематичны (квадрат с крестом), но занимают свое место.

---

2. Инженерные правила: Сетки и Система 8px

Дизайн интерфейсов — это геометрия и математика. Мы не расставляем элементы «на глаз», мы используем систему.

Индустриальный стандарт. Все размеры (высота кнопок, иконок) и все отступы (врешние и внутренние) должны быть кратны 8.

• Допустимые значения: 8, 16, 24, 32, 40, 48, 64, 80…
• Исключение: Для мелких отступов допускается шаг 4px (например, отступ 4px или 12px).
• Почему 8? Это число отлично делится на 2 и 4 без дробных остатков, что критично при адаптации дизайна для экранов с разной плотностью пикселей (стандартные x1, Retina x2, x3).

Для выравнивания контента по горизонтали используется 12-колоночная сетка. Настройки в Figma:

1. Выберите Frame (например, Desktop 1440px).
2. Panel Layout Grid -> + -> Тип: Columns.
3. Count: 12.
4. Type: Center (ширина колонок фиксирована, например 70px, Gutter 24px) OR Stretch (Type: Stretch, Margin: 100px, Gutter: 24px).

Для мобильных устройств стандарт — 4 колонки. Настройки в Figma:

1. Выберите Frame (например, iPhone 14/15 - 393px).
2. Panel Layout Grid -> + -> Тип: Columns.
3. Count: 4.
4. Type: Stretch.
5. Margin: 16px or 20px (боковые поля).
6. Gutter: 16px (межколонник).

---

3. Инструментарий: Auto Layout и Компоненты

Это сердце Figma, без знания этих инструментов макет не будет считаться инженерным.

Auto Layout (Shift+A)

Auto Layout — это система автоматической компоновки элементов, концептуально полностью идентичная CSS Flexbox. Родительский контейнер сам управляет положением детей.

• Direction (Направление): Вертикальное (аналог flex-direction: column) или Горизонтальное (row).
• Wrap (Перенос): Элементы переносятся на новую строку, если не помещаются (аналог flex-wrap: wrap).
• Gap (Отступ): Расстояние между соседними элементами внутри (аналог CSS gap).
• Paddings (Поля): Внутренние отступы самого контейнера от его границ до детей.
• Alignment (Выравнивание): Определяет положение элементов внутри свободного пространства (аналог justify-content и align-items).
• Resizing (Логика изменения размера детей): Fixed, Hug Contents (сжаться до размера контента, аналог max-content), Fill Container (занять всё свободное пространство родителя, аналог width: 100% or flex-grow: 1).

Компоненты (ООП в дизайне)

Если элемент повторяется на сайте (Кнопка, Хедер, Футер, Карточка товара), он обязан стать Компонентом.

1. Создайте элемент (например, карточку товара).
2. Выделите Frame и нажмите иконку Create Component (верхняя панель или Ctrl+Alt+K).
3. Теперь это Master Component. Дублируя его (зажав Alt), вы создаете Instances (Экземпляры).
4. При изменении Master Component (например, изменили Gap), все Instances изменятся автоматически.

---

4. Задание и Алгоритм выполнения

Задача: Основываясь на User Flow и Sitemap, создать ч/б вайрфреймы высокой детализации для 3-4 ключевых страниц вашего проекта. Отрисовать их как в Desktop, так и в Mobile версиях.

Ключевые страницы (примеры):

• Главная
• Каталог (список товаров/услуг)
• Карточка товара/детальная страница
• Профиль пользователя / Корзина / Оформление заказа

Алгоритм:

1. Настройка сред: Создайте новые страницы в файле Figma: Wireframes (Desktop) и Wireframes (Mobile). Настройте Layout Grids.
2. Сборка Атомов (Атомарный дизайн): Соберите Master-компоненты базовых элементов: Кнопки (в чб), Поля ввода, Иконки (черно-белые), Хедер, Футер. Всё в Auto Layout!
3. Сборка Крупных блоков: Соберите Master-компоненты для карточек товаров, блоков меню и т.д.
4. Компоновка Desktop страниц: Расставьте экземпляры компонентов по сетке. Проверьте все отступы по системе 8px. Напишите реальные тексты (Lorem Ipsum — бан!).
5. Адаптация под Mobile: Спроектируйте те же страницы для мобильного фрейма. Помните про Закон Якоба и смену паттернов (Гамбургер-меню, Tab Bar, Touch Targets > 44px). Переиспользуйте те же Master-компоненты, если это возможно, настраивая Resizing.

---

5. Definition of Done (Требования к сдаче)

---

6. Домашнее задание (Подготовка к Лаб №4 и РГР)

На следующей паре мы начинаем “раскрашивать” макеты и подбирать визуал. К этому времени у вас должны быть готовы:

1. Чистовые тексты: Все заголовки H1-H3, описания товаров, тексты кнопок, пункты меню.
2. Библиотека иконок: Выберите один пак (Phosphor, Material, Feather) и скачайте нужные иконки в SVG.
3. Подборка изображений (Мудборд из Лаб 1): Подготовьте фотоконтент, который вы будете вставлять в чистовые макеты.

---

Проверь себя!

В чем принципиальное отличие Auto Layout от Group в Figma?

Auto Layout позволяет использовать цвета, а Group только чбAuto Layout динамически управляет отступами и размерами детей при изменении контента, а Group — нетAuto Layout работает только на десктопе, Group — вездеВ Figma больше нет инструмента Group, он устарел

Проверить ответ

Почему в веб-дизайне принято использовать систему 8px (8pt grid)?

Потому что это счастливое число для основателей FigmaПотому что это минимальный размер Touch Target для мобильных устройствЭто единственная сетка, которую поддерживает Auto LayoutЧисло 8 отлично делится на 2 и 4 без дробных остатков, что критично для экранов с разной плотностью пикселей (Retina)

Проверить ответ