Все чаще в интернете появляются сайты с дизайном разделенного экрана. Казалось бы, только год назад мы рассматривали данный прием, но уже сейчас можно увидеть невероятные вариации использования метода, красивые дизайнерские решения, что позволяет говорить с уверенностью о том, что веб-дизайнеры все чаще стараются создавать разделенный экран для своих сайтов.
И причин такой популярности может быть много, не говоря уже о банальном удобстве адаптации дизайна под экраны мобильных устройств и просто удобства восприятия материала. И разумеется – обычное эстетическое великолепие! Без него никуда и никак. Но поскольку тенденция развивается, то с течением времени становится интересно понаблюдать и узнать, а как же именно эта тенденция меняется, что нового появилось, какие решения и занятные сочетания были найдены иными мастерами.
Вот и постараемся рассмотреть все эти изменения (или самую необычно-красивую часть) более детально.
Растущая тенденция
Рост и развитие тенденции разделенного экрана обусловлены, в первую очередь, тем, что сам метод (как дизайнерское решение) бывает более эффективным, чем иные вариации. Если контент сайта рассказывает о множестве схожем между собой, то как раз split screen будет наиболее подходящим оформлением и представлением данного множества. При этом посетитель получает возможность увидеть сразу два разных контента или большее количество частей контента, что преподносятся как единое целое, хоть и выглядят разделенными.
Также split screen является лучшим выбором, если требуется сделать выбор для продолжения изучения содержимого. Особенно он удобен, если у веб-дизайнера много узкоформатных изображений (а не широкоформатных), чтобы создать более адаптивный вариант дизайна и добавить той визуальности, которая выделит сайт среди прочих. Даже не просто конкурентов, а именно всех вариаций дизайна.
Вечная классика
Обычно «классикой» называют те эстетические предметы, веяния и прочее, что были популярными в течение очень и очень длительного времени, а также, что важно, очень повлияли на развитие некоторого направления или сферы деятельности. «Классика» – не только жанр музыки, классикой может оказаться мотив, сочетание форм и цвета, стиль обуви или одежды и так далее. В веб-дизайне все точно также и многие стандарты, которые применяются практически на всех сайтах, тоже можно называть «классикой». Некоторые подумают, что разделенный экран еще рано относить к классическому дизайну. Но вот на что стоит обратить внимание: веб-дизайн развивается слишком уж быстро, поэтому если не сейчас, так через полгода можно это будет сделать. Но сделать-то придется все равно. И на вопрос: «Почему?», мы попробуем выделить важное в тенденции развития:
Представим, что Split Screen осуществляется вертикально и образует две одинаковые части. Это, в свою очередь, образовывает модульную схему, позволяющую организовать контент, содержимое в пределах этих двух блоков. Словно созданы явные рамки, выходить за которые визуально нельзя.
Анимация. Для каждой тематики содержимого можно создать разную анимацию и она будет четко и удобно представлена. На экране не будет создаваться «каши» и «кучи» из всего и вся.
Изменение окна браузера. Если частей экрана две или более, а пользователь уменьшает окно браузера (может для того, чтобы рядом еще другое приложение разметить на экране РС), то эти части, в конечном счете, станут располагаться вертикально. При этом контент не пропадет, содержимое все останется там, где оно и было в пределах блоков. Наглядный тому пример на скриншотах treethatgives.
Также очень красивый вариант дизайна использован и на la-peche, где экран разделен на три части. Третья, нижняя часть прокручивается, изменяя анимацию в большой левой части и контент в верхней правой. Лучше смотреть воочию.
Другой отличный пример разделенного экрана с анимацией – sztafetapokolen. Его нужно смотреть и при узком окне браузера, и широком. Он по-разному будет выглядеть. Но что общее: сначала текст разделяет визуально экран на половинки, затем разделение создается на три части, потом вместе с портретом и текстом, что оплетает собой образ, создаются еще и еще разделения. Это красиво и необычно выглядит на фоне строгих и угловатых дизайнов.
Развитие бежит вперед
Изначально split screen представлял собой не более чем строгий, простой и симметричный дизайн. Были две равные части, где каждая содержала свой контент. Такое и сейчас можно увидеть нередко, но все же дизайнеры стараются разнообразить вариацию. Добавить что-то в серединке, сделать больше разделений и так далее. При этом разделения осуществляются не прямыми линиями и углами, а зигзагами, волнами, сетками.
Раньше дизайн разделенного экрана выглядел несколько тяжеловесным, потому как создатели преследовали цель: побудить посетителя просмотреть практически весь контент, пролистать все страницы и все части разделения. Теперь разделение стали упрощать и существуют варианты, когда пользователь может изучать контент в независимых друг от друга блоках.
Посмотрим на business-advisory-taxation, где разделение вначале происходит на две части, затем блок с разделением размещается справа, а слева появляются ссылки и так далее. Но в любом случае, это все равно split screen, поскольку в каждой части присутствует свой индивидуальный контент.
Весьма интересное решение придумали в awink. Они разделили экран сначала на три части, затем на две. При этом при прокручивании колесика мышки в левой части контент меняется и… разделение исчезает. Если кликнуть по ссылкам справа – левый блок появляется снова, и контент опять меняется.
Стоит также изучить и прогуляться по iesede, studioforum, standby-inc, acrylice, autobusoberbayern. Везде вариации разные и оригинальные, даже порой кажется, что обычное разделение на две части прочно кануло в лету.
Клики, ссылки и CTA
Много вариантов мы рассмотрели выше, но большое изменение в данной тенденции – размещение огромного числа ссылок (разных вариантов) в каждой из областей. То есть, не просто слева и справа текстовая инфа и одно-два изображения, а еще и кнопочки, ссылочки. К тому же в каждой части их разное количество и оформление у всего тоже разное.
Например: cfr, l-mg, .texasbeardcompany, clemenshill. Каждый из вариантов содержит ссылки и кнопки в разном количестве в разных областях экрана. Это отлично смотрится на больших экранах, когда и изображение прогружается полностью и ссылки видны. В то же время, если смотреть в сторону мобильных устройств, то блоки будут просто выстраиваться друг за другом и создастся впечатление, что смотришь на перечень разделов, что, в свою очередь, не препятствует изучению контента.
Неявное разделение
В большинстве примеров выше мы смотрели все же на четкое и явное разделение экрана. Но одновременно с таким вариантом дизайна, мастера создают призрачное разделение. Что-то напоминающее sztafetapokolen, когда текст своими границами очерчивал и создавал блоки. Такое разделение зачастую на разных проектах выглядит призрачным, потому как не окрашивается в цвет и не заполняется изображением. Когда же дело доходит до мобильного устройства, то split screen становится более явным. Эдакий дизайн с секретом.
Для того, что было проще представить, о чем речь, посмотрим на effectlab, owlstudios, crema, ttp, wavemakerlabs. Такие вариации неявного разделения красивы по своему и не так сложны в проектировании, поскольку отличие от обычного split screen в данном случае – исключение окраски. Во всем прочем – обычное разделение экрана по горизонтали или вертикали.
Подводные камни split screen
Казалось бы, как все просто: разделил, окрасил, разместил контент и – самый простой вариант готов. Но в примерах выше присутствует один момент, хоть и не везде. Это слишком крупное по масштабу разделение, что в итоге приводит к невидимости второй части на экране (даже большом). Получается, что дизайн выглядит обычным.
Например, ascendlearning, poundandgrain, gyrotonic. Все эти сайты отличные, у них действительно красивый дизайн, но сравните, как выглядит он на большом экране и на экране смартфона. Во втором случае информации на странице сразу много, и посетителям становится сразу понятнее, где, что и о чем.
Горизонтальный вариант разделения, в большинстве своем, всегда создается с очень большой верхней частью. Зачастую создать более узкую бывает сложно, но это также создает и разный пользовательский опыт. Обычно посетители ожидают, что сайт в мобильном варианте будет выглядеть практически так же, как и настольный, но сталкиваясь с совсем иным представлением, очень и очень удивляются.
Тем не менее, из любой ситуации всегда есть выход. Особенно, если соединять разные варианты разделения (но не стремясь создать асимметричность), при которых контент везде будет разным, но и связанным друг с другом одновременно. Мы подобрали несколько вариантов весьма оригинальных проектов, которые не просто отражают всю суть развития тенденции, но и способны вдохновить на создание чего-то похожего или нового.
Речь идет о northeastshop (со слайдером в одной части и меню и записями в другой); allhero (с тройным разделением, которое обновляется одновременно, в нижней части существует и линия прогрессбара); gyrotonic (с разделением и по горизонтали и по вертикали с помощью наклонных линий); legacyrules (с тройным разделением, где нижняя часть отлично видна на экране и создает впечатление множественного разделения); а также eleken, youngtribe, lustonelabel, divanchik, bijou-de-m. Их действительно интересно смотреть, даже если вам не нужен диван или украшения.
Завершение
Явное разделение экрана или нет, но его используют в веб-дизайне все чаще и чаще. Придумывают новые варианты разлиновки, привносят разнообразие анимацией и тематикой контента, типами элементов. Они похожи друг на друга и в то же время все разные. Разные не только в пределах экрана РС, но разные и в мобильном представлении.
Таким образом, развитие тенденции split screen способствует не просто появлению новых и уникальных проектов. Оно как бы толкает всю сферу веб-дизайна к развитию, к нахождению новых способов сочетания цветов и возможностей. Кроме того, оно способствует и большей заинтересованности пользователей. Не имеет значения, нужна ли, как таковая, именно «эта» информация на сайте тому или иному посетителю, но он будет заинтригован дизайном, соответственно, он пробудет чуть дольше на сайте, а владелец получит трафик, возможно, конверсии и прочая, и прочая.
Разделенный экран прост и сложен в создании, но он и весьма эффективен, возможно, даже больше, чем вариант оформления обычным широкоформатным изображением с названием сайта. Да, это уже совсем иной стиль, стиль с обложкой, но добавление хотя бы узкой полоски сбоку или внизу способно преобразить и обновить внешний вид сайта. Способов неимоверное количество, а творчеству и вдохновению нет предела!