Візуальна ієрархія
Всі основні тренди сучасного веб-дизайну, такі як використання великих фонових зображень, виразна типографіка, використання плоских елементів і відмова від скевоморфізм, свідчать про те, що в інтернеті настає нова епоха. Незважаючи на те, що роль текстового контенту залишається такою ж значущою, поява мобільних пристроїв і доступу до широкосмугового інтернету зробили можливим використання в дизайні великої кількості ілюстрацій і графічних елементів. Сучасний користувач вже не хоче просто читати - йому потрібні картинки. І чим більше, тим краще. Веб-дизайнери повинні враховувати цю тенденцію і розробляти сайти, використовуючи візуальну ієрархію блоків.
Незалежно від тематики, будь-який сайт розповідає історію. І якщо ця історія зрозуміла користувачеві - то це хороший дизайн. Хороший дизайн подібний до розповіді - він має початок, середину і кінець. У випадку з сайтом цю історію можна зробити більш зрозумілою і цікавою, використовуючи принципи візуальної ієрархії.
Давайте розглянемо простий приклад. Погляньте на зображення нижче.
Яку з двох представлених фігур ви помітили першої? Швидше за все, це була фігура, яка розташована зліва. Велика зірка відразу кидається в очі і тільки потім ви звертаєте увагу на маленьку зірочку. Це і є візуальна ієрархія. Продовжимо.
Ймовірно, спочатку ви поглянули на помаранчеву зірку, а потім подивилися на велику чорну. І тільки після цього ваш погляд перемістився на найменшу фігуру. Помаранчевий колір домінує над чорним і таким нехитрим способом, використовуючи візуальну ієрархію, можна запрограмувати поведінку користувача.
Все стає набагато складніше, коли доводиться працювати над дизайном веб-сторінки, де є безліч форм, текстових боків, картинок, кнопок і так далі. Однак і тут все можна успішно реалізувати за допомогою візуальної ієрархії.
Відео: Візуальна ієрархія в Радянській армії. foto history
Ось простий приклад. Перед нами сторінка блогу. Тут немає безлічі елементів - тільки текст і дві кнопки. Яким чином тут можна «розповісти історію»?
Якщо подивитися на схему, представлену справа, то стає ясно, як це було зроблено. Коли користувач потрапляє на цю сторінку, спочатку він звертає увагу на заголовок - він набраний крупніше, ніж основний текст і виділений кольором. Потім погляд відвідувача зміщується до другого об`єкту в ієрархії - цитаті. Цитата також набрана крупно, але розмір шрифту менше. Крім того, даний блок виділяє негативний простір зверху і знизу, роблячи його більш помітним.
І лише потім користувач переходить до читання основного тексту. Це проста «історія», але ось приклад складніше.
Це блог Аманди Мінінгер. Що першим кидається в очі? Очевидно, що на обличчя в центрі. Потім погляд зміщується до заголовку, набраному тонким, але помітним завдяки контрасту шрифтом, потім до меню і в ув`язненні до текстового блоку. На схемі добре видно, як відвідувач переглядає сторінку. За допомогою візуальної ієрархії дизайнеру вдалося розповісти досить складну історію.
А ось головна сторінка новинного сайту Lenta.ru. Перед дизайнерами стояло неймовірно важке завдання, проте вони з нею успішно впоралися, використовуючи принципи візуальної ієрархії. Спочатку користувач бачить логотип сайту, а потім його погляд переміщається на головні новини. Заголовки, анонси, останні новини набрані різними шрифтами, що дозволило структурувати інформацію. Бічне меню зроблено контрастним, тому, коли відвідувач сайту побіжно перегляне останні новини, його погляд цілком природно зміститься вліво, туди, де розташовані основні рубрики. Так як новини на сайті оновлюються дуже часто, час публікації виділено червоним - так помітніше.
Незважаючи на те, що багато користувачів в багнети взяли редизайн даного сайту, оновлена Lenta виглядає набагато краще первісної версії, де було важкувато розібратися в навігації. Звичайно, у новій «Стрічки» дуже міцна і продумана сітка, але від неї не було б ніякого толку, якби дизайнери не використали візуальну ієрархію.
Використовуючи принципи візуальної ієрархії, можна істотно спростити користувачам взаємодію з сайтом. При цьому важливо пам`ятати, що ієрархія - це не тільки контрастні кольори і шрифти різних розмірів - дуже важливо вміти правильно використовувати вільний (негативний) простір.
Відео: Як працювати з текстом в Adobe Photoshop
Наприклад, як на головній сторінці сайту Evernote. Які б закарлюки газети не передплачував погляд користувача, він неминуче зупиниться на кнопці «Увійдіть».
