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

ТЕМА УРОКУ

СЬОГОДНІ НА УРОЦІ

Пригадайте

Що таке веб-сторінка? Що таке веб-сайт?

Які об’єкти можуть бути розміщені на веб-сторінках?

Що потрібно знати, щоб відкрити веб-сторінку?

Етапи створення сайтів

Ви вже знаєте, що таке веб-сайти, які об’єкти можуть розміщуватися на веб-сторінках, з яких складаються сайти, як здійснювати пошук і перегляд вебресурсів інтернету.

Тепер ви навчитеся їх створювати та розміщувати в інтернеті.

Етапи створення сайтів

Створення веб-сайту складається з кількох етапів.

1. Постановка завдання. Визначається мета створення сайту, його основна тематика, цільова аудиторія – користувачі, які можуть зацікавитись умістом сайту, аналізуються існуючі сайти такої самої або схожої тематики.

Етапи створення сайтів

(Продовження…) Етапи створення веб-сайту

2. Визначення структури сайту. Складається перелік тематичних розділів сайту та сторінок у них, визначаються зв’язки між сторінками, утворюється мапа (карта) сайту, яка пояснює його логічну структуру, формулюються вимоги до функціонування інтерактивних елементів.

Етапи створення сайтів

Наприклад, на малюнку наведено частину мапи сайту, присвяченого Україні.

Етапи створення сайтів

(Продовження…) Етапи створення веб-сайту

3. Створення дизайн-макета сторінок сайту. На цьому етапі обирають, які об’єкти будуть міститися на сторінках, розмір і розташування цих об’єктів, кольорову гаму, набір шрифтів та інше, тобто визначають стиль сайту.

Етапи створення сайтів

У дизайні враховують три складові:

Дизайн-макет створюють, як правило, у спеціалізованому графічному редакторі, наприклад:

зручність і зрозумілість користування сайтом

ергономіку

узгодженість розмірів об’єктів і їх розташування

композицію

гармонійність поєднання кольорів

колористику

Adobe XD

Sketch

Figma або іншому

Етапи створення сайтів

Графічний онлайн-редактор Figma.

Етапи створення сайтів

(Продовження…) Етапи створення вебсайту

4. Створення сторінок сайту. На цьому етапі вибирають програмні засоби, які будуть використані для створення сторінок сайту. Під час створення вебсторінок на них розміщують і форматують:

(англ. content – вміст) – текстові, графічні, мультимедійні та інтерактивні елементи

контент

кнопки, гіперпосилання та інше – таким чином, щоб сторінка отримала вигляд відповідно до розробленого дизайн-макета; забезпечують функціонування інтерактивних елементів – систем пошуку, форм опитування тощо

елементи навігації

Етапи створення сайтів

(Продовження…) Етапи створення вебсайту

5. Публікація сайту в інтернеті. Призначення сторінкам сайту URL-адрес і надання дозволу користувачам інтернету на перегляд вебсторінок відбувається після публікації сайту.

Етапи створення сайтів

(Продовження…) Етапи створення вебсайту

Перед публікацією сторінки сайту потрібно розмістити на спеціальному сервері, який надає власні апаратні та програмні ресурси для зберігання файлів користувача, забезпечення доступу до них, опрацювання запитів тощо. Такі послуги називають хостингом (англ. hosting – виявлення гостинності).

ВИКОНУЙМО РАЗОМ!

ВИКОНУЙМО РАЗОМ!

Оформлення та структура вебсторінок

Створюючи дизайн-макет для власного сайту, варто мати на увазі рекомендації з оформлення та структури вебсторінок, пов’язані з:

Ергономікою

Композицією

Колористикою

Оформлення та структура вебсторінок

Вдалий дизайн сайту передбачає зручність користування ним. Будь-яка людина повинна інтуїтивно пов’язувати дії, які їй потрібно виконати на вебсторінці, з об’єктами, які вона бачить.

Оформлення та структура вебсторінок

Тому під час розробки дизайну вебсторінок слід ураховувати такі правила ергономіки:

• розміщувати назву сайту в заголовку всіх сторінок;

• зазначайте на кожній сторінці, до якого тематичного розділу вона входить;

Оформлення та структура вебсторінок

Продовження…

• вибирайте розмір шрифту, за якого текст буде сприйматися комфортно;

• створіть можливість переходу з будь-якої сторінки сайту до перегляду головної сторінки;

Оформлення та структура вебсторінок

Продовження…

• створюйте внутрішні гіперпосилання на сторінках з великим обсягом контенту для переходів усередині вебсторінки;

• не допускайте появи горизонтальних смуг прокручування на вебсторінках;

Оформлення та структура вебсторінок

Продовження…

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

Оформлення та структура вебсторінок

Головна сторінка сайту Scratch

Оформлення та структура вебсторінок

При розробці дизайну вебсторінок потрібно намагатися надавати додаткові зручності для користувачів з особливими потребами:

• можливість збільшувати шрифт тексту

• розміри зображень

• озвучувати призначення окремих елементів

Оформлення та структура вебсторінок

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

• великий текст поділяйте на частини, визначайте для них заголовки;

Тому слід дбати про доцільне розміщення об’єктів на вебсторінках, а для цього бажано дотримуватися таких правил композиції:

Оформлення та структура вебсторінок

Продовження…

• шрифт у заголовках робіть крупнішим від шрифту основного тексту;

• розміщуйте найважливіші дані на початку сторінки;

• доповнюйте текстові відомості зображеннями, які ілюструють текст;

Оформлення та структура вебсторінок

Продовження…

• не зловживайте анімацією, відео, музичними та графічними елементами – вони можуть відволікати увагу від корисних матеріалів та уповільнюватимуть завантаження сторінок;

Оформлення та структура вебсторінок

Продовження…

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

Оформлення та структура вебсторінок

Обираючи кольорову гаму для вашого сайту:

• враховуйте ваші вподобання, тематику сайту та вподобання потенційних відвідувачів, що складають цільову аудиторію;

• вибирайте контрастні кольори для тексту та фону сторінки, щоб текст легше сприймався.

ВИКОНУЙМО РАЗОМ!

ВИКОНУЙМО РАЗОМ!

ПЕРЕГЛЯНЬТЕ ВІДЕО

https://www.youtube.com/watch?v=z_b5G7ldAO8

Тренди вебдизайну

Під час вибору дизайну для власного вебсайту потрібно враховувати також сучасні тренди веб-дизайну.

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

Адаптація (лат. adaptō – пристосовувати) – процес пристосування до мінливих умов зовнішнього середовища.

Тренди вебдизайну

Змінення трендів у веб-дизайні пов’язано з розвитком цифрових технологій. Так, за даними статистики в наш час більше половини користувачів звертаються до ресурсів інтернету з мобільних пристроїв.

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

Тренди вебдизайну

Ще одним трендом, пов’язаним з особливостями мобільних пристроїв, стало використання темного режиму.

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

Тренди вебдизайну

Стрімке поширення систем штучного інтелекту викликало появу ще одного тренду – використання у веб-розробці механізму голосового пошуку та елементів штучного інтелекту.

Тренди вебдизайну

Також у дизайні веб-сторінок упродовж останніх кількох років спостерігаються такі тренди:

• типографіка – застосування нестандартних оригінальних шрифтів, великих заголовків, креативного розміщення тексту;

• нестандартні колірні рішення – використання яскравих кольорів і багатоколірної градієнтної заливки фону сторінки або її окремих елементів;

Тренди вебдизайну

Продовження…

• анімація та інтерактивність – використання анімаційних ефектів для привертання уваги до важливих елементів сторінки, застосування плавних переходів під час прокручування вебсторінки, реалізація інтерактивної анімації та вставлення 3D-об’єктів;

Тренди вебдизайну

Продовження…

• мінімалізм – обмеження кількості елементів на екрані, проста композиція, наявність великого порожнього простору. Популярним є структурування контенту на вебсторінках з використанням так званих карток – прямокутних блоків, у яких об’єднані взаємопов’язані графічні, текстові та навігаційні елементи.

Тренди вебдизайну

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

Поміркуйте

Від чого залежить тривалість перегляду вами тієї чи іншої веб-сторінки?

Чи однаково сприймаються вами всі сайти однакової тематики? Від чого залежить ваше враження від сайту?

Оцінювання вебсайтів

Здійснюючи навігацію веб-сторінками, ви, напевно, звертали увагу на те, як по-різному сприймаються сайти однакової тематики та спрямованості. На одних сайтах ви затримувалися надовго, а з деяких – одразу переходили на інший ресурс.

Оцінювання вебсайтів

Для відвідувача під час оцінювання веб-сайту важливими показниками є:

• ступінь інформативності веб-сайту, можливість отримання корисних матеріалів, які не повторюють відомості з інших ресурсів;

• візуальна привабливість сайту, дизайн, стиль оформлення;

Тренди вебдизайну

Продовження…

• зрозумілість і зручність навігації, легкість знаходження потрібних даних, структурованість матеріалу, все те, що забезпечує простоту, комфортність та ефективність у процесі використання сайту;

• наявність інтерактивних засобів та ефектів;

Тренди вебдизайну

Продовження…

• частота оновлення даних на сайті, що свідчить про увагу розробника до власного проєкту;

• мови, якими доступні матеріали на вебсайті;

• можливість залишити коментарі, отримати відповіді, звернутися до розробника за додатковими відомостямита інше.

Оцінювання веб-сайтів

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

Оцінювання вебсайтів

Набір стратегій та інструментів для просування сайту в інтернеті, щоб він відображався на верхніх місцях у видачах пошукових систем, називають SEO-оптимізацією сайтів (англ. Search Engine Optimization – пошукова оптимізація). Урахування трендів і рекомендацій з вебдизайну є однією зі стратегій пошукової оптимізації.

ВИКОНУЙМО РАЗОМ!

ОСМИСЛЮЄМО – ЗМАГАЮЧИСЬ!

ДОМАШНЄ ЗАВДАННЯ

1. Опрацювати: підручник стор.163-170, презентацію до уроків 45-46

​

• Виконати: тест по перевірці уроків 45-46

​

• Виконати: практичну роботу до уроків 45-46