3.2. Класифікація найпоширеніших прийомів та засобів у дизайні веб-сайтів

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

Розглянемо деякі з тенденцій, які набули популярності в кінці 2010 – на початку 2011 р.р.

1. Відмова від готових макетів

2. Односторінковий макет

3. Багатостовпцеві макети

4. Насиченість ілюстраціями і високоякісною графікою

5. Великий білий простір

6. Елементи оформлення соціальних мереж

7. «Розмовляюча» навігація

8. Динамічні вкладки

9. Збільшені форми пошуку

10. Іконки розділів

11. Іконки авторів

12. Іконки і графічні підказки

13. Списки теґів (замість хмарки теґів)

14. Ілюстрації в постах для блоґів

15. Акварель

16. Написи від руки

17. Стиль ретро

18. Природничі текстури і фон, що складається з фото-знімків

19. Бірки

20. Цінники

21. Стрічки

Розглянемо детальніше найяскравіші із прийомів:

1. Відмова від стандартних макетів

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

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

2. Односторінковий макет

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

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

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

3. Багатостовпцеві макети

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

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

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

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

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

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

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

4. Насиченість ілюстраціями і високоякісної графікою

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

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

5. Більше білого простору

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

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

6. Елементи «соціального» дизайну

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

Соціальні іконки часто розміщуються в правому верхньому кутку сторінки або ж в кінці статті. Соціальні блоки зазвичай знаходяться в кінці посту і іноді розміщуються перед списком статей на цю ж тему. Часто можна спостерігати, що блоґ або портфоліо якимось чином поєднані з функціоналом Twitter, Flickr і Last.FM.

7. «Розмовляюча» навігація

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

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

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

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

8. Динамічні вкладки

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