Дизайн вебсторінок (ергономіка, композиція, кольористика). Тренди вебдизайну. 8 клас

 

Завдання: «Web-Рентген: Розтин популярного сайту»

Мета: Проаналізувати один із відомих сайтів (наприклад, Spotify, Steam, Duolingo або сайт вашої школи) через призму правил дизайну та представити результати у вигляді інфографіки в Canva.

📋 План дослідження (що треба знайти):

1. Кольористика (Color Palette):

   • Які 2–3 основні кольори використовує сайт?

   • Який настрій вони створюють (довіра, енергія, спокій)?

   • Порада: Використайте піпетку в Canva, щоб знайти точні HEX-коди кольорів (наприклад, #FF5733).

2. Композиція та Ергономіка (UX/UI):

   • Правило «F-патерну»: Чи легко знайти головну кнопку або заголовок? Куди першим падає погляд?

   • Повітря (Negative Space): Чи багато вільного місця між блоками, чи сайт виглядає «захаращеним»?

   • Клікабельність: Чи зрозуміло з першого погляду, на що можна натиснути?

3. Тренди:

   • Чи є на сайті сучасні елементи: Гласморфізм (ефект матового скла), Темна тема, Мінімалізм чи 3D-ілюстрації?

---

🎨 Як представити результат у Canva?

Створіть одну сторінку (формат Instagram Post або А4), де замість купи тексту будуть візуальні докази:

• Скриншот сайту в центрі.

• Стрілочки-виноски, що вказують на вдалі (або невдалі) елементи.

• Палітра: Ряд кольорових кружечків, які показують основні кольори сайту.

• Вердикт: Коротка оцінка за 10-бальною шкалою (наприклад, «Ергономіка: 9/10, Кольори: 10/10»).

🔍 Чек-лист «5 ознак сучасного сайту»

1. Правило 3-х кольорів (60/30/10):

   • Чи дотримується сайт балансу? (60% — основний фоновий колір, 30% — додатковий, 10% — акцентний для кнопок). Якщо кольорів забагато — дизайн виглядає брудним.

2. Візуальна ієрархія (Що головне?):

   • Чи виділений головний заголовок розміром або жирністю? Користувач має за 3 секунди зрозуміти, куди він потрапив і що йому пропонують.

3. Адаптивність та «Mobile First»:

   • Уявіть цей сайт на екрані смартфона. Чи зручно буде натискати на кнопки великим пальцем однієї руки? Сучасний дизайн завжди орієнтований на телефон.

4. Типографіка (Шрифти):

   • Чи легко читати текст? На сучасних сайтах зазвичай використовують шрифти без засічок (Sans Serif), великі міжрядкові інтервали та не більше 2-х різних видів шрифтів.

5. Мікроінтеракції та відгук:

   • Чи змінює кнопка колір при наведенні? Чи з’являється анімація при завантаженні? Сайт має «спілкуватися» з користувачем, підтверджуючи кожну його дію.