10 тенденций веб-дизайна, которых стоит ожидать в 2023 году

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

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

Эти новые социальные нормы, как отражает гоблинский термин, интересны, когда мы соотносим их с дизайном UI и UX. По своей сути UI и UX-дизайн — это область, основанная на стандартах, лучших практиках и изучении пользователей, при этом пытаясь быть максимально инклюзивной. Один из способов увидеть эту тенденцию в действии — веб-сайты гоблинов, которые ставят бренд на первое место, а не пользователя. Игнорируя лучшие практики и иногда даже доступность, эти веб-сайты задаются вопросом, что такое «красота». Они стремятся усилить присутствие бренда, делая веб-сайт запоминающимся и привлекательным, используя грубый стиль, переизбыток изображений, дублирование, яркие цвета, громкость, резкую анимацию входа, множество объектов и т. д. Мы можем влюбиться в эти веб-сайты или критиковать их. их, но мы не можем делать вид, что никогда не использовали одну или две из этих уловок, чтобы улучшить присутствие веб-сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы наблюдаем ускорение этой тенденции в последние несколько месяцев, когда на сцену вышли dall.e2 и Midjourney с их потрясающими возможностями создания изображений. Совсем недавно введение ChatGPT в смесь и микрокопирование никогда не казалось более доступным. Но важно помнить, что результаты, которые мы получаем от этих двигателей, требуют работы, и, как и любой инструмент, чем лучше мы его освоим, тем больше будет наш контроль. Давайте сосредоточимся на создании образа. Если мы возьмем, например, Midjourney, вы можете легко создавать изображения из простых текстовых подсказок. Это изображения, на создание которых или даже на поиск и покупку прав уходила целая вечность. Но простые подсказки не помогут вам. Суть в том, чтобы уточнять запросы по мере продвижения, сосредоточив внимание на тех областях, которые, по вашему мнению, нуждаются в доработке. Чем глубже вы копаете, тем быстрее вы достигнете желаемых результатов.

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

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

Итак, для отстающих среди нас или для тех, кто любит Y2K, мы особенно обращаем внимание на коллажи, пикселизацию, яркие цвета, пользовательский интерфейс, похожий на MS-DOS, и влияние старых аркадных игр.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме