Тренд 1: Идеальные иконки
В 2021 году делать разношерстные иконки просто непозволительно. Интерфейсы в 2021 году должны быть вылизаны до каждого пикселя.
Совет: Перед тем как подключить библиотеку иконок в свой проект, убедитесь в том, что все необходимые иконки есть в наличии, протестируйте их в интерфейсе. Попробуйте несколько разных библиотек, стилей. Сравните макеты и сделайте выбор в пользу лучших. И конечно, все поисковые запросы иконок надо делать на английском языке.
Где взять?
266 Free Icons — отличный пак бесплатных иконок (Figma, Sketch, SVG). tetrisly.com/freebies#icons
Basil — 500 бесплатных иконок в двух стилях outline и solid, доступно для Figma, Sketch, Adobe .
Скачать на Craftwork https://craftwork.design/downloads/basil/
Ikonate — бесплатный пак полностью кастомизируемых векторных иконок. ikonate.com
Streamline symbols — 1285 бесплатных иконок для Visual Studio. (SVG тоже есть)
www.streamlinehq.com/dsp
Rubicons — бесплатный пак минималистичных иконок для ваших проектов.
www.rubicons.app
Тренд 2: Минимализм и простота
В истории интерфейсов очень много было экспериментов и сегодня дизайн пришел к тому, что хороший интерфейс — это тот интерфейс который не видно.
На что стоит обращать внимание?
1. Оставляйте на первом плане только самые необходимые функции для пользователя.
2. Делайте интерфейс легким и воздушным. Убирайте массивные цвета. В центре должен оставаться контент.
3. Выстраивайте дизайн вокруг хороших шрифтов, качественной верстки, правильных акцентах, иконках, однородности.
4. Уделяйте максимум внимания деталям.
5. Делайте интерфейс «незаметным», но интуитивно понятным и удобным.
6. Не уходите от привычных для пользователя функций и дизайна. Не стоит размещать иконку уведомления в нижнем левом углу экрана, размещайте уведомления там, где пользователи привыкли их видеть. Иногда не стоит придумывать велосипед.
Тренд 3: Тени и градиенты
Тренд с тенями и градиентами был и ранее, и по сей день остается актуальным. Единственное, что в нем поменялось — это появление большей воздушности, легкости и объема. Все это миксуется с пастельными градиентами и новыми трендовыми 3d иконками. По сути это тот же самый минимализм, только более объемный. Совет: Используйте более приглушенные и пастельные цвета и оттенки для теней и градиентов.
Сложные градиенты и blur-эффекты
Градиенты тоже немного эволюционировали и стали более сложными. Теперь недостаточно использовать линейный градиент как ранее. Надо миксовать разные цвета и использовать наложение. Плюс в интерфейсах все чаще начал использоваться эффект Color Blur. Чаще всего в качестве background. Это придает интерфейсу глубину и объем. Как правило это своего рода «цветные пятна».
Где брать сложные градиенты?
products.ls.graphics
На сайте вы сможете скачать большое количество трендовых градиентов. Можете экспериментировать с ними, меняя HUE, blur, наложение между собой и многое другое и получить самостоятельно еще больше вариантов.
Тренд 4: 3D-иконки и иллюстрации
Появление тренда на 3d иконки и иллюстрации я связываю с тем, что знания в области 3d стали более доступными. Появилось много курсов, уроков. Всем этим воспользовались дизайнеры и начали развивать эту тему создавая библиотеки 3d объектов.
www.iconshock.com ICONZ
Премиальная 3D-библиотека из 50 иконок для ваших замечательных продуктов. Полностью совместим с наиболее распространенными дизайнерскими инструментами.
https://iconz.design/
Коллекция изометрический 3d иконок
www.isometriclove.com/
Тренд 5: 2D уникальные и абсурдные иллюстрации
Иллюстрации как и в прошлом году остаются в тренде. Есть только одна проблема, как и с иконками, в сети появилось огромное количество однотипных и доступных иллюстраций, что сильно их обесценивает.
Blush Design https://blush.design/ru
Легко создавайте и настраивайте потрясающие иллюстрации из коллекций, созданных художниками со всего мира. Попробуйте, это весело.
Конструктор иллюстраций онлайн
https://www.ls.graphics/
Классный и необычный конструктор иллюстраций с разными стилями.
https://itg.digital/
Вы можете выбрать любую иллюстрацию которая вам понравилась и потом редактировать ее в конструкторе как вам угодно.
Minty https://tasteminty.com/page/
Сервис, где можно заказывать уникальные иллюстрации для своих проектов или покупать готовые работы. у иллюстраторов всего мира.
Тренд 6: SVG и JSON анимация
В 2021 году будет много хороших иллюстраций. Это относится не только к иллюстрациям, но и к иконкам.
Любые мелкие анимированные детали в интерфейсе, особенно, где они уместны, будут большим плюсом.
Что из себя представляет SVG и JSON анимация? Простыми словами, это анимация созданная кодом. Какие в этом преимущества?
iOS, Android & Web Универсальность использования на iOS, Android, Web и Windows
Минимальные размеры Файлы анимации в десятки/сотни раз меньше графики по размеру
Дизайнер может визуализировать анимацию в After Effect.
Flow — программа для анимации. Создавайте анимацию и легко экспортируйте код для iOS (Swift), Web (HTML / CSS / JS) или SVG и наблюдайте, как ваш дизайн оживает.
Конечно, в ней не все так идеально, но элементарные анимации можно создавать и вставлять в свои проекты посредством Embed code или импортировать анимированную SVG
createwithflow.com
Создавайте анимацию международного класса, используя мощные инструменты редактирования временной шкалы. Flow даст вам точный контроль над свойствами, временем и динамикой.
Loaf
Есть еще качественная библиотека Loaf c готовыми анимационными SVG иконками. Иконки можно настраивать и получать SVG код.
https://airbnb.io/lottie/#/
Тренд 7: пастельные цвета
С приходом минимализма и простоты в UI дизайн, пастельные цвета идеально дополняют новый тренд. Они хорошо вписываются в концепт ненавязчивого UI, не перегружают дизайн и поддерживают легкость. Задают тон и атмосферу.
есть готовые паттерны с постельными цветами на любой вкус и цвет https://colorhunt.co/palettes/pastel
Тренд 8: Разнообразие кириллических шрифтов
Русские дизайнеры сильно постарались и выпустили обновления, так же не остались в стороне гиганты индустрии .
Extended шрифты
Если говорить о трендах в UI, то в тренде чистые, легкие и геометрические шрифты. Для заголовков это Extended шрифты. Ярким примером расширенных шрифтов является Druk, быстро ставшим хитом и быстро всем надоевшим.
Сегодня в тренде более «ломанные» или «деформированные» шрифты для графического дизайна и заголовков + чистые, геометрические и немного широкие для основного текста и UI.
Где брать хорошие кириллические шрифты?
type.today
Brownfox
Swiss Typefaces
Commercial Type
Letters from Sweden
Type Together
«Русские шрифты»
Typefaces of Temporary State
Где брать шрифтовое вдохновение?
Пожалуй, единственный и самый лучший на сегодняшний день ресурс с кириллическими шрифтами в использовании это https://cyrillic.design/
Тренд 9: Брутализм и антидизайн
Эти тенденции веб-дизайна являются реакцией на воспринимаемое единообразие веб-дизайна. Брутализм можно эффективно использовать в визуальном дизайне, но для большинства продуктов следует избегать антидизайна.
ReadyMag www.ReadyMag.comэто визуальный веб-редактор где вы «рисуете» сайт. Именно он стал уникальным инструментом где максимально легко создавать подобные сайты. Именно за этим направлением сегодня будущее.
