Практическая работа №4

Разработка дизайн-концепции и визуального направления проекта

Цель работы:

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

Основные теоретические положения

Дизайн-концепция

Дизайн-концепция — это общее визуальное направление проекта. Она определяет, каким будет интерфейс: строгим, современным, ярким, спокойным, минималистичным или деловым.

Референсы

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

Цветовое решение

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

Производственная ситуация

Вы уже определили структуру сайта и пользовательские маршруты. Теперь нужно подготовить визуальную основу проекта: референсы, цвета, шрифты и первые эскизы.

Основные требования к практической работе

В рамках практической работы необходимо выполнить проектный этап, подготовить указанные материалы и зафиксировать результат в Git-репозитории.

Работа должна соответствовать выбранной предметной области и использовать материалы, подготовленные на предыдущих этапах проекта.

Задания для выполнения

Подберите не менее 3 референсов.
Проанализируйте, что можно взять из каждого референса.
Опишите визуальное направление проекта.
Выберите цветовую палитру.
Подберите шрифтовую систему.
Подготовьте промежуточные эскизы основных экранов.
Создайте Figma-файл проекта.
Создайте файл docs/figma-link.md и добавьте ссылку на Figma.
Выполните коммит add design concept and figma link.

Требования к результату

К завершению практической работы должны быть подготовлены:

не менее 3 референсов
описание визуального направления
цветовая палитра
типографика
промежуточные эскизы
Figma-файл
docs/figma-link.md
коммит в Git

Контрольные вопросы

Какова основная цель данной практической работы?
Какие результаты должны быть получены после выполнения этапа?
Как данный этап связан с предыдущими этапами проекта?
Какие решения были приняты в рамках работы и почему?
Какие файлы были добавлены или изменены в Git-репозитории?
Как результаты работы будут использоваться в следующих практических работах?