ТОП-10 основних правил композиції в веб-дизайні

Акцентируйте внимание на герое в кадре

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

У прикладі бренд OMUT - виробництво прикрас для трансформації образу. OMUT допомагає відчути себе впевненіше, коли це потрібно найбільше, він може служити і бронею, і натхненням 🖤🔗⚔️ Саме про це кульмінація про почуття дівчини в першому екрані.

Підтримайте історію другорядною графікою

Для створення другорядної графіки важливо розділити історію на три нитки:

• Функціональну користь висловимо графічно через екрани інтерфейсу
• Соціальну користь висловимо через орбіти розширюється всесвіту контактів
• Емоційну користь обіграємо перемиканням з нейтрального на заряджений жовтий, підтримаємо колажем руки-допомоги супергероя і за допомогою впевненого шрифту Gotham Pro.

Застосуйте контраст і нюанс

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

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

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

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

Створіть точку фокусування

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

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

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

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

Покажіть дію в розпал подій на сцені виходячи з історії

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

Забезпечте впізнавання і здивування з допомогою ритму і графічної рими

• Рима - це співзвуччя графічних об’єктів - основа фірмового стилю. Саме завдяки римі ми бачимо, що перед нами об’єкти з однієї всесвіту.

• Ритм - це чергування акцентів і пауз. Ритм допомагає нам кожен раз переживати почуття «впізнавання» і слідом настає відчуття насолоди - так працює наш мозок.

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

Залучіть увагу до головного за допомогою вільного простору

Білий простір (або контрформа) - це область між елементами дизайну. Це також простір всередині самих елементів, включаючи проміжки між друкарськими знаками.

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

Організуйте простір за допомогою модульної сітки

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

Дизайн як запам’ятовується композиція. Об’єкти дизайну як ноти, а сітка і модуль - лінійки і нотний стан.

Перевірте смисли через гештальт-принципи

Ідея гештальта полягає в тому, що «ціле відрізняється від суми його частин». Це означає, що при об’єднанні частин утворюється ціле, яке має новий вимір існування - нове значення. Принципи гештальту: близькість, подібність, завершеність, безперервність і фігура-фон. За допомогою принципів гештальту ви можете зробити ваше візуальне повідомлення багатшими по сенсів - тут і криється простір для творчості.