Тренды ux\ui дизайна весны 2021 года

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

Смотрите видео, кому лень читать ;)

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

1. Приглушенные цвета

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

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

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

2. Овалы и звезды

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

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

3. Массивные фото в фигурах

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

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

4. Необычная графика

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

Кстати, в прошлой статье я поделился 10 паками бесплатных иллюстраций в Figma, поэтому, если вы по какой-то причине еще не читали - обязательно переходите и пользуйтесь!

5. Шумные градиенты

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

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

6. Шрифт с засечками в заголовках

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

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

Если хотите крутую подборку с бесплатными кириллическими шрифтами - ставьте лайк и я сделаю эту подборку для вас. ☺

7. Базовая анимация

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

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

8. Рисованный стиль

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

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

9. Журнальный стиль

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

10. UX упрощение

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

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

❤ Если вам понравилась статья то поддержите ее лайком, а я продолжу делиться полезным о дизайне :)

👉🏻 Мой бесплатный Телеграм-канал с фишками о дизайне

✌🏻 Также я открыт к сотрудничеству Телеграм Intagram YouTube Behance

0
30 комментариев
Написать комментарий...
Elis

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

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

Ответить
Развернуть ветку
Денис Верхоломчук
Автор

Есть понятие как целевая аудитория. Продукт создается с учетом ЦА и определенная стилистика будет работать попросту лучше с определёнными пользователями. Вот и все

Ответить
Развернуть ветку
Elis

Я про это и говорю. ЦА в данном случае женщины, и вы им приписываете гендерные стереотипы в отношении цвета. Грубо говоря, голубой - мальчики, розовый - девочки. Цвет не имеет гендера и пола. Я вот мужского пола, но люблю нежные и розовые оттенки и пастельные тона. А, (условно мне) будут делать дизайн хаки и чёрный. Думаю надо ориентироваться на ментальное восприятие, а не на половые признаки ЦА в дизайне. И лучше бы дизайнеру стремиться к объективности, а не к стереотипам. 

Ответить
Развернуть ветку
Денис Верхоломчук
Автор

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

Ответить
Развернуть ветку
Svyatoslav Esekhin

Плюсую. Хотя мужик, одетый в нежно-розовую одежду тоже ЦА... Для наших мытищинских пацанчиков ;)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Elis

В общем с таким менталитетом в нормальных странах сложно будет найти работу. Только в Эрэфии.

Ответить
Развернуть ветку
Сергей Субботин

 начинается ...... гендерный ты наш дизайнер..... 

Ответить
Развернуть ветку
DoomBird

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

Ответить
Развернуть ветку
Maxim Bondarenko

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

Ответить
Развернуть ветку
Рекорд Надоев

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

До каких пор производители нижнего белья будут разделять трусы на мужские и женские????

Ответить
Развернуть ветку
Elis

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

Ответить
Развернуть ветку
Рекорд Надоев

Это вы себя не слышите. Не стоит искать проблему там, где её нет. Даже если это актуальная повесточка.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Ray Jey

Мне нравится приглушенные цвета. 

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Anton Anoshko

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

Ответить
Развернуть ветку
Когда-то был

UX упрощение - всеми руками ЗА

Ответить
Развернуть ветку
Борис Б

Иногда это упрощение превращается в усложнение.
Например форма логина у Google или Microsoft: форма из двух инпутов для логина и пароля + кнопка разбита на два шага с одним инпутом и одной кнопкой. Итого, вместо упрощения добавляется +1 клик.

Ответить
Развернуть ветку
Юрий Б.

Я думал это для безопасности - отсеивать ботов между переходами по двум отдельным экранам. 

Ответить
Развернуть ветку
Roma Schreibikus

Этот тренд был примерно с со времён сотворения мира

Ответить
Развернуть ветку
Сергей

Про анимацию я бы спорил.
1. Анимация может раздражать, когда ее избыток. Нужны сплит тесты.
2. Скрипты анимации замедляют загрузку сайта. Как известно, дольше загрузка-меньше заявок.

Ответить
Развернуть ветку
Денис Верхоломчук
Автор

Я говорю о базовой анимации, которая оживляет макет и делает его интересней

Ответить
Развернуть ветку
Александр Львов

Что считается базовой анимацией? Для кого макет становится интересным: для дизайнера или для конечного потребителя со слабым пк, нестабильными нервами или лагающим интернетом? 

Ответить
Развернуть ветку
Денис Космаков

Почему конечного потребителя всегда рассматривают под таким углом? "У клиентов плохой интернет, слабые нервы, проблемы с развитием и пользовательским опытом", – почему у вас клиент вот так выглядит? Это настолько стереотипное мнение. 10 лет назад мнение было таким, 5 лет назад и сейчас то же самое говорят. Аудитория покупателей взрослеет, взрослое поколение постепенно адаптируется к новым реалиям. "Давайте кнопку красную сделаем и купить напишем как можно крупнее", – покупка же осуществляется потому что вы 10 раз предложили купить, а не потому, что ваш товар/услуга имеют реальные преимущества. Бред.

Стереотипные суждения приводят к сереотипным решениям. Бессознательным штампованным ублюдским решениям. 

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

Ответить
Развернуть ветку
Денис Верхоломчук
Автор

Полностью поддерживаю 👏

Ответить
Развернуть ветку
Александр Львов

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

Ответить
Развернуть ветку
Денис Космаков

Смотря о каких дизайнерах вы говорите. Мои дизайнеры так не думают, я так тоже не думаю. 

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

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

Ответить
Развернуть ветку
Roma Schreibikus

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

Ответить
Развернуть ветку
Денис Космаков

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

У вас очень посредственное мышление. Когнитивная нагрузка – это находиться с вами в диалоге. Спасибо, уходите.

Ответить
Развернуть ветку
Борис Б

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

Ответить
Развернуть ветку
Денис Космаков

👏🏼👏🏼👏🏼

Ответить
Развернуть ветку
Игорь Крюков

"Вот тут пусть выезжает менюшечка, а вон там картинка с надписью появляется" 
Видимо, что-то из этого разряда

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
27 комментариев
Раскрывать всегда