Лекції з дисципліни "Веб-дизайн"

Лекція 10. Графічний  дизайн

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

Основні завдання для створення графічного макету сайту

1.Планування.

2.Розробка графічної концепції.

3.Вибір колірної схеми та художнього стилю.

4.Графічний макет.

a.Модульна сітка.

b.Структура сторінки.

c.Позиціювання і ширина сторінки.

5.Юзабіліті.

a.Продуманий інтерактив (навігація, кнопки, посилання тощо).

b.Типографіка.

6.Впорядкування вихідних файлів макета.

1. Планування

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

2. Розробка графічної концепції

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

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

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

3. Вибір колірної схеми для сайту

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

Колірна схема має вибиратися на підставі:

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

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

Колірна палітра

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

Найбільш поширеними кольорами у веб-дизайні є:

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

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

•Жовтий - колір радості, щастя, сонця, дружби. Серед негативних асоціацій можна виділити боязкість і хворобу. Не варто використовувати дуже темний жовтий колір.

•Оранжевий - символізує теплоту і енергію. Хороший колір для акцентування уваги.

•Червоний - небезпека, кров, любов і тепло. Червоний колір добре привертає увагу.

•Фіолетовий - таємничий, творчий колір. Зазвичай, використовується для надання сайту особливої витонченості.

•Рожевий - найбільш жіночний колір. Асоціюється з дітьми і дитинством.

•Чорний - символізує силу, темноту і зло. Часто використовується як фоновий колір.

•Білий - чистий, добрий колір. Може асоціюватися з байдужістю і зимою.

Колірні комбінації

Спеціально для дизайнерів створено багато онлайн інструментів, які дозволяють правильно підібрати кольори для дизайну сайту, наприклад продукт від компанії Adobe, якій втілено в новий пакет Adobe CS5 та представлено в Інтернеті на офіційному сайті компанії http://kuler.adobe.com/#create/fromacolor. 

4. Створення графічного макету

Макет сторінки

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

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

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

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

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

За сталими традиціями інформація розподіляється наступним чином:

В верхній частині сторінки (шапка, хедер, header) містяться:

Логотип.Заголовок. Слоган.Телефон. Вибір мовної версії.

Меню навігації (по сайту).

В середній (основній) частині сторінки:

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

В нижній частині сторінки  (підвал, футер, footer):

Додаткове меню навігації (по сайту, по розділах сайту).

Копірайти.Адреси, телефони.Лічильники і банери.

Модульна сітка

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

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

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

Одноколонна структура:

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

Типова схема одноколонної модульної сітки.

Як правило, спостерігається чотири основні блоки:

•Заголовок сторінки.

•Набір посилань на інші сторінки сайту (навігація).

•Власне сам текст.

•Контактна інформація в нижній частині сторінки.

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

Двохколонна структура

Це один з найпоширеніших варіантів при використанні на сайтах.

За такою модульною сіткою, зазвичай, лишаються незмінними верхній та нижній блоки сторінки, а основний (середній) блок поділяється на дві колонки, що відводяться для:

•Основного тексту.

•Навігації чи іншої корисної інформації.

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

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

Трьохколонна структура

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

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

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

Для прикладу розглянемо головну сторінку певного сайту.

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

Тут важко розібратися, скільки колонок містить макет, оскільки колонки можуть об'єднуватися, а також містити не лише суцільний текст, але і графічні вставки.

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

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

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

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

Позиціювання сторінки у вікні браузера

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

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

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

Існують певні особливості, які варто враховувати при верстанні сторінки.

Ширина документа

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

Фіксований дизайн

«Фіксованим» називають дизайн, коли ширина інформативної частини сторінки є визначеної величини в пікселах і не залежить від роздільної здатності монітора. Найчастіше при розробці фіксованого дизайну орієнтуються на найменшу роздільну здатність сучасних моніторів. Самі перші сайти орієнтувалися на роздільну здатність 640х480, згодом  800х600, але тепер переважна частина моніторів мають екрани з мінімальною роздільною здатністю 1024х768 пікселів, хоча, зазвичай, користувачі можуть обирати за своїми потребами значно більші показники.

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

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

Несиметрична сторінка, що виходить в результаті її зсуву в ліву частину, додає сайту оригінальності і незвичності.

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

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

Еластичний дизайн

«Еластичним» називають дизайн, коли сторінка розгортається на весь екран по ширині незалежно від встановленої роздільної здатності монітора. Наприклад, і при роздільній здатності 1024*748 і при 1600*1200 сторінка займатиме всю ширину екрану.

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

Переваги.

•Ефективно використовується вся площа екрану. Сторінка розтягується по всій ширині екрану, не лишається невикористаних порожніх полів. Сучасні механізми CSS дозволяють встановити максимальну і мінімальну ширину сайту.

•Дуже вдалий вибір для сайту, що містить багато інформації.

Недоліки.

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

•Потребує ретельного тестування для адекватного відображення при різних роздільних здатностях і в різних браузерах.

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

Комбінований дизайн

Існує так званий «псевдо-еластичний» дизайн: ширина сторінки є фіксованою, але візуально сторінка як би заповнює весь екран.

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

Який дизайн застосувати

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

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

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

Висота документа

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

А ось переміщення по горизонталі відбувається не так зручно, тому, горизонтальної смуги прокрутки бути не повинно. Отже, сторінка повинна вписуватися у вікно браузера за шириною, але висота може змінюватися в дуже широкому діапазоні.

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

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

Особливості макету для подальшої верстки

•Врахування масштабованості:   як буде виглядати сторінка при різних розмірах вікна.

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

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

5. Юзабіліті

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

Навігація по сайту

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

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

Значна зміна елементів навігації при переході від однієї сторінки сайту до наступної дезорієнтує користувача і відволікає його увагу.

Посилання на головну сторінку

Посилання до головної сторінки має бути присутнім на всіх сторінках сайту. Загальноприйнятим правилом є додавання до логотипу сайту посилання до головної сторінки.

Меню (навігаційні панелі)

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

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

Головне меню сайту

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

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

Додаткове меню сайту

Як правило, має ієрархічну структуру і буває 3-х видів:

•Випадне меню. Автоматично з’являється при наведенні вказівника на пункт меню.

•Меню, що розгортається. При натисненні на пункті меню розкривається перелік.

•Розкрите меню. Статичне меню, де відразу відображено всі пункти, часто має деревовидну структуру

Меню ієрархії документів

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

Головна -> Розділ -> Підрозділ -> Назва поточної сторінки

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

Меню послідовної навігації

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

попередня сторінка * зміст * наступна сторінка

Іноді замість послідовної навігації застосовують пряму навігацію:

Частина 1 | Частина 2 | Частина 3 | Частина 4 | Частина 5 | Частина 6

Гіперпосилання

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

За об’єктом, на якій посилаються, розрізняють:

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

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

•Непрацююче (зіпсоване) гіперпосилання вказує на недоступний або неіснуючий об’єкт.

За виконанням гіперпосилання бувають:

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

•Графічні гіперпосилання (кнопки) – це картинка, якій призначено адресу іншого об’єкта.

При наведенні вказівника мишки на текстове чи графічне гіперпосилання, воно змінює свій вигляд. За замовченням - це іконка руки  , яка є стандартною і звичною для всіх користувачів Інтернету. Іноді, заради новизни чи в плані експерименту дизайнери можуть змінити стандартне зображення на інше і збентежити відвідувачів сайту. Чи варто наголошувати, що подібних «експериментів» слід уникати.

Інтерактивність гіперпосилань

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

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

•Гіперпосилання, що досі не використовувалося.

•Гіперпосилання, на яке наведено вказівник мишки.

•Активне гіперпосилання в момент натискання на ньому.

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

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

Вигляд кнопки після завантаження сторінки.

Вигляд кнопки при наведенні вказівника мишки.

Вигляд кнопки при натисненні вказівником мишки.

Відповідно, для такої інтерактивної кнопки дизайнер має підготувати відповідно 3 різні картинки.

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

Типографіка

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

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

Основні параметри розміщення тексту та типові помилки:

Шрифт. Існує два типи шрифтів: із зарубками (serif) і без зарубок (sans serif).

SERIF                 SANS SERIF

В Інтернеті використовується шрифт без зарубок, шрифти класу serif підходять краще для друкованої продукції. Це пояснюється тим, що з екрану читати складніше і характер сприйняття не дозволяє застосовувати «чіпляння очей» за зарубки. Стандартними і популярними для основного тексту є шрифти Verdana, Arial та Tahoma, в західному сегменті можна зустріти шрифт Georgia із зарубками. Розміщення на сайті тексту в стандартному шрифті Times New Roman виглядає убого і нагадує саморобні безкоштовні сайти.

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

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

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

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

Розмір шрифту. Розмір шрифту для основного тексту повинен бути в межах від 12 до 16 пікселів, великий шрифт дратує, дрібний є не читабельним. Для заголовків таких обмежень немає, і якщо дизайн допускає – шрифт може бути доволі великого розміру

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

Абзаци. Тут немає якихось жорстких обмежень за розміром і кількістю, але завжди хочеться зробити текст не просто інформативним, але і красивим.

Відносно довжини абзацу, яка буде оптимальною для швидкості читання, існує припущення, що людське око в певний момент часу може сфокусуватися приблизно на 7,5 см рядка тексту, вважається, що довжина в 9 або 10 слів збільшує швидкість читання і сприйняття матеріалу. За висотою бажано робити абзаци приблизно однакового розміру, по 4-7 рядків. Занадто великі абзаци погано сприймаються, занадто короткі виглядають «брудно», тому варто самотні рядки варто об'єднувати до одного абзацу.

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

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

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

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

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

6. Порядок у вихідному макеті

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

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

Поради з розробки ефективного дизайну

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

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

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

4.Відвідувачі не люблять великі блоки тексту. Дослідження підтверджують, що більшість відвідувачів в Інтернеті уникають великих блоків текстової інформації, незважаючи на її оригінальність і корисність. Тому, важливо розбивати текст на невеликі параграфи, використовувати маркіровані чи нумеровані списки.

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

6.Читачі часто переглядають нижні частини сторінок. Тому, це можна вигідно використати і розмістити там хмару тегів, додаткове меню, карту доїзду.

7.Незвичні ефекти і нестандартні шрифти ігноруються. Підсвідомо відвідувачі приймають такі елементи за рекламу. Згідно досліджень, відвідувачам важко відшукати потрібну інформацію в яскравому тексті, і вони його ігнорують. Слід не перенавантажувати дизайн сайту різними незвичайними ефектами.

8.Реклама у верхній і лівій ділянках сайту є найбільш ефективною. Реклама має бути ненастирливою і не порушувати дизайн.

Модні тенденції

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

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

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