65 ТРЕНДОВ ВЕБ ДИЗАИНА В 2023 ГОДУ ТОПОВЫЕ СОВЕТЫ ОТ ПРОФИ

Проходные и устойчивые тренды

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

Их не всегда стоит смешивать и добавлять фишки из вау-дизайна в коммерческий дизайн. Например, когда вы работаете над сайтом для гидравлического оборудования, у которого целевая аудитория — заказчики в возрасте 35-45 лет, то анимация только помешает пользователям воспринимать информацию.

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

Минимализм

Сайт бренда спортивной одежды EQPT в эстетике минимализма.

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

Теперь каждый может потратить немного времени, чтобы изучить площадку (например, Tilda), и собрать сайт в эстетике минимализма.

Шаблонные сайты в однотипном минималистичном оформлении на Tilda.

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

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

Продукт как элемент дизайна

На лендинге iPhone 14 сам продукт выступает в качестве элемента дизайна.

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

Баухаус

Дизайн веб-сайта в стиле Баухаус.

Стиль Баухаус пришел к нам из немецкой архитектуры и прочно закрепился. Для него характерно использование большого количества ярких цветов и нестандартной типографики.

Часто сложная композиция состоит из простых геометрических фигур.

Это тоже устойчивый тренд, и он еще долгое время будет востребован. Дело в том, что все приложения единообразны, а экраны устройств небольшие, поэтому сложно придумать дизайн, который бы выделял приложение среди десятка похожих. Благодаря различным стилям, таким как Баухаус, удается придумывать нестандартные решения. Но, конечно, это не единственный стиль, который подходит мобильным приложениям.

Типографика

Баннер с заголовком на главной странице сайта дизайн-студии Antara.

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

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

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

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

Ретро-стиль

Оформление сайта в ретро-стиле. Источник

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

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

Использование искажений

Сайт с ненавязчивым эффектом шума.

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

Структурные блоки

Видимые границы и структурные блоки на сайте.

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

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

Темная тема

Темная тема на сайте диджитал-агентства.

Этот тренд популярен уже несколько лет. При разработке приложений обычно создают сразу два варианта интерфейсов — с темной и светлой темами. Сайты с темной темой тоже выглядят намного эффектнее.

Темная тема удобна: кому-то легче читать с такого экрана по ночам, кому-то в принципе проще воспринимать контент на темном фоне. Если дизайн грамотно проработан, то черный цвет не напрягает, а расслабляет. Кроме этого, темная тема экономит заряд аккумулятора.

Пастельные тона

Пастельная палитра на сайте стилиста.

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

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

Монохром

Монохромный лендинг в стиле Barbie.

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

Эффект глубины и тени

Сайт с эффектом глубины, градиентом и анимацией.

Иногда предмет на экране выглядит так, будто достаточно только протянуть руку, чтобы взять его. Объекты могут быть выполнены в 3D-графике, двигаться с разной скоростью в разных плоскостях, и за счет этого достигается эффект объема.

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

Сплит-экраны

Разделение экрана на части для разграничения информации.

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

Микроанимация и моушн-дизайн

Движение букв при скролле.

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

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

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

Кастомные курсоры

Курсор напоминает хвост летающей кометы, при этом функционален.

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

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

3D-элементы

3D-фигуры в дизайне сайта.

Одним из трендов 2022 года считаются объемные фигуры с простой или сложной геометрией. Все чаще мы можем наблюдать 3D-сцены на сайте: когда все элементы будто оживают и вращаются. Например, карта собирается из точек или кристалл по центру экрана вращается, пока пользователь скроллит контентную часть.

При скроллинге двигаются 3D-элементы. Источник

Тренды современного дизайна сайтов

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

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

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

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

UX/UI-дизайнеры

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

Возможность релокации

Я знаю достаточно большое количество классных UX/UI-дизайнеров из России, которые переехали в Нидерланды, в Берлин, в Лондон. Это все люди уровня мидл плюс. Если компания хочет нанять джуна, ей будет проще взять на эту позицию соотечественника. Чтобы зарубежные работодатели обратили на вас внимание, пока вы джун, надо иметь компетенции, которые будут существенно выше среднего по рынку.

Сложность

В направление UX/UI средняя сложность входа. Это более требовательное к знаниям и навыкам специалиста направление, чем графический дизайн. Здесь важна системность и структурность мышления. Например, хорошие дизайнеры интерфейсов, если мы говорим о кардинальной смене профессии, получаются из людей с инженерным или архитектурным образованием.

Моушн-дизайнеры

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

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

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

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

Моушн-дизайн — это популярная история. Сейчас в эту сферу пытается идти работать большое количество людей. Но дело в том, что это достаточно сложная для входа профессия. Даже сложнее, чем UX/UI-дизайн. На мой взгляд, пойти в моушн-дизайн с нуля — это не самая конструктивная стратегия.

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

Графические дизайнеры

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

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

Графический дизайн, как и бренд-дизайн — это профессии, в которых сложнее релоцироваться, то есть устроиться работать в зарубежную компанию. Актуальность графического дизайна за рубежом ниже, чем UX/UI. Но они часто работают на фрилансе, а этот способ работы вообще не предполагает привязки к стране.

Часто графический дизайн — это точка входа для молодых дизайнеров. Они используют его, как возможность освоиться, набрать базовые скилы и дальше выбрать направление развития. Если освоить базу графического дизайна, можно смотреть в сторону того же моушн-дизайна или UX/UI.

Коммерческие иллюстраторы

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

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

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

Веб-дизайнеры

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

Хорошие веб-дизайнеры ценятся везде. I T — популярное, быстро растущее направление, и специалистов могут хантить по всему миру. Но, как и в случае с UX/UI-дизайнерами, зарубежные компании предпочитают нанимать специалистов уровня мидл и выше. Впрочем, новички могут рассчитывать на работу в российских компаниях удаленно или подрабатывать на фрилансе.

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

Дизайнер мобильных приложений

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

Здесь все примерно так же, как в случае с UX/UI и веб-дизайном. Специалистам уровня мидл и выше относительно легко устроиться в зарубежную компанию и переехать, потому что технологии в других странах используются те же. Новичкам лучше наработать опыт в российских компаниях.

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

Дизайнер 3D-графики

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

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

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

Дизайнер интерьеров

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

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

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

Гейм-дизайнеры

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

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

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

Не все тренды, которые выделяли эксперты в 2022 году, остались актуальными. Иногда свежие инструменты, которые нравятся пользователям и специалистам, в итоге оказывались неприменимы или неудобны в работе. Тогда им на смену пришли другие. Вместе со старшим продуктовым дизайнером сервиса «Ясно» Артуром Абдуллиным разбираемся, какие визуальные и функциональные приемы остались популярными и будут востребованы в 2023 году.

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

3D используется в интерфейсах для демонстрации новых фич, а также на экранах или панелях, для которых пока нет контента. Взрыв стилей, в которых интерфейс совмещен с 3D, произошел в Microsoft пару лет назад, и такие решения до сих пор выглядят свежо. Похожую цепную волну брендинга с 3D-иконками и иллюстрациями в России запустили «Альфа-Банк» и «Яндекс Go».

Промо приложения «Альфа-Банк» с использованием 3D. Источник

В приложениях 3D часто совмещают с AR-технологиями. Например, с их помощью можно посмотреть, как предмет мебели будет выглядеть в интерьере, или виртуально примерить кроссовки из маркетплейса. Подобные возможности в свои приложения добавляли IKEA и Lamoda.

https://youtube.com/watch?v=UudV1VdFtuQ%3Ffeature%3Doembed

AR-технологии в приложении IKEA

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

Живые иллюстрации

Приложение для бронирования столика в ресторане. Источник

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

Нейросети

Интерфейс сайта с котиками, которых дизайнер сгенерировал с помощью нейросети. Источник

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

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

Типографика для сайта бренда одежды. Источник

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

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

Инклюзивность

Интерфейс приложения по поиску инклюзивных локаций. Источник

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

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

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

Тренды вне времени

Интерфейс приложения для тренировок. Источник

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

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

Ниже мы собрали самые актуальные тренды веб-дизайна в 2023 году, которые точно смогут удивить ваших клиентов.

Креативная типографика

Креативная типографика — это про создание четкого и визуально привлекательного текста.

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

Эстетика девяностых и нулевых

Характерная эстетика произведений, которую знает, помнит и даже, возможно, чтит практически каждый, выросший в странах СНГ. Эстетика девяностых и нулевых – это про китч, яркие (а местами и даже кислотные цвета), завороченные сюжеты и просто про бурный полет фантазии.

В эстетику девяностых и нулевых входит самоирония, сочетающая самобичевание с самовосхвалением в духе «эту страну не победить» и «русские не сдаются». Мол, нам дай танк — мы его пропьём, а потом еще и набьём врагу морду голыми руками!

Как это можно обыграть в рамках веб-дизайна? Хорошей идеей будет взять любой постер или обложку тогдашних времен и сделать его на лад вашей компании. Неплохо подойдет «Посмотри в глаза чудовищ» А. Лазарчука и М. Успенского – можно изобразить вместо офицера главу компании, а вместо ящеров сзади – работников.

Главное помнить про большие шрифты, яркие цвета и асимметрию.

3D иллюстрации

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

Не бойтесь экспериментировать.

Микро-анимации

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

Микро-анимацию можно реализовать самыми разными путями. Вот лишь некоторые варианты:

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

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

Кроме того, такой подход дает и эстетическое преимущество: темное или пустое пространство символизирует богатство и отличный вкус.

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

Баухаус во многом схож с минимализмом, потому что также стремится к простоте и функциональности. Стиль сочетает в себе геометрические фигуры – это его опора. Квадраты, треугольники и круги, скомбинированные друг с другом для передачи эмоций и идей. Цветовая палитра баухауса – это красный, желтый и синий. Но иногда и черный с белым.

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

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

Самым рациональным использованием искажений является подвид, который окрестили на западе distortion effect. Он придает особую динамику сайту и создает эффект дороговизны и модности.

Но можно использовать и глитчи. Это беспроигрышный, классический вариант.

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

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

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

В Z&G. Branding вы можете заказать разработку кастомного веб-дизайна, который будет отвечать всем современным требованиям.

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

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

Если вы не поняли, что здесь написано – не пугайтесь. Y2K – это year 2000.

Возможно вы обратили внимание, что последние год-два мировой интернет (и российский в частности) захватила ностальгия по эпохе конца 90-х-начала 2000-х. Это проявляется во всём – в моде снова одежда с элементами 2000х, ютуб заполонили обзоры на игры для Сега и Нинтендо, в соцсетях люди вспоминают музыку тех времен и говорят, что “раньше было лучше”. Эта тенденция не обошла стороной и веб-дизайн.

Чем характеризуется этот стиль?

В целом, Y2K стиль – это что-то яркое, мерцающее, эклектичное, но при этом привлекательное.

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

Пример стиля Y2K: яркие цвета, градиенты, необычные шрифты, интерфейс из 2000-х

Максимализм (режим Гоблина)

Этот стиль очень похож на предыдущий, но всё же отличается.

Максимализм, известный также как режим гоблина – это экстравагантный и дерзкий стиль веб-дизайна. Он переполнен яркими красками, разнообразными элементами и деталями.

Само словосочетание “режим гоблина” появилось еще более 10 лет назад, но завирусилось в феврале 2022 года. Оно обозначает стиль жизни, при котором человек отвергает “нормальный” образ жизни современного общества – ленится, питается “неправильной” едой, не соблюдает режим дня, мало выходит из дома, в общем делает абсолютно всё для своего собственного комфорта.

Как это связано с веб-дизайном? Этот режим можно рассмотреть как отказ от всех социальных норм, новый взгляд на “норму”. Так и в веб-дизайне, сайт в стиле максимализма – это нечто такое, на что смотришь и думаешь “а что, так можно было?”.

Бренды, использующие “goblin mode” часто ставят в приоритет бренд, а не удобство пользователя. Они делают свои сайты запоминающимися и привлекательными за счет грубого стиля, избытка изображений, дублирования информации, ярких цветов, громкости, резкой анимации при загрузке страницы, а также добавляя множество элементов.

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

Пример максимализма: всего и побольше, и чтобы ничего не было понятно 🙂

3D иллюстрации и claymorphism

3D иллюстрации в веб-дизайне являются отличным средством для создания визуально привлекательных и уникальных интерфейсов. Этот стиль дизайна использует трехмерные объекты, которые оживляют веб-сайты и делают их более реалистичными.

В наше время зайдя практически на любо й сайт известного бренда, можно увидеть там 3D иллюстрации, причем иногда они очень даже лаконично сочетаются с 2D картинками. Почему это так популярно?

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

В 2023 году 3D иллюстрации выходят на новый уровень и привносят что-то новое в тренды.

Так, например, claymorphism (от слова clay – глина) – это новый тренд в веб-дизайне, который начал набирать популярность в 2021 году. Он является эволюцией дизайна «неоморфизма» и сочетает в себе реализм и минимализм.

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

Еще одна особенность этого стиля – использование ярких и насыщенных цветов. Вместо стандартных нейтральных оттенков или пастельных тонов, claymorphism предлагает использовать акцентные цвета, чтобы привлечь внимание к элементам на странице.

3D анимация в веб-дизайне

Один из последних трендов в веб-дизайне – микровзаимодействия. Они представляют собой мелкие анимации, эффекты и детали, которые добавляют интерактивности и привлекательности к веб-сайту или приложению. Эти микроанимации влияют на пользовательский опыт и делают его более привлекательным и удобным для пользователей. А некоторые интеракции с пользователем несут чисто развлекательный характер — их еще называют “just for fun interactions”.

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

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

Микровзаимодействия выполняют три ключевые функции:

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

Вот так можно «повертеть» меню на сайте fuse.kiwi

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

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

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

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

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

За человечным копирайтом и интересной информацией на тему IT приглашаю в наш блог 🙂

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

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

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

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

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

Современный адаптивный веб-дизайн является неотъемлемой частью разработки сайтов. Он позволяет создавать веб-сайты, которые автоматически адаптируются к различным устройствам и размерам экранов, обеспечивая одинаково хорошее визуальное и пользовательское впечатление на всех устройствах, от десктопов до смартфонов.

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

А в некоторых случаях дизайнеры даже придумывают специальные решения для мобильных версий – дизайн может значительно отличаться от полноэкранной версии и иметь какие-то свои “фишки”.

Важно отметить, что адаптивный веб-дизайн требует хорошего понимания и использования современных технологий, таких как HTML5, CSS3 и JavaScript. Он также требует тщательного тестирования на различных устройствах и браузерах, чтобы гарантировать оптимальный пользовательский опыт.

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

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

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

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

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

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

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

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