19 жовтня 2009

Оригінал: More Web Design Trends For 2009
Автор: Smashing Magazine
Переклад: Максим Додчук

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15. Акварель

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

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

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

19. Бірки

20. Цінники

21. Стрічки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Часто в цих цілях дизайнери вдаються до правила ШНЕЙДЕРМАН – «спершу, визнач загальну картинку, а потім обговори її подробиці» – насамперед пропонуючи користувачеві короткий огляд можливостей сайту, а подробиці надаючи щодо подальшого вимогу (яскравим прикладом подібного підходу можна назвати Mozilla Labs).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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