Тренды веб-дизайна на 2023

Тренды веб-дизайна на 2023
Сергей Бабич

Цвет

«Да здравствует маджента!», — как бы говорит нам компания Pantone, предлагая цвет Viva Magenta на будущее, и 2023 год будто поднимает флаг в оттенках кошенили и пурпура. Плотный, напористый и смелый, между тем творческий и новаторский, цвет станет главным и в киберпространстве, и в реальном мире.

Примеры цвета Viva Magenta 18-750

Разработаем вам фирменный стиль

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

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

Пример «жидкого» градиента

Устройства Huawei MateView демонстрируют эффектный жидкий градиент. Отмечено iF Design Award.

Устройства Huawei MateView

Компания Orion Pictures помолодела за счет неонового эффекта в заставке с логотипом.

Заставка Orion Pictures

Dark Mode

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

Пример интерфейса в Dark Mode

Стекломорфизм

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

Интерфейс macOS Ventura

Компания Microsoft в системе проектирования Fluent Design назвала прием со стекломорфизмом «акрилом»: прозрачность ниже, но эффект достигается тот же.

Интерфейс Windows 11

Минимализм

Язык дизайна Material You компании Google в прошлом году был удостоен престижной награды iF Gold Design Award и окончательно решил спор о состоятельности неоморфизма, родившегося пару лет назад на стыке скевоморфизма (то есть имитации объема, теней и бликов) и минималистичного плоского дизайна. Минимализм победил.

Material You

Тем не менее объем как будто хочет взять реванш — интерфейс с трехмерными элементами приложения Alibaba Cloud APP тоже отмечен наградой iF Design Award.

Интерфейс приложения Alibaba Cloud APP - Fusion U

К тренду с объемами присоединяется и Segway-Ninebot App 6.0 — также получивший награду iF Design Award:

Интерфейс приложения Segway-Ninebot App 6.0

Трехмерность

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

Пример глиноморфизма

Хотите жить в будущем? Смотайтесь в прошлое и посмотрите «Уоллес и Громит: Проклятие кролика-оборотня» (2005), там вся правда. Для вдохновения можно посмотреть «Барашка Шона» (2007). Примечательно, что, несмотря на кажущуюся «тридэшность», это классическая покадровая анимация.

«Уоллес и Громит: Проклятие кролика-оборотня» (2005) и Процесс съемки анимационного фильма «Барашек Шон»

Генеративный дизайн

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

Пример генерации изображения нейросети Text 2 Dream

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

Обложка журнала Cosmopolitan

Собачка в головном уборе, астронавт верхом на коне — а если что-то сложнее?

Пример генерации изображения нейросети Stable Diffusion 2

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

Сайт erase.b

Убрать объект с изображения тоже не проблема, нейросеть сама решит, что должно быть на фоне  дорожная разметка или обои.

Сайт magicstudio.com/magiceraser

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

Vogue Singapore

Конечно, не всегда это ужас-ужас. Приложение Lensa при помощи искусственного интеллекта генерирует «волшебные аватарки» такого качества, что за первые 12 дней декабря оно было установлено около 13,5 миллионов раз по всему миру — пользователи потратили на него около 29,3 млн долларов.

Изображения сгенерированы приложением Lensa

Святослав Грошев, арт-директор TexTerra:

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

Фотография

Пару месяцев назад Shutterstock объявил об интеграции нейросети DALL-E 2 компании OpenAI. Последствия этого события нам только предстоит осознать и, возможно, уже в 2023 году. Что будет с фотографами микростоков? Чему научится нейросеть, обучаясь на огромной коллекции изображений фотоагентства? Нужно ли снимать стейк и бургер если их вот так реалистично уже может генерировать нейросеть (а если не нужно, то ничего, что стейк и бургер не настоящие, нужен ли дисклеймер)?

Пример генерации изображений нейросети Text 2 Dream

Генеративные интерфейсы

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

Примеры интерфейса, сгенерированного Midjourney

Необрутализм и ретро 90-х

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

Сайт Spotify

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

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

Примеры изображений по теме инклюзивности

AR и Метавселенные

Компании-гиганты Microsoft, Google, Nike, Coca Cola задали тренд на дополненную реальность и метавселенные. Уже не хочется делать скучные лендинги — хочется строить виртуальные миры с элементами игры. Так, например, «М.Видео» приобрели на месяц землю в метавселенной Roblox, открыли виртуальный шоурум и устроили акцию для школьников к началу учебного года:

Метавселеннная «М.Видео»

Скроллителлинг

Визуальное повествование с увлекательной прокруткой, продуманный сценарий на каждый переход с экрана на экран, ожившие фрагменты текста, анимация, параллакс, вроде оставшийся в прошлом… Равнение на презентации девайсов Apple и лонгриды New York Times — вот оно, будущее 2023!

Сайты Apple и New York Times

Материал взят с сайта https://texterra.ru/

Instagram

Не удается связаться с Instagram.