Актуальные тренды веб-дизайна: полноэкранные домашние страницы
От автора: полноэкранные Splash Screen’ы на данный момент самый известный шаблон в интернете, по сути актуальный тренд в веб-дизайне. Некоторым он нравится, другие его ненавидят, но давайте откинем ваши чувства и рассмотрим по-настоящему стоящие примеры, а также поговорим о лучших способах их применения.
Немного о конвергенции дизайнаТермин «конвергенция дизайна» говорит о том, что все дизайны имеют привычку быть похожими, т.е. конвергируют со временем или становятся все более похожими. Недавно @jongold запостил в Twitter:
Он говорил о том, что сегодня дизайнерам не хватает креативности, и они берутся за легчайший метод при проектировании веб-страниц. Полноэкранные Splash Screen’ы – хороший пример его мысли. Выбираем ли мы, как дизайнеры, легчайший путь, используя данный шаблон? Намеренно ли мы не хотим раздвинуть рамки и привнести что-то новое? Интернет стоит на месте только лишь потому, что ты такие ленивые?
Или, как говорит Paul Boag, мы являемся лишь частью того основания в веб-дизайне? Мы создаем то, что хотят пользователи, чего они ожидают и тем самым упрощаем наши продукты?
«Чем больше нам попадается на глаза какой-то объект, тем больше он превращается в стандарт» — Paul Boag Я оставлю вас наедине с этой мыслью, чтобы вы сами все решили. А пока что давайте взглянем на несколько полноэкранных дизайнов страниц!
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Сверху вниз, слева направоМножество полноэкранных сайтов очень щепетильно подходят к разрешению экрана и с помощью JS или CSS следят за тем, чтобы первоначально видимая часть страницы была одного разрешения с размером окна браузера. После определения разрешения окна и даже при последующем его изменении с помощью CSS позиционирования элементы можно разместить в самых крайних положениях.
Makeshift используют этот шаблон, чтобы прижать второе меню и стрелки влево/вправо к нижней части экрана. Фоновый рисунок добавлен с помощью элемента figure и свойства background-size: cover;.
Ideas – полноэкранная тема WordPress с несколькими вариантами слайд шоу, вступлений, домашних страниц и т.д. Чтобы название и подпись изображений были более читаемыми, используется градиент, который расположен внизу экрана.
James Tupper расположил свое лицо внизу страницы с помощью свойства background-position: center bottom; так, будто он выглядывает из-под экрана. Желтый фон элегантно подстраивается под высоту окна с помощью свойства height: 100vh;.
Детище Elliot Jay и Samantha Stocks, журнал о стиле и моде Lagom полностью заполняет домашнюю страницу одним изображением. Ничего прокручивать не надо (только на маленьких экранах). Внизу экрана размещены ссылки на социальные сети.
Soul – Shopify шаблон. В одном из шаблонов есть полноэкранный слайдер с навигацией в правой части экрана.
Скролим дальше ↓При использовании полноэкранных шаблонов есть опасность, что пользователь может не понять, что страницу нужно листать. На сайте Envato данная проблема решается с помощью иконки прокрутки, которая подсказывает пользователю, что нужно пролистать вниз.
Blandly решили использовать стрелку внизу страницы.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
На домашней странице Kindeo разработчики сайта использовали любимый мной способ; они оставили видимой небольшую часть следующей секции внизу экрана. Также они расположили стрелку с надписью «Find out more», чтобы полностью дать понять пользователям, что внизу они могут найти что-то еще.
На сайте Kilani реализован довольно сомнительный метод с автоматическим воспроизведением звука; в правом нижнем углу экрана есть кнопка приглушения звука. Зато они необычно решили проблему с прокруткой страницы вниз и прикрепили к курсору надпись «Scroll Down»:
ВидеоУвлечение аэрофотосъемкой Damir Kotorić, бывшего UX дизайнера сайта Envato переросло в отдельный сайт Falcon Films. Видео занимает большую часть домашней страницы сайта; ролик вставлен через тег video. Можете посмотреть на крутые съемки Мельбурна с дрона.
И так же, как и выше, Damir использовал свойство min-height: 100vh;, чтобы растянуть секцию на весь экран. На Landscape реализован такой же эффект; полноэкранный шаблон с видео с автоматическим проигрыванием, однако тут используется JS для растяжения на весь экран. Файл видео mp4 весит 1.3Мб, так что на скорость работы это несильно повлияет.
СтилиМы до сих пор не говорили о том, а что нам дает полноэкранный шаблон: canvas! Вся суть шаблона в том, чтобы использовать пространство для представления товара, компании или идеи. Мешающие элементы контента удаляются, а внимание фокусируется на сообщении и индивидуальном подходе. В примере выше Landscape используется красивый оттенок синего. Voog решили использовать тот же подход.
Всегда и всем говорю – так как изображение двухцветное, то мы с легкостью можем уменьшить его текущие 540Кб веса. Добавить легкого размытия, уменьшить качество JPG до 50%, и мы получим вес файла в 50Кб без видимого ухудшения качества. Сайт конференции по дизайну Bloomberg Businessweek использует абстрактный шрифт. Конвергенция в дизайне? Только не здесь.
А я уже говорил о Envato Tuts+ Translation Project? Возможно.. мне очень нравится, как в этом проекте реализован подход RTL (когда текст читается справа налево) – обязательно взгляните на Proland, шаблон лендинг пейдж на основе Bootstrap с несколькими вариантами полноэкранных макетов.
Ну что на сегодня хватит?Полноэкранные домашние страницы это тот шаблон, который вряд ли исчезнет в ближайшее время. Если это эффективный способ представления пользователям сайта любого типа, собственно, почему он должен исчезнуть? А какие ваши любимые шаблоны? Где еще вы видели применение этому шаблону (где он подходил, а где не очень)? Пишите в комментариях!