() translation by (you can also view the original English article)
Повний екран є одним із найбільш популярним в Інтернеті на даний момент. Декому це дуже подобається, дехто не може терпіти цього, але, незважаючи на ваші почуття, давайте розглянемо деякі приклади і поговоримо про найкращу практику в цій сфері.
Замітка про конвергенцію дизайну
Термін "конвергенція дизайну" означає, що з плином часу дизайни мають тенденцію ставати схожими між собою. Нещодавно @jongold написав в твіттері:
Який із двох можливих сайтів ви зараз дизайните? pic.twitter.com/ZD0uRGTqqm
— gold (@jongold) February 2, 2016
Суть його питання в тому, що сьогодні дизайнерам не вистачає креативності, вони просто беруть готові рішення замість того, щоб самим розробляти дизайн веб-сторінок. Повноекранний бум - яскравий тому приклад. Чи йдемо ми, дизайнери, найлегшим шляхом, використовуючи шаблон? Чи втрачаємо можливість розширювати рамки та втілювати нове? Невже інтернет стоїть на місці із-за лінощів?
Чи, як стверджує 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” прив'язана до прокрутки миші.
Відео
Damir Kotorić, колишній дизайнер UX на Envato, розпочав Falcon Films, як результат своєї пристрасті до аерофотозйомки. Тому відео відіграє помітну роль на домашній сторінці Falcon Films; на фоні <video> - яскраві кадри Мельбурна, відзняті з дрона.
Знову ж, Дамір використовував власний CSS min-height: 100vh; для повного екрану секції героя.
Landscape досягає такого ж ефекту; повноекранний режим, автовідтворення відео з заставкою, але з JavaScript для отримання повного екрану. Відеофайли відтворюються автоматично: mp4 - розміром 1.3Mb, але більше і не потрібно.
Стиль
Про що ми з вами ще не говорили, так це те, що нам дає повний екран, а саме: полотно! Використовувати простір, щоб представити продукт, компанію, ідею, ось головна ціль паттерну. Він ліквідовує безлад решти контенту та фокусується на повідомленні та людині.
Landscape використовує красивий синій кобальт (це одна з причин, чому він мені подобається), а Voog робить щось подібне, і це виглядає неймовірно.
Я завжди говорю про те, що хоча це зображення є дуотоном, його поточний розмір 540Kb можна легко порізати на такий, який вам потрібно. Невелика розмитість, потім зниження якості JPG до 50%, зменшує його розмір до 50Kb, абсолютно не зашкоджуючи ефекту.
Bloomberg Businessweek Design Conference (ви йдете?) використовує абстрактний макет шрифтів, щоб виразити свою ідею. Конвергенція дизайну? Не в цьому випадку, друже.
Я ще не згадував про Envato Tuts+ Translation Project? Можливо... У всякому разі, мені подобається демонстрація цієї теми RTL-script - подивіться на Proland, шаблон цільової сторінки Bootstrap з декількома варіантами макету екрану.
А як на ваш смак?
Повноекранна домашня сторінка - шаблон, який навряд зникне найближчим часом. Чому? Це ефективний спосіб, щоб познайомити користувача з сайтом будь-якого типу. Хто ваші фаворити? Який приклад серед тих, що ми розглядали, вам запам'ятався, хороший чи поганий? Розкажіть в коментарях!
