Тренды веб-дизайна и дизайна сайтов в 2021 году

Веб-дизайн сейчас – это масса возможностей, но, как и все разработки, их нужно использовать с умом. Что изменилось за 2020 год, и что возьмем с собой в 2021? Об этом и поговорим!

1. Соцсети – наше все

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

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

Тут у нас и заглавная фотография и «сторис» с актуальными товарами и акциями, и основная лента в виде самых популярных продуктов и новинок. Значки в мобильной версии прямо-таки напоминают “инстаграмную” разметку соцсети.

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

Актуально такое оформление будет не только для косметических брендов и одежды. К примеру, школа английского языка SkyEng активно использует «инстаграмную оболочку» практически с самого основания компании.

2. Минимализм

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

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

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

Самый простой и понятный нам принцип минимализма уже давно использует Google.

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

Простота во всем

Понятные и чистые линии, никаких лишних деталей, сложносочиненных шрифтов и многообразия разношерстных иллюстрацией, сложной сетки размещения информации и медиа. Простота может быть и во внутреннем содержании сайта: от фотографий в стиле минимализм, до видео и оформления текста. Отличный пример — сайт марки 12storeez. Почему минимализм в их случае — идеальное решение. Здесь этот стиль идет от продукта, который продается. Дизайнеры создают минималистичную одежду, и размещая ее на сайте, было бы ошибочно окружать его нагромождениями и декоративными эллементами сайта. Они бы попросту “съели” продаваемый продукт.

А вот пример антиминимализма, хотя для данной категории товаров оформления сайта в стиле “попроще” подошло бы куда лучше.

Чистые цвета

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

Антипример:

Давайте разберем данный пример и подумаем, что здесь не так и как это исправить? Фон — тусклый цвет, попытка воссоздать рисунок среза дерева. Очевидно, что заказчик тем самым просил дизайнера лишний раз показать через оформление, что двери сделаны из натуральных материалов. Но в совокупности в нагроможденным меню сайта, разными полупрозрачными шрифтами эта задумка теряется и становится просто фоном а-ля заставка на старом Windows. Что было бы здорово переделать и вынести “на первую полосу”. Главную страницу можно сделать белой с одной большой дверью, на которой будет выгравировано название компании. Эта дверь может быть одной из тех, что действительно продается. В идеале сделать дверь не просто кликабельной для перехода в каталог, а анимировать ее, словно вы открываете эту самую дверь. А за ней на второй странице понятный каталог, возможно, даже с теми фото, что заявлены сейчас на сайте компании.

Хороший пример сайта дверей:

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

Изображения без фона

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

Правила для изображения в минимализме:

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

Пространство

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

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

3. Темная тема оформления

Вы заметили, что не только социальные сети стали предлагать перейти на «темную сторону»? Экономить заряд вашего аккумулятора мобильного устройства помогут и сайты. И это не просто новое веяние, такие гиганты, как Apple, Mersedez-Benz, Instagram, Telegram, WhatsApp, ВКонтакте, ASOS уже давно радуют глаз, в прямом и переносном смысле, своих потребителей.

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

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

Кроме того, темные темы отлично подходят для OLED-экранов (такие не только бывают у телевизоров, но у и смартфонов марки Samsung), поскольку экономят энергию и увеличивают продолжительность жизни экрана. Темные оттенки позволяют создавать креативные элементы с использованием неонового свечения, а это тоже один из трендов графического дизайна 2021 года.

Так, например, выглядит сайт российского digital-агентства.

4. Искусственный интеллект

Неудивительно, что данная позиция появилась в нашей статье о трендах в дизайне сайтов-2021. Искусственный интеллект (ИИ) уже плотно вошел в нашу интернет-жизнь. Любой чат-бот, который всплывает на сайте медицинской клиники или товаров для дома – тоже часть искусственного интеллекта.

В этой истории с ИИ берет гордость за отечественного производителя. Так в студии Артемия Лебедева больше года трудилась нейросеть под видом настоящего дизайнера. За это время ИИ отработал на 20 коммерческих проектах, причем достаточно успешно. Под грифом секретности был создан сотрудник “на удаленке” Николай Иронов. Ему создали страничку с портфолио, и никто из клиентов и подумать не мог, что созданные логотипы — дело искусственного дизайнерского интеллекта. Как уверяют в студии Лебедева, ИИ выигрывает у человека по одному очень важному показателю: в отличии от сотрудника из плоти и крови нейросеть не полагается на насмотренность и увиденные работы коллег, она способна создавать поистине новые решения.

Еще в 2017 году сооснователь издания Artefact Роб Гирлинг размышлял на тему искусственного интеллекта и профессии дизайнера: какие прогнозы ожидаются к 2025 году:

“Я вполне могу вообразить себе будущее, где ИИ играет роль личного помощника, снабженного глубоким пониманием нашей мотивации, героев и того, что нас вдохновляет. Они могли бы давать оценку нашей работе, предлагать полезные идеи и способы профессионального самосовершенствования. Мир станет местом, где специальные боты смогут предоставить нам разные точки зрения на проблему и разные подходы к ее решению. Где имитации реальных пользователей тестируют разработанные нами продукты: проверяют их производительность в различных условиях и предлагают коррективы еще до того, как прототип превратится в действующую модель. Где алгоритмы А/В теста (сплит-тест — несколько разных вариантов страницы равномерно чередуются для всех ее посетителей) постоянно ищут возможности внести даже микроскопические изменения, чтобы улучшить качество дизайна.”

Не беремся загадывать настолько далеко, но можем предположить, что же изменится в 2021 году. По прогнозам, все чаще на сайтах мы будем видеть голосовой поиск. Это связано с ритмом жизни человека, в котором тратить время на печатание своего запроса – роскошь. В перспективе дойти до такого уровня использования ИИ, что сайт, заведомо зная предпочтения клиента по данным из BIG Data, будет выстраивать максимально комфортную площадку под конкретного пользователя (привет любителям сериала «Черное зеркало)» . Но это пока в перспективе, сроков у которой нет.

5. Фото+графика=любовь

Гибрид фото и графики – еще один тренд в веб-дизайне уходящего 2020 и надвигающегося 2021 года. Такой коллаж – дань любителям поп-арта, создает не только игривое настроение, но и определенную многослойность. Это добавляет интерес к вашему товару и услуге. К сожалению, не все производители на российском рынке жалуют эту историю, предпочитая стандартные решения. Западные конкуренты, напротив, с легкостью вводят фото и графику на свои сайты: от сайтов медиа до продуктов питания и одежды. Использование такой техники в последнем сегменте товаров может говорить не только о том, что ваша компания идет в ногу со временем, но и о самом товаре, о вашей ЦА. Кстати, DePlace Maison используют еще одну «фишку 2021»: текучая анимация. На сайте бренда вашей мышкой будет черная клякса, с которой хочется непременно поиграть, а значит, время вашего посещения сайта будет дольше. А это залог того, что вы будете изучать сайт и его товары, сами того не подозревая.

6. Ассиметричные макеты

Несмотря на тренд дизайна в стиле соцсетей, с ним также органично существует тренд на разрушение границ и понимания разметки страницы.

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

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

Подытожим, кому и для чего стоит использовать асимметрию:

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

Чего делать не стоит в 2021 году:

1. Использовать много разных шрифтов, как по размеру, так и по стилю

То авторов Методики успешного сайта: этого не стоило делать уже в 2011 году. Собственно, и раньше не стоило, просто тогда было сформулировано.

Для чего нужен текст на сайте? Для того, чтобы его прочитали, узнали о вас, вашем товаре или услуге. Но есть большое «НО» — мелкий шрифт или использование сложного стиля шрифта.

Современный человек задерживает внимание на 8 секунд — за это время он может прочесть только 18 слов. Если же ваш текст будет больше, да и еще и мелкого шрифта, скорее всего, пользователь просто пролистнет страницу дальше. Пути оптимизации: использовать видеоролик или анимацию+голос, чтобы «оживить» ваш товар.

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

Хороший пример — сайт desibeautyguru.com:

2. Использовать слайдеры

Кто хоть раз пытался открыть сайт МВидео или Zara с телефона понимающе кивнут головой. Слайдеры не только утяжеляют сайт, но и делают его несовременным.

Согласно исследованию университета Nort Dam, только 1% респондентов нажали на слайдер. При этом 84% кликов пришлось только на первый слайд. Здесь срабатывает принцип баннерной рекламы на сайтах-поисковиках, как правило, она выглядит как слайдер и размещена сбоку сайта, потому на нее никто не обращает внимания.

3. Низкоконтрастные шрифты

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

Редактор одного австралийского журнала Колин Уилдон решил узнать мнение своих читателей о том, какой цвет фона и текста те считают приемлемым:

• Черный текст на белом: 70% хорошо, 19% удовлетворительно, 11% плохо;
• Белый текст на черном: 0% хорошо, 12% удовлетворительно, 88% плохо;
• Белый текст на фиолетовом: 2% хорошо, 16% удовлетворительно, 82% плохо;
• Белый текст на королевском синем: 0% хорошо, 4% удовлетворительно, 96% плохо.

Аналогично: это было правилом уже в 2011 году.