Среди всех людей есть те, и их немало, которым в интернете, да и в жизни в целом, нравится простота, лаконичность, минимализм, сочетание двух контрастных неярких цветов, открытость и свобода. В общем-то, каждому из нас такое нравится, но кому в большей степени, а кому-то только иногда, как говорится: «в охоточку». Так или иначе, но сайты со строгим и изящным дизайном появляются нередко, хотя создавать-то их очень сложно.
Красота минимализма и простоты обычно создается с помощью геометрических фигур, которые веб-дизайнер заставляет дополнительно взаимодействовать друг с другом или откликаться на действия пользователя. Но когда дело доходит до выбора анимации, то самым отличным и красивым решением становится эффект раскрытия блока или плавного его появления. Его также называют эффектом блочной шторки, геометрическим параллаксом (хотя при чем тут он?). Так или иначе, но смысл эффекта в том, что во время пролистывания страницы в блоках слева направо происходит анимация «выезжания» одного изображения и смены его другим.
Такой эффект идеально усовершенствует интерфейсы, добавляет малую каплю интерактивности. Но при всем при том, что он блочный, строгий, он также придет дизайну проекта смелость, элегантность, аккуратность. И именно эффект раскрытия способен стать альтернативой для такого эффекта как затухание, что используется на сайтах с завидной регулярностью.
Но как и у любого стиля, у любого эффекта, у раскрытия блока тоже есть свои вариации, особенности реализации. Вот сегодня и посмотрим на них (с примерами) и попробуем убедиться в том, что этот эффект гораздо интересней своих аналогов. А саму анимацию вы сможете увидеть, только если сами посмотрите на сайты воочию.
Слайдер
Одно дело сменяемые друг другом изображения в слайдере, другое дело – сочетание с эффектом блочного раскрытия. Проект lapeaudelours использует на домашней странице не просто смену фотографий работ и артов, но делает это в анимационном виде как раз с эффектом раскрытия. Кроме того, использование эффекта дополняет тон всего дизайна и полностью соответствует общему стилю. Если пролистать страницу дальше, то можно увидеть огромное количество используемых блоков для текста и изображений.
Еще один похожим сайтом является baugeld-spezialisten, что способен ввергнуть пользователя в небольшой шок своим внешним видом. Строгий бело-черный дизайн, огромная насыщенность контента, простота и функциональность. Но необычность придается в большей степени именно выбором шрифтов!
Нас интересуют внутренние страницы, на которых изображения появляются и сменяются в виде эффекта раскрытия. Впрочем, и на домашней странице его тоже можно увидеть. Он попросту подходит для этого дизайна, как перчатка. Да, эффект непостоянен, он появляется иногда, но ощутить его харизматическое присутствие можно, а уже одно это и придает характер и шарм сайту в целом.
Целостность дизайна
Если ранее мы говорили о том, чтобы применить эффект к одному какому-то элементу дизайна, то теперь обратим внимание, как именно этот эффект создает целость дизайна. vrarlesfestival как раз и способен продемонстрировать это в полной мере.
Здесь все интерактивные функции работают на базе эффекта блочного раскрытия (или шторки). Это и украшения информационных блоков, эффект взаимодействия, открытие скользящего бокового меню, эстетика крошечных деталей. Удивительно, но, несмотря на то, что эффект присутствует практически везде, в каждом уголочке сайта, он не раздражает пользователей, не подавляет собой всю структуру. Напротив, он поддерживает и создает гармонию.
Еще один интересный проект с доминируемым использованием эффекта шторки или раскрытия блока - dsa.clinic. Увидеть эффект можно в оформлении кнопок, надписей, основных разделов сайта. Если же говорить об общей гармонии, то, в данном случае, нет нарушения баланса между интерактивностью и деталями. Общий стиль выдержан, все создано аккуратным, открытым (мы разбирали эту идею отдельно).
Интерактивность также главенствует и на sequence. Для текстовых блоков веб-дизайнеры использовали самый обычный эффект затухания, но для изображений применили раскрытие блока в весьма привлекательной стилистике. Сама анимация достаточно быстра, но добавляет некой пикантности всему проекту. Более того, эффект присутствует на всем сайте и во всех уголках, где существуют маломальские изображения.
Путь сквозь контент
Эффект блочной шторки или раскрывающегося блока может выполнять роль не только декора в веб-дизайне, но и более существенную и важную для пользовательского опыта. Например, он способен провести посетителя сквозь основные разделы контента и пригласить его к изучению материала. Проект forh при запуске сразу же представляет анимацию блоков, а затем, пролистывая страницу, пользователь видит появляющиеся новые блоки, секции, приглашающие к изучению. При этом все выглядит спокойным, размеренным и важные моменты совершенно не подавлены.
Весьма интересным интерактивным дизайном может похвастаться и getcarv. Слишком длинная домашняя страница способна ввести поначалу в заблуждение, но эффект раскрытия блока играет большую роль в пользовательском опыте. Иными словами, он присутствует везде, где есть вход в категории и разделы. Но и кроме этого можно увидеть его в заголовках, некоторых разделах текстового контента, изображениях, в видеоблоках, кнопках CTR. Кто-то подумает: как много и часто. Но веб-дизайнерам удалось найти тонкую грань равновесия и создать действительно атмосферный проект, аккуратный и гармоничный.
Полноэкранность
Если создается сайт с полноэкранным дизайном, то есть не требующим вертикальной прокрутки, то слайдеры можно оформлять с эффектом раскрывающегося блока. Такое сочетание образует реально интересный пользовательский опыт. На проекте vitra дизайнеры решили объединить технику открытия в разных окнах и эффект раскрытия блока с тем, чтобы пользователям было понятнее, что открывается, куда они переходят, какая информация отображается. Между тем, в целом дизайн все также имеет строгий блочный стиль, минималистичность и простоту.
Консерватизм
Опыт веб-дизайна, творческие находки, практика применения того или иного эффекта приходят к нам (дизайнерам) со временем. Но сайты создаются людьми совершенно разными по характерам, взглядам, стремлениям, а потому порой можно увидеть как аккуратно и необычно используют разные украшательства разные мастера. Проекты prigipo и beoplay как раз таковыми необычными и являются. На них эффект раскрытия блока используется в самом обычном виде: горизонтально слева направо. Но и не только.
Сами блоки расположены стопочками, вразброс, повернуты ромбами, имеют более вытянутые виды прямоугольников, и все они меняются. Карусельки слайдеров получаются красивыми и ненавязчивыми, а присутствие анимации среди геометрических фигур выглядит логичным. Более того, отлично вписываются кнопки, эффекты Hover (анимации при наведении) и прочие мелкие декоративные элементы.
Так или иначе, но даже совсем малое и скромное по объему использование эффекта блочного раскрытия придает сайтам отличный и современный вид.
Зебра
Кто сказал, то эффект раскрытия блока должен быть только горизонтальным? Всегда так и все так делают? Не всегда, и не все! Пример тому fotonaut, дизайн которого создан с помощью вертикальных полосок, каждая из которых представляет собой ссылку на некоторый раздел того же сайта. Эффект раскрытия в данном случае представлен таким образом, что все полоски буквально склеены друг с другом, но одна из них (активная) всегда выступает вперед, меняет цвет, но при этом не отделяется от других. Все равно сохраняется целостность общей визуальной композиции. И это несмотря на то, что существует выплывающее меню, множественные плавающие объемные элементы (шарики, яблочки, пилюльки и прочие).
Да, такой тип эффекта и его сочетание с анимацией меню – весьма распространённое явление в сфере веб-дизайна за последние полтора года. Тем не менее, композиционно поддерживается последовательность, немного игривый тон, простота и лаконичность.
Минимализм
Наверное, самый необычный и красивый сайт из всей нашей подборки. Его, конечно, нужно смотреть самостоятельно, но и говорить о нем можно до бесконечности. Речь идет о zerodaysoff. Дизайн темный, поэтому изначально весь красивый эффект раскрытия блоков и смены их можно не заметить. Но приглядись к фону. Во время того как вы прокручиваете страницу, блоки небольшие. Немного сжаты и сгруппированы к центру. Как только вы останавливаетесь (в любом месте), блоки тоже словно бы растекаются по всей странице и начинают слегка анимироваться на фоне. Двигаться, поворачиваться и замирают. Как только пользователь приводит в движение прокрутку страницы вновь, они быстро сгруппировываются, уменьшаются и сменяются другими. Анимация не быстрая, рассмотреть можно очень подробно.
Другим интересным моментом служит то, что каждый блок имеет или фотографию или видео, а иногда и только видео, и все разные. Сам текст также имеет анимацию и если увидеть линию между словами, то спустя некоторое время, она плавно отъедет в сторону, и на её месте появится текст.
А теперь самое интересное. Сам эффект раскрытия блока в своем непосредственном виде был применён именно к тексту, хотя взгляд пользователей всегда приковывается к фоновой анимации. Но такое решение веб-дизайнеров позволило создать дополнительную утончённость и элегантность интерфейса.
Необычность и выводы
Немного обобщая все рассказанное выше, отметим, что эффект раскрытия блока (шторки) в веб-дизайне может использоваться совершенно по-разному. И это только в стандартном исполнении его применяют к изображениям, но очень редко можно видеть и весьма интересные текстовые эффекты.
Но все примеры выше и еще большее их количество в интернете имеют одну общую черту (помимо того, разумеется, что присутствует данный эффект) – у них у всех есть очень большие квадраты, геометрические фигуры в основе всей концепции дизайна. Линии, треугольники, прямоугольники доминируют. Вы не увидите окружностей и растительного, витиеватого оформления, как не сможете увидеть параллаксов или асимметричности. Все очень строго и прямолинейно, будто дизайн создавался «по линейке». И это не случайность.
Эффект раскрытия блока говорит сам за себя: я имею жесткую четырёхстороннюю форму, которая идеально вписывается с такую среду. И это полностью соответствует общей эстетике творческого разнообразия. Такой эффект сложно применить к округлым формам, он будет неказисто смотреться в «обычном» дизайне. То есть можно взять, например, дизайн интернет-магазина и верхней части поместить слайдер с эффектом раскрытия и более нигде его не применять. Выглядеть дизайн будет каким-то недоделанным, ибо более нигде ярко выраженные геометрические формы не будут использоваться (формы карточек товара не в счет), а потому слайдер станет «чужеродным» и лишним.
Но если весь дизайн имеет яркие геометрические формы на фоне или в оформлении блоков и секций, то присутствие эффекта более чем оправдано.