Современный веб дизайн: Топ 10 трендов веб-дизайна 2022 года

что будет модно в этом году?

Известнейший французский философ, журналист и писатель Альбер Камю считал скуку результатом машинальной жизни, которая, тем не менее, приводит сознание в движение… И вправду: что может лучше стимулировать человека творческого на творчество, чем её Величество Скука Смертная и Тоска Зелёная? Что может направить на погружение в любимое занятие и создание новых решений и шедевров, чем не они?

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

Тренд #1: Экспансия мобильных приложений

Это вправду самая настоящая, бескомпромиссная экспансия, поглощающая всех и вся! Наш мир заполонили мобильные устройства, приложения и, само собой, их пользователи. По статистике глобального социально-управляемого творческого агентства “WeAreSocial”, в прошлом году смартфоны использовало более пяти миллиардов человек, а это превышает 65% населения нашей планеты. С начала позапрошлого года общее число мобильных подключений возросло почти на 1% (что превышает семьдесят миллионов), и сегодня оно составляет более восьми миллиардов.

По информации платформы изучения данных о мобильных приложениях “Dara.ai”, в 2021-ом году число пользователей SMM возросло почти на 15%. За первые его месяцы обладателями учётных записей в них стало более пятисот миллионов человек! Среднестатистический пользователь “Android” сёрфит в сети более четырёх часов в день… Стоит ли говорить о том, что UI-тренды таковы: мобильное приложение – must-have для Вашего продукта!

Разрабатываем дизайн

Создаём удобные и простые интерфейсы, которые помогают компаниям развиваться в цифровой среде

Тренд #2: Фактов нет, есть только интерпретации?

Прав ли был великий Ницше, утверждая подобное? Не будем разводить полемику на эту тему, ведь мы всё же говорим о трендах веб-дизайна 2022… Скажем лишь, что красивые и удачные интерпретации всегда в цене, и это – факт! А ещё один факт заключается в том, что современные пользователи не очень-то любят читать, следовательно – и погружения в полотна текста о Вашем продукте или компании ждать от них не стоит.

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

• Интересно оформленными графиками;
• Изображениями;
• Статической/интерактивной инфографикой.

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

Тренд #3: Прокрутка умерла. Да здравствует прокрутка!

Современный среднестатистический посетитель web-сайтов – существо крайне привередливое и пугливое. Оттолкнуть и отпугнуть его может что угодно… К примеру – прокрутка! Сегодня ей на смену пришёл scrollytelling («скроллителлинг»), то есть прокрутка (“scroll”) и повествование (“telling”) в одном «флаконе». Благодаря ему длинная история превращается в интерактивный опыт с визуальным и аудио-контентом, который добавляет более глубокий смысловой слой и таким образом дополняет собой то, что невозможно передать только словами.

Использование скроллителлинга для визуализации Солнечной системы путём перевода физического пространства в пиксели наJoshWorth.Com

Scrollytelling – действительно выдающийся тренд веб-дизайна 2022-го года, ведь благодаря ему можно раскрыть детали любой истории представив их в куда более увлекательном виде. Именно он заставит пользователей задержаться на странице и продолжить читать даже самую длинную статью! Особенно хорошо данное решение подходит для историй с чёткой хронологией. Правильно задействованный по мере развития событий дизайн способен оживить её и превратить в настоящее повествование!

Способен ли scrollytelling заставить читать пользователей, которые привыкли листать изображения? Да, конечно! Динамические тексты не смогут не привлекать их внимание, а оживающие шрифты и изображения создают эффект вовлечённости. Это можно сравнить с просмотром фильма, в котором текст является одной из составляющих повествования.

Тренд #4: Трёхмерное сумасшествие продолжается

Говоря о трендах веб-дизайна 2021-го, мы упоминали 3D-графику, впрочем и сегодня, говоря о трендах 2022-го, не можем обойти её своим вниманием. Скоро исполнится пять лет с момента, когда её начали использовать в web-дизайне, и сдавать свои позиции она не собирается, ведь её реализации выглядят в разы круче классической анимации, уж будем честны!

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

Тренд #5: Логотип – лицо компании. Пускай оно будет улыбчивым!

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

В его пользу говорит следующее:

1. Пользователь точно запомнит бренд с таким логотипом благодаря его оригинальности, необычности и эстетичности;
2. Поскольку такой поисковый гигант, как “Google”, отдаёт предпочтение динамическому контенту, благотворное влияние на SEO гарантированно;
3. Отличный внешний вид на мобильных устройствах, которыми, как мы уже знаем, сегодня пользуется более 65% населения нашей планеты.

Тренд #6: Анимируй или умри…

Под «умри» мы имеем в виду выпадение из трендов UI-дизайна и уход в небытие… Ну, а если серьёзно, то анимация всё так же остаётся на пике: её можно увидеть как на web-сайтах, так и в мобильных приложениях. Почему? Да потому что она позволяет разнообразить контент, сделать его не только визуально привлекательным, но и более интересным для пользователей.

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

• Создание повествований – продуманная анимация вполне способна передать пользователю определённое сообщение;
• Увлекательность загрузки – использование интересных, привлекающих внимание индикаторов загрузки;
• Необычные курсоры – создание интерактивной анимации, реагирующей на него и привлекающей внимание.

Тренд #7: Взаимодействие – это всегда изменения

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

Вот так работает эффект наведения курсора на кнопку

Тренд #8: Анимированные персонажи… а вдруг они живые?

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

Такой подход оптимален для рекламы или разъясняющего ролика. Анимированный персонаж в нём является вымышленным и содержит в своём образе или имени привязку к компании, бренду или продукту. Он наделён характеристиками, которые вызывают к нему симпатию, и может быть как положительным, так и отрицательным героем… Впрочем, всегда должен быть близок ЦА. Какие задачи он способен решать? О, их целых четыре:

1. Привлечение внимания и вызов интереса;
2. Экономия бизнесу на гонорарах медийным лицам;
3. Передача большого объёма информации;
4. При верном подходе – привнесение индивидуальности в коммуникации бренда.

Подытожим?

Итак, чего же нам ждать в этом году? Да ничего нового, всё как обычно: масса новых, необычно оформленных web-сайтов и мобильных приложений, способных радовать своих пользователей оригинальными решениями. Изменения в дизайне – процесс, который не останавливается… Главное – чтобы его смысл сохранялся прежним.

Инновации и тренды в современном web-дизайне

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

Стремление к унификации

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

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

Функциональность дизайна: основные особенности

1. Блочная структура

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

2. Кнопки-призраки

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

3. Комфортная навигация

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

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

4. Комфортная регистрация

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

Яркая визуализация в современном дизайне

Web-дизайнеры применяют целый ряд современных приемов для того, чтобы заинтересовать пользователя контентом на сайте, привлечь его внимание. Эффектные с визуальной точки зрения сайты впервые начали появляться в конце 2000-х годов. Тогда от этого тренда быстро отказались — наступивший кризис требовал более простых решений. Тем не менее, сегодня яркая визуализация возвращается. Веб-продукты с wow-дизайном создаются в основном за счет кода в HTML5 и CSS3. Графика остается простой, а wow-эффект возникает благодаря использованию по-настоящему оригинальных приемов.

1. Бэкграунд как источник атмосферы

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

2. Длинные тени

Естественным этапом развития плоского дизайна стало появление «длинных теней». Их применение позволяет делать объекты объемными, анимировать информацию.

3. Геометрия по-новому

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

Параллакс

Этот прием используется в web-дизайне довольно давно, однако сегодня его применение становится все более креативным. Суть заключается в том, что объекты и фон реагируют на скроллинг по-разному (например, прокручиваются с разной скоростью).

Расскажи историю

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

Креативный подход

«Ловушки» для пользователей, креативные или смешные детали привлекают внимание. Их использование в web-дизайне становится все более активными — такие элементы являются полноценной деталью оформления.

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

6 современных тенденций веб-дизайна в 2022 году, которые вдохновят ваш дизайн

Обучение / Руководства / Руководство по веб-дизайну

Вернуться к руководствам

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

Последнее обновление

6 июня 2022 г.

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

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

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

1. Акцентирование пустого пространства

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

Интеграция большого количества негативного пространства в дизайн вашего сайта может помочь:

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

• Улучшите навигацию: негативное пространство значительно упрощает пользователям взаимодействие с вашим сайтом и обработку представленной вами информации, повышает удобство использования и обеспечивает отличный UX.

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

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

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

2. Оптимизированные основные разделы

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

VideoAsk делает свой главный раздел простым, за исключением информативного и полезного видео о продукте.

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

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

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

Клинт Л. Санчес

Партнер BlakSheep Creative

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

.

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

• Сильный, привлекающий внимание заголовок, который делает ваше уникальное торговое предложение (УТП) и позиционирование продукта ясность

• Обтекаемый абзац текста, предоставляющий больше информации о вашем продукте

• Призывы к действию (CTA), побуждающие пользователей совершить конверсию

• Одно ключевое изображение или видео 3 3 Совет для профессионалов: инструменты Hotjar Observe , такие как Heatmaps

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

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

   3. Смелая и яркая типографика

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

  Squarespace делает заявление с помощью крупной типографики на своей домашней странице. Источник: Squarespace

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

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

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

  Roots применяет сдержанный подход к тренду негабаритного шрифта на своей домашней странице.

  4. Ностальгический дизайн

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

  Вот несколько ностальгических элементов дизайна, которые вы можете использовать, чтобы вернуть пользователей к их «Золотые дни»:

  • Простые формы

  • Уникальные линейные работы

  • Двухцветные цветовые схемы

  • Vintage-STYLSTY-style. типографика

  • Текстуры старой школы

  • Иллюстрации в мультяшном стиле

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

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

  Notorious Nooch — отличный пример ностальгического дизайна, сделанного правильно.

  5. Графика в стиле коллажа

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

  Tech Агентство по связям с общественностью и СМИ Bulleit Group , например, имеет изображение в стиле коллажа в своем разделе героев. Они выбрали перекрывающиеся игривые, но футуристические изображения, которые поддерживают их миссию « рассказывать истории о связи технологий и культуры». Разнообразие цветов, текстур, стилей и форм, которые они включили, добавляет динамичности и изысканности их интерфейсу.

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

  Графика в стиле коллажа на домашней странице Bulleit Group олицетворяет их футуристическую миссию.

  G-Star Raw использует на своем сайте совершенно другой тип графического коллажа, который занимает весь фон своей домашней страницы. С несколькими призывами к действию (CTA), включенными в коллаж, их подход более ориентирован на продукт и менее артистичен, но все же кажется свежим и необычным. В частности, текстура, которую они включили в фон, добавляет уникальный штрих, создавая ощущение изображения на плакате.

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

  6. Горизонтальная прокрутка

  Хотя вертикальная прокрутка является нормой для просмотра на компьютере, в 2022 году все больше и больше веб-сайтов интегрируют горизонтальную прокрутку.

  Горизонтальная прокрутка дает пользователям:0003

• Возможность беспрепятственно прокручивать большую галерею изображений

• Интуитивно понятный интерфейс на таких устройствах, как смартфоны, с функциями прокрутки

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

Крис Смит

Владелец и директор, Compare TV

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

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

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

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

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

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

Часто задаваемые вопросы о тенденциях веб-дизайна

Проблемы веб-дизайна и решения

Предыдущая глава

Алфавитный указатель

Все руководства

5 Компоненты современного веб-дизайна

Любой старый дизайн веб-сайта не подойдет. Как и тот веб-сайт, который вы запустили 10 лет назад.

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

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

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

1. Крупный читаемый шрифт

Roots Studio

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

На заре дизайна веб-сайтов многие «правила» типографики были перенесены из полиграфического дизайна. Результатом стал меньший текст, часто шрифтом с засечками, для основного текста. Заголовки и подзаголовки были пропорционально крупнее, но ничего похожего на то, что мы видим сегодня. Обычно основной текст имеет размер около 16 пикселей, а несколько лет назад он увеличился с 10 до 12 пикселей.

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

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

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

2. Востребованный контент

Чудо, книга

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

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

 

3. Адаптивные изображения

Gemfields

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

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

Адаптивные изображения создают визуальный опыт, на который реагируют пользователи.

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

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

4. Четкий призыв к действию

Путешествия по дизайну

У каждого веб-сайта есть причина. Дизайн должен вести пользователей к этой цели.

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

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

И не стесняйтесь просить пользователей что-то сделать. CTA должен точно указывать пользователям, что делать и что произойдет во время взаимодействия. Некоторые призывы к действию говорят сами за себя, например, публикация в Facebook или Twitter или кнопка «Купить сейчас»; другим может понадобиться немного более описательная помощь. Например, если вы попросите пользователей заполнить форму, сообщите им, что они получат взамен и как вы будете (или не будете) использовать их информацию.

5. Согласованное взаимодействие с настольными и мобильными пользователями

Pinestreet Presbyterian Church

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

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

Если вы не создаете адаптивный веб-сайт… что вы делаете?

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

Заключение

Современный дизайн веб-сайта — это больше, чем просто приятное зрелище.