Полноэкранная заставка, на данный момент — одна из самых известных моделей в Интернете. Некоторым она нравится, некоторым – нет. Сегодня мы хотим откинуть эмоции и взглянуть на некоторые примечательные примеры этой тенденции и поговорить о них.
Обратите внимание на конвергенцию в дизайне
Термин «дизайн конвергенция» относится к тому, как конструкции могут уподобляться и соотноситься с течением времени. Недавно @jongold твиттере следующее:
С его точки зрения, в наши дни дизайнерам не хватает творчества при разработке веб-страниц. Полная заставка является прекрасным примером этого. Должны ли мы, как разработчики, идти таким легким путем, используя данный шаблон? Должны ли мы игнорировать возможность расширять границы и инновации? Неужели веб стоит на мести из-за нашей лени?
Или, как утверждает Пол Боуг, мы лишь часть того, что созревает на подмостках веб-дизайна? Мы разрабатываем то, что хотят видеть пользователи, что они ожидают от нас, делая тем самым наши продукты проще в использовании?
«Чем дольше объект находится в нашем окружении, тем больше дизайн стандартизирует его», — так говорит Пол Боуг. Так ли это – решайте сами. И все-таки — давайте взглянем на некоторые полноэкранные страницы веб-дизайна!
Сверху вниз, слева направо
Многие полноэкранные веб-сайты точно оценивают их размеры, используя JavaScript или CSS, чтобы убедиться, что начальный видимый раздел точно такого же размера, как в текущем окне браузера. Как только это сделано, некоторые CSS могут размещать элементы в крайних точках, даже если окно изменяет размер.
Makeshift используют этот шаблон, чтобы вставить вторичную навигацию в нижней части экрана, при этом некоторые предыдущие/следующие ссылки переходят влево и вправо. Фоновое изображение использует background-size: cover; на массивном figure элементе.
Ideas – полноэкранная WordPress тема с различными опциями для слайд-шоу, заставок, презентаций и т.д. Сайт использует градиент, расположенный в нижней части экрана, чтобы сделать название изображения и описание более удобным для чтения.
James Tupper выглядывает вверх из нижней части экрана, где его лицо графически позиционируется background-position: center bottom. Огромный желтый всплеск элегантно приравнивается к окну просмотра, используя CSS — height: 100vh;.
Журнал Lagom, детище Эллиот Джей и Саманты Стокс, использует домашнюю страницу, которая заполняет экран во всей его полноте. Здесь нет прокрутки (если не просматривать его на небольшом экране). Lagom использует нижний край для размещения своих социальных плагинов.
Soul представляет собой шаблон Shopify, один из его макетов является полноэкранным слайдером с навигационным ссылкам, расположенными справа.
Прокрутите, пожалуйста.
Опасность использования полного экрана в том, что пользователи могут не понять, что на сайте есть что-то еще, что можно найти с помощью прокрутки. Домашняя страница Envato решает эту проблему значком «прокрутки», предлагая вам взглянуть ниже активной панели.
Blandly сделали выбор в пользу обнадеживающей стрелки «вниз», для того, чтобы сказать: «смотрите здесь».
Домашняя страница Kindeo использует самую удачную на наш взгляд технику: задача прокрутки обеспечивается тем, что небольшой кусочек следующей секции всегда виден в нижней части окна просмотра. Там также есть стрелка «Find out more», поэтому у пользователя никогда не возникает сомнений, что есть что-то еще ниже видимой панели.
Kilani приняли весьма сомнительный подход к автопроигрыванию звука. Есть кнопка отключения в нижнем правом углу экрана. Их способ дальнейшей прокрутки – также весьма оригинален. Он реализован в помощью, прикрепленной к курсору мыши, фразы: «Scroll Down».
Видео
Дамир Которис, бывший UX дизайнер в Envato, начал проект Falcon Films, в результате своей страсти к аэрофотосъемке. Видео играет большую роль на домашней странице сайта; проверьте бэкграунд <video>, и наблюдайте сочное видео Мельбурна, снятого беспилотником.
Дамир использовал родной CSS min-height: 100vh для создания полноэкранного hero-раздела.
Landscape добивается того же эффекта: полный экран, автоматически проигрывающееся видео с дополнительным шоурилом, но для получения полного экрана использует JavaScript. В качестве видео — mp4 файл весом в 1.3Mb. И больше ничего, что может засорять вашу пропускную способность.
Стиль
Мы не упомянули еще одну вещь, которую дает нам полный экран: пространство! Используя пространство для представления продукции, компании, идеи — вся суть этого шаблона. Он устраняет беспорядок остальной части содержания и фокусируется на сообщении.
The Landscape – уже приводимый нами пример, использует в качестве фона красивый синий кобальт. Voog делает нечто подобное, что также выглядит великолепно.
Это изображение двойное — оно может иметь свои 540Kb и легко сужаться до нужного размера. Некоторое незначительное размытие с последующим снижением качества JPG до 50% приводит его к 50 Kb без ущерба для эффекта.
Как вам проект +Translation Envato Tuts? На наш взгляд классный пример использования RTL script для построения шаблона целевой страницы с несколькими вариантами компоновки полного экрана.
Вам достаточно?
Не хотелось бы, чтобы полноэкранная домашняя страница – этот шаблон, исчез в ближайшем будущем. Зачем? Ведь это эффективный способ введения пользователей на веб-сайты различных видов. А есть ли у вас любимые примеры полноэкранных Home Pages? Где, по-вашему, лучше использовать этот прием? Дайте нам знать об этом в комментариях!
