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


Какие направления и эстетика дизайна будут популяризироваться в 2020 году? Какие тенденции, скорее всего, будут выходить?

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

Станьте Fullstak web-дизайнером
Подробнее

За 4 месяца Вы освоите базовую теорию дизайна: композиция, сетки, типографика, работа с цветом, работа с фото- и видеоконтентом, а так же познакомитесь с методологией командной работы (Kanban, Scrum)

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

Хой Винь, старший директор по дизайну продуктов Adobe XD

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

Ниже Вы найдете лучшие тренды дизайна в этом году:

1. Использование простого текста

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

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

blogs

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

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

Вы также можете увидеть эту тенденцию с The New York Times, которая объединила собственный шрифт с анимацией для своего текстового заголовка на своем веб-сайте Food Festival.

blogs (1)

2. Включенные иллюстрации

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

blogs (2)

Такие сайты, как DottedSign и Fixate, являются отличными примерами этой растущей тенденции.

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

blogs (3)

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

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

3. Винтажные цвета и типография

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

blogs (4)

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

Новый веб-сайт Chrissy Teigen является отличным примером использования винтажного шрифта с винтажной цветовой гаммой (естественной, но яркой).

blogs (5)

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

Их шрифт в сочетании с цветом фона выглядит винтажным, но не датированным.

4. Черное и белое

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

blogs (6)

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

Сайт Александра Яременко (ниже) также придерживается черно-белой цветовой схемы вне примеров его портфолио.

blogs (7)

5. Доминирующие сетки

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

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

blogs (8)

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

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

blogs (9)

6. Изложение типографики

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

Станьте Fullstak web-дизайнером
Подробнее

За 4 месяца Вы освоите базовую теорию дизайна: композиция, сетки, типографика, работа с цветом, работа с фото- и видеоконтентом, а так же познакомитесь с методологией командной работы (Kanban, Scrum)

«Быть уникальным стало обязательным требованием в сети, что удивительно, учитывая, что это было не так давно, когда у дизайнеров было всего несколько шрифтов для работы»

Винь из Adobe

«У нас есть больше веб-шрифтов; нам нужна более смелая, более разнообразная веб-типография ».

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

blogs (10)

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

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

7. Массивные размеры шрифта

Да, еще один типографский тренд, но как вы можете упускать из виду постоянно растущие размеры шрифтов в Интернете?

blogs (11)

Redscout и The New York Times Food Festival (оба были описаны ранее в этой статье) являются отличными примерами этой тенденции.

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

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

blogs(12)

8. Геометрические формы и узоры

Геометрические формы, линии и узоры возвращаются к 2020 году.

blogs (13)

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

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

blogs (14)

9. Пользовательские анимации

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

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

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

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

blogs (15)

Сайт Romain Avalle является отличным примером этой тенденции, как и Intro to Coding (ранее упомянутый). В центре их сайта контуры инициалов перемещаются в зависимости от того, где находится курсор.

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

10. Модные цветовые схемы

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

blogs (16)

Примером модного сочетания цветов является схема первичного синего и бледно-розового / пыльного румян, популярная в Pinterest и Instagram.

Сайты Collate Art (вверху) и Datalands (внизу) имеют эту модную цветовую схему в дизайне своих сайтов.

blogs (17)

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

Ключевые тренды

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

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

Винь из Adobe говорит об этом о типографии в тенденциях веб-дизайна, поскольку мы вступаем в новое десятилетие:

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

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

Есть вопрос или дополнение?

      Оставить отзыв

      EdAdvisor
      Регистрация
      Сброс пароля
      Сравнить товары
      • Итого (0)
      Сравнить
      0