Полезное __ 30 декабря, 2024

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

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

Начну я с краткого обзора предсказаний на 2024 год.

Мне довольно точно удалось предвидеть развитие некоторых трендов. Например, XXL подвалы действительно плотно осели в наших дизайнах и стали некоторого рода «стилем». 3D графика также стала неотъемлемой частью современных сайтов, ценящих передовые технологии. Сгенерированный AI контент ни капли не сдает свои позиции, но с течением времени становится все более качественным и менее отличимым от «настоящего», а его применение теперь не баловство новыми технологиями, а осмысленное использование в качестве незаменимого помощника в разработке сайтов.

Некоторые тренды 2024 года мы увидим и в следующем, но в новом перерожденном виде: типографика телесуфлера, гигантские кнопки и бенто UI перевоплотятся в новые течения.

Напомню основные критерии, по которым я предсказываю жизнь трендов (подробную теорию вы можете перечитать в начале моей предыдущей статьи):

• Стадия (подъем, пик и спад);
• Популярность (низкая, средняя, высокая);
• Прогноз (уйдет насовсем, останется локально*, закрепится как стиль).

* Останется локально — в моем понимании значит, что тренд не забудется на 100%, а его будут использовать в тех проектах, где это будет уместно.

Но прежде, чем перейти к списку трендов, пара слов о тенденциях — совокупности близких по духу трендов. На следующий год я прогнозирую в дизайне сайтов такие тенденции:

• возвращение старых стилей и трендов с приставкой «нео» или «2.0»;
• также как и в прошлом году продолжится любовь к ретро стилю самых разных эпох;
• а креатив и необычность однозначно станут флагманскими приемами всех новинок наступающего года.

А вот и мой личный хит-парад трендов в 2025:

Нео ретро

Новый взгляд на ретро-стиль активно вирусится всю вторую половину 2024 и продолжит удивлять нас и в следующем году. Согласитесь, выглядит он необычно: дизайн из прошлого, обрамленный современным интерфейсом и технологиями. Только не путайте этот тренд с таким стилем, как Ретрофутуризм, здесь кроме ретро используются не выдуманные технологии из будущего, а реальные из настоящего: интерактивная 3D графика, флюидная верстка, необычные ховер-эффекты и многое другое, что присуще современным технологичным сайтам.

Примеры:

Креативный скроллинг

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

Примеры:

XXXL заголовки

Прошлогодний тренд на XXXL подвалы «поднялся выше по сайту» и теперь в моде еще и гигантские заголовки и не только (но это уже другая история). Особенность данного тренда в том, что чаще всего такие заголовки занимают 100% ширины экрана и укладываются в одну строку. Как правило XXXL заголовки используются на первом блоке сайта.

Примеры:

Нео глассморфизм

Еще один «нео» тренд, на, казалось бы, уже забытый глассморфизм (или стекломорфизм). Неожиданно к нам вернулась мода на имитацию стекла на сайте, теперь если вы красиво и уместно оформляете интерфейс в стекле — вы в тренде. Особенно популярными стеклянными элементами являются кнопки, плашки на фоне плиток или форм и фон для выпадающего меню. Также хочу отметить, что новизна данного тренда заключается в том, как выглядит стекло — оно очень плотное, почти непрозрачное, матовое, с очень большим размытием и часто с еле заметной обводкой, имитирующей край поверхности стекла.

Примеры:

Флюидные элементы

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

Примеры:

Чтобы реализовать подобные элементы на Тильде, вы может воспользоваться следующими модификациями:

• Анимацию флюидных карточек с фото в zero-блоке можно взять на сайте Matilda бесплатно и с подробной инструкцией;
• Анимацию флюидных карточек с видео из стандартного блока можно взять у Максима Щукина также бесплатно и с инструкцией для трех вариантов взаимодействия.

Текст из блюра по скроллу

На смену тренда «Типографика телесуфлера» пришел «Текст из блюра по скроллу», который работает точно также, но с одним отличием — текст появляется не просто из прозрачности, а с эффектом размытия. Я думаю, это такая отсылка к вернувшейся моде на глассморфизм, но отнесла этот эффект в отдельный тренд. Сюда же добавлю прием с исчезновением текста в блюр и размытие сайта на верхней и нижней границе экрана, как на одном из примеров ранее.

Примеры:

Чтобы реализовать такой эффект на Тильде, вы можете воспользоваться платной модификацией от студии Тистолов.

Креативные курсоры

Еще один тренд на креатив — на этот раз на курсоры. Сама идея заменять стандартный курсор на что-то эдакое не нова, но по-настоящему вирусным явлением это стало только во второй половине 2024 года и продолжится в следующем. Ключевая особенность данного тренда — это технически сложные кастомные курсоры, тут и с эффектом размытия бэкграунда (снова привет глассморфизм), «липкие» или деформирующиеся при движении курсоры, с видео или галерей на фоне или в виде сложной анимированной svg-фигуры.

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

Примеры:

Бенто UI 2.0

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

Но идея организовывать интерфейс в Бенто стиле сама по себе очень привлекательна, ведь это удобный способ систематизировать большое количество разнообразной информации. И тогда дизайнеры нашли выход — они решили использовать Бенто локально, чередуя нагруженный плиточный интерфейс с минималистичными секциями, тем самым не давая устать пользователю и сохраняя общую аккуратность и чистоту сайтов. Так и родился Бенто UI 2.0 — умный, эстетичный и современный.

Примеры:

XXXL формы

Еще одно ответвление прошлогоднего популярного тренда «XXXL подвалы» постепенно завоевывает любовь дизайнеров. XXXL формы — это гигантские элементы интерфейса, они настолько большие, что иногда смотрятся даже нелепо. Но такие нарочито огромные формы производят впечатление, и при правильном и сбалансированном использовании создают неповторимый и уникальный стиль. Не редко этот тренд комбинируется с Бенто UI, перенимая от него построение фигур как в тетрисе и большие скругления.

Данный тренд как будто специально создан для сайтов на Тильде, благодаря технологии автоскейла можно без труда верстать дизайн в подобном стиле.

Примеры:

Сплитскрины

Сплитскрин (англ. Split screen) — разделённый экран. В связи с растущей популярностью широкоформатных мониторов дизайнеры все чаще стали делить экраны на части. Ведь по ширине у нас теперь много пространства, и почему бы его не использовать более эффективно? Почему бы не показывать сразу два экрана на одном? Хоть популярность данного тренда небольшая, я предвижу ему стабильное будущее, и он обязательно найдет себе применение там, где это будет уместно.

Примеры:

Необычная типографика

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

Примеры:

Видео по скроллу

Все чаще и чаще в самые обычные коммерческие сайты проникает тренд на видео по скроллу «как у Apple». Связано это, конечно, с развитием и большей доступностью технологий даже для самых простых разработчиков, в том числе и на Тильде. И вот совсем кстати пришлась новая модификация от Аннекса для Тильды, которая еще сильнее поспособствует распространению этого тренда в следующем году.

Примеры:

Заключение