Тренды веб-дизайна: что приносит заявки, а что стоит вам скорости

Руководитель видит сайт на конференции или в подборке и приносит ссылку со словами «хочу так же». Дальше возможны два разговора. Первый - какую задачу этот прием решает на вашем сайте. Второй - чем вы за него заплатите: сроком запуска, скоростью загрузки, часами поддержки или предсказуемостью результата. Ниже ходовые приемы разобраны по обоим вопросам, и отдельно - что из этого списка мешает бизнесу, где решение принимают за минуту.

Модный сайт всегда кем-то оплачен

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

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

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

Тренды веб-дизайна: что решает каждый прием и чем оплачивается

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

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

Что можно забрать бесплатно

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

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

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

Анимация: вы платите скоростью загрузки

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

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

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

Темная тема, трехмерная и генеративная графика

Эти приемы объединяет то, что платите вы за них не в момент запуска, а потом. Темная тема - это не инверсия цветов, а вторая версия всего: знака, иллюстраций, теней, скриншотов, писем и баннеров. Каждая следующая правка проходит две проверки вместо одной, и в пакете поддержки на 10-15 часов в месяц это съедает ощутимую часть емкости, которую вы рассчитывали потратить на новые страницы.

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

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

• Темная тема. Нужна там, где в интерфейсе проводят часы: панели, кабинеты, рабочие сервисы. На сайте услуг она чаще декоративная.
• Трехмерная графика. Оправдана, когда показывать нечего: платформа, сервис, продукт на стадии разработки.
• Генеративный визуал. Дешевле съемки, но требует правил: без них через полгода на сайте окажутся картинки из разных вселенных.
• Кастомные курсоры и вязкие переходы. На мобильных не существуют, в поддержке дороги, на воронку не влияют.

Кому тренды вредят: короткая воронка

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

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

Что это дает: счет в заявках, часах и неделях

Самый убедительный довод против гонки за модой - цифры проектов, где выиграли скучные решения. Сайт FAB.AGENCY дает около 100 посетителей в месяц, это очень мало по меркам рекламы. При этом конверсия в заявку составила 3,6%, в клик по кнопке - 6,2%, а в продажу за первые два месяца - 1,9%. Агентство получает с сайта 4-5 клиентов в месяц на дорогие услуги, потратив на рекламу ноль рублей. Первые заявки пришли на десятый день после запуска.

Сработала не графика, а нишевое позиционирование и структура: компания перестала быть агентством полного цикла и стала агентством для строительных компаний и недвижимости. Время на сайте выросло на 38% по сравнению с прежней заглушкой. Весь бренд и сайт собрали за четыре недели. Трехмерные сцены и покадровая анимация подняли бы смету по тарифу «Полный» - это коэффициент ×1,4 к базовой цене, и здесь платить его было незачем.

У ReNairo счет другой, а вывод тот же. Полный запуск бренда и сайта занял от месяца до полутора. За первый месяц набралось около 10 000 просмотров по всем площадкам, на третий-четвертый месяц единовременно пришло от 10 до 20 заявок с сайта, а еще около двадцати - с каналов трафика. Ни одна из этих цифр не появилась из-за эффекта на первом экране: она появилась из-за понятного объяснения продукта.

Что вы можете сделать сами, ничего не заказывая

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

1. Откройте сайт на телефоне через мобильный интернет и засеките время до появления заголовка первого экрана.
2. Выключите на первом экране все, что двигается, и посмотрите, стало ли понятнее, чем вы занимаетесь.
3. Замените одну картинку из стока на реальное фото объекта, цеха, команды или скриншот продукта.
4. Увеличьте главный заголовок и уберите из первого экрана все, кроме предложения и одной кнопки.
5. Оставьте один акцентный цвет и покрасьте им только кнопку заявки.
6. Сравните в Метрике конверсию на десктопе и на мобильном: разрыв вдвое - это поломка, а не особенность аудитории.
7. Пройдите по трем сайтам конкурентов и выпишите, что у вас с ними одинаковое. Это и есть места, где вас не запоминают.

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