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

Лабораторная работа №1: Введение в Figma и UX-исследование

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

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

ВАЖНО: Правила игры

Запомните математику курса, чтобы потом не было сюрпризов:

Рейтинг: Максимум 100 баллов за семестр.
Зачет: Строго от 70 баллов.
Точка невозврата: Мы делаем один сквозной проект весь семестр. Лабораторные работы наслаиваются друг на друга. Если вы не защитите итоговую работу (Research + Design + Prototype) в конце семестра — вы не получите зачет, даже если ходили на все пары.

ЧАСТЬ 1. Теоретическая база (Зачем мы это делаем?)

Дизайн, не основанный на данных — это галлюцинация. Прежде чем рисовать красивые кнопки, инженер должен ответить на вопросы: «Что мы строим?», «Для кого?» и «Зачем?».

В этой лабораторной мы формируем фундамент проекта:

Бриф (Brief): Техническое задание и ограничения.
Персона (Persona): Портрет того, кто будет пользоваться вашим сайтом.
Мудборд (Moodboard): Визуальный стиль и "настроение" проекта.

ЧАСТЬ 2. Инструментарий (Figma Quick Start)

Цель: За 20 минут научиться не теряться в интерфейсе.

Шаг 1. Регистрация

Откройте figma.com.
Нажмите Get started. Используйте Google-аккаунт (желательно, или с другого не .ru домена).
На вопросы анкеты отвечайте что угодно (например: Software Development / For teaching).
На предложение купить тариф — ищите маленькую кнопку "Start for free".
Создайте новый файл: синяя кнопка "New design file" справа вверху.

Шаг 2. Интерфейс, Навигация и Примитивы

Перед вами Canvas — бесконечный рабочий стол.

Слева (Layers): Панель слоев (Дерево объектов / DOM).
Справа (Properties): Панель свойств (Инспектор / CSS).
Сверху (Toolbar): Инструменты.

Выучить сразу!

Zoom: Зажмите Ctrl (или Cmd) + колесо мыши.
Pan (Перемещение): Зажмите Пробел. Курсор станет «Рукой» ✋. Тяните мышкой, чтобы двигать холст. Инженерный совет: Никогда не пользуйтесь полосами прокрутки. Только Пробел + Drag.
Дублирование: Зажмите Alt и потяните объект мышкой — он скопируется.

ЧАСТЬ 3. Выполнение Лабораторной (Research)

Задача: Выбрать тему проекта, над которым вы будете работать следующие 4 месяца, и обосновать его необходимость.

Организация рабочего пространства

Где делать: В созданном файле Figma. Создайте большой Фрейм (назовите его Research), внутри которого оформите все пункты.

Шаг 1. Выбор темы

Ознакомьтесь с файлом "Темы проектов по курсу" из ЭИОС. Выберите тему многостраничного сайта (минимум 3-4 уникальных страницы).

E-commerce: Магазин запчастей, редких книг, кастомных клавиатур.
Booking: Аренда коворкинга, запись к врачу, прокат лыж.
Learning: Платформа с курсами, тренажер кода.
Portfolio: Личный сайт архитектора или фотографа.

Ограничение

Запрещено: Лендинги (одностраничники), сайты-визитки. Слишком малый объем для зачета.

Шаг 2. Бриф (Описание задачи)

Выберите инструмент Text (T) и распишите:

Название проекта.
Проблема: Что «болит» у пользователя? (Например: «Студентам трудно найти дешевое жилье рядом с ВУЗом, риелторы берут 100% комиссии»).
Цель бизнеса: Зачем этот сайт владельцу? (Продажа, сбор заявок, имидж).
Функционал MVP (Minimum Viable Product): Список из 3-5 ключевых функций, без которых сайт не имеет смысла (Например: Поиск по карте, Фильтр по цене, Личный кабинет).

Шаг 3. Персона (User Persona)

Опишите одного типичного пользователя. Это поможет избежать ошибки "Я делаю сайт для всех".

Имя и Возраст: (Например: Иван, 21 год).
Род занятий: (Студент 3 курса).
Боли/Потребности: Чего он боится и чего хочет достичь, заходя на ваш сайт? (Боится мошенников, хочет сэкономить, ценит скорость).

Шаг 4. Анализ конкурентов (Benchmarking)

Найдите 2-3 сайта похожей тематики (прямые конкуренты).
Сделайте скриншоты их главных страниц (PrintScreen или Win+Shift+S) и вставьте в Figma (Ctrl+V).
Подпишите под каждым:
- Плюс (+): Что сделано круто? (Удобные фильтры, приятные цвета).
- Минус (-): Что неудобно/бесит? (Мелкий текст, навязчивая реклама).

Шаг 5. Мудборд (Визуальные референсы)

Найдите 5-10 картинок, которые передают стиль вашего будущего сайта (шрифты, цветовые гаммы, композиция).

Где искать: Dribbble.com, Behance.net, Pinterest.com.
Запрос: "E-commerce UI", "Dark mode app design", "Clean web interface".
Соберите из них аккуратный коллаж рядом с анализом конкурентов.

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

Позовите преподавателя и покажите файл на экране.

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

Техническая часть: Создан файл, элементы лежат внутри фрейма Research, вы умеете зумить и двигать холст.
Тема и Бриф: Четко описана проблема, цель бизнеса и функции MVP.
Персона: Описан портрет целевого пользователя.
Конкуренты: 2+ скриншота с комментариями (Плюсы и Минусы).
Мудборд: Минимум 5 качественных референсов по стилю.
Гигиена макета: Тексты читаемы, картинки выровнены, ничего не наезжает друг на друга.

5. Домашнее задание (Self-Study)

На следующей паре мы начинаем проектировать сетку и структуру. Чтобы не отставать:

Посмотреть: Любое видео на YouTube по запросу "Figma for beginners 2025" (15-20 минут).
Попробовать: Понажимать кнопки на панели справа (Fill, Stroke, Effects, Corner Radius), меняя свойства простых прямоугольников.