Основи веб-дизайну
Веб-сайт— сукупність веб-сторінок, доступних в Інтернеті, які об'єднані як за змістом, так і навігаційно та розміщені як єдине ціле.
Структура
веб-сайтів
Веб-сайт
Типи сайтів
за метою
комерційні
некомерційні
за цільовою аудиторією
тематичні
портали
прості
за доступністю
відкриті
напівзакриті
закриті
за складністю оформлення
статичні
динамічні
сайти на флеш-технології
Класифікація веб-сайтів
Web-дизайн - сукупність робіт з розробки логічної структури та художнього оформлення веб-сторінок.
Web-дизайн
менеджер проекту
дизайнер
веб-програміст
веб-майстер
Спеціалісти веб-дизайну
Етапи створення сайтів
маркетингові дослідження
планування структури
розробка дизайну
конструювання
вибір системи керування (CMS)
наповнення
тестування
розміщення в Інтернеті
обслуговування
просування
Аудиторію будь-якого сайту в загальному можна поділити:
Цільова аудиторія сайту
Побічна аудиторія сайту
Випадкова аудиторія сайту
Портрет клієнта - це впорядкована інформація про пересічного представника цільової аудиторії: вік, стать, соціальний рівень, життєві інтереси.
Цільова аудиторія сайту
Закрита аудиторія
Відкрита аудиторія
Розміщення сайту в Інтернеті
Для ефективної роботи сайту потрібно забезпечити його цілодобове функціонування. Краще розмістити сайт на віддаленому хостингу.
Сервер, на якому розміщують сайт, називається хостом, а сервіси, які надають його служби, – хостингом.
Хостинг — це виділення на сервері (хості) розділу у вигляді каталогу, в якому зберігається вся інформація сайту — HTML-документи, графіка, кліпи, скрипти тощо.
Оновленні
Супроводі
Технічному обслуговуванні
Поповнення інформаційними матеріалами
Адміністрування, прийом замовлень у інтернет-магазині тощо
Зокрема, вдосконалення дизайну і структури сайта
Адміністрування сайту
Обслуговування сайту полягає в його:
Система керування вмістом (СКВ) (англ. CMS — Content Management System).— це програмний комплекс, який забезпечує доступ користувача до ресурсів сайта (веб-сторінок, бази даних та ін.) та виконання над ними різних операцій (змінювання, видалення, додавання, захист тощо).
Система керування вмістом
Основні функції CMS
Основні функції CMS
Керування контентом: зберігання, контроль версій, дотримання режиму доступу тощо
Публікація контенту
Надання інструментів для створення вмісту, організації спільної роботи над вмістом
Подання інформації у вигляді, зручному для навігації, пошуку
Web content management systems
Транзакційні СКВ
Інтегровані СКВ
Електронні бібліотеки
Системи для забезпечення циклу життя документації
Освітні СКВ
Різновиди CMS
Інструменти веб-дизайну
Просування сайту
Пошукова оптимізація (SEO)
Валідатор
Ергономіка— це наука, яка вивчає особливості виробничої діяльності людини з метою забезпечення ефективності, безпеки та зручності цієї діяльності.
Ергономіка розміщення відомостей на веб-сторінці
Ергономічний сайт — це сайт, що забезпечує необхідні зручності відвідувачеві, зменшує фізичну та психологічну втому, зберігає здоров’я та працездатність.
Розташування відомостей на сторінці
Зручність навігації
Оформлення
Швидкість завантаження
Під час розробки веб-сайту потрібно враховувати можливість надання зручності для користувачів з особливими потребами.
Ергономіка розміщення відомостей на веб-сторінці
розмір шрифту повинен бути достатнім;
надавати можливість змінення розміру шрифту;
зображення повинні мати підписи та текст заміщення;
додавати елементи, що озвучують важливі відомості на сайті.
Просування сайту полягає у здійсненні заходів з метою збільшення його відвідуваності інтернет-користувачами.
Просування сайту
Реєстрація в пошукових каталогах
Пошукова оптимізація (SEO)
Просування засобами соціальних мереж
(SMO та SMM)
Контекстна (банерна) реклама
Просування сайту офлайн
Для того щоб пошукова система наводила в числі перших у списку знайдених ресурсів ваш сайт, потрібно враховувати такі параметри:
Пошукова оптимізація (SEO)
Частота появи ключових слів
Індекс цитування сайту
характеризують сайт, за ними ваш сайт може бути знайдено під час пошуку в пошукових системах.
показник, який визначається на основі кількості веб-ресурсів, які мають гіперпосилання на цей сайт.
Просування засобами соціальних мереж (SMO та SMM)
Способи SMO (SMM)
Просування за допомогою форумів
Написання статей у тематичних соцмережах
Створення популярної теми в соцмережах
Спонукання користувачів до додавання посилань на ресурс
Створення та просування новин у сервісах
Організація конкурсів та опитувань
Контекстна (банерна) реклама
Контекстна реклама підібрана в залежності від інтересів кожного конкретного користувача: які запити він вводив, які сайти відвідував, якій тематиці більше приділяв уваги.
Вірусний маркетинг - розповсюдження інформації самими користувачами. Основний інструмент вірусного маркетингу – створення цікавого, креативного контенту, який гарантовано зможе зацікавити максимальну кількість користувачів.
Вірусний маркетинг
Наприклад, відомий шпагат Ван Дамма, який він продемонстрував, вставши між двома грузовими автомобілями, збільшив продажі Volvo на 170 млн. дол.
Основні тренди у веб-дизайні
без чіткого визначення геометричних форм, з'являються все частіше і притягують погляд.
Приклад:
дозволяють створювати приголомшли-вий візуальний ефект, який завжди здатний привернути увагу користувачів.
3D і вільні форми
Шари і поділи
Основні тренди у веб-дизайні
створення шарів, які чудово працюють з паралакс-ефектом – це спеціальна техніка, коли фонове зображення в перспективі рухається повільніше, ніж елементи переднього плану.
Приклад:
користувач майже миттєво отримує повідомлення і майже відчуває свій обов'язок дивитися повний цикл відеоролика без можливості його перервати або пропустити.
«Плаваючі» прямокутники
Швидка анімація
Основні тренди у веб-дизайні
використання типографіки, заповненої зображенням. Тобто, коли літери фарбуються не в колір, а в фонову фотографію.
Приклад: https://www.weareoust.co/
це більшою мірою статичне зображення із незначними елементами, що рухаються.
Приклад: http://www.studiomarani.it/
Фототипографіка
Сінемаграф
Основні тренди у веб-дизайні
заснований не на візуальному підході, а на строгих принципах дизайну, на використанні тільки основних графічних елементів, таких як форми, простий текст, обмежені колірні палітри і вільний простір.
Приклад: https://www.hugeinc.com/
одна з найбільш популярних тенденцій цього року в графічному дизайні і в соціальних мережах, цей тренд швидко завоював популярність і в світі веб-дизайну.
Приклад: https://citycircus.gr/
Мінімалізм
Колаж
Основні тренди у веб-дизайні
Ілюстрації відмінно підходять для того, щоб додати оригінальності сайту, вони створюють відчуття затишку і розважають користувача.
Приклад: https://ahm.com.au/
це ефективний спосіб привернути увагу ваших відвідувачів, а також дізнатися про них більше.
Ілюстрація
Інтерактивність