Веб дизайн

HTML Academy

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

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

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

Розробка дизайну

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

Макетування сторінок

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

Програмування сервісів

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

Публікація сайту, наповнення інформацією

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

Супровід та просування проекту

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

1.2  Веб-дизайн у контексті художнього дизайну

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

• Точка — базовий елемент, який не має вимірів і характеризується місцем розташування. Сама собою точка може бути вдалим розділювальним елементом, а поєднання кількох точок формує лінію.
• Лінія — це фігура, яка утворюється рухом точки і може мати як фіксовані, так і змінні напрямок і товщину. Лінії створюють обриси та форми. їх також використовують для відображення перспективи, а домінантні лінії надають відчуття єдності композиції. Крім того, лінії можуть поєднуватися для імітації текстури, густини чи об'єму.
• Текстура — характер поверхні певного об'єкта, зумовлений його внутрішньою будовою, структурою, об'єктивними фізичними властивостями (дерево, метал, скло, тканина тощо). Текстура стосується як візуальних, так і тактильних (відчутних на дотик) властивостей об'єкта і найчастіше визначається матеріалом, з якого його виготовлено.
• Близькою до цього поняття є фактура — зовнішні властивості поверхні об'єкта (гладка, дзеркальна, тьмяна); вона характеризує якість обробки поверхні.
• Форма — це зовнішні обриси, вигляд, контур об'єкта. Є три ба­зові форми: коло, прямокутник (квадрат) та трикутник. Форма може бути двовимірна та тривимірна, реалістична, абстрактна та проміжна.
• Колір — властивість тіл викликати певне зорове відчуття відповідно до спектрального складу та інтенсивності видимого випромінювання, яке ними відбивається чи поглинається. Основні параметри кольору — тон, насиченість та ясність. Тон визначається спектральним складом світла, насиченість — кількістю сірого тону, а ясність — яскравістю.
• Пропорція — це співвідношення складових у межах одного цілого. Розрізняють арифметичну, геометричну та гармонійну пропорції. Найвідомішою дизайнерською пропорцією є так званий «золотий переріз» — поділ відрізка на частини у такому співвідношенні, що менша частина відноситься до більшої так, як більша — до цілого відрізка (приблизно це 1/1,618, а число 1,618 називають значенням золотого перерізу).

Перелічені базові елементи творчо поєднуються між собою, утворюючи композицію. Композиція — це об'єднання різних частин (елементів) у єдине ціле відповідно до певної ідеї. Елементи художнього витвору повинні перебувати у гармонійній єдності. Композиція є показником художньої культури дизайнера, його почуття міри та стилю.
Основні принципи композиції:

• Симетрія — таке розташування об'єктів, за якого вони розміщуються дзеркально відносно центральної осі художнього витвору (у нашому випадку — веб-сторінки). Симетричні композиції характеризуються статичністю та стійкістю, ліва і права частина зображення є врівноваженими. Порушення симетрії створює відчуття неспокою, динаміки, складності.
• Асиметрія — довільне розташування об'єктів, за якого ліва та права частини художнього витвору стають неврівноваженими. Рівновага — стан композиції, за якого всі елементи збалансовані між собою. Рівновага викликає відчуття спокою та впевненості.
• Динаміка — ілюзія руху, створена за допомогою статичних зображень спеціальними засобами. У веб-дизайні ефекту руху досягають анімацією.
• Ритм — чергування різних елементів, яке додає композиції чіткості, стрункості, особливої виразності, динамічності.

Окрім зазначених вище, у дизайні використовують ще й такі поняття, як гармонія, контраст, колорит, перспектива, центр мас.
Гармонія — співмірність всіх частин цілого.
Контраст — різка відмінність елементів композиції, наприклад, протиставлення темного і світлого, високого та низького, легкого та важкого, тонкого та товстого, ліній та плям.
Колорит — гармонійне поєднання, взаємозв'язок, тональне об'єднання різних кольорів.
Перспектива — спосіб зображення тривимірного простору на площині відповідно до видимих змін розмірів та чіткості об'єктів. Завдяки художній перспективі зображення стає об'ємним.
Центр мас — візуальний центр зображення, що міститься дещо вище від його геометричного центру. Це природне місце розташування інформаційного центру композиції.
Веб дизайн – це оформлення веб сторінок. Він відіграє таку ж роль для сайту, як поліграфічний дизайн і верстка для паперового видання. Часто під веб-дизайном розуміють не тільки створення графічних елементів для сайту, але і проектування його структури, навігації та іноді навіть системи управління контентом, потрібних для роботи сайту, тобто створення сайту вцілому. Дизайн в сенсі розумного впорядкування сайту значно важливіше, ніж його "красивість".
Таким чином, веб-дизайн – це процес створення веб-сайтів, який включає в себе технічну розробку, структурування інформації, візуальний (графічний) дизайн і доставку по мережі.
Веб-дизайн охоплює п’ять основних аспектів:

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

1.3  Веб-дизайн як засіб проектування логічної структури сайту

Структура сайту  - це внутрішній устрій сайту, його «кістяк», розташування сторінок, розділів, підрозділів, додаткових матеріалів. І першочерговим завданням дизайнера є створення стрункого порядку з хаотичного скупчення інформації.
Сайти з невдалою логікою структури не лише ускладнюють роботу відвідувачів, вони позбавляють всякого бажання на них знаходитися. Коли відвідувачі не в змозі знайти потрібну інформацію, вони схильні припускати, що на цьому сайті її взагалі немає. Розчаровані відвідувачі навряд чи запам’ятають цей ресурс, а тим більше захочуть ще раз його відвідати.
Вдалий дизайн в першу чергу має орієнтуватися на відвідувача, який без особливих зусиль може знайти і використати будь яку інформацію, що міститься у сайті. При цьому повинні бути абсолютно зрозумілими логічна схема сайту і логічний взаємозв'язок між окремими сторінками.
Доцільна навігація означає, що відвідувачі точно знають, де знаходяться, де розташовані елементи сайту і як їх використовувати. Правильна структура інформації дозволяє відвідувачам без побоювання продовжувати мандрування сайтом, і бути впевненими в тому, що завжди можна без зусиль повернутися до раніше переглянутих сторінок. Піклування про структуру сайту є завданням розробника, а не відвідувачів.
Логічне проектування передбачає організацію інформації на сайті, побудову його структури та навігацію по розділах.
При проектуванні інформаційного наповнення сайту і засобів навігації слід дотримуватися чотирьох базових принципів, які засновані на сприйнятті інформації людиною:

• Використання позначень

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

• Доцільність

Розділи сайту слід наповнювати інформацією, яка відповідає даному розділу чи фрагменту сторінки, недоречні елементи краще перенести в інше місце або взагалі прибрати.

• Одноманітність

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

• Розділення на частини

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

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

• Лінійною.
• Ієрархічною.
• Мережною (контекстно-залежною).
• Комбінованою

Лінійна структура

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

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

​

Є найбільш поширеною структурою в Інтернеті. За такої організації можна перейти з любої сторінки на будь-яку іншу, що є з нею логічно взаємозв'язаною. Яскравими  прикладами такої структури є сайти Інтернет магазинів чи великі інформаційні портали.
В залежності від задумів розробника необов'язково пов'язувати всі сторінки зі всіма. Зв'язки повинні бути максимально природними і відображати логіку сайту.
Комбінована структура
Є поєднанням кількох попередніх структур. Наприклад, на сайті може бути передбачено ієрархічну структуру, яка в певному місці може містити виконання покрокових дій (лінійну структуру).
Спроба створення структури сайту без врахування думки відвідувачів є величезною помилкою, яка може лише нашкодити популярності сайту. Не важливо, наскільки красивим і приємним здається сайт, вирішальним буде чи може відвідувач легко віднайти потрібну інформацію. Дизайн робиться для зручності відвідувачів, а не власників сайту.
Звичайно, можна створити логічну структуру сайту чисто інтуїтивно. Проте, однією з найбільших помилок є використання на сайтах компаній схем, що є прийнятними в цих компаніях, наприклад, розподіл товарів по брендах або повна відповідність структури сайту до структури організації. В результаті, можна створити сайт, структура якого буде очевидною для його розробників, але абсолютно незрозумілою для його відвідувачів.

1.4  Основні правила веб-дизайну

Зручний для користувача сайт має ґрунтуватися на законах ергономіки. Ергономіка (від гр. ergon — робота та nomos — закон) — наука, яка вивчає робочі процеси з метою створення оптимальних умов праці, що сприяють підвищенню її продуктивності, а також зберігають сили, здоров'я та працездатність людини.
Для системи «людина-комп'ютер» з аналізаторів сприйняття інформації найбільше значення має зоровий. Ергономічний сайт ґрунтується на знаннях про будову та функціонування людського ока, яке, дивлячись на екран, збирає інформацію з обмеженого кута зору.
Розглянемо основні елементи ергономічного візуального інтерфейсу:

• Такий інтерфейс відображається на екрані монітора і складається з ділянок, частина яких є найактивнішими, тобто відразу стають помітними, виділяючи найважливіші елементи сторінки.
• Колірна схема елементів інтерфейсу має бути побудована на основі психофізіології кольору. Зокрема, червоний колір — сигнал небезпеки, зелений — сигнал штатної ситуації тощо.
• Гарнітуру шрифту, його розмір, накреслення, а також варіанти розташування текстових блоків на сторінці необхідно вибирати відповідно до ступеня їхньої важливості для цільової аудиторії.
• Система навігації має бути зручною та інтуїтивно зрозумілою.
• Інтерфейс повинен адекватно моделювати реальні життєві ситуації, що виникають у тій чи іншій прикладній галузі. Інтерфейс має бути непомітним настільки, щоб відвідувач зосереджував свою увагу на вмісті веб-сторінки, а не на способі її подання.

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

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

Кожне з цих правил можна заперечити і довести необхідність та вдалість використання «неправильного варіанта» на конкретному сайті. Тож не варто їх сприймати як безумовні табу. Проте необхідно пам'ятати, що для більшості сайтів усе-таки краще наведених вище рекомендацій дотримуватися.
Варто зазначити, що в інтернеті досить часто зустрічаються сайти, які є незручними для відвідувачів. Переважно ці незручності мають низку проявів:

• Повільне завантаження. Очікування завантаження файлів та завершення процедури пошуку — це марна трата часу. Відвідувач веб-сайту не буде чекати довше десяти секунд, поки завантажиться потрібна сторінка. Важливо подати шукану інформацію якомога швидше та простіше. Для цього слід забезпечити зручну структуру сайту, а також швидке завантаження кожної сторінки.
• Ненадійність інформації. Відомостей у мережі інтернет дуже багато, і відвідувачі часто зустрічаються з неправдивими чи неточними даними. Більшу довіру до сайту відвідувач відчуває, коли чітко зазначено джерела інформації і дату її оновлення. Встановленню довіри також сприяє якісний дизайн.
• Ілюстрації повинні бути підібрані вдало і виправдано. Зображення, які не стосуються текстового наповнення, лише відволікають. Слід також використовувати графічні файли малих розмірів для швидшого їх відображення.
• Суцільний текст, який важко переглядати, є дуже непривабливим елементом веб-сторінки. Більшість відвідувачів переглядають веб-сторінки, і тільки якщо інформація є для них цікавою, вони читають її детальніше. Щоб полегшити цей процес, текст має бути оформлений зручним для читання шрифтом, із виділенням важливих моментів, влучними ілюстраціями тощо.
• Навігаційні помилки. На кожній сторінці має чітко зазначатися сайт, якому вона належить, а також міститися гіперпосилання на його головну сторінку. Слід також давати головній сторінці сайту просту і зрозумілу адресу, без використання спеціальних символів.
• Нестандартне оформлення гіперпосилань. Відвідані гіперпосилання повинні відрізнятися кольором від невідвіданих; гіперпосилання мають також бути змістовними, а не фразою на кшталт «клацніть тут».
• Нові вікна браузера не можуть відкриватися без попередньої згоди відвідувача чи хоча б попередження. Винятком є робота з документом, що не є веб-сторінкою (наприклад, із doc- або pdf-файлом).
• Фіксована ширина сторінки чи елементів на ній. Відвідувачі сайту повинні мати змогу змінювати шрифт відповідно до своїх потреб за допомогою настройок браузера. Тому краще визначати розмір шрифту не абсолютними числами, а відносними величинами.
• Недоречне використання форм. З веб-сторінок, що містять форми для заповнення, варто видалити всі запитання, без яких можна обійтись, і не надавати полям статусу обов'язкових без особливої потреби.
• Невдалі заголовки, зокрема однакові для всіх сторінок сайту, надто довгі чи неінформативні створюють несприятливе враження про сайт.
• Ігнорування загальноприйнятих правил, нестандартний інтерфейс. Стабільність є одним із головних принципів практичності сайту. Якщо однакові дії призводять до однакових наслідків, відвідувач відчуває впевненість у своїх діях. Відвідувачі сайту вже знають, чого очікувати, де можна знайти меню та елементи керування, тому не варто їх спантеличувати і змушувати закривати вікно браузера через незрозуміле чи незручне подання інформації.
• Реклама і все, що подібне їй. Рухомі об'єкти привертають увагу людини, не даючи зосередитися на змісті сторінки. Відвідувачі навчилися не помічати банерів із яскравими кольорами, рухомих анімацій чи тексту, а також зазвичай закривати всі вікна, відкриті без їхньої згоди. На жаль, при цьому вони можуть не помітити потрібної інформації, розміщеної у такому елементі.
• Сучасні технології є дуже привабливою можливістю, яка дає змогу дизайнеру повністю реалізувати своє бачення певного сайту. Але варто пам'ятати, що не всі відвідувачі готові чекати навіть кілька секунд для завантаження елемента перед переглядом сторінки, тому обов'язково слід надати можливість його пропустити. Функції відображення деяких інтерактивних елементів можуть бути вимкнені з міркувань безпеки, тому завжди необхідно передбачати версію сайту з мінімальними вимогами до комп'ютера користувача.
• Несумісність із браузерами. Різні браузери можуть по-різному відображати одні й ті самі веб-сторінки. Це слід враховувати і тестувати свій сайт у різних браузерах перед тим, як розміщувати його в інтернеті. Слід враховувати особливі потреби відвідувачів, зокрема з поганим зором — робити адекватні виділення тегами заголовків, використовувати альтернативні описи зображень тощо.
• Гіперпосилання зі сторінки на саму себе є малофункціональними.