Как использовать сплит-скрин дизайн?

Автор /  Elena Rabkina

15 февраля 2019

Как использовать сплит-скрин дизайн?

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

 

 

 

сплит-скрин дизайн

https://demo.ucraft.com/kidoo

 

 

 

Сплит-скрин дизайн – что это?

 

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

 

 

Из преимуществ такой техники дизайна можно выделить следующие:

 

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

 

 

Главное правило «разделенного» контента – на одном экране должно быть два послания (не обязательно оба вербальные). То есть вертикальный экран выступает самостоятельной страницей с изображениями, текстовыми публикациями и кнопками.

 

 

 

«разделенный» контент

https://www.duotonesports.com/

 

 

 

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

 

 

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

 

 

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

 

 

 

Сплит-скрин

https://fiftyandfifty.org/

 

 

 

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

 

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

 

 

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

 

 

 

Варианты использования сплит-дизайна

 

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

 

 

 

1. Сочетание ярких цветов и интересной типографики

 

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

 

 

 

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

https://demo.ucraft.com/kashve

 

 

 

2. Акцент на кнопке призыва к действию

 

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

 

 

 

сплит-скрин с призывом к действию

https://www.dropbox.com/ru/

 

 

 

3. Воспринимайте разделенный экран как визитку

 

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

 

 

 

разделенный экран визитка

http://www.oasisla.org/

 

 

 

4. Взаимосвязь между частями экрана

 

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

 

 

 

части экрана сайта

https://demo.ucraft.com/yummy

 

 

 

5. Использование анимации и флеш-инструментов

 

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

 

 

 

анимации и флеш-инструменты на сайте

https://www.enginethemes.com/

 

 

 

Как использовать сплит-дизайн для разных целей

 

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

 

 

1. Персональный сайт

 

 

 персональный сайт со сплит-скрином

http://www.camstrobel.com/

 

 

 

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

 

 

дизайн персонального сайта 

http://www.aboutmatthewhall.com/

 

 

 

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

 

 

 

2. Интернет-магазин

 

 

дизайн интернет-магазина

http://special.bose.eu/en/

 

 

 

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

 

 

 

3. Сайт-визитка

 

 

дизайн сайт-визитки

https://www.studiometa.fr/helloresa/

 

 

 

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

 

 

 

4. Сайт-портфолио

 

 

дизайн сайт-портфолио

https://fillet.com.br/

 

 

 

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

 

 

Сплит-скрин дизайны выглядят очень привлекательно и интересно. По тем примерам, что разобрали, становится понятно, что использовать эту технику оформления сайта можно по-разному в зависимости от целей и задач. Можно делать необходимые акценты, можно разделять контент. Главное – не забывайте адаптировать дизайн под мобильные устройства. Это можно легко сделать в шаблонах Ucraft. Готовы к свершениям? Тогда настало время…

 

 

#Заметка

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