От автора: полноэкранные Splash Screen’ы на данный момент самый известный шаблон в интернете, по сути актуальный тренд в веб-дизайне. Некоторым он нравится, другие его ненавидят, но давайте откинем ваши чувства и рассмотрим по-настоящему стоящие примеры, а также поговорим о лучших способах их применения.
Немного о конвергенции дизайна
Термин «конвергенция дизайна» говорит о том, что все дизайны имеют привычку быть похожими, т.е. конвергируют со временем или становятся все более похожими. Недавно @jongold запостил в Twitter:
Он говорил о том, что сегодня дизайнерам не хватает креативности, и они берутся за легчайший метод при проектировании веб-страниц. Полноэкранные Splash Screen’ы – хороший пример его мысли. Выбираем ли мы, как дизайнеры, легчайший путь, используя данный шаблон? Намеренно ли мы не хотим раздвинуть рамки и привнести что-то новое? Интернет стоит на месте только лишь потому, что ты такие ленивые?
Или, как говорит Paul Boag, мы являемся лишь частью того основания в веб-дизайне? Мы создаем то, что хотят пользователи, чего они ожидают и тем самым упрощаем наши продукты?
«Чем больше нам попадается на глаза какой-то объект, тем больше он превращается в стандарт» — Paul Boag
Я оставлю вас наедине с этой мыслью, чтобы вы сами все решили. А пока что давайте взглянем на несколько полноэкранных дизайнов страниц!
Сверху вниз, слева направо
Множество полноэкранных сайтов очень щепетильно подходят к разрешению экрана и с помощью 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 решили использовать стрелку внизу страницы.
На домашней странице 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 с несколькими вариантами полноэкранных макетов.
Ну что на сегодня хватит?
Полноэкранные домашние страницы это тот шаблон, который вряд ли исчезнет в ближайшее время. Если это эффективный способ представления пользователям сайта любого типа, собственно, почему он должен исчезнуть? А какие ваши любимые шаблоны? Где еще вы видели применение этому шаблону (где он подходил, а где не очень)? Пишите в комментариях!
Автор: Ian Yates
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
