Композиційні засоби зручності для вебсайтів

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

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

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

На щастя, такі принципи існують, і цей матеріал ми присвятили саме їм. Перша група принципів — це Закони композиції.

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

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

Закони композиції у вебдизайні

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

Всього їх три:

  • Закон цілісності.
  • Закон рівноваги.
  • Закон супідрядності (або закон ієрархії).

Розгляньмо, як ці закони можна застосовувати в царині вебдизайну!

Закон цілісності

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

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

У вебдизайні, відчуття візуальної цілісності забезпечує ціла низка складових:

  • Гармонійний підбір шрифтів.

  • Гармонійні колірні палітри.

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

  • Пропорційність елементів та відступів між ними.

  • Тощо.

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

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

Закон рівноваги

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

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

Спробуємо пояснити на прикладі:

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

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

Закон супідрядності (ієрархії)

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

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

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

  • Задній план (на ньому розташоване тло сайту)
  • Середній план (на ньому розташований зміст)
  • Передній план (на ньому розташовані всі елементи, що знаходяться перед змістом — рекламні банери, модальні вікна, закріплені меню).

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

Закони гештальту в вебдизайні

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

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

Наприклад оцей: «Вбдзйн».

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

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

  • Закон замкнутості
  • Закон близькості
  • Закон схожості
  • Закон симетричності
  • Закон безперервності
  • Закон спільної долі
  • Закон попереднього досвіду
  • Закон простоти

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

Закон замкнутості

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

Наслідків у цього закону для дизайнерів декілька:

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

  2. Будь-які текстові рядки сприймаються як прямокутники.

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

Закон близькості

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

Наслідків у цього закону декілька:

  1. Використовуючи поля елементів (зовнішніх відступів), ви можете формувати сприйняття груп.

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

Закон схожості

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

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

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

Закон симетричності

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

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

Закон безперервності

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

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

Закон спільної долі

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

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

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

Закон попереднього досвіду

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

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

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

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

Закон простоти

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

Ось декілька прикладів того, як ви можете спрощувати ваш дизайн:

  1. Зменшуйте кількість декоративних елементів.
  2. Не використовуйте забагато шрифтів в межах однієї сторінки. Часто двох гарнітур цілком достатньо.
  3. Стримані палітри сприймаються ліпше ніж строкаті поєднання кольорів.
  4. Намагайтесь оптимізувати кількість елементів в одному рядку до 3-5. Часто замовники, описуючи якості свого продукту, складають списки з 10 і навіть 15 якостей. Але людське сприйняття так влаштоване, що більшість із нас просто не здатна тримати в голові подібні масиви. Відверто, не всі якості є однаково важливими. Тож краще перелічити лише ті, які дійсно є перевагами, а решту — приховати.
  5. Перед тим, як завершити макет, спробуйте подивитись на нього і відповісти на питання: що з нього можна прибрати.

Спрощуйте все, що можна спростити.

Навігацію:

Форми:

Відповідно до закону простоти 3 краще ніж 4. 4 ліпше ніж 5. І в контексті змісту, і в контексті оформлення.

·
4070
·
2
·
goodsuper 58
Наступна стаття
Тексти як інструмент забезпечення зручності вебсайтів
1402
Головна