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