Етапи створення сайту. Дизайн вебсторінок. Тренди вебдизайну

ЕТАПИ СТВОРЕННЯ САЙТУ. ДИЗАЙН ВЕБСТОРІНОК. ТРЕНДИ ВЕБДИЗАЙНУ8 клас

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

ЕТАПИ СТВОРЕННЯ САЙТІВ1. Постановка завдання. Визначається мета створення сайту, його основна тематика, цільова аудиторія – користувачі, які можуть зацікавитись змістом сайту, аналізуються існуючі сайти такої самої або схожої тематики.

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

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

У дизайні враховують три складові:●ергономіку – зручність і зрозумілість користування сайтом;●композицію – узгодженість розмірів об’єктів і їх розташування;●колористику – гармонійність поєднання кольорів.

4. Створення сторінок сайту. На цьому етапі вибирають програмні засоби, які будуть використані для створення сторінок сайту. Під час створення вебсторінок на них розміщують і форматують контент (англ. content – вміст) – текстові, графічні, мультимедійні та інтерактивні елементи, а також елементи навігації – кнопки, гіперпосилання та інше – таким чином, щоб сторінка отримала вигляд відповідно до розробленого дизайн-макета; забезпечують функціонування інтерактивних елементів – систем пошуку, форм опитування тощо.

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

ОФОРМЛЕННЯ ТА СТРУКТУРА ВЕБСТОРІНОКПравила ергономіки:● розміщуйте назву сайту в заголовку всіх сторінок;● зазначайте на кожній сторінці, до якого тематичного розділу вона входить;● вибирайте розмір шрифту, за якого текст буде сприйматися комфортно;● створіть можливість переходу з будь-якої сторінки сайту до перегляду головної сторінки;

ОФОРМЛЕННЯ ТА СТРУКТУРА ВЕБСТОРІНОКПравила ергономіки:● створюйте внутрішні гіперпосилання на сторінках з великим обсягом контенту для переходів усередині вебсторінки;● не допускайте появи горизонтальних смуг прокручування на вебсторінках;● пропонуйте кілька посилань для переходу на одну й ту саму сторінку, щоб відвідувачі сайту могли вибрати найзручніший для себе спосіб

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

ОФОРМЛЕННЯ ТА СТРУКТУРА ВЕБСТОРІНОКПравил композиції:●великий текст поділяйте на частини, визначайте для них заголовки;●шрифт у заголовках робіть більшим від шрифту основного тексту;●розміщуйте найважливіші дані на початку сторінки;●доповнюйте текстові відомості зображеннями, які ілюструють текст;

ОФОРМЛЕННЯ ТА СТРУКТУРА ВЕБСТОРІНОКПравил композиції:● не зловживайте анімацією, відео, музичними та графічними елементами – вони можуть відволікати увагу від корисних матеріалів та уповільнюватимуть завантаження сторінок;●не копіюйте матеріали з інших інтернет-ресурсів, а пропонуйте гіперпосилання на них для уточнення відомостей – так ви забезпечите дотримання закону про захист авторських прав.

ОФОРМЛЕННЯ ТА СТРУКТУРА ВЕБСТОРІНОКОбираючи кольорову гаму для вашого сайту:● враховуйте ваші вподобання, тематику сайту та вподобання потенційних відвідувачів, що складають цільову аудиторію;● вибирайте контрастні кольори для тексту та фону сторінки, щоб текст легше сприймався.

ТРЕНДИ ВЕБДИЗАЙНУПід час вибору дизайну для власного вебсайту потрібно враховувати також сучасні тренди вебдизайну. Особливого значення набув адаптивний дизайн, за якого одна й та сама сторінка, коректно відображається і на великих, і на маленьких екранах. Ще одним трендом, пов’язаним з особливостями мобільних пристроїв, стало використання темного режиму. Стрімке поширення систем штучного інтелекту викликало появу ще одного тренду – використання у веброзробці механізму голосового пошуку та елементів штучного інтелекту.

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

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

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

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

Працюємо з комп’ютером. Завдання та алгоритми їх виконання ви зможете знайти за адресою https://cutt.ly/de2c. Ho. Mb або QR-кодом.

Дайте відповіді на запитання1. За якими етапами відбувається створення сайтів?2. Що таке дизайн-макет сторінок сайту?3. У чому полягає створення вебсторінок?4. Які ви знаєте сучасні тренди вебдизайну?5. Які рекомендації щодо оформлення та структури сторінок варто враховувати під час створення сайту?