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

Их рекомендуется избегать по разным причинам. Некоторые из рассмотренных моментов не рекомендуется делать с технической стороны, другие в 2022-2023 будут выглядеть непривлекательно и старомодно, с третьими могут быть ненужные сложности в реализации.

Антитренд 1: Иконки и логотипы не в SVG

SVG-формат настоятельно рекомендуется использовать для всех векторных компонентов на странице. В первую очередь речь идет про иконки и логотипы, но рекомендация может быть актуальна и для иллюстраций. Дело в том, что SVG-компоненты могут бесконечно масштабироваться, никак не теряя при этом в качестве. Так вы будете уверены на 100%, что иконки на разработанном вами сайте будут одинаково красиво смотреться как на HD-мониторе, так на 4K или на мобильном экране.

Очень желательно предусмотреть этот момент на этапе создания дизайна. Запросите у заказчика всю необходимую графику в SVG-формате или отрисуйте ее, или конвертируйте в SVG то, что дали. Многие иконки, если они не имеют какой-то уникальный дизайн, можно вообще найти в текстовом формате, например, на FontAwesome. Если есть такая возможность, то лучше используйте шрифтовые иконки. Они ничем не уступают SVG, но подходят не во всех случаях.

Если вы разработчик, а веб-дизайнер прислал вам макет с иконками в растровых форматах, то проведите их конвертацию или попросите об этом дизайнера. В Figma, например, большинство иконок можно экспортировать в SVG-формат буквально в два клика:

  • Выберите нужный объект и откройте в правой панели раздел “Export”.
  • В настройках экспорта укажите формат SVG, как это показано на скриншоте.

Настройка экспорта карток в Figma. Там достаточно просто выбрать среди доступных разрешений SVG

Таким образом можно легко и без потери в качестве экспортировать практически любую графику в SVG-формат.

Антитренд 2: Злоупотребление стоковыми фотографиями

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

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

Пример более-менее грамотного использования стоковых фотографий

Вот, что однозначно делать нельзя:

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

Антитренд 3: Полностью статичные сайты

Он больше относится к одностраничным или небольшим сайтам. У вас может быть отличный современный дизайн, но отсутствие какой-либо анимации или ее минимум делают сайт деревянным, скучным и несовременным. Готовый продукт будет больше напоминать картинку с кнопками, нежели полноценный продукт. Если вы хотите сделать взаимодействие с интерфейсом интересным, то добавьте сайту анимации.

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

Неплохой дизайн сайта, но у него совсем нет анимации, из-за чего он выглядит незаконченным

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

Антитренд 4: Обилие анимации

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

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

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

Антитренд 5: Оставлять логотипы конструкторов

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

Попросите заказчика расширить бюджет на 500 рублей и логотипа конструктора на сайте не будет ближайший месяц

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

Антитренд 6: Излишняя оптимизация изображений

Времена, когда нужно было стараться уменьшить вес изображения любыми возможными способами уже прошли. У большинства потенциальных посетителей есть либо 4G-подключение, либо неплохой Wi-Fi, которые вполне способны быстро обработать несколько мегабайт картинок. Больше не нужно думать над тем, как оптимизировать картинки – можно не бояться ставить оригиналы. Так вы сэкономите время в процессе разработки, а также избавитесь от ситуации, когда в дизайне присутствуют “пережатые” изображения.

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

Антитренд 7: Окна с онлайн-консультантами

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

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

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

Антитренд 8: Использование мультяшной 3D-графики

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

Шаблонные 3D-фигурки неплохо смотрелись в 2021 году, но сейчас это скорее антитренд

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

Антитренд 9: Использовать многоцветную палитру

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

В обычной ситуации лучше придерживаться палитры из 3-4 цветов. Два основных, например, черный и белый. Два акцентных, которым подсвечиваются кнопки и важные места в тексте. Найти несколько сочетающихся между собой цветов можно с помощью специальных сервисов. Для этого необязательно иметь какое-то художественное образование. Например, у Adobe есть отличный сервис для подбора цветовой гаммы. Там можно настраивать несколько цветов и вариантов их иерархии.

Антитренд 10: Скрывать основной функционал для незарегистрированных пользователей

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

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

Антитренд 11: Использование старых шаблонов iPhone в дизайне

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

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

Антитренд 12: Некорректная работа с VPN

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

Заключение

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