Тенденции современного web дизайна

11 определяющих трендов в веб-дизайне и пользовательском интерфейсе 2020 года

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

Каким будет веб-дизайн в 2020 году, продолжении тенденций 2019-го и направлениях, которые будут развиваться, рассказывает основатель и директор Gagarin Studio Артем Беседа.

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

Минимализм — классика дизайна. Но в комбинациях с новыми приемами он раскрывается иначе: это решения на модной волне и в то же время изящные и элегантные.

Вот как это сделано на сайте о спасении китов https://save-whales.com/.

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

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

В этом примере сочетаются несколько трендовых решений: типографика, градиенты, 3D и не только.

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

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

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

В комбинации с минимализмом в том числе.

Или указывая на нужное действие так, что не заметить невозможно.

Создатели сайта-оппозиционера глянцу в социальных сетях I am tired online талантливо используют типографику для нагнетания соответствующего эффекта. Это даже жестко.

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

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

Обратите внимание на черную кляксу в верхнем левом углу — это кнопка «На главную».

Анимированные иллюстрации просто и убедительно объясняют, что как работает.

Иллюстрации — творческие решения, которые добавляют дизайну индивидуальности. Судя по поведению пользователей, они это ценят.

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

На сайтах о продаже/создании одежды такой прием создает эффект дополненной реальности с элементами игры.

На примере ниже геометрические элементы используются как эмоциональные акценты к фото.

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

Анимационные решения создают wow-эффект. И впечатление, что сайт стоит вашего внимания.

По сайту https://deplacemaison.webflow.io/ за вашим курсором следует стремительная черная капля, с которой хочется играть.

А на Binaryblocks — голубая точка, которая в месте клика превращается в круг.

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

Сайт Save whales погружает в водную среду несколькими анимационными эффектами: плывут киты, курсор и информационные пузыри, а предыдущие страницы «смываются» нарисованной волной.

Трехмерные модели практически получили статус must have трендового веб-дизайна. О одинаково успешно решают диаметрально противоположные задачи: реалистично отображать объекты и создавать фантазийные виртуальные эффекты.

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

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

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

Часто это значит, что у сайта нет четкой сетки. И это тоже очень эффектно. Причем просматривать сайт с «правильно разрушенной» сеткой легко. Ниже — примеры сайтов о строительстве и дизайне.

Иногда художественный прием наслоения раскрывает саму идею ресурса — как у американского сервиса поиска водителей-попутчиков: много сменяющихся лиц, мест, впечатлений.

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

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

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

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

При этом, несмотря на минималистичное решение меню, интерфейс и принципы навигации остаются понятными.

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

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

Источник

Тенденции современного web дизайна

Какие тренды в веб-дизайне будут на пике популярности в следующем году? Мы в дизайн-студии Магвай неустанно следим за всеми новшествами и с радостью подготовили перевод статьи от экспертов Envato (Envato — австралийская it-компания, которая управляет интернет-сервисами, ориентированными на продажу графического контента, такого как: шаблоны для веб-дизайна, графические элементы, 3D-модели и т.д).

Профессионалы из Envato рассказывают о главных тенденциях, на которые следует обратить внимание в 2021 году.

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

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

И всё же — от тёмной цветовой схемы до интерактивности: какие популярные тренды в веб-дизайне покорят интернет в следующем году? Мы спросили экспертов из Envato, что отличало классный сайт в 2020, а также их мнение о последних и наиболее удачных тенденциях в веб-дизайне, на которые следует обратить внимание в 2021 году.

Тёмная цветовая схема

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

Что такое тёмная цветовая схема?

Крупные бренды, такие как Apple, Hublot, и отдельные дизайнеры, например, Clock Strikes Twelve, для своих продуктов и портфолио используют тёмный фон, так как это отличный способ сделать сайт современным и элегантным. Помимо того, что дизайнеры могут в этом случае поиграть с разными элементами, такими как пастель или неон (два главных тренда 2020 года), исследования также показали, что тёмный режим меньше расходует заряд устройства, кроме того, он лучше подходит для восприятия, поскольку уменьшает негативное воздействие синего цвета на глаза.

«Похоже, сегодня появляется больше продуктов, которые имеют в настройках тёмный режим или ориентированы только на тёмную цветовую схему, это продиктовано исследованиями, в которых изучили воздействие яркого синего света на человека, а также на время автономной работы батареи», — говорит UI-дизайнер из Envato Шон Фихан.

Тёмный режим не только лощёный, элегантный и приятный для глаз, он также увеличивает контраст и делает элементы дизайна более заметными. Вы даже можете добавить на свой сайт переключатель тёмного режима, как показано в этих примерах от Johny Vino, Koos Looijesteijn и Adrian Verde Studio, чтобы посетители могли настраивать сайт под себя.

«По моему мнению, тёмный фоновый режим — определённо тенденция, которая оказала наибольшее влияние на веб-дизайн в 2020 году, — говорит UX-дизайнер из Envato, Талия Джаннополас. — Благодаря тому, что тёмный режим стал популярным, я уже видела несколько сайтов, где был добавлен переключатель (от светлого к тёмному). Это великолепно и в тоже время так просто, когда пользователь может выбрать настройки, основываясь на своих предпочтениях».

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

Коллаж и смешанные техники

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

Что же такое коллаж?

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

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

«Я думаю, что концепция смешения разных средств будет только набирать обороты в 2021, — говорит Талия. — Многие уже сейчас используют приложения для рисования на iPad и цифровые кисти, имитирующие традиционные краски (например, акварель, масло, гуашь), границы цифрового искусства меняются. Кроме того, удобно, что такие произведения уже на цифровом устройстве, их не надо сканировать или фотографировать, а значит, ими проще делиться в интернете».

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

Антидизайн

Предупреждение: мы знаем, что этот тренд не для каждого!

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

Что такое антидизайн?

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

Многие профессионалы сейчас увлечены странным миром антидизайна, один из примеров — хаотичный, но причудливый сайт голландского бренда Roze Bunker и дизайн-студий Play Type и XXIX. Даже австралийский музыкант Flume решился на такой яркий, смелый и брутальный подход для своего сайта. Несмотря на то, что подобный тренд всегда выделяется среди множества конкурентов (надеемся, что в положительном смысле), эффективный веб-дизайн всё-таки про баланс. Если вы действительно хотите попробовать антидизайн, важно позаботиться, чтобы интерфейс вашего сайта оставался простым, функциональным и удобным для пользователя.

«Я думала, что популярность антидизайна постепенно упадёт, но сейчас считаю, что он эволюционирует вместе с трендом на использование смешанных техник, — говорит Талия. — Я встречала много разных сайтов, где изображения накладываются друг на друга, смешиваются шрифты с засечками и шрифт san serif, а также нетрадиционным способом используется анимация. Тем не менее, благодаря отличному UX они прекрасно работают».

Минимализм

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

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

Тренд, который направлен не только на упрощение визуального дизайна сайтов, но и на удобство использования, функциональность — ещё одна важная тенденция 2021 года. Минималистичный веб-дизайн будет оставаться ключевым компонентом современного дизайна пользовательского интерфейса на долгие годы.

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

Органический дизайн

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

На органический дизайн влияет повышенное внимание к экологии и защите окружающей среды, отсюда тёплые землистые цвета, естественные формы и необработанные органические текстуры — как это видно на сайтах от Ora Floral Agency, A Better Source и Abbotsford Convent в Мельбурне.

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

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

Иллюстрация

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

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

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

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

Функциональность, а также инклюзивный и доступный дизайн

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

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

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

Вот несколько способов сделать ваш сайт более доступным:

сделайте сильный цветовой контраст между текстом и фоном;

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

применяйте лейблы и подсказки в полях формы, а не плейсхолдеры с малопонятными комментариями;

задействуйте функциональные ALT-теги (альтернативные тексты) для изображений;

используйте лёгкий для понимания контент без сленга.

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

Моушн-дизайн и интерактивность

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

Аналогичным образом многие бренды и компании, такие как YouTube Rewind, начали добавлять на сайты больше интерактивных элементов (викторины, игры, квизы и опросы). Отличный пример такого подхода — бренд Estee Lauder. На сайте компании есть интерактивная аркадная игра под названием «THE ANRCADE», это футуристический квест, где пользователи зарабатывают «очки молодости», а бренд таким образом продвигает свой крем Advanced Night Repair.

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

«По мере того, как технологии развиваются, становится всё проще применять моушн-дизайн, и это помогает создавать потрясающие впечатления (при правильном использовании), — говорит Шон. — Я вижу, что это хорошо получается, когда есть переход между контентом и взаимодействием с элементами».

3D и геометрический дизайн

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

Трёхмерные формы и плавающие объекты в геометрическом дизайне появляются, благодаря смешению сюрреалистичных анимаций с реальными объектами, таким образом создаётся завораживающий футуристический эффект. Этот стиль часто используется в рекламных роликах для демонстрации новых продуктов, которые в этом случае вращаются, словно подвешенные в воздухе. Чтобы ваш сайт привлекал посетителей, можно добавить ещё один слой или измерение. Один из таких примеров — сайт The Artery, который сочетает геометрические элементы с минималистичными простыми линиями модульной сетки.

Использование простых линий сетки, границ и других структурных элементов также стало трендом в области веб-дизайна. Например, эту тенденцию можно оценить на сайтах Rail Road Ladies, Monograph Comms и The Imagineers.

«Я заметил, что в веб-дизайне снова начинают использовать геометрические элементы и сетку. И мне, как человеку, который любит структуру и порядок, это по-настоящему нравится», — говорит Шон.

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

Ищете исполнителя для реализации проекта?

Проведите конкурс среди участников CMS Magazine

Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.

Источник