Когда стоит использовать разделение экрана?

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

Помимо этих преимуществ, плюсы разделенного экрана распространяются далеко за пределы визуальной эстетики — например, они особенно эффективны для лэндингов с двумя альтернативными возможностями выбора.

Вот самые распространенные примеры такого выбора:

• Вход и форма регистрации
• Платные и бесплатные подписки
• Продукты, которые идут в альтернативных цветовых гаммах

Крутые примеры дизайна с разделением экрана

Для начала давайте рассмотрим несколько потрясающих примеров, где используется разделенный дизайн, и обсудим, почему они так хорошо работают. Макеты с разделенным экраном можно использовать по-разному, поэтому преимущества варьируются от сайта к сайту в зависимости от цели, преследуемой сайтом.

Cam Strobel

Далеко не у каждого сайта должен быть доступ ко всей горизонтальной области просмотра. В ультра-минимальных веб-дизайнах, таких как сайт Cam Ströbel, разделение экрана на две вертикальные колонки означает, что все содержание сайта может быть выведено на экран единовременно, то есть у пользователя вообще отпадает необходимость в скролле.

Studio Meta

Большой хэдер на всю ширину экрана все еще распространен — это серьезно укоренившаяся тенденция, причем, вполне справедливая. Однако, в таком случае редко имеется возможность использовать крутые картинки, в том числе, из-за текстового контента. Разделенный экран эту проблему решает, и сайт Studio Meta показывает, как именно.

Когда изображение находится рядом с контентом, мы можем использовать более красочный и смелый визуал и вкладывать в него более глубокий смысл, потому что в этом случае не вынуждены каким-либо образом заслонять и накладывать их друг на друга.

Bose

Сплит-экраны не обязательно должны состоять из двух компонентов в соотношении 50:50. Bose идет дальше и делит экран на пять частей, хотя, как вы заметили, их сайт даже не пытается адаптироваться к небольшим экранам. Вне зависимости от того, насколько красиво это выглядит, адаптивный дизайн — это то, что вы должны всегда принимать во внимание, а ведь иногда довольно сложно адаптировать макет с разделеннным экраном под более мелкие устройства.

И все равно, это наш любимый пример веб-дизайна с разделенным экраном, т.к. на Bose каждый элемент очень грамотно выделен с помощью уникальной персонификации — они используют разные цветовые гаммы. В комбинации с резкими диагональными разрывами этот дизайн поистине ласкает взгляд.

Fillet

Fillet - еще один замечательный пример того, как сплит-дизайн может придать индивидуальности компонентам одинаковой важности. Плюс ко всему, все, что тут есть, это три вертикальные колонны, причем практически без текстового содержания (см. на скриншот ниже), поэтому сайт идеально правильно отображается на всех мобильных устройствах.

Три вещи, которые необходимо помнить, разрабатывая сплит-скрин макет

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

1. Мобильная совместимость

У разделенного экрана есть один недостаток — они не очень дружелюбно отображаются на мобильных устройствах. Трудно заставить их реагировать и адаптироваться к небольшим экранам (за исключением планшетов с альбомным отображением) — в таком случае вы почти наверняка должны сократить элементы до более скромных размеров, а это потребует при кодинге больше внимания, чем обычно. Поэтому для начала убедитесь, что вы готовы принять эти условия.

Примечание: сайт Bose, рассмотренный выше, разделен на пять секций вместо двух, и он вообще не адаптирован к маленьким экранам.

2. Не разделяйте экран без важной причины

Сначала нужно хорошенько подумать, нуждается ли ваш сайт в разделении экрана. Конечно, это очень модно и действительно выглядит весьма круто, но это еще не достаточная причина. Итак, задайте себе следующие вопросы:

• Стоит ли это дополнительного труда и затрат?
• Является ли ваша аудитория достаточно современной, чтобы оценить такой дизайн или он будет их путать?
• Достаточно ли есть пространства для осуществления макета?
• Не пострадаете ли вы от разделения фокусировки пользователя на две части или, может, безопаснее будет, чтбы юзер концентрировался на чем-то одном?

Если ответ хотя бы на один выше перечисленный вопрос «нет», вам стоит отказаться от затеи.

3. Используйте пространство с умом

Сайты обычно отображаются по горизонтали, но при использовании макета с разделением экрана каждый компонент становится на главной странице вертикальным элементом. Это делает необходимым искать новые пути отображения контента и изображений, а значит, шансы сделать необычный креативный проект увеличиваются. Итак, вперед!

Вывод

Разделенный экран — очень привлекательная разновидность веб-дизайна, и, как мы поняли из примеров, выгода от использования этого тренда различается в зависимости от того, на что нацелен сайт. Разделенный экран может быть использован для удобного отображения разных по контенту столбцов или по гораздо более простой причине — чтобы держать всю важную информацию наверху страницы (это отлично работает для сайтов, которым не требуется вся ширина окна).

Если вы никогда прежде не разрабатывали макет с разделением экрана, что же останавливает вас сейчас? Что это для вас: визуальная эстетика или возможность поэкспериментировать с новыми способами отображения контента?

Автор - Daniel Schwarz 

Перевод — Дежурка

Смотрите также:

• 6 практических советов для креативной съемки на смартфон 
• Что означает простота в UX дизайне? 
• Шесть способов сломать творческий блок