Новый год, новые тренды в веб-дизайне.

Мы уже начали замечать некоторые элементы дизайна, которые будут в тренде в 2020 году (и, возможно, в будущем). Большинство из этих популярных тем веб-дизайна являются продолжением вещей, которые использовались в дизайн-проектах - больше градиентов, “нарушающая правила” типография и много минимализма.

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

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

Веб-дизайн и тренды пользовательского интерфейса в 2020 году

Минимализм + Белое Пространство

Минимализм - одна из тех классических трендов, который активно развивается. (Вы могли бы назвать это Кроликом Energizer тенденций дизайна.)

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

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

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

 

Дизайн «Темный режим»

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

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

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

 

Нарушение правил оформления текста

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

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

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

 «Makers & Dreamers» переворачивают, рисуют и крутят текст так, чтобы вы даже не думали об этом. Благодаря простому выбору работы и чистому общему дизайну, слова все еще как-то читаются, и дизайн объединяется.

 

Художественные иллюстрации

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

Absurd Design иллюстрирует это с коллекцией художественных элементов, которые являются творческими и немного броскими. Каждая иллюстрация выглядит так, как будто она была нарисована на экране.

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

 

Смешение иллюстрации и реализма

Какой стиль вы должны использовать? Иллюстрация или фотографии?

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

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

 

Жидкая анимация

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

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

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

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

 

Всё 3D

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

Лучшие 3D-дизайны дают пользователям что-то немного неожиданное, например, маску, которая разваливается на сайте Metaconf Meetup, или боковую прокрутку крошечных туфель на сайте Toke.

 

Использование аудио интерфейса

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

La Ofrenda Mas Grande de Mexico и IFly Magazine соблюдают это правило и используют звук для повышения качества путешествий пользователей в своих проектах. Лучшее использование аудио-интерфейса может быть в проектах, где существует языковой барьер, потому что музыка может быть отличным объединителем, когда речь идет о веб-повествовании.

 

Слои, которые перекрываются

Слои, слои и еще раз слои. Перекрывающиеся слои и элементы не совсем создают 3D-эффект, но они добавляют ощущение глубины и размерности проектам.

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

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

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

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

 

Изменяющие цвет градиенты

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

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

Bariskuran использует жирный градиент для дизайна портфеля, который имеет большое влияние; Arjay Studio использует градиент для текстовых элементов, а также «пузыри» в визуализации AR. (Использование нескольких градиентов также является популярной темой.)

 

Оптимизированная навигация

Навигационная тенденция этого года может стать концом “мегаменю”. Обтекаемые стили навигации, безусловно, становятся популярнее.

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

Так почему бы не попробовать?

Bikebear использует наиболее распространенную форму упрощенной навигации с элементами меню внутри значка. Значок открывает навигацию в полноэкранном списке параметров.

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

 

Вывод

Вы заметили, просматривая примеры, сколько тенденций могут использоваться одновременно?

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

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

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

 

Ссылка на источник: https://designmodo.com/web-design-trends-2020/