Урок 5.1. Дизайн вебсторінок. Тренди вебдизайну

Перегляньте презентацію

💻 Найважливіше в цьому пункті

Створення вебсайту — це справжня подорож, яка складається з кількох ключових етапів: від постановки завдання й продумування структури до створення дизайн-макета, наповнення сторінок та фінальної публікації в інтернеті.

Коли ви працюєте над дизайн-макетом, варто пам’ятати про правила оформлення та структури вебсторінок. Тут важливі ергономіка, гармонійна композиція та вдала колористика. Особливу увагу слід приділити зручності для користувачів з особливими потребами — це робить сайт справді доступним і дружнім.

Обираючи стиль для власного ресурсу, не можна оминути сучасні тренди вебдизайну. Адаптивний дизайн дозволяє одній і тій самій сторінці виглядати однаково стильно й коректно як на великому моніторі, так і на маленькому екрані смартфона. Сайт, що відповідає актуальним тенденціям, одразу привертає увагу, виглядає сучасно й дарує комфорт під час перегляду на будь-якому пристрої.

📝 Шпаргалка зі створення вебсайту

✨ Поради для дизайну

• 🖌️ Ергономіка — зручність для користувача

• 🎭 Композиція — гармонійне розташування елементів

• 🌈 Колористика — вдала палітра кольорів

• ♿ Інклюзивність — додаткові зручності для людей з особливими потребами

• 📱 Адаптивність — сайт однаково стильний на великому й маленькому екрані

• 🔥 Тренди — сучасний вигляд, що привертає увагу 

Виконайте інтерактивні завдання

Робота за комп'ютером

Увага! Під час роботи з комп'ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.

Повторіть правила безпечної роботи за комп’ютером.

Завдання ви зможете знайти за адресою: https://cutt.ly/de2cHoMb 

🌐 Квест «Досліджуємо сайт МАН»

Твоя місія — стати справжнім веб-дослідником!

Відкрий сторінку platform.man.gov.ua і перевір, наскільки вона відповідає правилам ергономіки, композиції та сучасним трендам вебдизайну.

🚀 Кроки завдання

1. 🔎 Відкрий сайт у браузері та уважно роздивись його структуру.

2. ✍️ Запиши відповіді на запитання:

   • Яка назва сторінки відображається у заголовку браузера?

   • Куди веде гіперпосилання з логотипу МАН?

   • Які розділи є у верхній панелі навігації?

   • Які групи посилань розташовані внизу сайту?

3. 📱 Перевір адаптивність:

   • Зміни масштаб сторінки на комп’ютері (Ctrl + ➕ / Ctrl + ➖).

   • Переверни смартфон чи планшет з вертикальної у горизонтальну орієнтацію.

   • Опиши, як змінюється вигляд меню, карток та колонтитулів.

4. 🎨 Оціни дизайн:

   • Чи зручно читати текст?

   • Чи виділені заголовки?

   • Як використано кольори та ілюстрації?

   • Чи легко орієнтуватися між сторінками?

5. 🔥 Визнач тренди: знайди, які сучасні прийоми вебдизайну застосовані на сайті (адаптивність, мінімалізм, акцентні кольори тощо).

6. 📝 Зроби висновок: чи відповідає сайт вимогам ергономіки, композиції та колористики?

📤 Як здати роботу

1. Збережіть усі файли та скриншоти.

2. Завантажте їх у розділ Ваші роботи на платформі Google ClassRoom.

Відео у допомогу

Опрацюйте

За підручником "Інформатика, 8 клас" (Й.Я. Ривкінд та інші), 2025:

• Прочитайте та розберіть теоретичний матеріал пункту 5.1 (стор. 163-171).

• Дайте усні відповіді на питання 1-5 (стор. 170).

Перевірте свій рівень знань 

Скриншот результату тесту прикріпіть у розділі Ваші роботи на платформі Google ClassRoom.

• Етапи створення сайту. Дизайн вебсторінок. Тренди вебдизайну. Тест 20 (Інформатика 8 клас Ривкінд НУШ)