Новые тенденции и тренды в интернет дизайне для создания современных, стильных и эффективных сайтов. Большинство из этих популярных инструментов веб-дизайна являются продолжением моды прошлых лет: градиенты, нестандартная типография и шрифты, много минимализма. Но также появляются и новые тенденции: «темные темы», интерфейсы со звуковыми элементами, трехмерные изображения. Остановимся подробно на каждом из них.
Минимализм и большие отступы
Минимализм — одна из тех классических тенденций дизайна, которая только развивается. Минимализм в 2020 году отмечен большими полосами пустого пространства и отступами. И не всегда в том месте, где вы ожидаете их увидеть.
Остановимся на примерах. В то время как Whiteboard имеет более классический минималистский стиль — возможно, даже супер-минималистский — Soldo прекрасно использует новый минимализм. Простая фотография почти белого цвета и опирается на белый фон с асимметричным пробелом, чтобы помочь пользователям быстро понять контент.
Оба примера показывают, почему минимализм работает: это элегантно, красиво и просто для понимания (что и делает этот стиль очень удобными в использовании). Такой стиль зачастую применяют при создании лендинг пейдж или небольших сайтов-визиток.
Темные темы
Так как многие пользователи сети выбирают «темный режим» для приложений и для таких вещей, как электронная почта, неудивительно, что все больше веб-сайтов также создают проекты с темной эстетикой.
Что делает эти дизайны в темных режимах приятными — и, вероятно, почему они имеют тенденцию — это то, что темные интерфейсы дополняются яркими акцентными элементами и легко читаемой типографикой, чтобы обеспечить читаемость всего сайта.
Сайт Davenport на примере ниже использует белые печатные буквы и элегантный золотой цвет для призыва к действию и других интерактивных элементов.
Нестандартная типография
Ключ к тому, чтобы заставить эту тенденцию дизайна работать, состоит в том, что даже когда нарушаются правила типа — нечетный интервал, размер или даже межстрочный интервал или разрывы — пользователю все равно нужно понимать, что вы хотите сказать. Чаще всего типография в этом стиле — скорее художественный элемент, а не информационный.
На примере ниже сайт нарушает правила типа таким образом, что это не ухудшает читабельность с помощью основного заголовка, который пересекает пространство фона и изображение переднего плана. В дизайне также используется круглый текстовый элемент между фоновыми элементами для уменьшения пробелов.
Карикатуры и художественные иллюстрации
Художественные иллюстрации — особенно элементы с рисунком в стиле линии и намеками на анимацию — продолжают расти в популярности. Эта тенденция дизайна сайта, кажется, набрала обороты, потому что она выглядит и чувствует себя подлинной, не принужденной и немного капризной.
Абсурд Дизайн иллюстрирует это с коллекцией художественных элементов, которые являются творческими и немного броскими. Каждая иллюстрация выглядит так, как будто она была нарисована на экране.
Жидкая анимация или текучесть графики
Кажется, что почти каждый веб-сайт, на который вы заходите, включает в себя анимацию. Что действительно актуально, так это анимация в жидком стиле с движением, которое кажется водоподобным.
Жидкая анимация может работать для целых сцен как способ перехода элементов видео, состояние при наведении курсора на соблазн кликов или как общая анимация, помогающая вовлечь пользователей в дизайн. Хитрость в том, чтобы заставить эту тенденцию работать, заключается в скорости движения. Он должен быть гладким, плавным и идеально рассчитанным для наиболее реалистичного ощущения.
Илья Кульбачный на примере ниже использует жидкую анимацию для заголовка сайта своего портфолио. (Это может быть одним из лучших вариантов использования этой тенденции дизайна). Слова плавают на экране и имеют дополнительное состояние наведения, которое перемещает его изображение и слова еще больше.
3D графика в дизайне
Добавление глубины создает ощущение реалистичности дизайна. Трехмерные изображения являются продолжением этой идеи. Это тенденция, которую мы начали наблюдать в конце десятилетия, и ожидаем увидеть гораздо больше в 2020 году.
Лучшие 3D-дизайны дают пользователям что-то немного неожиданное, например, маску, которая разваливается на сайте Metaconf Meetup, или боковую прокрутку крошечных туфель на сайте Toke.
Взаимное перекрытие слоёв
Слои, слои и ещё раз слои. Перекрывающиеся слои и элементы не совсем создают 3D-эффект, но они добавляют ощущение глубины и размерности проектам.
Хотя перекрывающиеся слои могут иметь форму одного элемента, эта тенденция часто включает в себя несколько перекрывающихся элементов. Самое приятное то, что этот прием работает практически с любым видом сайта и тематикой.
Вы можете перекрывать поля и фоны, изображения или видео, текст или элементы пользовательского интерфейса и значки. Сама хитрость может заключаться в том, чтобы перекрывающийся слой проходил через прокрутку дизайна.
На примере сайт Craft Kitchen используются несколько перекрывающихся элементов — фотография в навигационной панели, текст на фотографии и фоторамка в фоторамке. Элементы продолжают складываться и накладываться друг на друга, чтобы поддерживать визуальную тему.
Переменные цветовые градиенты
В разгар плоского дизайна был короткий период, когда дизайнеры избегали градиентов. Но они вернулись с ревом и станут ещё более популярными в 2020 году.
От ярких фонов с многоцветными градиентами до тонких градиентов для текстуры, эта тенденция повсюду. То, что мы видим сейчас, это градиенты, которые сочетают несколько цветов с небольшим контрастом, а тонкие монотонные градиенты, которые были популярны в последнее время.
Сайт Bariskuran использует жирный градиент для дизайна портфеля, который имеет большое влияние, градиент для текстовых элементов, а также «пузыри» в визуализации.
Оригинальная навигация и нестандартное меню
Навигационная тенденция этого года может стать концом мегаменю навсегда. Оптимизация стилей навигации, безусловно, берет верх.
Хотя на первый взгляд это может показаться рискованной идеей, на самом деле это имеет большой смысл. Большинство пользователей попадают на ваш сайт через поисковую систему и могут не зайти на домашнюю страницу. Простая навигации создает более прямой путь для посетителя, чтобы добраться до нужного материала в пару кликов. Упрощенные стили навигации предоставляют больше места в основной области холста для обмена сообщениями и интересного контента. Так почему бы не попробовать?
Сайт Uniel также заправляет навигацию в маленькую угловую иконку гамбургера. Она одинаково смотрится как на настольных компьютерах, так и мобильных устройствах, создавая узнаваемый интерфейс.
Выводы
Многие современные элементы дизайна работают совместно друг с другом, поэтому вы можете смешивать и сочетать тренды и стили, чтобы создать что-то свежее и оригинальное. Пока тренды в дизайне способствуют удобству и простоте использования, не стесняйтесь играть и комбинировать, чтобы максимально реализовать потенциал ваших проектов.
