Тенденции веб-дизайна на 2022 год

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

Тенденции 2022 года смещаются в сторону более смелого, креативного и интерактивного дизайна. Создатели склоняются к еще большему разрушению и раздвигают границы того, что считается «хорошим» веб-дизайном.

Проявите творческий потенциал в новом году, внедрив несколько тенденций, которых мы ожидаем увидеть больше в 2022 году:

• Интерактивные мини-сайты
• Дизайн в стиле ретро
• Дизайн с открытой концепцией
• Больше настроек
• 3D-объекты, 2D-прокрутка
• Брутализм-лайт
• Глассморфизм
• Креативные эффекты прокрутки
• Негабаритная типографика
• Видимые границы
• Компоненты коллажа с абстрактными изображениями

Интерактивные мини-сайты

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

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

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

Дизайн в стиле ретро

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

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

Сама Cartoon Network является брендом, любимым многими представителями поколений Y и Z. Веб-сайт студии использует черно-белую основу в сочетании с яркими цветами и восхитительной анимацией, что делает сайт одновременно ретро и очень модным.

Дизайн с открытой концепцией

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

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

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

Больше настроек

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

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

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

3D-объекты, 2D-прокрутка

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

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

One Ocean Science — это саммит по обмену знаниями, целью которого является объединение мировых лидеров в области сохранения океана и исследований с междисциплинарной точки зрения. Домашняя страница их веб-сайта приветствует вас 2D-прокруткой 3D-модели земного шара, которая перемещается по мере прокрутки, выделяя различные области и проводимые там исследования.

Брутализм-лайт

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

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

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

Глассморфизм

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

Агентство цифровых продуктов Dovetail Studios оживило этот набор гнездовых колец Glassmorphic, которые вращаются под разными углами. Это привлекает внимание и демонстрирует мастерство их команды в 3D-моделировании. Другие значки на сайте также отражают этот эффект.

Другое цифровое креативное агентство Lo and Behold Studios также использует анимированные объекты Glassmorphic на своей домашней странице. Однако более светлая общая тема дает их сайту совершенно иной эффект, чем у пользователя при просмотре сайта «Ласточкин хвост».

Креативные эффекты прокрутки

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

Голландская мебельная компания Moooi погружает пользователей все глубже и глубже в свои коллекции по мере их прокрутки. Их сайт предлагает три варианта: Beauty Blooms, Defy Gravity и Paper Play. В каждом случае экран открывается, показывая коллекцию за коллекцией, и по мере прокрутки вы будете погружаться в новые узоры и виньетки.

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

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

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

Исследовательский коллектив HUMAIN работает над преодолением разрыва между человеческим опытом и техническими инновациями. Их цель, поддерживаемая Cronos Group, — найти новые способы использования новых технологий для улучшения человеческого опыта как в Интернете, так и в жизни. Используя текст вместо изображения героя, эта компания со сложной историей кричит о своей миссии с того момента, как вы заходите на их сайт.

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

Видимые границы

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

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

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

Компоненты коллажа с абстрактными изображениями

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

Illuminating Radioactivity — это образовательный веб-сайт, созданный совместно Центром Стимсона, проектом Reinventing Civil Defense и коллективом Bombshelltoe Policy x Arts. В нем рассказывается об истории и значении слова «радиоактивность» и наших ассоциациях с ним, а также о том, какую роль оно сыграло в науке, развлечениях, медицине и многом другом. По мере того, как вы прокручиваете страницу, вас заваливают старыми картинками, которые помогают рассказать историю в сочетании с яркими абстрактными формами.

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

Проектирование будущего Интернета

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

Видишь тех, кого любишь? Что-то мы упустили? Дайте нам знать в комментариях ниже и помните: стили, которые останутся, и те, которые уходят в прошлое, зависят от того, что такие дизайнеры, как вы, решили создать со своими клиентами в этом году!