Внимание к деталям является одной из основных целей в любом проекте. Но есть некоторые моменты, которые привлекают пользователей гораздо быстрее и сильнее, чем другие. Такие элементы встречаются не редко и не часто, но когда они есть, становится непонятно: «Почему всё же они не так популярны? Так редки?» И дело даже не в том, что их сложно программировать или рисовать. Наверное, просто идей у дизайнеров слишком много, а проект-то текущий, по факту, один.
Так, например, формы, крошечные навигации, типографика и интерактивность – элементы, которые способны оказывать огромное влияние на веб-дизайн, даже если занимают совсем мало место на холсте (странице). О том, что формы и типографика особенно популярны в текущем году, мы уже говорили не раз, но какие же интересные способы сочетания и использования нашли дизайнеры становится все более и более любопытным.
Сегодня мы и поговорим о том, какие же интересные находки и идеи появились в дизайне сайтов к началу лета и что, разумеется, станет трендовым в период летнего отдыха.
Выпадающие меню Tiny Nav
Некоторое время дизайнеры активно использовали мега-меню, затем стали популярны меню-«гамбургер», а потом снова вернулись к липкой навигации в верхней части страницы. Теперь же появился новый стиль навигации, что выглядит более уточенным и меньшим по размерам, чем даже «гамбургер». В реалии все эти незаметные крошечные стили навигации только на первый взгляд выглядят минималистичными, но очень часто они раскрываются при клике мышкой по ним и предлагают большой набор опций.
Что замечательно в этой тенденции веб-дизайна, так то, что у пользователей появляется возможность сосредоточиться на контенте и призывах к действию. Впрочем, для некоторых пользователей такое новшество может стать запутанным и неудобным. Поэтому, конечно, лучше использовать такие крошечные выпадающие списки меню в тех проектах, где страниц мало или это могут быть просто структурированные лэндинги.
Примерами такой тенденции могут стать epicmoleskine, geex-arts, ic-creative, weekend, fasadlab. В случае с weekend можно увидеть простенькую боковую навигацию по дням недели. Пункты очень крохотные, но шрифт подобран таким, что прочитать буквы можно практически без затруднений. В нижней части страницы находится еще одна дополнительная навигация.
Если рассматривать fasadlab, то стоит обратить внимание на две иконки в правом верхнем углу. Нижняя открывает список проектов, который представляет собой отельный слой, располагающийся поверх основного сайта и обладающий кнопкой закрыть. А иконка меню открывает также отдельную всплывающую часть с пунктами и разделами. Если меню не использовать, а прокручивать страницу, то и на ней будут появляться те или иные ссылки, касающиеся деятельности компании.
Пузырьки
Пузырьки или свободные формы, без четкого определения геометрических форм, появляются все чаще и притягивают взгляд. И хотя такие «бесформенные формы» обычно имеют округлый вид, бывает, что и не имеют. Назовем такие объекты «каплями».
Капли частенько способствуют расставлению акцентов для привлечения внимания к проекту и выделения важного, например, заголовка. И несмотря на то, что используют их нередко, каждое такое применение не является плагиатом. Капли такие универсальные, что используя их в разных блоках, секциях, можно создать интересные графические решения.
Отличающиеся по размеру, цвету, градиенту, мягкие и текучие, гладкие и строгие – они бывают разными и сочетаются друг с другом на отлично. С их помощью выполняют кадрирование холста, выделение элементов и создание глубины, делают намек на анимацию, придают значение точке входа по логину-паролю.
Такие разные капли есть на andypatrickdesign, wedze, sretks. Капли в последнем примере появляются только во время прокрутки колесика мышки, где-то они служат частью логотипа, а где-то и статическим и динамическим фоновым оформлением. В случае же с francoisrisoud одна большая бесформенная масса способна представить меню и ссылки, а задача пользователя через игру попасть по нужной капле и перейти, тем самым, по ссылке. Очень красиво и занятно. Проект lakewood использовал капельки на фоне, разбавив их падающими очень редко кружочками.
Слои и разделения
Слои – одна из самых интересных вещей в процессе изучения и работы в веб-дизайне, так как вы получаете возможность создавать потрясающий визуальных эффект, который всегда способен привлечь внимание пользователей. Но самым забавным применением слоев в последнее время стало создание своеобразных вырезов, где части общей композиции удаляются и освобождают место другим элементам на переднем плане.
Такие вырезки отлично смотрятся на любом типе веб-дизайна или сайте, имеют разный размер. Но хитрость кроется в том, чтобы найти тот способ их соединения, чтобы выглядел эффект гармонично и красиво.
Обратимся к практике на trigema, findyourquirk, dtofilms, logram, rj-investments, tiltedchair. В случае с tiltedchair, наверное, самый необычный способ использования слоев, но они придумали весьма интересно, поместив поверх заголовка анимационный мигающий глазик. При этом похожий подход есть и у findyourquirk, где дизайнеры кнопку меню оформили с небольшой тенью, а в вырезки поместили видео или изображения. При этом все настолько гармонирует, что создается ощущение, будто все элементы парят над самой страницей браузера. Если отдельно рассматривать проект logram, то здесь тоже есть вырезки, существует наслаивание, но есть и потрясающая анимация меню, при которой оно появляется при наведении курсора. Попробуйте изучить его.
В целом же, вырезки и слои должны быть логично и визуально связаны с общей подачей материала, сопутствовать целям дизайна, например, поиску в определенном месте, навигации, помогать в освоении контента и понимании дизайна пользователем.
«Плавающие» прямоугольники
Еще одна тенденция веб-дизайна, которая не обладает настоящим именем, но при этом прямоугольники достаточно часто используются мастерами. Тенденция несколько похожа на предыдущую, но имеет некоторые отличия, разумеется.
Данную технику используют повсеместно от портфолио до корпоративных сайтов, и везде она смотрится на отлично и органически вписывается в дизайн. Возможно это от того, что она создает забавные слои, которые превосходно работают с параллакс-эффектом. Но что действительно приятно, каждый прямоугольник может обладать собственным характером, представлять собой отдельную личность.
Концепция аналогична карточному стилю Google Material Design, но главное отличие кроется в том, что дизайн обладает меньшей структурностью и более органичен. Именно этим дизайн привлекает пользователей и способен поощрить к действию. Дело в том, что пользователям становится интересно, а что дальше, какой анимация будет потом или какие интересные визуальные сочетания еще есть на сайте.
Для примера посмотрим на badsam, hugovann, copperheartcreative, shoeshine, pariscalling, hotelicon. Многие из этих проектов имеют именно «плавающие» прямоугольники, которые появляются на холсте и исчезают с него, некоторые (pariscalling) даже успевают измениться и обрести новые краски и размеры. В некоторых случаях с прямоугольниками можно даже поиграть. Но, так или иначе, этот метод придает дизайну некоторую таинственность, побуждает пользователей узнать, что будет дальше.
Такая концепция удобна. Прямоугольники могут быть большими и малыми, простыми и сложными, многоуровневыми и однослойными. Все зависит от содержания. Ключевой момент в том, что использовать тенденцию можно разными способами и каждый раз будет что-то новое, что-то измененное и оригинальное.
Быстрая анимация
Дизайнеры достаточно часто используют видео для того, чтобы рассказать некоторую одну большую историю на протяжении всего дизайна. Последняя тенденция такова, что быстро движущаяся анимация быстрее привлекает внимание пользователей. Сомнений нет в том, что дизайн должен иметь интересный контент и визуальные эффекты, чтобы привлекать посетителей.
Но что реально интересно в быстрой анимации, так это быстрое развитие всей истории. Пользователь почти мгновенно получает сообщение и почти ощущает свою обязанность смотреть полный цикл видеоролика без возможности его прервать или пропустить. Но за счет высокой скорости видеоряда действие не вызывает утомления, оно короткое, информативное и быстрое. Такой вариант позволяет создать больший стимул для взаимодействия с дизайном или даже способен упростить это взаимодействие.
В качестве примеров обратимся к deptagency, plae, tm.softbank, meskiegranie. Видео на каждом из них используется в качестве фона и уже поверх него наложены меню, блоки, сообщения и прочее. Кроме того, присутствует и интерактивность в каждом таком видео, как на meskiegranie, а само видео представлено в виде небольших синемаграфов. Отдельно стоит уделить внимание проекту softbank, где видео используется очень интересно. С одной стороны, пользователь может смотреть видеоролик, но если прокрутить колесико мышки назад, то видео будет находиться в маленьком окошке, а на странице появится соответствующая тематике страница с меню. Если же колёсико мышки прокрутить вперёд, то автоматически прогрузиться полноценное видео. Необычная находка и весьма удобная.
Фототипографика
В завершении мы еще отметим набирающую тенденцию и известность использование типографики, заполненной изображением. То есть, когда буквы окрашиваются не в цвет, а в фоновую фотографию. Об этом тренде мы рассказывали уже и не один раз, поэтому подробнее останавливаться не будем. Но заметим, что если еще зимой эффект казался не слишком часто используемым, то уже к началу лета его можно увидеть во многих проектах. Например, retold, bellyqchicago, vivadesignstudio, c-m-d, nativeplanet
Вывод
Все эти новшества, тенденции, инновации связывает только одно – влияние веб-дизайна на пользователей. Создавая то, что отличается от массы или ведет себя иначе, дизайнеры позволяют пользователям углубиться в проект, изучить и заинтересоваться им. И каждая такая тенденция именно это и осуществляет.
Разумеется, очень важно содержание и именно контент определяет, что уместно применить в дизайне в конкретном случае. Подойдут ли прямоугольники или капли, уместно будет выплывающее меню или врезки. Но каждое такое решение может служить самым небольшим целям, например, только для оформления домашней страницы или, наоборот, распространяться на весь сайт и создавать крупный визуальный план.
Одним словом, все тенденции и находки дизайнеров – модны и не имеют привязки к какой-то конкретной идее или элементу. И что особенно приятно, такие эффекты популярны будут еще долгое время, поскольку весь секрет их красоты в универсальности.