ru ua en
c l o c k
Тренды дизайна 2020
29 January 2020
блог

Тренды дизайна 2020

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

Моушн дизайн & Анимация

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

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

Моушн дизайн & Анимация

Источник www.prevint.pt

Тренды 2020

1. UI/UX
2. Иллюстрации
3. Моушн дизайн
4. Графический дизайн
5. Тенденции, основанные на технологиях
6. Упаковка
7. Типография
8. Трендовые инструменты

1. UI/UX

1.1 Темный режим (Android Q и iOS 13)

Самая заметная тенденция в 2020 году – темный режим в приложениях и операционных системах. Android первым представил два типа темных режимов: «Force Dark Mode» и «System Dark Mode». Затем Microsoft презентовала свой темный режим для почтового приложения. Параллельно, Google выпустил собственный режим темной версии для Gmail на Android 10. И вслед за ним, Instagram сделал темную версию для приложения на IOS. Такое оформление нашло своих ценителей, поэтому еще многие приложения и сервисы представят темную версию.

Темный режим

1.2 Насыщенные цвета

Яркие цвета были основной тенденцией последние два года и продолжают доминировать в 2020 году. Глубокие и насыщенные, яркие и даже экстремально яркие цвета. Их применение актуально как в качестве первичных, так и вторичных оттенков.

Насыщенные цвета

Источник www.variable-fonts.com

1.3 Иллюстрации в пользовательском интерфейсе

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

Иллюстрации в пользовательском интерфейсе

Источник abuk.com.ua

1.4 Сторителлинг

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

Сторителлинг

Источник www.fishingthefeed.com

1.5 Анимированная графика и микро-взаимодействия

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

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

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

Анимированная графика и микро-взаимодействия

Источник manropefont.com

1.6 Видео в пользовательском интерфейсе

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

Сторителлинг

Источник www.northand.ca

1.7 Функциональность

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

Функциональность

Источник JIANGGM

1.8 Внимание к деталям

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

1.9 Горизонтальный интерфейс

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

Горизонтальный интерфейс

Источник clocklab.design

1.10 Градиенты

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

Градиенты

Источник fleava.com

1.11 Инверсия цвета

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

Инверсия цвета

Источник onlinewomanbiz.com

2 Иллюстрации

2.1 Дизайн персонажей

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

Дизайн персонажей

Источник www.superrb.com

2.2 Текстуры

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

Текстуры

Источник https://airbnb.resn.co

2.3 Неброские плоские иллюстрации

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

2.4 Изометрия

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

Изометрия

Источник behance

2.5 3D

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

3D

Источник www.vectary.com

2.6 Ультра-яркие цвета

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

Изометрия

Источник behance

3. Анимированная графика

3.1 3D видео

Моушн дизайн 2020 года невозможно представить без 3D графики. Главным преимуществом данного инструмента является то, что ограничением может быть только Ваша фантазия. Различные сферы применения доказывают универсальность 3D графики – рекламные кампейны, фильмы, игры и многое другое.

3.2 Видео + Анимированные иллюстрации (смешанный контент)

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

Видео + Анимированные иллюстрации

Источник https://plastiek.com

3.3 2D анимация - Пояснительные видеоролики

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

2D анимация - Пояснительные видеоролики

Источник behance

3.4 Анимированные логотипы

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

Изометрия

Источник https://cornstudio.gr

3.5 Гибридная анимация - 2D и 3D интеграция

Объединение 2D и 3D с использованием определенных программ, не является новой тенденцией, но все еще не менее актуально.

Гибридная анимация - 2D и 3D интеграция Гибридная анимация - 2D и 3D интеграция

Источник behance

4. Графический дизайн

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

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

Видео + Анимированные иллюстрации

Источник https://www.nytimes.com

4.2 Биколор

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

Биколор

Источник behance

4.3 Оптическое восприятие искусства

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

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

Оптическое восприятие искусства Оптическое восприятие искусства

Источник behance

4.4 Иллюстрации в графическом дизайне

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

Иллюстрации в графическом дизайне

Источник behance

4.5 Анимированные постеры

Анимация стала неотъемлемой частью различных сфер современного дизайна. И даже такое направление как цифровые постеры начало активно использовать как 2D, так и 3D анимацию, для достижения невероятных результатов.

Анимированные постеры

Источник behance

4.6 Ретровейв

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

Анимированные постеры

Источник behance

4.7 Швейцарский дизайн, дадаизм, баухауз

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

Анимированные постеры

Источник behance

4.8 Большое непрерывное цветное пространство

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

Большое непрерывное цветное пространство

Источник onlinewomanbiz.com

4.9 Ультра-минимализм

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

Большое непрерывное цветное пространство

Источник behance

5. Технологические тенденции

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

5.1 Мобильные приложения с дополненной реальностью

Технологические гиганты Apple и Google, представили свои платформы разработки AR, ARKit и ARCore. Последующий сценарий легко предсказать – весь мир будет сконцентрирован на технологии дополненной реальности.

Для создания интуитивно понятного приложения существует несколько вариантов взаимодействия AR.

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

Мобильные приложения с дополненной реальностью

Источник behance

5.2 AI, ML, чат-боты и виртуальные помощники

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

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

Основным инструментом усовершенствования чат-ботов является проектирование и создание сценариев общения. Для примера Вы можете ознакомится с эффективными чат-ботами известных брендов – Spotify, Starbucks, MasterCard, Sephora, Lyft, Pizza Hut.

чат-боты и виртуальные помощники

Источник behance

5.3 VR

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

VR

Источник behance

5.4 Голосовой интерфейс пользователя (VUI)

Благодаря голосовому пользовательскому интерфейсу Вы можете взаимодействовать с компьютером всего лишь с помощью своей разговорной речи. Устройство голосовых команд (VCD) управляется с помощью голосового пользовательского интерфейса.

В этом году 40% людей, которые имеют доступ к сети Интернет, использовали голосового помощника, по крайней мере, один раз в месяц, это больше на 10% по сравнению с прошлым годом.

6. Дизайн продукта

6.1 Узоры в упаковке

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

Узоры в упаковке

Источник behance

6.2 Иллюстрации в упаковке

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

Иллюстрации в упаковке

Источник behance

6.3 Пустое пространство

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

Пустое пространство

Источник behance

6.4 Монохром и биколор

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

биколор

Источник behance

6.5 Насыщенные цвета

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

Насыщенные цвета

Источник behance

6.6 Внимание к деталям

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

Внимание к деталям

Источник behance

6.7 Сторителлинг в упаковке

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

Иллюстрации в упаковке

Источник behance

7. Типография

7.1 Жирная типографика

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

Жирная типографика

Источник behance

7.2 Строчные буквы

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

Строчные буквы

Источник behance

7.3 Кастомные шрифты

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

7Кастомные шрифты

Источник behance

7.4 Кинетическая типография

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

Кинетическая типография

Источник behance

7.5 Нагромождение шрифтов

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

Нагромождение шрифтов

Источник behance

8. Трендовые инструменты

Необходимый софт в 2020 году

8.1 Adobe Spark

Adobe Spark - это пакет разнообразных приложений для создания разных типов контента на мобильных устройствах и онлайн с возможностью синхронизации. Он включает в себя три отдельных дизайнерских приложения: Spark Page, Spark Post и Spark Video.

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

8.2 Procreate

Procreate - редактор растровой графики для цифровой живописи, разработанное и опубликованное Savage Interactive для iOS. Приложение подходит как для профессионалов, так и для новичков. Интерфейс оснащен более чем 130 реалистичными кистями, несколькими режимами наложения, масками, экспортом видео с разрешением 4K, автосохранением и конечно же инструменты цифрового искусства. Однако, приложение имеет ограниченные возможности для редактирования и рендеринга текстовой и векторной графики.

8.3 Adobe XD

Adobe XD - векторный инструмент для создания пользовательского интерфейса веб-приложений и мобильных приложений, разработанный и опубликованный компанией Adobe Inc. Совместим с macOS и Windows. Также, существуют версии для iOS и Android, позволяющие сделать предварительный просмотр результатов работы. XD поддерживает конструирование веб-сайтов и простых интерактивных прототипов с переходом по клику.

Вы готовы к лидерству в интернете?

Давайте обсудим перспективы продвижения вашего сайта!