web-dev•Лабораторная работа•Practice

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

👀 Загрузка...

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

Контекст работы

На этом этапе мы переходим от чистой логики (Sitemap/User Flow) к визуальному воплощению, но пока без использования стилей (цветов, теней, реальных фото). Мы строим «скелет» интерфейса, основываясь на инженерных правилах верстки.

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

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

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

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

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

Строгое ограничение: ЧБ Палитра

Использование цветов (кроме оттенков серого), градиентов, теней, скруглений (если они не несут функциональный смысл) и реальных фотографий категорически запрещено. Нарушение этого правила ведет к снижению оценки на 50%. Макет должен выглядеть как чертеж.

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

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

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

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

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).

Никаких групп!

При сборке компонентов (кнопок, карточек, списков) категорически запрещено использовать инструмент Group (Ctrl+G). Используйте только Frame с Auto Layout (Shift+A). Группы не умеют управлять отступами и размерами детей при изменении контента.

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

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

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

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

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

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

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

Алгоритм:

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

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

Чек-лист для получения 10 баллов

Объем: Представлены ч/б вайрфреймы для 3-4 уникальных страниц.
Адаптивность: Каждая страница имеет Desktop версию (12 колонок) и Mobile версию (4 колонки).
Техническая чистота: Элементы выровнены strictly по сетке. Все отступы и размеры кратны 8.
Инструментарий: 90% макета собрано на Auto Layout. Использование Group запрещено.
Компонентный подход: Хедер, Футер, Кнопки, Карточки являются Master-компонентами. В макетах используются Instances.
Контент: Везде используется реальный текст, заглушки Lorem Ipsum отсутствуют.
Доступность (A11y): Проверить Mobile: Touch Targets для кнопок/ссылок >= 44x44px.
Стиль: Выдержан строгий ч/б стиль, цвета и тени отсутствуют.

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

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

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