Девять приёмов, из-за которых сайт выглядит дорого

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

1. Один шрифт, три начертания

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

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

Размер основного текста на десктопе — не меньше 18 пикселей. Мелкий текст экономит место и сразу удешевляет ощущение.

2. Строка не длиннее 75 знаков

Текст на всю ширину монитора читать физически неудобно: глаз теряет начало следующей строки. Ограничение ширины текстового блока — самый дешёвый приём из всех, он делается одной строкой в стилях.

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

3. Отступы кратны одному шагу

Возьмите базовый шаг, например 8 пикселей, и стройте все отступы кратно ему: 8, 16, 24, 48, 96. Не 13, не 27, не 35.

Человек не считает пиксели, но замечает несогласованность. Половина ощущения «сделано аккуратно» — это ритм отступов, а не цвет и не картинки.

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

4. Три цвета, не больше

Фон, текст и один акцент. Акцент используется только для действий: кнопка, ссылка, активный пункт. Как только акцентный цвет появляется в декоративных элементах, он перестаёт работать как указатель.

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

5. Настоящие фотографии вместо стоковых

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

Если снимать нечего, лучше обойтись типографикой и цветом, чем ставить чужие картинки. Пустое место честнее подделки.

Все фотографии на странице должны быть в одной обработке: одинаковая яркость, одинаковый формат кадра, одинаковые скругления. Разнобой заметен даже неподготовленному глазу.

6. Скорость как часть дизайна

Сайт, который открывается за секунду, воспринимается качественнее, чем красивый, но тормозящий. Это не метафора: задержка ощущается физически и переносится на оценку компании.

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

Проверять надо на телефоне и на мобильном интернете, а не на рабочем компьютере с быстрым каналом.

7. Анимация, которую не замечаешь

Хорошая анимация длится 150–300 миллисекунд и меняет только прозрачность и положение. Долгие эффекты с полётами блоков раздражают на втором просмотре.

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

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

8. Меньше блоков, больше одного главного

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

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

9. Детали, которые видны только вблизи

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

Эти вещи никто не перечисляет в отзыве, но именно их отсутствие создаёт ощущение недоделанности. В проектах вроде ToYou Wood, где сайт считает смету по размерам, большая часть работы над ощущением уходила именно на состояния полей: человек вводит размеры и должен сразу понимать, что происходит.

Когда дорогой вид не нужен

Если вы продаёте расходники оптом и клиента интересует цена и наличие — тратить бюджет на визуальную отделку смысла нет. Работают скорость, поиск по каталогу и понятная корзина.

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

И общее правило: дорогой вид не спасает слабое предложение. Он усиливает то, что уже работает, и подчёркивает пустоту там, где сказать нечего. Примеры собранных проектов есть в разделе работ.

Как проверить результат без дизайнерского образования

Есть несколько проверок, которые делает любой человек и которые ловят большую часть проблем.

Прищурьтесь и посмотрите на страницу расфокусированным взглядом. Должно быть видно одно главное пятно — заголовок или кнопку. Если всё серое и равномерное, иерархии нет.

Откройте страницу на телефоне при солнечном свете. Слишком светлый серый текст, который казался элегантным на мониторе, станет нечитаемым.

Посчитайте шрифты и цвета. Больше двух гарнитур и больше четырёх цветов — почти наверняка лишнее.

Прокрутите страницу быстро сверху вниз и остановитесь. Если непонятно, в каком месте вы находитесь и что за раздел перед вами, значит, секции не отличаются друг от друга.

Дайте открыть сайт человеку, который о вас ничего не знает, и через пять секунд закройте экран. Спросите, чем занимается компания. Это самая жёсткая и самая полезная проверка из всех.

Что стоит денег, а что нет

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

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

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

Отдельная строка — время на переделку. Дизайн, который правится десять раз по мелочам, обходится дороже, чем сделанный один раз по внятным правилам. Правила дешевле вкуса.

Коротко

Дорогой вид складывается из ограничений: один шрифт в трёх весах, три цвета, отступы по одному шагу, строка до 75 знаков, свои фотографии в единой обработке. К этому добавляются быстрая загрузка, короткие анимации на действие и проработанные состояния элементов. Меньше блоков и больше воздуха улучшают страницу чаще, чем любой новый элемент. Для срочных услуг и оптовых каталогов всё это второстепенно.