Новое и хорошо забытое старое: тренды веб-дизайна в 2023 году

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

В этой статье вы узнаете, какое оформление сайта будет актуально в 2023 году.

3D-графика

Что, помимо сферы деятельности, объединяет Тинькофф и Сбербанк? 3D-графика. Ворвавшись в веб-дизайн в 2020 году, она и сегодня не теряет популярности. Этот тренд помогает пользователям легче концентрироваться и воспринимать информацию, что особенно важно, например, клиентам банков. 3D-графика — полезное направление дизайна, регулярно выходят новые паки и даже инструменты для редактирования glTF 3D: producthunt, iconscout. Поэтому можно сделать вывод, что в будущем тенденция будет только набирать популярность. Познать силу 3D-графики можно по ссылкам:

Тренд будет актуален не только на сайтах, но и офлайн: например, в рекламе и иллюстрациях.

Lottie-анимация

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

Lottie-анимация украсит ваш сайт и поможет передать его суть. Например, любители йоги оценят анимацию выше, ведь она точно выражает ощущение свободы. Такой эффект легко создать с помощью библиотеки Lottie. Анимация After Effects в ней показана в реальном времени и легко добавляется на сайт. Для этого просто скачайте GIF с сервиса Lottiefiles или скопируйте код нужного файла.

Несмотря на привлекательность такой анимации, старайтесь использовать её в меру. Пусть даже вам кажется, что каждая кнопка страдает от недостатка активности, лучше подчеркнуть движением только самые важные элементы.

Рисованный стиль

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

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

Держите ещё 2 ссылки для вдохновения:

Сложные градиенты

Долгоиграющий тренд родом из 80-х и 90-х, который актуален и сейчас. В 2023 году мы ещё встретим градиенты на сайтах. Однако их вид будет несколько сложнее привычного. Например, потрясающие сетчатые градиенты (от англ. Gradient Mesh) со сложной структурой. Они сочетают в себе минимализм и иллюзию движения, вызывая восторг пользователей. А дизайнерам дают простор для творчества.

Проникнуться красотой градиентов можно на сайтах:

А если вы хотите сами создать сетчатый градиент, поможет сервис Meshgradient. Для наилучшего результата советуем подбирать палитру на сайте Adobe и выбирать натуральные цвета, которые есть в природе — жёлтый, зелёный, синий и т.п.

Глиноморфизм

Глиноморфизм — совсем молодой тренд веб-дизайна, однако его ждёт большое будущее. На сайтах дружелюбные люди в моде (в отличие от метро).

Узнать глиняных жизнелюбов можно по этим приметам:

  • светлые, пастельные и яркие цвета;
  • большие закругленные углы;
  • двойная внутренняя тень;
  • внешняя тень.

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

Оценить и купить наборы человечков можно здесь: humans.wannathis.onehumans.wannathis.one.

Мемфис

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

Вот несколько сайтов в стиле мемфис:

Параллакс-скроллинг

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

Примеры для вдохновения:

Видимая сетка

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

Обратите внимание на сайты:

Интерактивные шрифты

Без шрифтов не обходится ни один дизайн сайта. Они могут как улучшить, так и ухудшить его при неправильном использовании. В этом году нас ждёт больше шрифтов, с которыми что-то происходит, но это не баг, а фича.

Пример: анимация ниже. При наведении текст меняет свою жирность, а надпись становится легче читать.

Выводы

Желание следовать трендам имеет смысл: без регулярного обновления сайт постепенно теряет свою актуальность. Примеры из статьи можно использовать как по отдельности, так и вместе. Например, комбинировать 3D-графику с анимацией или дополнять интерактивную типографику градиентами.

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

0
39 комментариев
Написать комментарий...
Евгений Иванов

Lottie выглядит очень сочно, будет приятно, если сайты услуг начнут использовать аккуратную и лёгкую анимацию чаще.

Ответить
Развернуть ветку
Pixel Lens

Этот стиль широко распространён уже миллиард лет 🤷🏻‍♂️

Ответить
Развернуть ветку
Артём Артёмов

Как будто в 2017 вернулся

Ответить
Развернуть ветку
Sergei E

Это называется "наконец-то opensource–технологии подтянулись по возможностям легковесных векторных анимаций до проприетарного флеша 2001-го года" :)

Лично я в этом вижу и добро, и зло.

Плюс: открытость даёт возможность быстро избавляться от всякой дряни и улучшать качество. Закрытый флеш-плагин для того же Мака, например, грел гонял проц на 100% загрузки многие годы подряд — Адобу было насрать. То же самое верно и с вопросом закрытия уязвимостей.

Минус: сайты опять превращаются в новогодние ёлки, увешанные свистоперделками. Но это уже, конечно, проблема не самого Lottie, и не анимаций на его основе, а вкуса и чувства меры.

Ответить
Развернуть ветку
Степан

Спасибо за статью! Каждый год одно и то же – параллакс, 3д и иже с ними. Когда уже появится что-то новое?

Ответить
Развернуть ветку
Никита Воронцов

глиноморфизм относительно новый тренд, ему всего пару лет. спасибо ленивым дизайнерам которые хотели быстрее рендерить свои тридешки 😂

Ответить
Развернуть ветку
Степан

На глиноморфов вообще без слез не глянешь, их даже в расчет не беру хахаха

Ответить
Развернуть ветку
Михаил Марзоев

Еще немного и вернемся к стоковым фото)) За статью спасибо

Ответить
Развернуть ветку
Никита Воронцов

некоторые и щаз такое просят

Ответить
Развернуть ветку
Pixel Lens

А зачем? Кому нужны новые свистоперделки?

Ответить
Развернуть ветку
Bo.G

Боже. Какое же все это убожество. Глино...шта? Звучит и выглядит как-то по пидарски, прости хоспади.
Есть простой рецепт. Минималистичность и ищящество. Весь этот кричащий, псевдо интерактивный мусор никакой полезной нагрузки не несет. Крвткость - сестра таланта. Поменьше свистоперделок, побольше действительно нужной информации. И тогда сразу будет видно качество рабоиы базового функционала (а оно как правило никакущее, потому что все ресурсы брошены на залепухи... и так во всех сферах мы наблюдаем).

Ответить
Развернуть ветку
Sergei E

И да, и нет.

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

С другой стороны, "глиноморфизм" тоже может быть красивым, а не превращаться в глиномесство. Пример: золотая классика пластилиновых игр, Neverhood. https://www.youtube.com/watch?v=FYvlcP1OheI

Ответить
Развернуть ветку
Sergei E

Пример такого элемента управления - прямо вот он, не отходя от кассы :) Кнопка "Отмена".

Ответить
Развернуть ветку
Bo.G

Согласен с Вами.
Конечно. Золотая середина должна быть. Я ж не за минимум миниморум. Эргономику никто не отменял.

Ответить
Развернуть ветку
Ястржембский
Крвткость
рабоиы

Причина тряски?

Ответить
Развернуть ветку
Bo.G

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Виктория Круглова

все выглядит очень здорово, но теперь главное, чтоб в погоне за красивым оформлением было удобно пользоваться сайтом

Ответить
Развернуть ветку
Светлана Суслова

Ну вот и появилась задачка делать красивое ещё и практичным

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Sergei E

Ща главный тренд - делай что хошь и нахрен авторитетов. Каких только дизигнов снова не встретишь на просторах дикой природы, как в начало 00-х вернулся. Порой даже сразу и не скажешь - всрато или ЗБС.

Ты кто такой, беханс, давай до свидания :)

Ответить
Развернуть ветку
Наталья Коновалова

Благодарю за статью! Отдельно для себя отметила тренд с видимой сеткой, выглядит очень эстетично.

Ответить
Развернуть ветку
Татьяна Л.

))

Ответить
Развернуть ветку
Алексей Skyfish Кузнецов

В 2012 году был популярен этот стиль, мы несколько магазинов запустили в таком дизайне. Его тогда называли стиль Metro, его майки придумали в 2010

Ответить
Развернуть ветку
Виктор Шулика

Хрень, из 2017го

Ответить
Развернуть ветку
Даниил Ладейщиков

Про интерактивные шрифты слышу впервые, надо будет поизучать это направление

Ответить
Развернуть ветку
Матвей Дубровин

но ведь когда то хорошо забытое старое тоже было новым)))

Ответить
Развернуть ветку
Sergei E

Вкратце:
1. ... гусей - живи веселей!
2. Не глиномес, а глиноморф.

А если шутки в сторону, то наконец-то. Доведенный до абсурда минимализм, элементы управления неотличимые от надписей, плиточность, ублюдский гугловский material, да и в общем-то всё после скевоморфизма времён Джобса и полупрозрачных стёкол Винды-7 — Го В Но. Пора шатать эту лавочку новым, то есть хорошо забытым старым. Так, глядишь, и до ар-нуво с барочностью снова доплывём. Зер гут, с почином, и в бой, херры и фройляйн))

Ответить
Развернуть ветку
Mikhail Nikolsky

В общем, ничего не изменилось.

Ответить
Развернуть ветку
Дмитрий Гурин

Не встречал раньше сайты с видимой сеткой, но они явно покорили мое сердце. Спасибо за классную подборочку!

Ответить
Развернуть ветку
Ариана Гурьева

А вот интересно, возможно ли ещё придумать прям своё своё, что то новое, оригинальное? Сможет ли 2023 год удивить и порадовать креативом?

Ответить
Развернуть ветку
Darina Asinkritova

мне кажется, человек может придумать своё опираясь в любом случае на какой-то контент, какие-то воспоминания или то, что он когда-то видел. Сложно встретить что-то непохожее

Ответить
Развернуть ветку
Антон Ли

Гусь хорош)

Ответить
Развернуть ветку
Artyom Sokolov

Гуси топ

Ответить
Развернуть ветку
F-117
Ответить
Развернуть ветку
Татьяна Л.

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

Ответить
Развернуть ветку
Ковригин Григорий

соглашусь с вами) тоже так считаю

Ответить
Развернуть ветку
Pavel Berd

Мемфис - это не стиль, а аляпистый хаос, пришедший во время упадка вкуса у тружеников дизайнерского рынка. И впоследствии укоренившийся, приобретя "статус", так как ничего нового так и не смогли привнести. А эти ваши модные 3D работают на большинстве, но далеко не на всех компьютерах пользователей. Например выше приведенные сайты я могу посмотреть и насладиться всей их красотой только на домашнем компьютере. А рабочая лошадка выдает мне 4-7 кадров в секунду и скролит страницу с задержкой в 0,5-1 секунды. Что делает посещение сайта практически нецелесообразным. Поэтому говорить о том, что этот "тренд" будет приобретать все большую популярность рано, как было это рано и в начале прошлого года, когда я в январе 2022 читал подобную статью и практически идентичное мнение иного эксперта. Любой сайт, если он служит бизнесу, должен решать вопросы поставленные бизнесом. И "красивости", и "модные фишечки" здесь стоят далеко не на первом месте. Безусловно они важны, как элементы уникальности и индивидуальности того или иного сайта, но гораздо важнее, что бы сайт решал конкретно поставленную задачу посетителя чем помогал бизнесу зарабатывать копейку на содержание этого сайта, веб-мастера, дизайнера, сеошника и кто там еще в этой банде состоит...

Ответить
Развернуть ветку
Валентина Дурова

Часто встречаю сейчас 3D графику в дизайне

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
36 комментариев
Раскрывать всегда