Тренд 1: Минимализм в мыслях – минимализм в вебе

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

Интересно 70% работников более довольны работой, работая удаленно

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

Сайти
Ранние вебсайты не отличались дизайнерскими особенностями / Скриншот

Почему собственно возник тренд минимализма?

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

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

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

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

Рассмотрим этот тренд на примерах нескольких крупных компаний – YouTube и Behance.


Современные компании следят за трендами в дизайне / Скриншоты

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

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

Думая, что тени и градиенты – это совсем неновый тренд, вы будете абсолютно правы. Это не новое, ранее невиданное, однако это – нечто древнее, но модернизированное. Единственное, что на сегодня изменилось – это большая "воздушность" (к этому слову будем еще не раз возвращаться), легкость и объем. По словам Егора Комарова, все это должно миксоваться с пастельными градиентами и популярными сейчас 3D изображениями и иконками. В общем, это тот самый минимализм, но более объемный.

Только на пастельных тонах и объемности градиенты не остановились, они продолжают эволюционировать. Разрабатывая современный дизайн, UI/UX специалисты прибегают к так называемым сложным градиентам и blur-эффектам.

Накладання
На этих примерах мы можем увидеть микс сложных цветов и эффект "наложения" / Скриншоты

В дополнение интерфейсы все чаще начали применять эффект Color Blur, часто в роли background. Простыми словами это придает глубину и объемность веб-странице.

Не пропустите ЭДО, лидерство и стартапы: 5 онлайн-курсов для предпринимателей

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

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

3d елементи
Такие простые элементы очень круто разнообразят визуальную составляющую любого веб-продукта / Скриншот

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

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

Тренд 4: Фото + Графика

Гибрид обычных фотографий и графических иллюстраций – супер свежий тренд конца 2020 и начала 2021 годов. Об этом говорит Нико Гибрадзе – ведущий дизайнер в impulse.guru. Такая коллаборация – дань уважения фанам поп-арта. Задача этого тренда не только создавать так сказать игривую атмосферу на сайте, но и придать определенной многослойности вашему веб-продукту. Также это добавляет необычности веб-дизайну и увеличивает интерес потенциального покупателя к вашему продукту.

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

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

DePlace Maison – сайт с оригинальным обувью, кроме тренда "фото+графика", использует еще одну "фишку" 2021 – плавающую анимацию. На сайте этого бренда вашим курсором является черная клякса, которая будет расплываться, повторяя ваши движения.

Графіка
Сочетание фото, графики и необычных элементов помогут задержать клиента на сайте / Скриншот

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

Тренд 5: Асимметричные макеты

dada-data
Асимметричный дизайн привлекает внимание / Скриншот

Согласитесь, вам приспичило перейти на этот сайт и рассмотреть поближе?

Такие нестандартные решения – ключ к сердцу посетителей вашего сайта. Подобные макеты стопроцентно принесут благосклонность и популярность вашей компании.

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

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

Новости Техно Семь партнеров Apple обвинили в привлечении принудительного труда уйгуров

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

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

Материал подготовила София Лещименко