UI/UX та макетування (інтерактивний конспект & вправи)

🎨

UI/UX-Експрес

👤 Учень

🚀

Урок з UI/UX-Дизайну

Колористика, UX-патерни та Контент прямо у твоєму смартфоні

Інтерактивне навчання

Пройди теоретичний експрес-блок та 5 інтерактивних завдань. Максимальна оцінка — 11 балів!

Прізвище та Ім'я учня:

📖 Мікро-Теорія Картка 1 / 5

🎨 Правило 60-30-10 & Контраст

Правило 60-30-10:
• 60% — Домінуючий фоновий колір (нейтральний).
• 30% — Вторинний колір (картки, блоки).
• 10% — Акцентний колір (кнопки заклик до дії / CTA).

Контраст: Текст має легко читатися! Завжди перевіряй, щоб темний текст був на світлому фоні або білий на дуже темному.

🔤 Типографіка в UI

Правило 2-х шрифтів:
Використовуй не більше 2 різних шрифтів на одному сайті!

ГОЛОВНИЙ ЗАГОЛОВОК (H1)

Підзаголовок секції (H2)

Простий та читабельний основний текст для опису деталей.

🧩 «Повітря» та Іконки

«Повітря» (Negative Space):
Вільний простір між елементами. Чим більше «повітря», тим легше сприймається дизайн та виглядає дорожче.

Єдиний стиль іконок:
Використовуй іконки в одного автора та стилю (наприклад, тільки контурні або тільки заповнені).

📐 UX: Ваєрфрейми та Навігація

Ваєрфрейм (UX-скелет):
Чорно-біла схема розташування блоків і кнопок без кольорів, фото та шрифтів. Потрібен для проектування зручності.

Лінійна навігація:
Чіткий покроковий рух від початку до кінця (наприклад: Фільм ➔ Місце ➔ Оплата квитка).

👁️ F-патерн та Z-патерн сканування

F-патерн (для тексту):
Користувач сканує сторінку у формі літери F: зверху зліва направо, потім по лівому краю вниз. Ідеально для новин, блогів та статей.

Z-патерн (для Landing Page):
Очі рухаються у формі Z: Логотип (зліва вгорі) ➔ Меню (справа вгорі) ➔ Візуал (по діагоналі) ➔ Головна кнопка CTA (справа внизу). Ідеально для промо-сторінок та банерів.

Завдання 1 з 5 Макс. 2.5 бали

🎨 UI-Конструктор макету

Налаштуй дизайн для картки сайту «Дитячий Парк Розваг» за правилами UI:

Тематика

ПАРК «ФАНТАЗІЯ»

Найкращі атракціони та незабутні емоції для усієї родини!

1. Колірна гама (60-30-10): 🔴 Монохромна сіра (скучно для дітей) 🟢 Світло-блакитний фон + фіолетовий + помаранчева CTA 🟡 Кислотна неон-палітра (ріже очі)

2. Шрифтова пара: 🔴 Готичний закручений шрифт 🟢 Сучасний виразний заголовок + округлий читабельний Nunito 🟡 3 різні декоративні шрифти в одному блоці

3. Іконки та Повітря: 🔴 Напхані елементи без відступів 🟢 Єдиний стиль іконки + відступи

Завдання 2 з 5 Макс. 2 бали

📐 UX-Аналітик (Ваєрфрейми & Навігація)

Проаналізуй UX-структуру сайту кібертурніру та кінотеатру:

2.1 Що з цього ПОВИННО бути на етапі створення ваєрфрейму?

2.2 Сценарій: Фільм ➔ Місце ➔ Оплата. Переходити без вибору місця неможливо. Яка це навігація?

Завдання 3 з 5 Макс. 2 бали

👁️ UI/UX Патерни сканування (F та Z)

Визнач відповідні алгоритми руху погляду користувача:

3.1 Для якого типу сайтів та контенту найчастіше використовують F-патерн?

3.2 Який шлях погляду притаманний Z-патерну на Landing Page?

Завдання 4 з 5 Макс. 2 бали

🔍 Детектив UI-помилок

Знайди елементи з порушеннями правил контрасту та дизайну:

4.1 Яка з цих 3-х кнопок має НАЙГІРШИЙ контраст?

4.2 На якому макеті вірно застосовано «Повітря» (Negative space)?

Завдання 5 з 5 Макс. 2.5 бали

🎯 Тестові запитання

Дай відповідь на підсумкові питання з теорії:

5.1 Що означає пропорція 10% у правилі 60-30-10?

5.2 Яку максимальну кількість шрифтів рекомендовано використовувати?

🏅

Сертифікат проходження

Урок з UI/UX-дизайну

Видано учню/учениці:

Шевченко Анна

Дата: --.--.----

Підсумкова оцінка:

11 / 11 балів

Експерт UI/UX-Дизайну 🚀

Завдання 1 (UI-Конструктор): 2.5/2.5

Завдання 2 (UX-Аналітик): 2/2

Завдання 3 (F та Z Патерни): 2/2

Завдання 4 (UI-Детектив): 2/2

Завдання 5 (Підсумковий тест): 2.5/2.5

Зробіть скріншот цього екрану та відправте вчителю

⚠️ Повідомлення