Обучайся бесплатно с WAYUP Premiere сегодня вечером

Нередко можно увидеть сайты, обладающие домашней станицей, разделенной на две и более частей. Зачастую даже создаются целые сайты, полностью разделенные на половинки. Метод разделения экрана (Split Screen) уже давно известен в киноиндустрии, начиная с немого кино начала 20-го века. И по-прежнему остается популярным эффектом в кино и на телевидении. Кадр из кинофильма «интимный разговор» (Pillow Talk) 1959 год.

Но для веб-дизайна метод разделения относительно новый. Да, его частенько сейчас можно увидеть на разных сайтах, но еще три-четыре года назад веб-мастера практически не думали о Split Screen. Пик популярности пришелся примерно на 2016 год и теперь гораздо чаще можно наслаждаться таким эффектом. И такой полярности  есть несколько причин:

  • Split Screen имеет приятное эстетическое качество. При правильном исполнении он предлагает пользователям замечательный опыт взаимодействия и изучения контента.
  • Это хороший выбор для адаптивных макетов, поскольку эффект разделенной страницы можно настроить под разные разрешения экрана устройства, даже маленькие. Например, если дело доходит до небольших мобильных устройств, то части страницы могут быть уложены в виде панелей горизонтально или вертикально с меньшей шириной/высотой.
  • Удобство навигации. Используя простой метод проектирования, веб-дизайнеры имеют возможность помочь пользователям сориентироваться в потоке контента. Также поощряют их нажимать на кнопки, которые размещаются в каждой части. Частенько бывает, что в одной из частей создают более заманчивый контент и насыщенный, а в соседней – менее. Впрочем, бывают и исключения.

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

Использовать или не использовать Split Screen

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

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

Особенность же метода Split Screen в том, что каждая честь сама по себе не способна расширяться или уменьшаться, чтобы предложить изучить большее количество контента в пределах окна браузера. Поэтому не рекомендуется применять такой дизайн к перегруженному информацией сайту. Важно, чтобы части экрана сохраняли свой размер и то количество информации, которое на них находится. Поясним, если попробовать расширить экран браузера и посмотреть все на тот же Dropbox Guides, то можно заменить, что левая половинка при увеличении не получает никаких преимуществ; отображается только иконка. В правой же половинке, информации может и становится чуть больше, но не намного.

Вариации метода разделенного экрана

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

Строгая типографика и яркие цвета

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

Взглянем на Baesman, kirichik, Angel Martínez, resourcela. Все они обладают или парой ярких цветов, или одним, но очень контрастным. Но, так или иначе, все цвета придают значение и важность обеим половинкам экрана и не мешают посетителям самостоятельно выбрать, что изучать сначала, а что потом.

Призывы к действию

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

На примерах Bump, Fanny Myard, hellomonday, Boud, 404 можно увидеть, как разные половинки экранов имеют различный вес по важности восприятия, который создается благодаря контрастности или большому количеству пустого пространства. Существуют варианты, когда важную роль в создании значимости играют и фотографии одного предмета, но с отображением его в разных размерах или с разных сторон.

Визуальный поток

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

Есть варианты, например, объединить половинки экрана с помощью некоторого элемента. Веб-дизайнеры используют в качестве перекрытия текст (обратите внимание на обилие применяемых каллиграфических шрифтов), кнопки, картинки, логотип, полупрозрачные накладные секции. Увидеть воочию реализацию описанного выше можно на Surfers Against Sewage, madame de, Studio Meta, Ocean Resort Residences. На каждом из них использованы разные вариации перекрытия, которые связывают две половинки экрана. При этом некоторые сайты полностью разделены, а на некоторых Split Screen есть только на домашней странице. Но осмысленность и целостность не теряется.

Анимация

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

Посмотрим на сайт определения характера «Чехов жив» или enginethemes, где сам разделитель и тем более можно двигать вправо-влево.

Проект же Huncwot имеет разделение экрана на четыре части, в каждой из которых размещена интерактивная иконка с названием раздела и коротким описанием. Интересен и проект 6-degrees, где в правой половинке при загрузке контента начинает подчеркиваться частично текст. Отметим, что этот проект дополнительно позволяет не только прокручивать страницу сверху вниз, но и правую половинку влево-вправо. Donauhof Wien также анимирован, и обладает перекрытием, но не яркими цветами.

Нужен ли мне Split Screen

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

  • Достаточно ли у вас в целом на странице пустого пространства, чтобы сделать Split Screen? Без большого количества свободного места разделение не будет «смотреться». Оно затеряется и получится, что вы попросту разбили контент на два столбика.
  • Сможет ли целевая аудитория оценить разделение экрана или они смутятся и решат найти аналог «проще/понятнее»?
  • Сможете ли вы действительно расколоть внимание посетителей на две составляющие и наполнить их контентом так, чтобы сознание человека и внимание не переутомились, не рассеялись?

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

И вот еще некоторые проекты, которые мы для вас подобрали. Они не только обладают разделением экрана на половинки, но раскалываются с помощью треугольников, радуют анимацией ассиметричного движения частей между собой, имеют шахматное чередование текста и фотографий. Или некоторые дизайны, имея Split Screen, представляют информацию в центре. Речь идет о проектах: A Collective, SHS - Operational Consulting, Prymd, Luxtraum, Digital Marmalade.

Вывод

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

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

Метод разделенного экрана – смелое решение, зоркое, но между тем простое и сильное одновременно. Но и с ним нужно быть аккуратным, ибо разместить фотки и текст недостаточно для того, чтобы было визуально и подсознательно понятно, а зачем вообще разделили страницу-то? 

Как вам материал?