Стили веб дизайна 2021

Топ-10 трендов графического дизайна 2021 года

Правило одно: правил больше нет. Но на что же ориентироваться дизайнеру в своей работе?

«Поставили несколько букв на белой фон и диких денег просят!» — еще недавно так думали многие заказчики о графических дизайнерах. Казалось, мода на минимализм может убить профессию. Но это в прошлом. Людям хочется ярких и разнообразных эмоций, иногда шока. Реальная жизнь все больше сливается с виртуальной. Идеальные, прилизанные картинки уже не радуют, а раздражают. Что сейчас на пике популярности в графическом дизайне? Как изменились технологии? И как не потеряться в разнообразных трендах? Об этом рассказывает графический дизайнер Национального центра промышленного дизайна и инноваций 2050.ЛАБ Анжела Гришина.

Помните, в 2010-х мир стремился стать глянцевым? Идеальные семьи в рекламе и социальных сетях. Прекрасные, отфотошопленные модели, у которых просто не может быть изъянов кожи. Даже фрукты, и те были далеки от реальности: гладкие, блестящие, с красивыми боками, ровными бликами.

Мир помешался на стремлении к совершенству. Оно было во всем. Даже шрифты, в стремлении к идеальности, стали терять свою индивидуальность.

2010-е – это время Apple, культа минимализма. Белые или черные поверхности техники, такие же ровные и гладкие однотонные коробки с лаконичным изображением продукта. Вплоть до смерти Стива Джобса это был главный тренд в графическом дизайне. Мы достигли пика минимализма и погрузились в другую крайность. Все перевернулось. Дизайнеры начали хулиганить, бунтовать. Как и общество. Больше не хотелось идеальности.

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

Тренд № 1: Игра с сеткой

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

Тренд №2: Смелые цветовые решения

Уже много лет подряд главный ориентир – рекомендации института цвета Pantone. Чаще всего он выбирает один цвет. Например, в 2020 году это был классический синий. В 2021 году главными названы сразу два: Illuminating и Ultimate Gray. В объяснении, почему именно желтый и серый, Pantone говорит, что такое сочетание «вдохновляющее и дающее надежду». Действительно, после прошлогодней пандемии и локдауна этого очень хочется!

Источник

Тренды в дизайне сайтов 2021

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

Создайте свой логотип онлайн. Более 50 тысяч брендов по всему миру уже используют логотипы от Турболого.

Заимствование из соцсетей

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

Выбор такого варианта дизайна обусловлен удобством и привлекательностью. Многие компании давно презентуют свою продукцию в Инстаграм. Почему бы не привнести лучшие решения соцсети в корпоративный сайт?

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

Асимметрия

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

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

Использование ИИ

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

3D изображения и персонажи

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

Минималистичный дизайн

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

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

Сочетание фото и графики

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

Иконки одного стиля

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

Уникальные 2D иллюстрации

Наряду с объемными картинками в 2021 году модными будут интересные графические изображения. Главная их особенность — уникальность. Это не просто стандартные рисунки, а настоящее креативное действо. С помощью таких 2D картинок можно заинтересовать посетителя сайта и вызвать положительное отношение к бренду. Для некоторых зрителей такие иллюстрации могут показаться абсурдными, однако в этом их прелесть.

Заключение

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

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

Источник

Комаров: 9 главных UX/UI тренда в 2021 году

Привет! С вами Егор Комаров и я хочу с вами поделиться не просто дизайн трендами 2021 года, но и советам и рекомендациями о том, как с ними работать, рассказать почему они появились. На что стоит обращать внимание в работе, в какую сторону развиваться и какие инструменты использовать.

Для кого это статья?

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

Исследуем визуальную составляющую: детали, шрифты, цвета, композицию, графику.

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

Тренд 1: Идеальные иконки

В 2021 году делать разношерстные иконки просто непозволительно.
Интерфесы в 2021 году должны быть вылизаны до каждого пикселя. Особое внимание стоит уделять иконкам.

💡 Совет: Если вы хотите быть на волне тренда, не используйте иконки из разных семейств. Не качайте разные иконки с сайтов-стоков, например freepik.com, а используйте специализированные готовые библиотеки. Все иконки должны быть в одном стиле, с одинаковыми параметрами, толщиной линий. Иконки из разных семейств в интерфейсе нарушают целостность и аккуратность проекта. Используйте более новые библиотеки иконок. Они как правило имеют более современный вид.

Откуда взялся тренд на иконки?

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

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

Компания Apple не отошла далеко от этого тренда и в конце 2020 года обновила свою macOS Big Sur, а вместе с ней и проработали новые иконки.

Разработчики Sketch в ноябре 2020 года сделала новое обновление, где уделила внимание иконкам и полностью их переработала.

Где качать иконки? Бесплатный вариант.

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

Basic иконки от Craftwork

Basil — 500 бесплатных профессиональных иконок в двух стилях outline и solid, доступно для Figma, Sketch, Adobe XD.

500 бесплатных профессиональных иконок

266 Free Icons — отличный пак бесплатных иконок (Figma, Sketch, SVG).

Ikonate — бесплатный пак полностью кастомизируемых векторных иконок.

Streamline symbols — 1285 бесплатных иконок для Visual Studio. (SVG тоже есть).

Phosphor — библиотека из 558 бесплатных иконок в 6 начертаниях.

Radix Icons — бесплатный пак из 264 иконок.

IconPark — большой пак из 1200 настраиваемых иконок.

Iconly 2 — 500+ бесплатных иконок для ваших проектов.

Iconhub — большая бесплатная библиотека настраиваемых иконок.

Heroicons — отличный пак бесплатных SVG иконок.

Rubicons — бесплатный пак минималистичных иконок для ваших проектов.

Tabler Icons — 550 настраиваемых бесплатных SVG иконок.

Hicon Pack — бесплатный пак из 396 иконок для дизайнеров и разработчиков.

700+ Icons — бесплатный пак иконок в формате CSS, SVG и Figma.

Remix icon — большая, бесплатная библиотека иконок.

Boxicons 2.0 — большой пак бесплатных иконок в двух стилях.

ICONSVG — инструмент, упрощающий процесс поиска и создания иконок SVG для вашего проекта.

Vue Unicons — большой пак open source иконок.

Тренд 2: Минимализм и простота

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

Почему возник этот тренд?

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

В данном случае дизайн фокусируется в деталях: сетка интерфейса, шрифты, иконки, цвета, UX, анимация.

На что стоит обращать внимание?

1. Оставляйте на первом плане только самые необходимые функции для пользователя.
2. Делайте интерфейс легким и воздушным. Убирайте массивные цвета. В центре должен оставаться контент.
3. Выстраивайте дизайн вокруг хороших шрифтов, качественной верстки, правильных акцентах, иконках, однородности.
4. Уделяйте максимум внимания деталям.
5. Делайте интефейс «незаметным», но интуитивно понятным и удобным.
6. Сильно не уходите от привычных функций и дизайна для пользователей. Используйте расположение элементов и взаимодействие с ними как это делают крупные и популярные компании. Так людям будет быстрее и проще взаимодействовать с вашим продуктом, потому-что он будет понятный и привычный. Не стоит размещать иконку уведомления в нижнем левом углу экрана, размещайте уведомления там, где пользователи привыкли их видеть.
Поверьте, иногда действительно не стоит придумываь велосипед.

Как изменили свой дизайн согласно трендам крупные компании?

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

Youtube Facebook Twitter Linkedin Dribbble Medium Zimpler Behance Instagram FullStory

Где и как искать референсы и вдохновение, чтобы создавать подобный дизайн?

Ищите на dribbble, behance и других дизайн платформах запросы на тему:
clean и minimalism.

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

Тренд 3: Тени и градиенты

Тренд с тенями и градиентами был и ранее, но и по сей день остается актуальным. Единственное, что в нем поменялось — это появление большей воздушности, легкости и объема. Все это миксуется с пастельными градиентами и новыми трендовыми 3d иконками. По сути это тот же самый минимализм, только более объемный.

💡 Совет: Используйте более приглушенные и пастельные цвета и оттенки для теней и градиентов.

Сложные градиенты и blur эффекты

Градиенты тоже немного эволюционировали и стали более сложными. Теперь недостаточно использовать линейный градиент как ранее. Надо миксовать разные цвета и использовать наложение. Плюс в интерфейсах все чаще начал использоваться эффект Color Blur. Чаще всего в качестве background. Это придает интерфейсу глубину и объем. Как правило это своего рода «цветные пятна».

Где брать сложные градиенты?

Правильно называются такие градиенты «Mesh Gradients«. Ресурсов на данную тему не так много, так как этот тренд только зарождается. Но пару качественных я смог найти.

Библиотека Mesh градиентов

На сайте вы сможете скачать большое количество трендовых градиентов. Можете экспериментировать с ними, меняя HUE, blur, наложение между собой и многое другое и получить самостоятельно еще больше вариантов.

Генератор и конструктор Mesh градиентов

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

Тени неоморфизма

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

Что такое скевоморфизм?

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

Skeumorphism

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

Skeumorphism

Однако широко обсуждается вопрос о том, настолько ли пользователи привыкли взаимодействовать с графическими пользовательскими интерфейсами, что в скевоморфизме больше нет необходимости. Противники скевоморфизма утверждают, что естественно выглядящие объекты могут сделать интерфейс загроможденным и что некоторые объекты, имитирующие скевоморфизм, устарели и бессмысленны для пользователей (например, дискета для действия «Сохранить»).

Skeumorphism в иконках

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

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

Расцвет плоского дизайна

В 2007 году журнал Forbes объявил о смерти скевоморфизма. Apple (а вскоре за ней и Google) остановилась на новой форме дизайна — плоском дизайне.

Плоский дизайн требовал, чтобы графические пользовательские интерфейсы (GUI) были освобождены от беспорядка. Не было необходимости в скошенных краях, градиентах, отражениях и скевоморфизме. Цифровой интерфейс следует использовать в своих интересах.

Визуальная четкость была поставлена ​​во главу угла дизайна. Если вы, например, используете Windows 8, вы обнаружите, что кнопка «Пуск» открывает вам яркий пример плоского дизайна. Все эти значки исчезли, и они были заменены плитками — плитками, которые предоставляют вам фактические данные как в письменном, так и в графическом формате — они могут справиться с более сложными уровнями в интерфейсе без ущерба для пользовательского опыта

Windows 8

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

iOS 6 vs iOS 7

iOS 7 стала прыжком Apple в мир плоского дизайна и, с точки зрения потребителей, более успешной, чем Microsoft. Это может иметь какое-то отношение к модной дизайнерской аудитории Apple по сравнению с более устойчивой и старой аудиторией Microsoft. Однако минималистский подход iOS 7 был провозглашен гением. Скевоморфизм был объявлен мертвым на месте — новый метафорический, богатый плоский дизайн был шагом вперед.

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

Neumorphism

Неуморфизм родился из скевоморфизма и создал совершенно новый стиль UX.

Неоморфизм + скевоморфизм

Что такое неоморфизм в UI дизайне

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

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

У вас есть фон, на котором мы размещаем несколько компонентов, добавляя слои и создавая глубину за счет теней. Используя неоморфизм, вы создадите мягкий интерфейс с «вдавленными» или «выдавленными» объектами.

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

Как неоморфизм соотносится со скевоморфизмом?

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

Источник

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

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

Хороший пример неоморфизма

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

скевморфизм + неоморфизм + флет

Имитация настоящего пульта — это скевморфизм.
Плоские иконки в интерфейсе и общий стиль — флет.
Тени и объем — неоморфизм.

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

«Потрогать» вживую неоморфизм можно на этом сайте:
https://icons.theforgesmith.com

Разработчики использовали в своем UI светлую и темную тему и тени неоморфизма. Насколько он тут уместен и приятен ли такой интерфейс для сайта с иконками — решать вам.

Генератор теней неоморфизм

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

Генератор теней неоморфизм

💡 Совет: Работаете вы в Figma, Sketch или других приложениях, помните о том, что неоморфизм тени составляются как правило из нескольких слоев теней. Не одной.

Неоморфизм тени в Sketch

Тренд 4: 3D иконки и иллюстрации

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

Это несложные формы и довольно простые и примитивные объекты, но которые отлично и свежо смотрятся в качестве вижуала для проектов.

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

Как это сейчас используют в дизайне?

3D иконки можно даже заметить в новой macOS Big Sur от Apple, посмотрите внимательно на иконку уведомлений:

💡 Совет: Не спешите сейчас использовать бесплатные 3d иконки и иллюстрации. Тренд находится в самом разгаре и полноценно сформируется немного позже. В идеале заказывайте индивидуальную графику у 3d дизайнеров. Со временем на рынке будет больше предложений и платных коллекций, которые можно будет смело использовать для своих проектов. Сейчас же каждый второй будет использовать одну и ту же бесплатную иконку с доступной и бесплатной коллекции, которых сейчас очень мало.

Где взять трендовые 3d иконки и иллюстрации?

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

3d иллюстрации и иконки от CraftWorks

Качественные и стильные 3d иллюстрации для ваших проектов. Большое количество библиотек, которые постоянно пополняются и обновляются. Идеально для использования в UI/UX дизайне, мобильных приложений и веб-сайтов.

IconShock

ICONZ

Премиальная 3D-библиотека из 50 иконок для ваших замечательных продуктов. Полностью совместим с наиболее распространенными дизайнерскими инструментами.

Handy 3D Hands

Коллекция очаровательных пухлых рук в двух стилях: веселый и дикий или стильный. Доступен в форматах PNG и 3D, включая маски перекраски для Photoshop.

3D ILLUSTRATION CONSTRUCTOR

Cute Isometric Objects

Коллекция изометрический 3d иконок

UI8 — самая большая и лучшая библиотека с 3d иконками и иллюстрациями

Пожалуй, самый лучший ресурс с 3d графикой на сегодняшний день это UI8.

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

Тренд 5: 2D уникальные и абсурдные иллюстрации

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

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

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

Отлично подойдет все, от простых до сложных иллюстраций. Главное —поменьше бесплатных библиотек и побольше креатива.

Абсурдные иллюстрации

Да, абсурд и дурка рулят. Нарушайте логику и удивляйте.

2D иллюстрации отлично сочетаются в UI дизайне с новыми стилем 2021 и смотрятся также хорошо как и 3D иллюстрации.

Где брать иллюстрации?

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

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

Ниже список ресурсов с бесплатными и платными иллюстрациями для ваших проектов.

CraftWork иллюстрации

Craftwork — ресурс #1 для всех профессиональных дизайнеров, где можно найти самые трендовые и оригинальные иллюстрации, созданные лучшими художниками и иллюстраторами. Must have в арсенале.

Craftwork — лучшая библиотека бесплатных и платных иллюстраций

Blush Design

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

GetIllustration

GetIllustration управляется творческой командой Roundicons.com , крупнейшим в мире набором иконок.

Oh My Startup Illustrations

Деловые истории с четкими персонажами и стильными градиентными цветовыми акцентами

Wrrooom!

Конструктор иллюстраций онлайн

WHOOOA!

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

OUCH by Icons8

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

Vector Creator

Конструктор иллюстраций от icons8

Классный и необычный конструктор иллюстраций с разными стилями.

Вы можете выбрать любую иллюстрацию которая вам понравилась и потом редактировать ее в конструкторе как вам угодно.

Двигайте объекты, добавляйте новые.

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

Авторы проекта молодцы, придумали отличную платформу.

Minty

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

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

Любые мелкие анимированные детали в интерфейсе, особенно, где они уместны, будут большим плюсом.

Что из себя представляет SVG и JSON анимация? Простыми словами, это анимация созданная кодом. Какие в этом преимущества?

iOS, Android & Web
Универсальность использования на iOS, Android, Web и Windows

Минимальные размеры
Файлы анимации в десятки/сотни раз меньше графики по размеру

Умные настройки
Реакция анимации на любое взаимодействие, управляемый показ

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

В любом случае тренд с анимацией будет развиваться и в основном это командная работа: продуктолог — дизайнер — иллюстратор — аниматор- программист — тестировщик.

Дизайнер может визуализировать анимацию в After Effect и потом передавать и показывать ее программисту. На сегодняшний день для дизайнера нет идеальных инструментов и редакторов анимаций, которые бы соответствовали всем необходимым требованиям в разработке. Когда дизайнер передает с визуального редактора код программисту, то где-то получается он слишком тяжелый, где-то не везде поддерживаемый и так далее. А Gif анимация в свою очередь может весить много.

Какие инструменты использовать?

Из всех инструментов, что я пробовал больше всего мне понравился Flow

Flow — это программа для анимации. Создавайте анимацию и легко экспортируйте код для iOS (Swift), Web (HTML / CSS / JS) или SVG и наблюдайте, как ваш дизайн оживает.

Конечно, в ней не все так идеально, но элементарные анимации можно создавать и вставлять в свои проекты посредством Embed code или импортировать анимированную SVG.

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

Пример и урок как работать с приложением Flow можно посмотреть в этом видео:

SVGator

Еще один неплохой и довольно мощный инструмент, который не требует от дизайнера знания в коде. Можно экспортировать анимацию как CSS, так и JavaScript

fра

Благодаря этим инструментам вы сможете анимировать свои иллюстрации, логотипы, прелоадеры, отдельные элементы и многое другое.

Полезные туториалы о том как создавать анимацию можно найти тут

Есть еще качественная библиотека Loaf c готовыми анимационными SVG иконками. Иконки можно настраивать и получать SVG код.

Lottie

Более сложный вариант. Lottie — это библиотека для Android, iOS, Интернета и Windows, которая анализирует анимацию Adobe After Effects, экспортированную как json с помощью Bodymovin, и отображает ее на мобильных устройствах и в Интернете.

Альтернативы

1. Создавайте анимацию вручную. Создание анимации вручную — это огромные затраты времени на проектирование и разработку для Android и iOS. Часто бывает трудно или даже невозможно оправдать трату так много времени на создание правильной анимации.
2. Гифки. GIF-файлы более чем в два раза превышают размер bodymovin JSON и отображаются с фиксированным размером, который невозможно масштабировать для соответствия большим экранам и экранам с высокой плотностью.
3. Png последовательности. Последовательности в формате PNG даже хуже, чем в формате GIF, поскольку их размеры часто в 30-50 раз превышают размер bodymovin json, а также не могут быть увеличены.
4. Анимированный векторный рисунок (только для Android). Более производительный, потому что он работает в RenderThread вместо основного потока. Поддерживает только часть функций Lottie. Прогресс нельзя установить вручную. Не поддерживает текст или динамические цвета. Не может быть загружен программно или через Интернет.

Тренд 7: пастельные цвета

С приходом минималимзма и простоты в UI дизайн, пастельные цвета идеально дополняют новый тренд. Они хорошо вписываются в концепт ненавязчивого UI, не перегружают дизайн и поддерживают легкость. Задают тон и атмосферу. Это как легкое свечение дизайна. Аура вашего проекта.

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

Но если вы не знаете какие цвета подобрать для своего проекта, можно обратиться за помощью к Color Hunt

Там есть готовые паттерны с постельными цветами на любой вкус и цвет.
https://colorhunt.co/palettes/pastel

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

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

Extended шрифты

Если говорить о трендах в UI, то в тренде чистые, свежие и геометрические шрифты. Для заголовков это Extended шрифты. Ярким примером расширенных шрифтов является Druk, быстро ставшим хитом и быстро всем надоевшим.

Но при этом шрифт и по сей день выглядит современно. Но работая с трендовым дизайном лучше искать новые аналоги.

Обращайте внимание на более широкие шрифты, они будут выглядить более трендово. Общая картина по шрифтам сегодня выглядит примерно так:

Раньше в основном все использовали Gilroy и Druk. Конечно, было и множество других шрифтов, таких как Bebas Neue и другие. Но реальное разнообразие и разлом всех стереотипов о шрифтах пришелся на середину и конец 2020 года. Речь идет именно о том, когда шрифты вышли в массы и их начали использовать крупные компании: в рекламе, собственном digital, ребрендинге и т.д.

Сегодня в тренде более «ломанные» или «деформированные» шрифты для графического дизайна и заголовков + чистые, геометрические и немного широкие для основного текста и UI.

Где брать хорошие кириллические шрифты?

Где брать шрифтовое вдохновение?

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

На этом сайте вы найдете лучшие дизайнерские проекты использующие кириллицу.

Брутализм и антидизайн

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

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

Внутри того, что широко называют веб-брутализмом, есть два различных стиля:

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

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

Брутализм

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

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

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

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

Технически Craigslist не может быть отнесен к нынешней бруталистской тенденции, потому что он сохранил свою урезанную эстетику с момента своего создания в конце 1990-х. В то время его стиль не был художественным выбором; это было результатом ограничений HTML и CSS. Тем не менее, Craigslist — отличный пример дизайна, который сегодня вдохновляет сторонников брутализма.

И в архитектуре, и в цифровом дизайне брутализм рассматривается как реакция на искусственность и легкость. Сторонники хвалят его за честность и смелость.

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

Антидизайн

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

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

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

Когда использовать Antidesign (а когда не использовать)

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

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

Привлечь внимание

Поистине возмутительные антидизайнские сайты (например, сайт конференций Bloomberg Businessweek Design 2016) могут восприниматься как резкие и провокационные. Даже те люди, которые ненавидят дизайн, будут посещать сайт и отправлять его своим коллегам с критикой. Любая реклама — хорошая реклама.

Your browser does not support the video.

Сайт конференций Bloomberg с крайне анти-дизайном привлек внимание как намеренно хаотичный и дезориентирующий.

Свежесть

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

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

• Ваша аудитория состоит из дизайнеров, иллюстраторов или художников.Они могут понять причину хаотичного грубого дизайна и «уловить» внутреннюю шутку. Они, вероятно, более опытны в использовании цифровых продуктов, поэтому они могут справиться с более сложным пользовательским интерфейсом. А уникальный стиль дизайна может помочь вашему продукту или бренду выделиться и сделать его более запоминающимся. Сайт конференции Bloomberg Businessweek Design был предназначен для дизайнерской аудитории, поэтому, возможно, им он подошел.
• Ваш продукт предназначен для развлечения.Люди не будут пытаться использовать ваш продукт для поиска чего-либо или выполнения какой-либо конкретной задачи. Взаимодействие не должно быть плавным, и обнаруживаемость важнее, чем возможность поиска. В идеале это был бы развлекательный продукт, предназначенный для дизайнеров или художников.

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

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

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

Антидизайн вызвал сопротивление в UX-сообществе, потому что во многих отношениях его цели кажутся антитезой UX-дизайну. Критикуя то, что он называет брутализмом (но то, что я бы назвал антидизайном), uxdesign.cc создал сатирические бруталистские UX-материалы : «бросайте элементы на экран, не слишком заботясь о том, как они работают вместе. Кто вы такие, чтобы определять иерархию? Пусть каждый элемент борется за центр внимания ».

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

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

Когда использовать брутализм

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

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

Не все тренды одинаково полезны

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

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

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

Каким был брутализм до того пока не стал мейнстримом?

Я помню очень старый сайт https://brutalistwebsites.com на котором публиковали сайты в стиле «брутализм». Лет 5 назад это выглядело полной дичью. Сайт существует до сих пор и сохраняет свои традиции, публикуя порой сумасшедшие примеры.

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

Источник