Сегодня в Интернете насчитывается около 1,8 миллиарда действующих сайтов… Эти цифры впечатляют, не правда ли? Точно так же, как может впечатлить и конкуренция между ними. Их много, а крупных поисковых сервисов, которыми пользуются миллионы, раз-два – и обчёлся. Борьба за внимание ведётся серьёзная, и единственный способ победить конкурентов – обойти их в UX/UI веб-дизайне.
Если коротко, то “UI” – это аббревиатура от английского “user interface”, что переводится как «интерфейс пользователя». Сам по себе он является набором средств, которые обеспечивают взаимодействие с сайтом (меню, формы для заполнения, кнопки, ссылки, контент). Что касается “UX”, то расшифровка этой аббревиатуры звучит как “user experience” и переводится как «опыт пользователя». Последний заключается в восприятии сайта, реакции на решения, представленные на нём, и эмоциях, которые возникают во время и после взаимодействия.
Оба данных направления тесно связаны между собой, дополняют друг друга и постоянно развиваются, демонстрируя новые тенденции. Профессиональные дизайнеры и интернет-маркетологи, желающие добиться успеха и выстоять в конкурентной борьбе, должны отслеживать и использовать их в своей работе. Это как раз те направления, в которых не стоит оглядываться в прошлое; напротив, тренды UX-дизайна 2021 года стоит брать на вооружение уже сейчас!
Тренд 1. Когда меньше значит больше
Уже не первый год минимализм является актуальным трендом UI-дизайна, и всё указывает на то, что своих позиций он сдавать не собирается. Ежедневно пользователи сталкиваются с большими объёмами рекламы и взаимодействуют с интерфейсами, перегруженными информацией... Всё это приедается и начинает раздражать.
По этой причине дизайнеры и разработчики интерфейсов ищут пути для упрощения графических элементов. Они сводят к минимуму количество цветов, используют разные пропорции и композиции, делая элементы максимально функциональными и удобными в использовании. В приоритете:
- Лёгкость, воздушность, незаметность интерфейса;
- Использование светлых тонов, которые не перегрузят его;
- Его удобство и простота;
- Правильный подбор шрифтов;
- Качественная вёрстка;
- Отказ от декоративных составляющих.
Тренд 2. Упрощённая регистрация и вход в аккаунт
2021-ый – год упрощённых интерфейсов пользователей. Его тенденции таковы, что от последнего требуется минимум действий. Оптимально оставить лишь основные элементы и поля для заполнения. Упрощённая регистрация и вход в систему – самые актуальные тренды UX -дизайна. К примеру, для входа в свою учётную запись на торговой площадке пользователю достаточно ввести свой номер телефона. Благодаря этому ему даже не придётся запоминать свой пароль!
Данной тенденции последовала даже компания “Apple”: её кнопку, наряду с кнопками “Facebook” и “Google”, можно увидеть на сайте “Ifttt.com”, где она позволяет пройти регистрацию буквально в один клик. Благодаря ей вход в систему тоже будет моментальным. Согласитесь, это очень удобно и экономит время. Пользователи это оценят!
Тренд 3. Одинаковые иконки
Тренды UI -дизайна в 2021-ом году таковы, что требуют идеального внешнего вида интерфейсов. Это, в свою очередь, значит, что даже иконки должны были быть выполнены в одном стиле и иметь одинаковые параметры. Только так интерфейс будет выглядеть целостным и гармоничным. Сегодня мало-какой графический дизайнер их рисует – как правило, их скачивают из уже готовых библиотек, где они представлены в самых разных видах и подойдут для решения различных задач.
Их легко настроить, а интерфейсы с ними выглядят куда привлекательнее, моднее и аккуратнее. Сегодня в Интернете их можно сказать совершенно бесплатно, но нужно предварительно проверить наличие всех необходимых иконок и протестировать их работу. Рекомендуется изначально использовать несколько библиотек и стилей, а потом уже выбрать одну/один, который идеально подойдёт.
Тренд 4. Градиенты и размытый красочный фон
Цветовые градиенты представляют собой плавные переходы оттенков из одного в другой. Их используют уже не первый год, однако сегодня к ним выдвигают особые требования воздушности и лёгкости. Они не должны выглядеть громоздкими и утяжелять интерфейс, а, напротив, обуславливать его динамичность и приятную глазу глубину. Это значит, что при их создании используют неяркие пастельные тона.
Несмотря на «осветление» градиентов, выглядеть они должны сложнее чем раньше: недостаточно делать их просто линейными, используя два-три цвета. Количество цветов может достигать десяти, требуется техника наложения. Вся эта красота способна вызвать у пользователя настоящий взрыв эмоций! Не удивительно, что её взяли на вооружение дизайнеры многих известных брендов... Что же касается эффекта размытости, то его чаще всего применяют в качестве фона. Благодаря ему интерфейсы обретают объём и глубину, а потому выглядят ещё более привлекательно.
Тренд 5. Уникальные иллюстрации в двухмерном формате
Иллюстрации прочно удерживаются в топе трендов уже который год, но сегодня они стали несколько иными, обрели больше индивидуальности и перестали наконец-то быть общими. Раньше при их создании web -дизайнеры старались придерживаться минимализма, чтобы исключить перегруженность web -страниц… Но 2021-ый – время для смелых экспериментов с необычными ракурсами, пропорциями и даже сюжетными линиями. Иллюстрации становятся более ещё красивыми и оригинальными, теперь они способны волновать и вызывать ажиотаж у смотрящего.
Не рекомендуется использовать иллюстрации из бесплатных библиотек: даже если они и выглядят симпатично, всё-равно достаточно однообразны. Сегодня подобное отталкивает пользователей… И именно по этой причине графическим дизайнерам лучше всего создавать свои иллюстрации, индивидуализированные под клиента, и использовать для них формат “SVG” . Благодаря ему изображения не будут терять в качестве при увеличении разрешения экрана.
Тренд 6. Анимация и захватывающие визуальные 3 D- эффекты
Доподлинно известно, что визуальную информацию люди воспринимают легче, чем переданную словами… А потому её объём на сайтах и в социальных сетях растёт из года в год. Благодаря ей опыт взаимодействия с пользователем существенно улучшается, а достигается это за счёт:
- привлечения его внимания к тому, что нужно сделать;
- информирования о том, что будет дальше;
- приятных, плавных переходов;
- простого объяснения сложного ;
- уведомления о действиях;
- предоставления подсказок (как утвердительных, так и отрицательных).
Несмотря на целый ряд преимуществ, анимированной графики должно быть в меру, поскольку в большом количестве она будет отвлекать внимание, а не выполнять свою основную функцию – продажи товара или услуги. Простые формы и объекты обретают второе звучание в трёхмерном формате. Сегодня иконки, созданные с его использованием, можно встретить даже в “macOS Big Sur” от “Apple”:
Тренд 7. Полноэкранные изображения с эффектом присутствия
Сегодня диагонали экранов становится всё больше и больше, а время концентрации внимания пользователя на чём-то одном – меньше. Единственный способ свести к минимуму количество отказов – делать изображения полноэкранными, обеспечивая эффект присутствия. Для этого можно задействовать не только лишь центральную часть экрана, но и всё пространство. Перенося пользователя, по сути, в другие миры, вы сможете удерживать его внимание и направлять на совершение целевых действий на вашем сайте.
Полноэкранное изображение позволяет избавиться от отвлекающих факторов, к примеру – от панели уведомлений, расположенной сверху. В таком формате её просто не будет видно, благодаря чему пользователь полностью сосредоточится на том, что вы ему показываете. Велика вероятность того, что в 2021-ом году станут модными складные устройства, так что полноэкранные изображения с эффектом присутствия будут особенно актуальны.
Тренд 8. Ознакомление с продуктом
Он относится к приложениям. Ознакомление с продуктом (или “onboarding”) – это краткое введение, которое поможет легко разобраться в его работе и позволит понять его основные функции. Сегодня оно является хорошо заметной тенденций UX, игнорировать которую не стоит. Да: бытует мнение о том, что наличие онбординга говорит о недостаточно хорошем дизайне и функционале приложения… Но это не правда.
Желание упростить пользователю освоение за счёт показа важной информации не может быть признаком того, что с приложением что-то не так. Важно, чтобы ознакомление было лаконичным и простым. Разработчику нужно обратить особое внимание на описания, которые должны легко читаться и восприниматься пользователем. Оптимально использовать красивые иллюстрации и фотографии высокого разрешения. Опишите ценность продукта и сделайте это просто и доступно.
Тренд 9. Голосовой интерфейс пользователя
Взаимодействие с интерфейсом посредством голоса – удобная и полезная «фича». Она получила достаточно широкое распространение, даже такие гиганты, как “Google”, используют её на своих ресурсах. Этим они ещё раз подтверждают тот факт, что дизайн не обязательно должен быть визуальным. Голосовой интерфейс является внутренним и не совсем соотносится с реальным дизайном… Однако же, разработчики, идущие со временем в ногу, всё чаще используют его на своих сайтах.
Сегодня можно увидеть десятки приложений, которые умеют переводить слова или предложения на любой язык. Для этого вовсе не обязателен ввод с клавиатуры: достаточно нажать кнопку и произнести необходимую фразу – и вы тут же получите её перевод в голосовом формате. Согласитесь, это серьёзно облегчает общение людей, говорящих на разных языках.
Тренд 10. Пастельные тона
Минимализм и пастельные тона – идеальное сочетание. Используя их в своих работах, дизайнеры создают по-настоящему лёгкие и ненавязчивые интерфейсы, которые не отвлекают внимания от главного. Их преимущество заключается в том, что их можно легко вписывать в любые концепции. При этом они вовсе не обязательно будут выглядеть слишком уж спокойными: правильно сочетая их, можно легко добавить и «перчинки», если это нужно.
Особенно хорошо выглядят фоны, выполненные в пастели. Они позволяют использовать различные цвета, не утомляя и не перегружая пользователя. Благодаря своей мягкости они могут заполнять собой всё пространство, не создавая при этом эффекта давления. Их функция – создавать спокойный, расслабленный настрой. В элементах навигации они не будут слишком бросаться в глаза и отвлекать внимание, идеально вписываясь в общий дизайн сайта.
Тренд 11. Сложная типографика
Каждый графический дизайнер знает, как важно правильно подобрать шрифты для оформления web-сайта или приложения… Нередко бывает так, что тот или иной часто используемый шрифт уже вызывает ассоциации с тем или иным крупных брендом или компанией. Например, мало кто знал бы сегодня о наборе “Roboto”, если бы не “Google”. В самой этой компании шрифты из него считают современными, доступными и волнующими – и используют их в ОС “Android”, а также сервисах “Play”, “YouTube” и пр..
Пользователи Интернета нередко сканируют (а не читают) текст, выискивая нужную им информацию. По этой причине эксперименты со шрифтами стали одним из замечательных трендов, и сегодня он заключается в том, чтобы использовать сложную (нередко – специально разработанную) типографику. Благодаря ей можно сделать акцент на важной информации и гарантированно донести её до клиента. Сегодня можно увидеть немало сайтов, построенных на типографике… И выглядят они очень свежо!
Тренд 12. Dark Mode
Тёмный режим выглядит стильно, очень модно и достаточно элегантно для того, чтобы стать ещё одним веянием 2021-го года. Его преимущества заключаются в следующем:
- Удобство чтения даже в полумраке или в темноте;
- Возможность сделать отдельные элементы яркими;
- Экономичность для батарей мобильных устройств;
- Снижение утомляемости глаз;
- Возможность легко скрыть битые пиксели;
- Доступность для пользователей со светобоязнью.
Тренд 13. Брутализм и контрдизайн
Оба этих направления в web-дизайне возникли не так давно, но достаточно быстро развились и не сдают своих позиций. Их можно увидеть практически везде, и это – притом, что первый основан на архитектурном стиле прошлого столетия, отличаясь намеренной грубостью и отсутствием любого декора… А вот второй является одним из направлений так называемой альтернативной архитектуры и отвергает эстетическую сторону, выдвигая на первое место социальную и культурную роль объекта.
Интерфейс портала “Reddit” – отличный образчик брутализма, так же, как и дизайн сайта американского поставщика финансовой информации для профессиональных участников финансовых рынков.
Брутальный стиль в современном web-дизайне напомнит о сайтах, которые можно было увидеть в начале 90-ых прошлого столетия – с их практически полным или минимальным количеством дизайнерских решений в виде узоров, градиентов, теней… На весь проект используются разные стилизации одного шрифта и большой объём текста, который чётко структурирован. Что касается антидизайна, то он будто протестует против стандартных правил вёрстки страниц, что проявляется созданием достаточно сложных и грубых интерфейсов с большим количеством анимации и отсутствием чёткой иерархии.
Тренд 14. Glassmorphism
В переводе с английского языка это обозначение звучит как «стекломорфизм». Сегодня это – новая, можно даже сказать несколько «сумасшедшая» новинка… Которая, впрочем, имеет все задатки для того, чтобы стать серьёзным трендом не на один год. Она появилась из неоморфизма, который получил широкое признание среди web -дизайнеров в прошлом году. Он же, в свою очередь, сочетает в себе два общих подхода, которые практикуются при создании интерфейсов – сквемоморфизм (skeuomorphism) и плоский дизайн. Первый требует делать элементы виртуального интерфейса максимально приближенными к реальным, второй – исключает глубину и объём объекта и прямо противоположен первому. Их сочетание позволило создать нечто более мягкое и «удобоваримое» для пользователя и компьютера.
Что касается стекломорфизма, то он предусматривает создание размытого фона. Прозрачность последнего достигается за счёт использования эффекта матового стекла, что позволяет создать много уровней с объектами, которые будто парят в пространстве. Возможно использование ярких цветов, которые будут акцентировать внимание на размытой прозрачности. Когда человек смотрит на элементы, созданные в этой технике, ему кажется, будто он смотрит сквозь стекло. Выглядит это просто бомбически!
Тренд 15. Видео
Интеграция этого типа контента в страницы самого разного предназначения выходит на новый уровень. Причин для этого несколько… Первая заключается в отсутствии технических ограничений для web-сайтов, реализованных на разных платформах. В качестве второй можно назвать удобство для пользователя, которому в удовольствие посмотреть интересное видео и узнать о товаре, услуге или компании всё необходимое. Не стоит забывать и о том, что видеоролики являются максимально эффективной точкой взаимодействия, которая создаёт соответствующую атмосферу и демонстрирует продукт во всей его красоте.
Тренд 16. Великолепные карточки товаров
Этот год запомнится всем не только как год пандемии и необходимости адаптироваться к новому образу жизни, но и как год, когда наблюдался существенный рост электронных продаж… И пускай второе является последствием первого, всё оно дало новый виток в развитии UX / UI- дизайна. Современные продавцы не просто стремятся получить стабильный поток заказов – они хотят, чтобы их сайты выделялись и хорошо запоминались. Только так можно сегодня победить в конкурентной борьбе!
Сегодня эти стремления охватывают не только главные страницы, но и товарные карточки… и здесь нет пределов совершенству. В ход могут идти онлайн-конструкторы, трёхмерные изображения, оригинальные видеоролики и, конечно же, великолепное художественное оформление, выполненное в соответствии с актуальными трендами. Вот как реализовано представление покупателю коммерческого грузовика “Iveco Daily”:
Тренд 17. Цифровая альтернатива натуральным материалам
В оформлении интерфейсов “macOS” и “Fluent Design System” присутствуют «материалы», которые пользователь ощущает как максимально приближенные к натуральным... И это куда более интересно, чем сквемоморфизм. В своей реальной жизни мы используем бумагу, древесину, металлы и стекло… Так почему бы не создать их цифровую альтернативу? Благодаря ей можно создавать глубину и объём, которые сделают виртуальное пространство более знакомым и понятным!
Сюда же можно отнести тени и градиенты. Их стали часто использовать в прошлом году, и сегодня эта тенденция набирает обороты, а сами они становятся сложнее и выглядят всё более изысканно. Используя эти элементы, графические дизайнеры обеспечивают не только современный внешний вид интерфейсов, но и делают их более удобными и доступными для использования.
Тренд 18. Сочетание визуальных элементов
Инфографика, иллюстрации, анимации, иконки, видеоролики – убеждать кого-то в пользе визуального контента сегодня уже не имеет смысла. Каждый пользователь Интернета успел по достоинству оценить удобство и простоту их восприятия (равно как и все остальные преимущества). Само собой, все эти направления развиваются и меняются, но в этом разделе речь пойдёт о несколько ином: их сочетании. Сегодня именно оно стало ещё одной областью для творческих экспериментов.
Комбинируя разные типы визуальных элементов в одном интерфейсе, можно добиться необычных эффектов и отличных результатов. К примеру, фотографии и иллюстрации могут отлично уживаться рядом, выглядя при этом вполне гармонично. То же можно сказать о двух- и трёхмерной графике, которые идеально дополняют друг друга, а усилить производимый эффект можно за счёт анимации!
На сайте сервиса “Mayple” можно увидеть сочетание фотографий и линейных иллюстраций.
Тренд 19. Анимация элементов идентичности компании или бренда
Мы живём в необычное время, которое примечательно тем, что любая уважающая себя компания обзаводится своим виртуальным представительством на просторах Интернета. В связи с этим претерпевают изменения и элементы, которые идентифицируют её и её бренды.
Они становятся такими, которые удобно демонстрировать в цифровой среде. Более того, последняя даёт целое множество возможностей для того, чтобы совершенствовать их. Одна из горячих новинок, которая уже стала трендом, – анимированные логотипы. На сайтах они выглядят живыми и даже способны вызывать эмоции у пользователей!
Тренд 20. Творческий подход в представлении фото
Последние два года ознаменовались тем, что графические дизайнеры использовали много нестандартной графики в виде двух- и трёхмерных изображений. Сайты ими изобиловали… Чего нельзя сказать об обычных фотографиях. Они отошли на второй план, поскольку считались более традиционными и даже консервативными, а стоковые так и вовсе вызвали волну негативных отзывов. Эти тенденции дали рост новой: дизайнеры стали более гибкими и научились создавать нестандартные макеты с использованием фотографий.
Такой подход оказался как нельзя кстати, ведь создание нестандартного фотоконтента – достаточно сложное в организации и дорогостоящее мероприятие. В этом году на сайтах можно увидеть сложные композиции, творческие коллажи и даже анимации с использованием фотографий, в том числе и стоковых. Сегодня в центре внимания крутые дизайны с ними: они задают необходимую атмосферу, создают настроение, передают нужный посыл и хорошо запоминаются.
В завершении
Итак, мы рассмотрели основные тренды UX/UI-дизайна, которые будут доминировать в этом году. 2021-ый – год минимализма, упрощённых пользовательских интерфейсов, но крутых визуальных эффектов, сложных градиентов и типографики. Решив использовать тот или иной из них в своей работе, задайтесь вопросами о том:
- Улучшит ли он UX или всё же будет отвлекать от главного;
- Не будет ли он «загораживать» собой более важные элементы;
- Не замедлит ли его использование загрузку страницы и не создаст ли проблем с навигацией.
Ответив на них, вы сможете сделать правильный выбор, который сделает сайт ещё лучше, интереснее, полезнее и красивее для пользователя. Это, в свою очередь, улучшит показатели вашего бизнеса и даст толчок к новому витку его развития.