Блог

Как создать отличный дизайн с разделенным пополам макетом?

Последнее время все большую популярность в дизайне сайтов набирает прием разделения экрана.

Как создать отличный дизайн с разделенным пополам макетом?

Действительно ли он настолько хорош и всегда ли уместен? Daniel Schwarz рассказывает о преимуществах и недостатках макетов с разделенным экраном, подкрепляя свои мысли лучшими примерами реализации данного решения.

Разделенный экран – это вид дизайна сайтов, подразумевающий разделение экрана на 2 (или больше) колонки по вертикали одинаковых размеров. При этом Daniel Schwarz сразу подчеркивает, что, невзирая на высокую популярность подобных макетов, иногда такой дизайн приносит лишь вред. Особенно это актуально, когда нет особой необходимости разделять экран. В то же время, такой дизайн очень нравится пользователям, но при условии качественного выполнения с четким определением и соблюдением целей.

В каких случаях уместно разделять экран?

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

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

Чаще всего такой выбор сводится к следующим вариантам:

  • Вход и регистрация.
  • Подписка на бесплатной или платной основе.
  • Продукты, имеющие различную расцветку.

Лучшие примеры веб-дизайна с разделенным экраном

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

Cam Strobel

Существует масса сайтов, которые по концепции не должны иметь доступа к всей горизонтальной рабочей зоне. В самых минималистичных дизайнах, к которым относится ресурс Cam Strobel, экран поделен на две колонки по вертикали для того, чтобы сразу отобразить всю информацию. Соответственно посетителю вообще не нужно пролистывать страницу.

Как создать отличный дизайн с разделенным пополам макетом?

Studio Meta

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

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

Как создать отличный дизайн с разделенным пополам макетом?

Bose

Разделенный экран не должен быть строго симметричным. Это может быть не только две колонки, и соотношение 1:1 можно не соблюдать. Такое решение реализовано на сайте Bose. Здесь экран разделен на пять частей. В то же время, видно, что данный ресурс даже не пробовали адаптировать под маленькие дисплеи. Несмотря на то, насколько красиво все получилось, всегда необходимо позаботиться от адаптивности, это важное современное требование. Но, проблема заключается в том, что адаптация разделенного макета под портативные гаджеты порой оказывается очень затрудненной.

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

Как создать отличный дизайн с разделенным пополам макетом?

Fillet

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

Как создать отличный дизайн с разделенным пополам макетом?

3 особенности, которые нужно иметь в виду при создании сплит-макета

Совместимость с мобильными устройствами

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

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

Если в этом нет необходимости, не делите экран

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

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

Учтите, что переходить на такой макет можно только при условии положительного ответа на каждый из вышеперечисленных вопросов. При наличии хоть одного «нет», не реализуйте эту идею.

Правильно применяйте пространство

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

В заключение

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

Если вы еще не работали с разделенными макетами, обязательно попробуйте реализовать такой проект. Попробуйте создать новую визуальную эстетику, поэкспериментируйте с различными вариантами вывода контента.

Соц. сети