Бенто, анимация и винтаж: тренды веб-дизайна 2025

BOOX

Стаж на ФС с 2012 года
Команда форума
Служба безопасности
Private Club
Регистрация
23/1/18
Сообщения
29.295
Репутация
11.800
Реакции
61.999
RUB
50
Пользователю нужно , чтобы составить мнение о сайте.

Ваши шансы удержать его возрастут, если сайт будет в тренде ― мы собрали 7 самых важных.


webp


Каждые 3 секунды в интернете 1 сайт. Когда вы прокрутите нашу статью до конца, в мире станет примерно на 50 сайтов больше. Выживут из них максимум 10 ― только оптимизированные и удобные, созданные с учетом тенденций.

7 трендов дизайна сайтов, которые перекочуют в 2025

Бенто-дизайн (Bento Grid)

И нет, мы не о тортах и не об азиатском ланч-боксе. Бенто-дизайн помогает организовать текст, значки, цифры, изображения и выстроить гармоничный визуал сайта. Грубо говоря, это ячейки с важными «ингредиентами» для бизнеса клиента.

Если перед вами на экране сгруппированы элементы, у них округлены углы и распределены акценты, то это тот самый Bento Grid. А еще такие ячейки могут быть анимированными, что привлекает больше внимания пользователей.

Для сайта <a href=https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ff5carwash.ru%2F&postId=1670330 rel=nofollow noreferrer noopener target=_blank>автомойки F5</a> мы использовали бенто-дизайн

Для сайта автомойки F5 мы использовали бенто-дизайн

Темный режим​

Темный режим нагрузку на глаза, экономит заряд батареи на устройстве, делает дизайн сайта более эстетичным и облегчает просмотр контента для людей с нарушениями зрения. Все это приводит к тому, что сайты переходят на темную сторону.

За 8 лет опцию «дарк скрин» в настройки практически все техногиганты, чтобы увеличить время пользователя на сайте. Исследование шведского университета : благодаря темной теме запрещенный в России Facebook продлил пребывание пользователей в своей соцсети на час.

На <a href=https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwarpoint.ru%2F&postId=1670330 rel=nofollow noreferrer noopener target=_blank>сайте</a> для международной сети парков виртуальной реальности Warpoint мы перешли на темную сторону : )

На сайте для международной сети парков виртуальной реальности Warpoint мы перешли на темную сторону : )

Тот же прием мы использовали для <a href=https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fuavdec.ru%2F&postId=1670330 rel=nofollow noreferrer noopener target=_blank>сайта дрона-детектора «Булат»</a>

Тот же прием мы использовали для сайта дрона-детектора «Булат»

Анимация, GIF и видео

Джей Пратт из Университета Торонто и пришел к заключению ― люди быстрее реагируют на анимированные, а не статичные картинки. Функциональная анимация повышает UX-сайта, усиливает индивидуальность бренда и привлекают внимание.

Движение картинок на сайте также снимает когнитивную нагрузку с пользователя, ― об этом исследователи Adobe еще в 2016 году. Другими словами, вы упростите навигацию на сайте, если подсветите ключевые действия или важную информацию анимацией или гифками.

Только не располагайте анимационные блоки там, где обычно размещена реклама на сайтах ― Nielsen Norman Group , что если элемент не является рекламой, но расположен рядом с рекламными баннерами, пользователь скорее всего его проигнорирует.

Посмотреть вложение mp4.mp4

На промо-лендинге корейского фан-фуда Naitori мы анимировали главных персонажей ― посмотрите, как дружелюбно получилось!

Посмотреть вложение mp4 (1).mp4
Анимацию использовали и для сайта компании «Фабрика продаж»

Чистый лист

Время подробных описаний и массы кнопок на одной странице прошло. У пользователя мало времени, и перегруженный сайт его скорее пугает.
Хороший веб-дизайн напоминает чистый лист ― навигация сокращена, использовано минимальное количество цветов и много свободного пространства.

На <a href=https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fcaldo.studio%2F&postId=1670330 rel=nofollow noreferrer noopener target=_blank>сайте </a>для производства дизайнерских радиаторов Caldo мы использовали минимум цветов, деталей и простую структуру

На сайте для производства дизайнерских радиаторов Caldo мы использовали минимум цветов, деталей и простую структуру

Для <a href=https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwoodled.ru%2F&postId=1670330 rel=nofollow noreferrer noopener target=_blank>сайта</a> дизайнерских светильников Woodled мы также предложили минимализм

Для сайта дизайнерских светильников Woodled мы также предложили минимализм

Винтажный дизайн

В моде ностальгия ― добрая и согревающая воспоминаниями, которая помогает осбоводиться от трудностей реальности и погружает в хорошие, но уже исчезнувшие времена. 2020 год стал самым успешным для винила в Великобритании с 1990 года, по данным TheGuardian, продажи аудиокассет в этой стране за 15 лет.

«Позитивные воспоминания поднимают нам настроение и заставляют сильнее чувствовать социальную связь с другими», ― исследователь тренда ностальгии и принятия потребительских решений доктор Филиппо Кордаро.

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

Наш <a href=https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fzyn.bar%2F&postId=1670330 rel=nofollow noreferrer noopener target=_blank>сайт</a> в ретро-дизайне для бара «Заходи, я настаиваю» в духе старых советских плакатов

Наш сайт в ретро-дизайне для бара «Заходи, я настаиваю» в духе старых советских плакатов

<a href=https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Firaochomma.com%2Fmain&postId=1670330 rel=nofollow noreferrer noopener target=_blank>Сайт</a> для фотографа Ira Ochomma в духе винтажного минимализма, напоминающий фотоальбом. Утонченные шрифты и визуальные акценты в точности передали ценности клиента.

Сайт для фотографа Ira Ochomma в духе винтажного минимализма, напоминающий фотоальбом. Утонченные шрифты и визуальные акценты в точности передали ценности клиента.

ИИ для любой цели

48% российских дизайнеров нейросети в веб-дизайне. Нейросети помогают быстрее создавать необычные логотипы и иллюстрации. Веб-дизайнеры могут сами генерировать иллюстрации, что расширяет границы экспертности разработчиков и создавать крутые работы.

Фото-визуал для <a href=https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fzvezdapharma.ru%2F&postId=1670330 rel=nofollow noreferrer noopener target=_blank>сайта</a> фармацевтической компании  «Звезда» мы создавали нейронками.

Фото-визуал для сайта фармацевтической компании «Звезда» мы создавали нейронками.

Изучайте тренды и внедряйте их в свои продукты! Не важно, разработан ли ваш сайт с нуля на коде или создан на конструкторе ― крутых решений достоин каждый.


 
  • Теги
    веб-дизайн
  • Сверху Снизу