Основи дизайну та

просування веб-сайту
Домашенко 11-Б
Етапи створення сайту

 Проектування

 За проектування відповідає менеджер проекту. Збирається детальна

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

 Ідеї, закладені в технічному завданні, дизайнер втілює у вигляді ескізів

сторінок. Замовнику надається кілька варіантів дизайну майбутнього сайту
(як правило, не більше трьох). Результатом є дизайн-макет сайту:
графічний файл, виконаний в одній з графічних програм. Дизайн макет
повинен містити докладний опис використаних кольорів, шрифтів тощо.
Якщо початкова та внутрішні сторінки сайту відрізняються, це теж повинно
бути відображено в дизайн-макеті.
 Макетування сторінок

 На основі дизайн-макету створюється макет шаблонних сторінок, втілених

вже в мові HTML, вони містять графічну інформацію, приєднані таблиці
стилів.
 Програмування сервісів

 Окрім статичної текстової та графічної інформації сайт може містити різні

інтерактивні сервіси: форми для реєстрації клієнтів, гостьові книги. Для їх
створення в роботу вступає програміст.
 Публікація сайту, наповнення інформацією

 На цьому кроці створений каркас переноситься на віддалений сервер і

сайт починає заповнюватися текстовою інформацією. Професійні сайти
для цього забезпечуються системами управління вмістом. Вони надають
можливість додавати інформацію власником сайта, який не є фахівцем ані
в мові HTML ані в програмуванні, він знайомий лише з основами роботи на
комп'ютері. По закінченні п'ятого етапу необхідно проаналізувати виконану
роботу. Чи вирішені поставлені завдання.
 Супровід та просування проекту

 Будь-який сайт необхідно «просувати», тобто робити дії з підвищення його

популярності. Це не разова, а планомірна робота з відстеження
відвідуваності, збору відгуків відвідувачів, внесенню змін у вміст,
додавання нової інформації.
 Основні образотворчі засоби дизайну:

 Точка — базовий елемент, який не має вимірів і характеризується місцем

розташування. Сама собою точка може бути вдалим розділювальним
елементом, а поєднання кількох точок формує лінію.
 Лінія — це фігура, яка утворюється рухом точки і може мати як фіксовані,
так і змінні напрямок і товщину. Лінії створюють обриси та форми. їх
також використовують для відображення перспективи, а домінантні лінії
надають відчуття єдності композиції. Крім того, лінії можуть поєднуватися
для імітації текстури, густини чи об'єму.
 Текстура — характер поверхні певного об'єкта, зумовлений його
внутрішньою будовою, структурою, об'єктивними фізичними
властивостями (дерево, метал, скло, тканина тощо). Текстура стосується
як візуальних, так і тактильних (відчутних на дотик) властивостей об'єкта і
найчастіше визначається матеріалом, з якого його виготовлено.
 Близькою до цього поняття є фактура — зовнішні властивості поверхні
об'єкта (гладка, дзеркальна, тьмяна); вона характеризує якість обробки
поверхні.
 Форма — це зовнішні обриси, вигляд, контур об'єкта. Є три ба­зові форми:
коло, прямокутник (квадрат) та трикутник. Форма може бути двовимірна
та тривимірна, реалістична, абстрактна та проміжна.
 Колір — властивість тіл викликати певне зорове відчуття відповідно до
спектрального складу та інтенсивності видимого випромінювання, яке
ними відбивається чи поглинається. Основні параметри кольору — тон,
насиченість та ясність. Тон визначається спектральним складом світла,
насиченість — кількістю сірого тону, а ясність — яскравістю.
 Перелічені базові елементи творчо поєднуються між собою, утворюючи компози
 Основні принципи композиції:
 Симетрія — таке розташування об'єктів, за якого вони розміщуються дзеркально відносно
центральної осі художнього витвору (у нашому випадку — веб-сторінки). Симетричні
композиції характеризуються статичністю та стійкістю, ліва і права частина зображення є
врівноваженими. Порушення симетрії створює відчуття неспокою, динаміки, складності.
 Асиметрія — довільне розташування об'єктів, за якого ліва та права частини художнього
витвору стають неврівноваженими. Рівновага — стан композиції, за якого всі елементи
збалансовані між собою. Рівновага викликає відчуття спокою та впевненості.
 Динаміка — ілюзія руху, створена за допомогою статичних зображень спеціальними
засобами. У веб-дизайні ефекту руху досягають анімацією.
 Ритм — чергування різних елементів, яке додає композиції чіткості, стрункості, особливої
виразності, динамічності.
 цію.
 Веб дизайн – це оформлення веб сторінок. Він відіграє таку ж роль для сайту, як
поліграфічний дизайн і верстка для паперового видання. Часто під веб-дизайном
розуміють не тільки створення графічних елементів для сайту, але і
проектування його структури, навігації та іноді навіть системи управління
контентом, потрібних для роботи сайту, тобто створення сайту вцілому. Дизайн
в сенсі розумного впорядкування сайту значно важливіше, ніж його "красивість".

 Таким чином, веб-дизайн – це процес створення веб-сайтів, який включає в себе

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

 Веб-дизайн охоплює п’ять основних аспектів:

 Вміст. Сюди входять форма і організація вмісту сайту. Можливий діапазон - від того, як
написаний текст до того, як він організований, представлений і структурований за
допомогою технології розмітки HTML.
 Зорові образи. Сюди належить компонування екранного простору на сайті. Це
компонування зазвичай створюється за допомогою HTML, CSS або навіть Flash і може
включати графічні елементи, що виконують функції прикраси або навігації. Візуальна
сторона сайту - це найбільш очевидний аспект веб-дизайну, але не єдиний і не
найважливіший.
 Технологія. Під технологією найчастіше маються на увазі різні інтерактивні елементи сайту,
особливо створені з використанням програмних методів.
 Доставка. Швидкість і безвідмовність доставки сайту по мережі інтернет або внутрішній
корпоративній мережі пов'язані з апаратним програмним забезпеченням і залученою
мережевою архітектурою.
 Призначення. Це – причина, навіщо існує сайт, найчастіше – економічна. Саме призначення
сайту обумовлює його структуру, вливає на всі ніші аспекти веб-дизайну.
 Починається розкручування сайту з його реєстрації в пошукових системах і
каталогах.

 Потім необхідно передбачити в плані дуже важливий пункт, що дозволяє

підняти рейтинг сайту: обмін посиланнями. Він включає: складання списку
сайтів для обміну посиланнями, складання шаблону посилань, розсилання
листів по обміну посиланнями, установка посилань на сайті.
 Далі в другій частині плану докладно описуються такі форми розкручування як:

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

 розкручування сайту на форумах і дошках оголошень;
 вивчення банерообмінників, підготовка власних банерів, обмін банерами;
 розкручування сайту за допомогою електронної пошти. Списки розсилання;
 складання списку сайтів для висновку партнерських програм;
 розкручування сайту за допомогою прес-релізів;
 використання приймань, що стимулюють повторні відвідування (анкети, конкурси,
листівки, анекдоти, гороскопи та ін.);
 регулярне тестування сайту на предмет роботи посилань, юзабіліті й ін.
 Третій етап, власне комерціалізація сайту. Найбільш важливий пункт
третьої частини плану – визначення оптимального CTR (коефіцієнта
конверсії) і шляхів його досягнення. На третьому етапі планується активна
робота з партнерськими програмами, використання контекстної реклами,
організація періодичних акцій (знижки, пільги, бонуси), створення клубу
споживачів на сайті, цільові розсилання, обслуговування клієнтів.
 Якщо сайт займається продажем фізичного товару, то в окремий розділ
плану виділяється логістика
 Як правило, у всіх пунктах другого й третього етапів маркетинг-плану є
графа «очікувані результати» - це допомагає контролювати хід просування
сайту й оперативно усувати помилки, реагувати на зміни в інтернеті.
 Дякую за увагу
 Домашенко 11-Б