Від автора: макети сайту з поділом екрана – повноекранні веб-компоненти, розділені на дві рівних вертикальних колонки. Тим не менш, незважаючи на високу популярність, якщо немає логічної причини використання даного типу макету, то це може сильно вплинути на користувальницький досвід. І при належному виконанні такі макети можуть надати користувачам надзвичайний досвід.
Навіщо використовувати макет з поділом екрана?
Компоненти з поділом екрана найкращим чином поєднуються з мінімалістичним веб-дизайном, тому що великі порожні простору в поєднанні з масивними вертикальними колонками максимально фокусують увагу користувача на важливих областях екрану.
Крім описаних плюсів переваги макетів з поділом екрана виходять далеко за рамки візуальної естетики; такі макети особливо ефективні на лендінгем сторінках, на яких показано два варіанти. Серед очевидних прикладів використання:
Форми авторизації і реєстрації
Платна і безкоштовна підписка
Товари з вибором різних кольорів
Хороші приклади компонентів з поділом екрана
Спочатку давайте розберемо незвичайні приклади і обговоримо, чому ж вони так добре працюють. Роздільні екрани можна застосовувати в самих різних ситуаціях, а їх переваги змінюються від сайту до сайту, все залежить від поставлених сайтом завдань.
Cam Strobel
Не кожен дизайн сайту займає горизонтальне простір. З ультраминималистичным дизайном зразок сайту Cam Strobe поділ на дві колонки дозволяє розмістити весь контент у видимій частині екрана, тим самим позбавляючи користувача від необхідності прокручувати сторінку.
Studio Meta
В мережі досі досить популярні дизайни з хедерами на всю ширину екрану – великий тренд і заслужено. Однак рідко, але все ж іноді доводиться використовувати насичену графіком через поганий читаності тексту (нам часто доводиться розмивати зображення або додавати кольоровий перекриває шар). Макет з поділом екрана вирішує дану проблему, у прикладі Studio Meta показано як.
Розташувавши зображення і контент поруч один з одним, але в різних колонках, ми можемо використовувати кольорові й сміливі зображення з глибоким змістом, так як нам більше не потрібно як-небудь їх загороджувати.
Bose
Поділ екрана не обов’язково має бути точно 50/50 — Bose по максимуму використовує це. Проте я помітила, що веб-сайт навіть не намагається адаптуватися під менші екрани. Незважаючи на всю красу, досить складно пристосувати макети з поділом екрана під маленькі екрани. Однак адаптивний дизайн враховувати все ж потрібно.
Серед інших це мій улюблений приклад, так як макет Bose спроектований так, що кожен елемент виділяється окремим кольором. А в поєднанні з різкими похилими формами цей веб-сайт моментально привертає мою увагу.
Fillet – ще один хороший приклад того, як макет з поділом екрана може привнести індивідуальності рівним за значенням компонентів. Плюс за вертикальних колонок і майже повної відсутності контенту (в колонках подано зображення) даний макет коректно відображається на мобільних пристроях.
3 важливі моменти при проектуванні макета з поділом екрана
Якщо ви вирішили використовувати компонент з поділом екрана у своєму веб-сайті, то при проектуванні вам потрібно пам’ятати про трьох радах.
1. Сумісність з мобільними пристроями
У макетів з поділом екрана є один істотний недолік: вони не дружать з мобільними пристроями. Вкрай складно зробити їх адаптивними і змусити підлаштовуватися під маленькі екрани (виняток становлять планшети в альбомній орієнтації) – майже напевно вам доведеться використовувати щось більш скромне, що зажадає додаткового коду. Так що краще використовувати техніку mobile-first.
Замітка: Приклад Bose вище був розділений не на дві частини, а на п’ять, проте він зовсім не підлаштовувався під маленькі екрани.
2. Не розділяйте екран без видимих причин
Насамперед необхідно вирішити, чи потрібен вашому сайту компонент з поділом екрана взагалі. Звичайно, даний дизайн зараз «на хвилі», та й виглядає він чудово, але це не ті причини, через які варто його реалізовувати.
Потрібні додаткові зміни, щоб зробити компонент адаптивним?
Ваші користувачі стежать за трендами, щоб вони могли оцінити ваш дизайн, чи це тільки заплутає їх?
Вистачить простору для того, щоб макет нормально відображався?
Чи потрібно вам розділяти увагу користувача на дві частини, або це тільки нашкодить вам?
Якщо хоч один з відповідей буде «ні», тоді вам не варто використовувати цей макет.
3. Використовуйте порожній простір
Веб-сайти на десктопному ПК відображаються горизонтально, але з поділом екрана кожен компонент стає чимось на зразок областей перегляду з вертикальною орієнтацією всередині основної області.
А значить, існує безліч недосліджених способів відображення контенту – можливість поекспериментувати. Не бійтеся бути креативними!
Висновок
Макети з поділом екрана досить привабливі, і як ми помітили з прикладів, їх плюси змінюються в залежності від цілей сайту; з їх допомогою можна показувати різні елементи один навпроти одного, або макети можна використовувати для більш простих речей: для того, щоб розташувати все в видимої частини екрану на сайтах з мінімалістичним дизайном, на яких не важлива вся ширина області перегляду.
Якщо ви ще не пробували створити дизайн з поділом екрана, що приваблює вас у цій ідеї? Візуальна естетика або можливість експериментувати з новими способами відображення контенту? Пишіть про це в коментарях!
