Какой это был год! Мы многому научились, много выросли и адаптировались по мере того, как мир вокруг нас изменился. И Интернет был важной частью этого.
Давайте вместе разберём Тренды веб-дизайна 2021, что нового, что интересного нас ждёт.
По предварительной статистике , пандемия COVID-19 привела к увеличению количества посещений интернета до 70%. И в этом есть смысл — все больше людей выходят в Интернет для чего угодно, от покупок до рабочих встреч и учебы. Повышенное внимание к сети, в свою очередь, привело к большему вниманию к внешнему виду каждого цифрового опыта.
Ниже приведены несколько тенденций, набирающих популярность в Интернете и в наших собственных проектах веб-дизайна . Итог: мы думаем, что 2021 год принесет творческое использование цвета, много анимации и видео, а также гибкое пространство, которое нарушит типичную сетку.
1. Изобретая героя заново (да, еще раз!)
В нашем посте о тенденциях веб-дизайна 2020 года мы начали с предсказания, что герои веб-страниц (большое пространство в верхней части страницы) начнут включать такие вещи, как изображения половинной ширины, жирную графику и забавные иллюстрации. Что ж, наша догадка оказалась верной, и мы думаем, что 2021 год принесет еще больше экспериментов в космосе героев.
В дополнение к тому, что мы видели в прошлом году, мы ожидаем, что герои будут включать в себя больше коллажей изображений, абстрактных форм и разделенных макетов, которые включают как изображения, так и текст.
2. Смешивание окружающего видео и контента
Эмбиент-видео стало очень популярной функцией веб-сайтов за последние пару лет. Он традиционно используется в пространстве героев, но мы замечаем, что все больше и больше веб-сайтов показывают окружающее видео, смешанное с другим контентом.
Нам нравится этот вид, потому что он несет динамическую энергию на всей странице. В частности, в тех случаях, когда видео воспроизводится при наведении курсора, оно также создает впечатление более активного и живого, чем статичный дизайн.
3. Экономия места с помощью вкладок, аккордеонов и слайдеров
Хотя места на веб-странице технически предостаточно, пользователи часто испытывают усталость от прокрутки, когда сталкиваются с длинными страницами, которые затрудняют поиск контента, который они ищут. Чтобы решить эту проблему, мы видим все больше веб-сайтов, которые используют такие функции экономии места, как вкладки, аккордеоны и ползунки.
Популярность этих типов элементов со временем колебалась, но они снова возвращаются благодаря эффективному использованию пространства. Аккордеоны идеально подходят для расширяемых списков часто задаваемых вопросов, вкладки могут легко обрабатывать несколько призывов к действию , а ползунки создают естественное пространство для шагов или объяснений процесса.
4. Выделение уникальной анимации
Анимация — это еще одна функция, о которой мы упоминали в прошлом — как в нашем Основные принципы веб-дизайна . Так что это уже старые новости, но мы думаем, что об анимации стоит упомянуть еще раз, потому что это тенденция, которая будет с нами в долгосрочной перспективе. Ниже приведены несколько примеров различных типов анимации, которых мы ожидаем увидеть чаще.
Тонкая анимация героев
Полноценные анимированные герои — это круто, но мы прогнозируем, что в 2021 году появится больше дизайнов героев, в которых вместо этого будет использоваться анимация. Обратите внимание на это от гиганта по обработке платежей, Stripe . На самом деле герой довольно прост — всего лишь текст, кнопки и макет, но анимированное цветовое наложение добавляет что-то особенное, что выводит дизайн на новый уровень.
Текстовая анимация
Точно так же текстовая анимация добавляет легкое движение, которое делает страницу более динамичной, не затмевая остальной дизайн. Нам нравится, как Our Place меняет текст заголовка, чтобы сообщить о многочисленных особенностях своего продукта.
Анимированные иконки
Иконки — еще одно место, где анимация может добавить неожиданное движение. На сайте, который мы создали для MEI Rigging , мы разработали пользовательские значки, которые анимируются при наведении курсора мыши. Они являются забавным дополнением к странице и добавляют приятный интерактивный элемент к просмотру.
Анимированные Иллюстрации
Пользовательские иллюстрации популярны благодаря своему игривому виду и гибкости дизайна. Чтобы оживить эту графику, на некоторых сайтах анимируются ключевые элементы, фокусные точки или фоновые элементы, как мы это делали для облаков на сайте TransPerfect GlobalLink .
5. Использование темного фона
За последние несколько лет «темный режим» стал очень любимой (и часто запрашиваемой) функцией приложений и программ. Некоторые утверждают, что темный фон приятнее для глаз, чем знакомый ярко-белый цвет, а другие предпочитают его просто из-за драматического и нестандартного вида.
Вероятно, в попытке развеять растущий интерес публики к темным интерфейсам, многие веб-сайты используют высококонтрастные цветовые схемы, имитирующие эффект «темного режима». Это может быть достигнуто несколькими способами в зависимости от целей, потребностей и глубины сайта. Примеры ниже.
Все темное
Сайты с темным фоном на всех страницах, несомненно, имеют большое влияние. Этот смелый подход может особенно хорошо работать для заставок или одностраничных микросайтов, таких как этот, который мы создали для банкета фонда свободы Чапел-Хилл-Каррборо NAACP .
Выбрать страницы
Если темный фон не подходит для всего содержимого сайта, он все равно может иметь большое влияние при использовании на выбранной группе страниц. Apple , например, использует дизайн в стиле «темного режима» на нескольких страницах своих продуктов, сохраняя при этом светлый белый фон на всей остальной части сайта.
Смешанные блоки тьмы и света
Может быть непросто сделать темным весь сайт или даже всю страницу, поэтому смешивание блоков темного и светлого, пожалуй, самый доступный способ опробовать эту тенденцию. Johns Hopkins Engineering делает это хорошо — они сочетают темную шапку с контрастными блоками, которые обрисовывают их программы и предложения. Мы думаем, что в следующем году мы увидим гораздо больше этого стиля «смешай и сопоставь».
6. Использование пастельного фона.
Несмотря на популярность темного интенсивного фона, мы также заметили, что некоторые сайты используют свои цветовые схемы в противоположном направлении. Мы не решаемся сказать это, но мягкие оттенки приглушенных пастельных тонов могут немного вернуться в 2021 году.
Размытые оттенки могут не подходить для всех, но в правильном контексте они могут создавать в сети удивительно спокойные, ностальгические и интимные пространства. Нам нравится, как в приведенных ниже примерах пастельные тона сочетаются с такими же запоминающимися шрифтами старой школы с засечками.
7. Возвращение к минимализму
Чистый, безупречный дизайн всегда в моде, и некоторые веб-сайты развивают эту эстетику, возвращая вещи к истинному минимализму. Мы большие поклонники большого количества пробелов и незагроможденных макетов, поэтому мы готовы к этому!
Поскольку минималистичный вид хорошо сочетается со многими другими популярными тенденциями (такими как видео, темные цветовые схемы, анимационные функции, творческие герои и т. Д.), Мы почти наверняка увидим больше минималистичных дизайнов веб-сайтов в 2021 году. Они отлично подходят для по множеству причин, но особенно потому, что они позволяют контенту и изображениям сиять, не отвлекаясь.
Привет, 2021 год
После этого сумасшедшего года мы действительно не уверены, что нас ждет в 2021 году. Но, тем не менее, нам повезло оказаться в такой захватывающей и подвижной сфере, как веб-дизайн. Мы с нетерпением ждем появления и закрепления новых тенденций, и, как всегда, мы с нетерпением ждем возможности создавать еще больше отличных веб-сайтов для наших клиентов из разных стран.
