Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Inspiration

Текущие тенденции в веб-дизайне: полный экран

by
Read Time:4 minsLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Sorry About This: 40 Examples of 404 Pages
Designing Comments, Discussion, and Feedback For the Web

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

Интерес к полному экрану остаётся сегодня одним из самых известных шаблонов в Интернете. Кто-то это любит, кто-то не очень, но, независимо от отношения, давайте рассмотрим некоторые практические примеры.  

Замечание о конвергенции дизайна

Термин «конвергенция дизайна» намекает, что дизайны имеют привычку становиться похожими, сходными, относительно момента времени. Недавно @jongold написал в твиттере:

Вопрос заключался в том, что дизайнерам в наши дни не хватает творчества, они просто берут решение, лежащее на поверхности. Полноэкранный бум - прекрасный тому пример. Разве мы, как дизайнеры, ищем лёгких путей, используя этот шаблон? Упускаем возможность раздвигать границы и внедрять новое? Неужели Интернет застыл из-за лени?

Или, как утверждает Paul Boag, мы малая часть большого полотна веб-дизайна? Идём на поводу у потребителя; делаем то, чем проще пользоваться?

«Чем дольше объект работает, тем стандартней его дизайн» - Paul Boag

Оставляю на ваше суждение. А пока давайте посмотрим на некоторые полноэкранные веб-проекты!

Сверху вниз, слева направо

Многие полноэкранные веб-сайты уточняют размеры в JavaScript или CSS, чтобы видимый раздел был точно таким, как и текущее окно браузера. После этого CSS может размещать элементы под обрез, даже если размер окна изменяется.

Makeshift использует этот шаблон для привязки вторичной навигации в нижней части экрана, с некими предыдущими/ следующими сообщениями слева и справа. Изображение фона  background-size: cover; с элементом массива figure .

Ideas - полноэкранная тема WordPress с различными вариантами слайд-шоу, презентаций, домашней страницы. Он использует градиент в нижней части экрана, чтобы заголовок и описание изображения лучше читались.

James Tupper выглядывает из низа экрана, размещая лицо с background-position: center bottom;. Огромный жёлтый всплеск элегантно сделан равным высоте сцены, используя CSS: height: 100vh;.

Подробней об этих двух техниках CSS:

Стильный журнал Lagom, детище Elliot Jay и Samantha Stocks, имеет домашнюю страницу во весь экран. Здесь нет прокрутки (если не смотреть на маленьком экране). Lagom использует нижний обрез для социальных ссылок.

Soul - это шаблон Shopify, а один из его макетов - полноэкранный слайдер с навигационными ссылками справа.

Сохраняйте прокрутку ↓

Опасность полного экрана в качестве формы введения в том, что пользователи могут не понимать, что надо пользоваться прокруткой. Собственная домашняя страница Envato поясняет это с помощью значка “scroll”, предлагая вам заглянуть за край.

Blandly ставит направленную вниз стрелку, чтобы указать «смотрите сюда».

Домашняя страница Kindeo использует технику, которая мне нравится; в нижней части окна просмотра всегда видна небольшая часть следующего раздела. Та же стрелка и «Узнайте больше», поэтому пользователь не сомневается, что под обрезом есть что-то ещё.

Kilani нашли довольно сомнительный подход к автовоспроизведению; в нижнем правом углу экрана кнопка отключения звука. Их способ предложить вам прокрутить дальше также интересен - привязка команды “Scroll Down” к курсору мыши:

Video

Damir Kotorić, бывший дизайнер UX в Envato, начал Falcon Films в результате своей страсти к аэрофотосъемке. Поэтому видео играет заметную роль на домашней странице Falcon Films, на фоне <video> сочные кадры Мельбурна, снятые с дрона.

Опять же, Дамир использовал собственный CSS min-height: 100vh; для полного экрана секции героя.

Landscape достигает такого же эффекта; полноэкранный режим, автовоспроизведение видео с заставкой, но с JavaScript для получения полного экрана. Видеофайлы автопроигрывателя mp4 - это 1.3Mb, но больше не нужно.

Style

О чём мы ещё не говорили, - это то, что даёт нам полный экран: холст! Использовать пространство для представления продукта, компании, идеи, является смыслом этого шаблона. Он удаляет беспорядок остальной части контента и фокусируется на сообщении и личности.

Landscape использует красивый синий кобальт (одна из причин, по которой он мне нравится) и Voog делает нечто похожее, это выглядит великолепно.

Я всегда говорю об этом, хотя это изображение является дуотоном, поэтому его текущие 540Kb можно легко порезать в размер. Небольшое размытие, а затем снижение качества JPG до 50% снижает его до 50Kb без ущерба для эффекта.

Bloomberg Businessweek Design Conference (вы идёте?) использует абстрактный макет шрифтов, чтобы выразить свою мысль. Конвергенция дизайна? Не здесь, товарищ.

Я ещё не упоминал Envato Tuts+ Translation Project? Возможно ... Во всяком случае, мне нравится демонстрация этой темы RTL-script–check Proland, шаблон целевой страницы Bootstrap с несколькими вариантами макета экрана.

А на ваш вкус?

Полноэкранная домашняя страница - шаблон, который вряд ли исчезнет в ближайшее время. А почему? Это эффективный способ ввода для сайтов любого типа. Кто ваши фавориты? Какой пример использования вам запомнился, хороший или плохой? Расскажите в комментариях!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.