Создание сайтов
Дизайн сайта
Как выбрать дизайн сайта без переплат: шаблон или индивидуальный, чек-лист требований и ошибки, которые убивают конверсию.
Дизайн сайта — это не картинка, а инструмент конверсии. Шаблон за 30 тысяч окупается на сайте-визитке, индивидуальная разработка за 300 тысяч — на интернет-магазине с большим ассортиментом. Ошибка не в выборе, а в неверной оценке задачи: бизнес заказывает шаблон под сложный проект, потом доплачивает за кастомизацию втрое и теряет полгода.
Шаблон или индивидуальный дизайн
Главный вопрос перед заказом — не «что красивее», а «что решит задачу за разумные деньги». Шаблон выигрывает на простых сайтах с типовой логикой. Индивидуальный дизайн нужен там, где сайт — основной канал продаж или часть бренда.
| Критерий | Шаблон | Индивидуальный |
|---|---|---|
| Стоимость | от 30–100 тыс. руб. | от 300 тыс. до 2 млн руб. |
| Сроки запуска | 1–3 недели | 2–4 месяца |
| Уникальность | Низкая, шаблон узнают | Полная, под бренд |
| Гибкость доработок | Ограничена структурой темы | Полная, любые сценарии |
| SEO-возможности | Базовые, часто перегружен код | Под задачи, чистый код |
| Поддержка | Зависит от автора темы | Студия или штатный разработчик |
| Когда выбрать | Визитка, лендинг, тест ниши | Магазин, SaaS, сложные услуги |
Простая логика: если задачи укладываются в 1–2 типа страниц и стандартные блоки — берите шаблон. Если у вас фильтры, личный кабинет, конфигуратор, нетиповая воронка — закладывайте бюджет на индивидуальную разработку сразу.
Требования к дизайну: чек-лист
Перед заказом соберите требования в один документ. Без него студия закроет техзадание на свой вкус, а вы получите макет, который придётся переделывать за свой счёт. Чек-лист делится на три блока: техника, коммерция, контент.
- Адаптивность от 320 px — макеты для телефона, планшета и десктопа, не «уменьшенный десктоп»
- Скорость загрузки — целевые значения Core Web Vitals: LCP < 2.5 сек, INP < 200 мс, CLS < 0.1
- Кроссбраузерность — Chrome, Safari, Firefox, Яндекс.Браузер, последние 2 версии
- Доступность — контрастность текста 4.5:1, фокус на интерактивных элементах, alt у изображений
- SEO-готовность — корректная иерархия H1–H3, разметка для Featured Snippets, микроразметка Schema.org
- Кнопки и формы — заметные CTA в каждой смысловой секции, формы не длиннее 5 полей
- Карточки товаров и услуг — фото 3+ ракурса, цена видна без скролла, кнопка действия выше первого экрана
- Типографика — основной текст 16–18 px, межстрочный 1.5, не более 2 шрифтов
- Фотографии — собственные или лицензированные, без стоковых лиц, единый стиль обработки
- Цветовая палитра — основной, акцент, нейтральные — не более 5 цветов, прописанные HEX-коды
Ошибки, которые снижают конверсию
Большинство дизайн-ошибок не про эстетику, а про здравый смысл и показатель отказов. Пользователь не разбирается в трендах — он либо понимает за 5 секунд, что делать, либо уходит к конкуренту.
Перегруженный первый экран
Пять блоков, три анимации, баннер на полэкрана. Внимание рассеивается, главный оффер тонет.
Слабые или невидимые CTA
Кнопка серая на сером фоне, без чёткого глагола. Пользователь не понимает следующего шага.
Запутанная навигация
Глубина больше 3 кликов, скрытые меню на мобильных, нелогичные категории каталога.
Стоковые фото и плохой контраст
Безликие изображения, текст бледным шрифтом по тонированному фону — снижают доверие сразу.
Отдельный пласт — ошибки в формах и оформлении заказа. Длинная регистрация при первой покупке, обязательные поля без объяснения, отсутствие гостевого заказа. Каждый лишний шаг отсекает 10–20% пользователей до подтверждения.
Как дизайн влияет на конверсию и SEO
Поисковые системы не оценивают красоту, но измеряют поведение пользователей и техническую производительность. Дизайн прямо влияет на оба сигнала: через Core Web Vitals и через поведенческие факторы — глубину просмотра, время на сайте, возвраты к выдаче.
Если страница не отрисовала главный блок за 2.5 сек, LCP проседает, пользователь возвращается в выдачу.
Google индексирует именно мобильный вариант. Кривая адаптация = потеря позиций даже при хорошем десктопе.
Удобная навигация = больше просмотренных страниц. Поведенческие факторы поднимают позиции по конкурентным запросам.
Контрастная CTA, короткая форма, понятная корзина — рост конверсии на 15–40% без изменения трафика.
Замеряйте дизайн в цифрах. Открывайте PageSpeed Insights, проверяйте мобильный отчёт, фиксируйте показатели до релиза и через 2 недели после. Если LCP вырос — дизайнер добавил тяжёлые фото или неоптимизированный hero, придётся переделывать.
Признаки устаревшего дизайна
Дизайн стареет за 3–5 лет. Не визуально — функционально. Если сайт делался в 2019 году, скорее всего он не учитывает мобильную аудиторию в 70%, не проходит Core Web Vitals и теряет конверсию каждый квартал.
- Визуально: мелкие шрифты на мобильном, плотные блоки без воздуха, градиенты и тени из 2015 года
- Технически: не проходит Mobile-First Indexing, LCP > 4 сек, CLS > 0.25, отсутствует HTTPS
- Коммерчески: отказы выше 70%, время на странице меньше 30 сек, конверсия упала на 20%+ за год
- Управленчески: правки занимают недели, нет дизайн-системы, каждая новая страница верстается с нуля
- SEO: позиции по мобильным запросам падают, доля брендового трафика растёт, потому что коммерческий уходит
Как принять работу студии
Приёмка макета — этап, на котором теряются деньги и нервы. Студия защищает свой результат, заказчик защищает свои интересы. Подготовьтесь заранее, и спор превратится в технический разговор.
Открываете чек-лист требований и сверяете макет пункт за пунктом. Не «нравится / не нравится», а «есть / нет».
Смотрите макет на iPhone, Android, планшете и ноутбуке. Минимум 3 экрана разного размера.
Карточки товаров с длинными названиями, отзывы на 500 знаков, корзина с 20 позициями. Студии часто рисуют на «удобных» данных.
Figma-файл с компонентами, библиотека цветов и шрифтов, экспорт макетов. Без этого следующая студия начнёт с нуля.
Самостоятельная оценка без дизайнера — 5 вопросов: понятно ли, что продаёт сайт за 5 секунд; видна ли цена на карточке без скролла; работает ли поиск с опечатками; помещается ли форма на экран телефона целиком; читаем ли текст при размере шрифта по умолчанию. Если хоть один ответ «нет» — это правка.