10(11) клас Веб-технології. Урок №34 (20.05.2026) Тема уроку: Підсумковий урок з теми: Основи дизайну та просування веб-сайту.

Увага (Attention) → Інтерес (Interest) → Бажання (Desire) → Дія (Action).

Охоплення (Awareness) → Залучення (Involvement) → Рішення (Decision) → Покупка (Acquisition).

Алгоритм (Algorithm) → Інтерфейс (Interface) → Дизайн (Design) → Аналітика (Analytics).

Аналіз (Analysis) → Інформація (Information) → Довіра (Data) → Адаптація (Adaptation).

Детальний опис історії створення компанії та її місії.

Список усіх сертифікатів та нагород у верхній частині сторінки.

Конкретні цифри, вирішення болю користувача або інтрига (дофамінове очікування).

Анімований логотип та яскраві фонові відео без тексту.

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

Він підвищує рівень серотоніну, роблячи процес покупки більш приємним.

Обмежена пропозиція викликає страх втрати, який пригнічує логічне мислення та змушує діяти миттєво.

Дефіцит знімає відповідальність за якість товару з продавця.

Користувач має відчувати, що він щось отримує (цінність), а не віддає (свої дані або зусилля).

Слово 'Отримати' коротше і краще виглядає на мобільних пристроях.

Це допомагає уникнути спам-фільтрів поштових сервісів.

Алгоритми Google краще індексують кнопки з дієсловами в інфінітиві.

10 секунд.

500 мілісекунд.

2 секунди.

5 секунд.

Він забезпечує на ≈ краще стиснення без помітної втрати якості, що прискорює завантаження сторінки.

WebP автоматично підлаштовує колірну гаму під яскравість екрана користувача.

Цей формат не потребує завантаження через HTTP-протокол.

Він підтримує необмежену кількість шарів та векторну графіку.

Використовувати зовнішні плеєри (YouTube/Vimeo), щоб не перевантажувати власний сервер та забезпечити швидке відтворення.

Завантажувати відео безпосередньо в медіатеку сайту для кращого SEO.

Конвертувати всі відео у формат GIF для автоматичного відтворення.

Завжди вимикати звук, навіть якщо користувач натиснув 'Play'.

Довгі назви брендів не поміщаються на перший екран мобільних пристроїв.

Це дозволяє приховати реальну ціну продукту до моменту покупки.

Пошукові системи карають сайти, які занадто часто згадують назву власного бренду.

Людині потрібна 'дірка в стіні', а не 'дриль'; фокус на результаті знімає когнітивне навантаження та страх помилки.

Це блоки з відгуками або логотипами клієнтів, які варто ставити одразу під основним екраном для підвищення довіри.

Це посилання на сторінки засновників компанії у Facebook та Instagram.

Це лічильник відвідувачів сайту в реальному часі.

Це юридичні документи та ліцензії, розміщені у 'футері' (нижній частині) сайту.

Швидкість руху курсору миші в пікселях за секунду.

Точну температуру процесора пристрою користувача під час завантаження сайту.

Куди користувачі клікають найчастіше, зокрема на елементи, які не є посиланнями, але сприймаються як клікабельні.

Географічне розташування користувачів на мапі світу.

Наявність анімації при наведенні на логотип.

Тип шрифту для тексту політики конфіденційності.

Головний заголовок (H1).

Колір іконок у підвалі сайту.

Вимірювати відстань між елементами в міліметрах.

Перетворювати векторні об'єкти на растровий код.

Захищати макет від копіювання іншими дизайнерами.

Автоматично оновлювати всі свої копії (інстанси) при зміні кольору, шрифту або форми в оригіналі.