8 веб-трендов на 2019 год: современные лэйауты
Было время, когда веб-дизайн напоминал по стилю периодические печатные издания. Колонки и столбцы задавались строками текста и зафиксированными графическими изображениями. Но эволюция HTML, CSS и JavaScript дала новые возможности и на смену приходят современные дизайны и оригинальные веб-тренды. Посмотрите, каких результатов добиваются дизайнеры-новаторы, интересно и креативно оформляющие лейауты собственного или клиентского сайта.
Примеры этих 8 уникальных лейаутов, можно считать предложением в 2019 году развивать веб-дизайн сайтов по новым направлениям.
1. Глубина, задаваемая параллакс эффектом
Parallax эффектом можно добавлять в дизайн глубины. Прокрутка слоев графики, изображений и текста оживляет конструкцию страницы – дизайн становится динамичней и интереснее. Суть эффекта в том, что бэкграунд движется медленнее переднего плана.
Epicurrence ориентирован на любителей активного отдыха. На сайте используются параллакс и хорошо прорисованные иллюстрации. Вместо плоской картинки, дизайнер добивается эффекта присутствия.
Параллакс разносторонний эффект. Французский производитель фарфора Jaune de Chrome в дизайне использует слои из фото с керамикой и текста. Подобно самому бренду, сайт выглядит изящным и творческим.
2. Перекрывающие друг друга элементы
Сегодня дизайнеры вместо плоских блоков для контента используют Z-ось материального стиля. Мода на крупные блоки «чистых» минималистичных дизайнов отходит.
Карточка поверх фото на продуктовой странице – трехуровневым расположением контента софт-компания WebINTENSIVE добивается приоритетного внимания к нужной информации.
Текст поверх изображений это способ сделать страницу менее стесненной. У сайта брендинг-агентства Bauhem, градиентно размыты края монохромных фото-бэкграундов с наложением текста. Эффект избавляет от чрезмерной квадратности в дизайне.
3. Смещение заголовков и необычная разметка
Не в каждом дизайне уместны вовлекающие посетителя сложная анимация и украшательства. Разбивка контента смещенными элементами и колонками предохранит от скучной симметрии. Для примера, оформление сайта фармакомпании Alvogen – выглядит довольно интересно.
4. Карточки с контентом, расположенные горизонтально
Горизонтальное layout-размещение на странице избавляет дизайн от перегруженности. Это также работает на мобильных экранах, где по вертикали прокручиваются связанные материалы.
Cайт умных софт-решений Hypergiant по горизонтали расположенными карточками доносит до аудитории главное.
5. Разделенный экран
Разделением страницы пополам можно разбить контент на блоки и по максимуму использовать пространство экрана. Половинки, наполненные взаимодополняющим контентом усилят общий посыл.
Сайт компании Ono реализует продуктовые наборы. Тренд применяется для секций страницы с красивым затемнением и полезным эффектом.
Бренд злектровелосипедов Cowboy использует сплит-разделение в секциях, лаконично и в сжатой форме представляя свою продукцию.
6. Покажите сетку сайта
На продающей главной странице портфолио, дизайнер-консультант Hiro Shibata демонстрируя «выравненность», показывает как сделан веб-сайт. Посетителю с первого экрана бросается в глаза каркас – это как в театральном «разрушении четвертой стены», когда сценический герой сам обращается к аудитории. Неплохой способ повысить конверсию дизайнерскому сайту.
Предопределенная разметка макета с помощью grid-сетки согласует видимые элементы дизайна
Суть идеи: напомнить клиенту об устройстве дизайна – это всего лишь упорядоченные пиксели! Как ответил композитор Бах: «в нужное время жму на нужные клавиши».
7. Фоновые заголовки
Может показаться нелогичным показывать заголовки в бекграунде, но не всегда элементы сайта должны быть кричащими. Таким тонким подходом можно повысить эффективность контента. Комбинации с тематичными изображениями или анимациями усилят посыл хедера.
Для примера, сайт производителя промышленных шредеров Weima. Процесс измельчения в фоне за анимированным шредером дополнительно привлекает внимание к оборудованию.
8. Дополняющий горизонтальный скроллинг
Хорошо, пусть боковой скролл не практика веб-оформления, но в дополнение к традиционной прокрутке помогает скомпоновать контент.
Чтобы справиться с поставленной задачей, текст / изображения / др. элемент, нужно подготовить для применения в жестких пространственных лимитах.
Компания Grand Image работает с творческими заказчиками. Они позаботились, чтобы всё было аккуратно, а контент организован и прост для чтения.
Производитель рюкзаков Keus применяет с боковой прокруткой контента достаточные интервалы. У сайта стильный и не загроможденный вид, а мини галерея промо-фото с изображениями товаров всегда под рукой.
В каких направлениях веб-дизайн развивается?
Как вы считаете, в каком направлении дизайн сайтов будет развиваться и какие тренды в WEB-е актуальны уже сейчас? Очень непросто поспевать за современными дизайнерами, учитывая творческое многообразие их проектов с различиями в подходах к созданию лейаутов. Какие тенденции вы также заметили? Полагаете, что из некоторых web трендов можно выжать и побольше?
Здесь есть все, что может понадобиться опытному и начинающему пользователю! https://bit.ly/2yX8EHT
Отличная статья. Хотел бы посоветовать всем заинтересованым подобный материал об оформлении своего сайта. http://www.arteqo.com/ru/vizualnoye-oformleniye/grafika/