Актуальні тренди веб-дизайну: повноекранні домашні сторінки

15

Від автора: повноекранні 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 з кількома варіантами повноекранних макетів.

Актуальні тренди веб-дизайну: повноекранні домашні сторінки

Ну що на сьогодні вистачить?

Повноекранні домашні сторінки це той шаблон, який навряд чи зникне найближчим часом. Якщо це ефективний спосіб подання користувачам сайту будь-якого типу, власне, чому він повинен зникнути? А які ваші улюблені шаблони? Де ще ви бачили застосування цього шаблона (де він підходив, а де не дуже)? Пишіть в коментарях!