Веб-дизайн в 2021: девять трендов, о которых вам нужно знать




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


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


  1. Ассиметричные макеты

  2. Из крайности в крайность

  3. Видео как элемент дизайна

  4. Векторная графика

  5. Формы и абстракции

  6. Анимации

  7. Темная тема оформления и приглушенная палитра

  8. Доступность

  9. Параллакс-прокрутка



01. Ассиметричные макеты

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


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





02. Из крайности в крайность

Только так можно обозначить тот факт, что создание сайтов уже не требует делать выбор между минимализмом и желанием добавить всего и побольше — в 2021 можно и то, и другое.


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


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





03. Видео как элемент дизайна


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


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


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

Вы можете выбрать любое видео из богатой медиа-коллекции в редакторе, или загрузить собственное. Для этого нужно создать его одном из видео редакторов, например Adobe AE или Premier, использовать альфа-канал для удаления фона и экспортировать в Wix Editor.





04. Векторная графика


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





05. Формы и абстракции


Абстрактный дизайн и произвольные формы будут пользоваться еще большей популярностью в 2021, потому что ровные линии и понятные мотивы наскучили пользователям.


Формы можно использовать как самостоятельный элемент дизайна, а можно — как поддерживающий, например, чтобы привлечь внимание посетителей к ключевым блокам страницы.


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





06. Анимация


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


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





07. Темная тема оформления и приглушенная палитра


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


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





08. Доступность


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


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


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





09. Параллакс


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


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




Команда Wix ❤️



ru03n.png