Найти в Дзене
A-ERP.COM

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

Оглавление

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

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

Ниже приведены десять трендов дизайна, которые будут преобладать в интернете в 2020 году (по нашему мнению).

1. Сломанная сетка и асимметричная компоновка

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

Веб-сайт Times Talks демонстрирует сломанную сетку макета своего сайта.
Веб-сайт Times Talks демонстрирует сломанную сетку макета своего сайта.

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

Студия Revele экспериментирует с асимметричной и сломанной сеткой дизайна веб-сайта (круги можно перемещать по экрану).
Студия Revele экспериментирует с асимметричной и сломанной сеткой дизайна веб-сайта (круги можно перемещать по экрану).

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

2. Гибкий/органический дизайн и элементы

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

Wandering Aimfully, показывает органические формы и линии, видимые за круговыми изображениями.
Wandering Aimfully, показывает органические формы и линии, видимые за круговыми изображениями.

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

-5

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

3. Ностальгический / ретро-дизайн

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

Дизайн веб-сайта Statamic имеет ретро-цветовую схему, напоминающую яркие цвета и образы 1980-х годов
Дизайн веб-сайта Statamic имеет ретро-цветовую схему, напоминающую яркие цвета и образы 1980-х годов

Экспериментирование с ностальгией и ретро-стилями дизайна может создать приятное сочетание между дизайном тогда и сейчас.

Веб-сайт Great Jones имеет характерную типографику и цветовую схему 1970-х годов, эстетику дизайна, которая была распространена до ARPANET в 1983 году .
Веб-сайт Great Jones имеет характерную типографику и цветовую схему 1970-х годов, эстетику дизайна, которая была распространена до ARPANET в 1983 году .

4. Более расширенные / повышенные обработки изображений

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

На веб-сайте KOBU есть изображения, которые состоят из вырезанных элементов, вместо стандартного изображения.
На веб-сайте KOBU есть изображения, которые состоят из вырезанных элементов, вместо стандартного изображения.

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

На веб-сайте Drip  показаны изображения, которые были вырезаны и к ним добавлены рисунки.
На веб-сайте Drip показаны изображения, которые были вырезаны и к ним добавлены рисунки.

5. Монохромный сайт

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

Сайт Digital Bro придерживается очень монохроматической цветовой схемы, используя один оттенок желтого цвета.
Сайт Digital Bro придерживается очень монохроматической цветовой схемы, используя один оттенок желтого цвета.

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

Сайт Climate  придерживается черно-белой цветовой схемы, даже видео на сайте во всех черно-белое.
Сайт Climate придерживается черно-белой цветовой схемы, даже видео на сайте во всех черно-белое.

Вы хотите упростить свою цветовую палитру (в искусстве и дизайне черный, белый и серый цвета не считаются цветами, чаще они называются нейтральными).

6. Перекрытие элементов

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

Веб-сайт Mad Studio имеет перекрывающиеся элементы, дополненного тонкими анимациями, которые делают веб-сайт трехмерным.
Веб-сайт Mad Studio имеет перекрывающиеся элементы, дополненного тонкими анимациями, которые делают веб-сайт трехмерным.

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

Веб-сайт компании Hers демонстрирует перекрывающиеся элементы.
Веб-сайт компании Hers демонстрирует перекрывающиеся элементы.

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

7. Необычное расположение области заголовка

Уникальный подход к центральной зоне сайта, используемый Zoo Creative, копируя  рекламный щит.
Уникальный подход к центральной зоне сайта, используемый Zoo Creative, копируя рекламный щит.

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

-15

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

8. Эксперименты с навигацией по сайту

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

56 Digital демонстрирует большие кнопки — которые стали центром всего сайта
56 Digital демонстрирует большие кнопки — которые стали центром всего сайта

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

Веб-сайт Gander имеет кнопки навигации во всех четырех углах своего сайта вместо типичной навигационной панели сверху или сбоку.
Веб-сайт Gander имеет кнопки навигации во всех четырех углах своего сайта вместо типичной навигационной панели сверху или сбоку.

9. Больше белого пространства

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

Сайт Даниэля Боддама использует дополнительное пустое пространство в заголовке своего сайта.
Сайт Даниэля Боддама использует дополнительное пустое пространство в заголовке своего сайта.

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

10. Раздвигая границы типографики

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

Сайт Kurppa Hosk экспериментирует с типографикой, добавляя анимацию и взаимодействие с пользователем. Текст взрывается и образует круг вокруг курсора пользователя.
Сайт Kurppa Hosk экспериментирует с типографикой, добавляя анимацию и взаимодействие с пользователем. Текст взрывается и образует круг вокруг курсора пользователя.

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

Веб-сайт ARCHE68 имеет типографику почти трехмерную. Типографика не только имеет эффект изгиба, но и автоматически прокручивает влево и вправо и перемещается с пользовательской прокруткой вверх и вниз.
Веб-сайт ARCHE68 имеет типографику почти трехмерную. Типографика не только имеет эффект изгиба, но и автоматически прокручивает влево и вправо и перемещается с пользовательской прокруткой вверх и вниз.

В 2020 году экспериментирование с типографией вероятно, станет тенденцией в веб-дизайне.

Заключительные выводы

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