Теоретическая часть
Прототипирование — это процесс создания предварительной версии интерфейса для тестирования идей и концепций перед началом разработки. Основные понятия:
- Макет (Mockup) — статическое изображение интерфейса, которое показывает, как будет выглядеть конечный продукт
- Прототип (Prototype) — интерактивная версия макета, которая позволяет тестировать навигацию и взаимодействие
- UI/UX дизайн — процесс проектирования пользовательского интерфейса и опыта взаимодействия с приложением
Инструменты для прототипирования:
- Figma — популярный онлайн-инструмент для дизайна и прототипирования интерфейсов
- Penpot — открытый инструмент для дизайна и прототипирования (альтернатива Figma)
- Adobe XD — инструмент от Adobe для проектирования пользовательских интерфейсов
На демонстрационном экзамене вам потребуется создать макеты страниц веб-приложения, что является первым этапом разработки.
Пошаговая инструкция
Выберите инструмент для прототипирования
Вы можете использовать:
- Figma (бесплатная версия для студентов)
- Penpot (открытый инструмент, можно установить локально)
- Другой инструмент по вашему выбору
Для РедОС рекомендуется использовать Penpot, так как это открытый инструмент, который можно установить через пакетный менеджер.
Установите Penpot (если выбрали этот инструмент)
Откройте терминал и выполните команды:
# Добавьте репозиторий Penpot
sudo apt-add-repository ppa:penpot/penpot
sudo apt update
# Установите Penpot
sudo apt install penpot-desktop
Если вы используете Figma, просто зайдите на сайт и создайте аккаунт.
Создайте новый файл
После запуска выбранного инструмента создайте новый файл для проекта "Языковой портал".
Назовите файл Языковой_портал_макет.fig (для Figma) или Языковой_портал_макет.penpot (для Penpot).
Создайте структуру главной страницы
Добавьте на холст следующие элементы:
- Шапка сайта:
- Логотип (может быть текстовым)
- Навигационное меню (Главная, Курсы, Запись)
- Главный баннер:
- Девиз: "Изучайте языки с носителями!"
- Кнопка "Записаться на бесплатный урок"
- Преимущества (3 колонки):
- Квалифицированные преподаватели
- Удобный график
- Гибкие скидки
- Слайдер отзывов:
- 3 отзыва клиентов
- Стрелки для переключения
- Подвал:
- Контактная информация (адрес, телефон, email)
- Ссылки на социальные сети
Пример макета главной страницы сайта "Языковой портал"
Экспортируйте макет
После завершения работы с макетом экспортируйте его в формате PNG:
- В Figma: Выберите "Design" в правой панели → "Export" → "PNG" → "Export"
- В Penpot: File → Export → Export as PNG
Сохраните файл с именем glavnaia.png в папку design/export/ вашего проекта.
Если у вас нет папки design в проекте, создайте ее с помощью терминала:
mkdir -p design/export
Добавьте макет в документацию проекта
Откройте файл README.md в корне проекта и добавьте раздел с макетом:
# Дизайн
## Макеты
- [Главная страница](design/export/glavnaia.png)
Связь с демонстрационным экзаменом
Эта лабораторная работа связана с профессиональной компетенцией:
- ПК: Проектировать информационные ресурсы
На демонстрационном экзамене вам потребуется создать прототипы пользовательских интерфейсов с использованием UI/UX подхода, что является первым этапом разработки веб-приложения.
Согласно документу КОД 09.02.09-1-2025, на экзамене оценивается:
- Умение интерпретировать бизнес-требования заказчика для разработки концептуальной модели информационного ресурса
- Навык проектирования компонентов информационных систем и ресурсов
- Умение разрабатывать прототипы пользовательских интерфейсов с использованием UI/UX подхода