Мы можем часами говорить о веб-дизайне, но постараемся держать себя в руках.
Пользовательский интерфейс – вот, что значимо. Это то, как вы и ваши клиенты видят готовый продукт. Поговорим о том, какие тренды в этом направлении будут актуальны в 2020м: что ожидает увидеть пользователь и как упростить его жизнь взаимодействие с продуктом.
UI/UX ИЛИ ДИЗАЙН ИНТЕРФЕЙСОВ
Темный режим
От приложений и сайтов до оболочек операционных систем – темный режим повсюду. Тренд запустили крупные игроки – вроде Android, Google и Microsoft. В 2020м дизайнеры заботятся об удобстве просмотра контента (что напрямую связанно с его эффективностью) в любых обстоятельствах – в том числе в покрове ночи или приглушенном свете комнаты.
смелые цвета
Яркие цвета на пике популярности уже около двух лет и продолжают занимать свое место в списке трендов в 2020 году. Смелые, насыщенные, яркие неоновые оттенки создают настроение футуризма.
$APPLICATION->IncludeComponent(
"itgro:photo.gallery",
"",
Array(
"COLLECTION_NAME" => "Тренды. Часть 3. Смелые"
)
);?>
01. EMART UX/UI RENEWA by Plus X, Lee boram , Sabum Byun , Hee Jung, Youjin Jeon , 원 지혜, Bongho Choi
02. NSH by Sofiya Fedotova
03. Eldorado Casino - Mobile Web UI, App U by Loredana Papp-Dinea , Mihai Baldean , Milo Themes
04. mmcité+ website by Studio 9 Zlín, Pavel Valek
05. The Automated Hack Series #21-25 by Andrea Hock
06. Flipd app by Estudio Pum
Иллюстрации в интерфейсах
Иллюстрации выступают вспомогательными элементами, визуальной интерпретацией продукта, которая облегчает восприятие пользователем доносимой информации, концепции продукта.
$APPLICATION->IncludeComponent(
"itgro:photo.gallery",
"",
Array(
"COLLECTION_NAME" => "Тренды. Часть 3. Иллюстрации
"
)
);?>
01. Kraken Redesign by Sylvain Theyssens , Antonin Collard
02. Reliefy - Medical Project by Marcin Pankiewicz Gorzów , Miłosz Pożarkowski
03. Illustration System for GOL by Estudio Pum
04. Smart Home App - IOS by Maria Osadcha
05. Skilling Trading (skilling.com) - Loredana Papp-Dinea , Mihai Baldean
СТОРИТЕЛЛИНГ
Сторителлинг (прим.: от англ. рассказывать историю), как это принято сейчас называть, помогает пользователю быстрее ориентироваться в возможностях вашей платформы и упрощает восприятие продукта. Для этого используется прием создания уникального персонажа, который помещается в определенную ситуацию/историю, выходом из которой будет служить непосредственно продукт. Реализация этой схемы в дизайне может быть разнообразной, но суть всегда неизменна – герой показывает путь, который пользователь считывает.
$APPLICATION->IncludeComponent(
"itgro:photo.gallery",
"",
Array(
"COLLECTION_NAME" => "Тренды. Часть 3. Сторителлинг
"
)
);?>
01. YOGO - Trip Planner App by Julie Truong
02. UX/UI | Food delivery app by Konstantin Seredkin
03. cooc by cuneyt sen
Анимированная графика и микровзаимодействия
Во что бы то ни стало удержать пользователя – дизайнеры развлекают анимацией и направляют, помогая ненавязчивыми подсказками в нужный момент совершить определенное действие.
$APPLICATION->IncludeComponent(
"itgro:photo.gallery",
"",
Array(
"COLLECTION_NAME" => "Тренды. Часть 3. Анимированная графика
"
)
);?>
01. UI/UX | Smart Pharmacy app by Anastasia M, Sergey Nikonenko UX
02. Climate & Animals: Extinction Crisis Website UI/UX by Daniel Tan, Daphnie Loong
03. Flying Veggies by Patricia Reiners
04. UKRPOSHTA. Mobile app of Ukraine's national post by Ilona Kim
05.Alarm App for the Deaf by Tagir Tikeev
Функциональность
Функции во главе всего – никаких необдуманных решений и лишних элементов. Дизайнерские решения любого интерфейса несут свою функцию (привлекают внимание к нужным деталям, упрощают восприятие информации и т.д.), а не выбираются исключительно по принципу «красивости».
Skilling Trading (skilling.com) - Loredana Papp-Dinea , Mihai Baldean
внимание к деталям
При многообразии вариантов отличных работающих дизайнов все большее значение придается деталям. Кнопки управления, значки, навигация и др. – все имеет вес. При том, утерявшие свою значимость элементы будут уходить из дизайна – например, кнопка «Назад» (один из основных элементов навигации Android) официально исчезает в 10 версии ОС.
Alarm App for the Deaf by Tagir Tikeev
Градиенты
Да-да, снова они. Просто удачного цвета уже недостаточно, важна тонкая игра с ним.
$APPLICATION->IncludeComponent(
"itgro:photo.gallery",
"",
Array(
"COLLECTION_NAME" => "Тренды. Часть 3. Градиенты
"
)
);?>
01. Wavecut - IOS Application by Eleken Agency
02. Product design (UX/UI) - anti-depression app by Anna Arutiunian
03. Paul Ilea - Film Score Composer, Producer, DJ, Perfomer by Loredana Papp-Dinea , Mihai Baldean , Milo Themes
04. ITEXIA by Nextpage Agency , Alex Seagull , Jegor Walowski
3D-ЭЛЕМЕНТЫ
3D пытается подвинуть 2D и в этом направлении дизайна – объем и «новая реальность» проявляются в виде иллюстраций, анимации или шрифтов.
$APPLICATION->IncludeComponent(
"itgro:photo.gallery",
"",
Array(
"COLLECTION_NAME" => "Тренды. Часть 3. 3D-элементы
"
)
);?>
01. Portraits by Fernando Domínguez Cózar
02. NASA | Space Age by Studio—JQ ∆
03. NASA X BBC | Unnatural World by Studio—JQ ∆
Биколор
Снова интерпретация на тему школы Баухаус – меньше, да лучше. Стильный контраст и смелые элементы с использованием ограниченного количества цветов.
$APPLICATION->IncludeComponent(
"itgro:photo.gallery",
"",
Array(
"COLLECTION_NAME" => "Тренды. Часть 3. Биколор
"
)
);?>
01. Winter Open '18 by Kinoto Studio, Romina Rios, Luc Geoffroy
02. Synticate© by Stepan Solodkov
03. TIGER IN A MUSEUM by de_form studio, nora demeczky, eniko deri
ОПТИЧЕСКОЕ ИСКУССТВО
Оптическое искусство или «оп-арт» привносят ощущение движения, вибрации. При этом, сама картинка остается статичной, что имеет свои преимущества.
$APPLICATION->IncludeComponent(
"itgro:photo.gallery",
"",
Array(
"COLLECTION_NAME" => "Тренды. Часть 3. Оптическое исскусство
"
)
);?>
01 & 02 Tokyo Blends Film Festival by Mercedes Bazan , Adobe Live
03. Posters — Vol I by Xtian Miller
Иллюстрации
Как и в других областях дизайна, иллюстрации нашли свое место в графических трендах как понятный и стильный способ трансляции информации.
CAT bar and dance club / 2019 by kissmiklos , Eszter Sarah
анимированные постеры
Смешение 2D- и 3D-элементов приносит свои плоды – выглядит масштабно и интересно, что безусловно привлекает внимание пользователя.
Festival Metro Metro by Bzoing , Virginie Bédard
Retro Synthwave
Retro Synthwave – неоновые подсветки и световые лучи, навеянные электронной музыкой середины 2000х и голливудскими фильмами 80х – снова на пике популярности благодаря успеху сериала Stranger Things.
$APPLICATION->IncludeComponent(
"itgro:photo.gallery",
"",
Array(
"COLLECTION_NAME" => "Тренды. Часть 3. Retro
"
)
);?>
01. Cocktails and dreams by Gjorgji Despodov
02. C I N E M A X by Jeison Barba
03. Stranger Things (Netflix.com)
Швейцарский дизайн, дадаизм, баухауз
Классика 20-го века вернулась в моду в дизайнерском прочтении – шрифты без засечек, простые линии и геометричные формы.
Swiss poster 01 (typography terms) by Mehman Mammedov
Большое непрерывное цветовое пространство
Полотно цвета и смелые решения типографики – вот, что мы увидим в 2020м в дизайнах пользовательских интерфейсов.
$APPLICATION->IncludeComponent(
"itgro:photo.gallery",
"",
Array(
"COLLECTION_NAME" => "Тренды. Часть 3. Непрерывный
"
)
);?>
01. Synticate© by Stepan Solodkov
02. Havaianas Branded Content by Johann Vernizzi
03. Kekkilä—BVB by Kurppa Hosk
Ультраминимализм
Ничего лишнего – девиз этого тренда. Все только самое необходимое и отсутствие перегруза элементами.
Andrei Gheorghe - DADA - Publishing by moodley brand identity
AR ИЛИ ДОПОЛНЕННАЯ РЕАЛЬНОСТЬ
Тренд дополненной реальности пришел вместе с новыми нативными средствами разработки AR от Apple и Google, которые пока не безупречны, но заметно упрощают работу. Основная задача – научить пользователя взаимодействовать с этой новой реальностью, создавая не только интересные, но и интуитивно понятные приложения. Многие крупные компании уже применяют тренд на практике, зачастую применяя связь пользовательского интерфейса с повседневной жизнью.
VR ИЛИ ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ
Впереди новые способы использования данной технологии – виртуальная реальность перестает быть синонимом игровой индустрии. VR начинает проникать в более осязаемые сферы – образование, здравоохранение, туризм, недвижимость, архитектура и т.д.
VUI ИЛИ ГОЛОСОВОЙ ИНТЕРФЕЙС ПОЛЬЗОВАТЕЛЯ
Возможность поговорить с приложением все чаще используется в коммерческих проектах – распознавание речи для считывания голосовых команд и вопросов, преобразование текста в речь для воспроизведения ответа и т.д.
Число пользователей подобных приложений увеличилось на 10% по сравнению с прошлым годом.
Вы прочли последнюю статью из нашего цикла про тренды веб-дизайна в 2020 –
понравились новые свежие решения?