10 цікавих лейаутів для ваших проєктів

Додайте глибину за допомогою ефекту паралакса

Паралаксне прокручування надає лейауту додаткову глибину. Фон сайту та об'єкти на передньому плані рухаються з різною швидкістю, створюючи ефект псевдо-3D. Якщо застосувати цей ефект делікатно, без надмірного навантаження користувачів інтенсивним рухом, графіка, зображення та текст плавно нашаровуються один на одного, роблячи інтерфейс більш динамічним і створюючи потрібну атмосферу. Ефект паралакса заохочує людей прокручувати сторінку, щоб дізнатися, що ще підготував дизайнер.

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

Використовуйте накладання елементів

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

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

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

Такий підхід допомагає вмістити більше інформації в обмеженому просторі. На сайті чітко сформульовані переваги послуг у розділі "5 вагомих причин, чому вам потрібно найняти спеціаліста зі складання резюме". Користувачі можуть ознайомитися з особливостями послуг Slay My Resume, насолоджуючись приємною кольоровою палітрою і зрозумілими заголовками, а також зв’язатися з власником сайту через контактну форму в нижній частині головної сторінки.

Розбийте контент на фрагменти за допомогою зміщених заголовків, підзаголовків та колонок

Іноді менше – це більше. Велика кількість складних анімацій та декоративних елементів може перетворити дизайн на безлад. Часто зміщені елементи та колонки – це все, що потрібно, щоб привернути увагу та передати індивідуальність бренду.

Дизайнери повинні знайти баланс між контентом та візуалом. Елементи можуть бути зміщені або накладені один на одного, але вони повинні залишатися логічно пов'язаними, щоб спрямовувати відвідувачів інтерфейсом.

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

Горизонтальний лейаут

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

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

Розділений екран

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

Компанія з продажу продуктових наборів, Ono, використовує розділений екран з анімацією прокручування для створення динамічного досвіду. Цей підхід дозволяє побудувати чіткий шлях до кінцевого заклику до дії (CTA) в нижній частині обох колонок: відвідувачі сайту продовжують прокручувати сторінку, щоб дочитати текст, розміщений праворуч. Під час прокручування зліва з'являються нові візуальні елементи, які додають різноманітності та не дають читачам нудьгувати.

Це ефективний спосіб поєднати пов'язані блоки контенту. Замість однієї завантаженої вебсторінки вся інформація розділяється на дві частини.

Великі літери

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

На сайті цифрового агентства Okalpha великий заголовок і стрілка вниз миттєво спонукають користувачів прокрутити сторінку, щоб дізнатися більше. Вступний текст "Hey. We're ok." створює враження, що ви вже поцікавились про їх справи. Коли відвідувачі прокручують сторінку, вони бачать короткий опис компанії та її діяльності.

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

Горизонтальне прокручування

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

Дизайнер Альфредо Брікколо успішно застосував бічне прокручування для демонстрації портфоліо на сайті Krasa Architecture, Light & Design.

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

На сайті Krasa Architecture цей лейаут дозволяє відвідувачам ознайомитися з роботами компанії. Ще одна цікава деталь — чорно-білі обкладинки проєктів стають кольоровими при наведенні курсора.

Вбудовані слайдери

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

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

Refokus Slider Generator – це інструмент, який дозволяє створювати кастомні слайдери зі статичними елементами без необхідності писати код. Такий підхід є особливо корисним для сайтів електронної комерції, де можна демонструвати продукти без перенаправлення користувачів на інші сторінки.

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

Примітка: У колекції Refokus Tools ви можете знайти не лише слайдери, але й інші готові компоненти та рішення для Webflow.

CSS-сітка

CSS-grid – це технологія, яка дозволяє вирівнювати елементи лейауту по горизонтальній та вертикальній осях. Приклад - цей смайлик, зроблений на Webflow.

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

Зберігається популярність бруталізму

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

Цей сайт-портфоліо дизайнера Джошуа Гарсіа з акордеоном проєктів є відмінним прикладом бруталізму.

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

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