Практичне завдання: Розробка макета головного екрана сайту «Клуб робототехніки»
Мета: Створити візуальний макет (UI) головної сторінки, дотримуючись принципів зручності (UX) та інклюзивності.
Інструмент: Canva Клас Формат макета: «Вебсайт» або «Презентація (16:9)»
Алгоритм виконання завдання:
1. Підготовка робочого простору:
Увійдіть у Canva за наданим посиланням.
Натисніть «Створити дизайн» та оберіть тип «Вебсайт» (це дозволить вам побачити макет так, як він виглядатиме в браузері).
2. Створення «Header» (Навігаційної панелі):
У верхній частині сторінки розмістіть Логотип (можна використати готову іконку робота з розділу «Елементи»).
Поруч напишіть Назву клубу (наприклад: RobotX або Клуб Майбутнього).
Справа додайте Меню з мінімум 3-х пунктів (наприклад: Головна, Курси, Розклад). Використовуйте один шрифт для всіх пунктів.
3. Робота з Головним банером (Hero Section):
Знайдіть якісне фото на тему робототехніки (розділ «Фотографії»). Розтягніть його на весь екран.
Технічна вимога: Щоб текст на фото добре читалися, накладіть на зображення прямокутник (Елементи -> Фігури). Зробіть його чорним або синім і встановіть прозорість (Transparency) 40–60%.
Поверх напівпрозорого шару напишіть заголовок (наприклад: «Збудуй свого першого робота вже сьогодні!»).
4. Заклик до дії (Кнопка CTA):
Створіть кнопку під заголовком. Використовуйте яскраву фігуру (прямокутник із закругленими кутами).
Напишіть на ній текст: «Записатися».
Важливо: Колір кнопки має бути контрастним до фону, щоб користувач одразу її помітив.
5. Дотримання дизайн-стандартів:
Кольори: Виберіть не більше 3-х основних кольорів для всього макета.
Шрифти: Використовуйте максимум 2 різні шрифти (один для заголовка, інший для меню та кнопок).
Інклюзивність: Переконайтеся, що текст достатньо великий, а колір шрифту не зливається з фоном.
КРИТЕРІЇ ОЦІНЮВАННЯ ПРАКТИЧНОГО ЗАВДАННЯ
ГР | Критерій оцінювання | 5(6) балів | 2,5(3) бали | 0 балів |
ГР 1 | Аналіз структури (6 б) | Всі блоки на місці, логіка навігації дотримана (6б) | Відсутні елементи меню або логотип (3б) | Структура відсутня (0б) |
ГР 2 | Якість продукту (5 б) | Макет завершений, привабливий, за темою (5б) | Макет незавершений або не за темою (2.5б) | Роботу не виконано (0б) |
ГР 3 | Використання ІКТ (5 б) | Вміле використання шарів, прозорості, іконок (5б) | Базове використання без налаштувань (2.5б) | Інструменти не використано (0б) |
ГР 4 | Стандарти (5 б) | Високий контраст, ≤3 кольори, текст читається (5б) | Поганий контраст або >3 кольорів (2.5б) | Стандарти ігноровано (0б) |
.png)
