Композиція у веб-дизайні, або про що мовчать підручники з Фотошопу

1

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

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

Ох вже цей мозок…

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

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

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

Композиція — це певне поєднання елементів сайту

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

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

Вибираємо правильні кольору

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

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

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

1. Додаткові кольори. Всі протилежності на колірному колі створюють сильний контраст, тому їх використовувати можна, але тільки обережно.

2. Аналогові кольору. Такі «сусіди» на колірному колі не мають сильного контрасту.

3. Тріада. Практично безпрограшна комбінація — це рівнобедрений трикутник.

4. Тетрада. Дві пари додаткових квітів слід застосовувати дуже обережно, щоб не домогтися хаосу в теплохолодности.

Правило третин — що куди ставити?

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

Спочатку хотів для прикладу показати вам картину «Вітрувіанська людина», але через його надто відвертого вбрання, точніше, його відсутність, вирішив, що не буду. Раптом, тут діти статтю читають :) Тому подивіться на Мадонну:

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

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

Розчищаємо простір

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

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

Управляйте поглядом користувача

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

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

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

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

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

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