Тренды UI-дизайна


11.02.2020 Время чтения - 5 минут 2784

Sketch, Figma, Adobe Creative Cloud, Cinema 4D, Redshift делают дизайн доступным для все большего числа людей и позволяют дизайнерам переводить и подчеркивать свое видение в любой форме.

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

3D иллюстрации

Распространенность 3D-иллюстраций обусловлена, прежде всего, более мощными инструментами, такими как OctaneRender, RedShift и т.д. А также более дешевой графикой и видеокартами.

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

A 3D illustration of the poolside created by Crystal Yumumu on Dribbble
Иллюстрации Crystal Yumumu на Dribbble
Иллюстрация от Luis Yrisarry Labadía на Behance
Иллюстрация от Luis Yrisarry Labadía на Behance
Иллюстрация от Mike | Creative Mints на Dribbble
Иллюстрация от Mike | Creative Mints на Dribbble

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

  • Создание иллюстрации для малого и среднего бизнеса, корпораций и высоких технологий (AI, машинное обучение, большие данные и т. д.) и  IT-компаний
  • Создание иллюстрации и анимации для детей
  • Создание геометрических примитивов для экспериментальных иллюстраций

Анимации

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

В 2019 году мы заметили, что веб-анимация используется для творческого подхода. Ключевым примером является страница Apple AirPods Pro:

A GIF of Apple’s AirPods Pro page

В 2020 году, несомненно, будет наблюдаться рост числа переходов и построек в сети, в основном благодаря новым захватывающим библиотекам JavaScript, а именно: ScrollMagic. js, Three.js, Anime.js, Mo.js, Velocity, Scroll Reveal и так далее.

Я создал свой личный сайт, используя ScrollMagic, который показался очень легким, но достаточно мощным. Мне удалось добиться отличной веб-производительности:

Снимок с web.dev, показывающий производительность моего сайта с течением времени

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

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

A website design with great animations of an industrial park from Zak Steele-Eklund on Dribbble
Иллюстрация от Zak Steele-Eklund на Dribbble
A website design with great animations of books from Daniel Tan on Dribbble
Иллюстрация от Daniel Tan на Dribbble
A website design with great animations of Earth from Stian on Dribbble
Иллюстрация от Stian ◒ на Dribbble

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

Пользовательские иллюстрации

В конце 2019 года произошел всплеск пользовательских иллюстраций, особенно в коммерческом дизайне. Эта тенденция действительно перенесена на 2020 год.

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

A custom illustration of humans by the Netguru Team
Иллюстрация от команды Netguru
Иллюстрация от Daniel Tan на Dribbble
Иллюстрация от Ben Schade на Dribbble
Иллюстрация от Calvin Sprague на Dribbble

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

Иллюстрация от Paarth Desai на Dribbble

Итак, чего стоит придерживаться?

Мои прогнозы основаны на простых наблюдениях, анализе тысячи сайтов, дизайнов, иллюстраций.

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

  1. Светлая тень для верхнего левого угла
  2. Средний оттенок для фона и цвет фигуры
  3. Темный оттенок для нижней правой тени

Недавно я создал концепцию Neumorphic Music Streaming Service, основанную на методике, которую я описал выше:

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

На данный момент неоморфизм не является заменой тенденции плоского дизайна.

Раньше градиенты были причудами и многие попросту не были уверены, будут ли они актуальны. Но сегодня градиенты любезно вписываются в UI-дизайн, обеспечивая элегантный UX.

Домашняя страница Stripe
Иллюстрация от Mike | Creative Mints на Dribbble

Заключение

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

Оригинал статьи.

Читайте также: Неоморфизм — вызов UX/UI-дизайнерам

Неоморфизм — вызов UX/UI-дизайнерам