Меня зовут Виктория, я дизайнер Hated.Ru. Собрала здесь то, что вижу на сайтах клиентов каждую неделю: почему посетитель закрывает вкладку через пару секунд, чем сайт небольшой компании отличается от сайта крупной, как устроить первый экран, мобильную версию и скорость. И что в этой истории на самом деле умеют нейросети.
Красивый сайт и сайт, который приносит заявки, совпадают реже, чем хочется. Я четыре года занимаюсь дизайном и постоянно вижу одну и ту же картину. Владелец вложился в эффектную картинку, а посетители всё равно уходят. Им было непонятно, куда нажать, текст на телефоне читался с трудом, а кнопка с номером открывала меню вместо звонка.
В этой статье принципы, по которым я оцениваю и делаю сайты в студии. Здесь только то, что влияет на поведение живого человека, который зашёл к вам с телефона в обеденный перерыв и решает, остаться или вернуться в поиск.
Статья пригодится, если вы собираетесь заказывать сайт или редизайн, спорите с подрядчиком о макете или просто чувствуете, что сайт работает хуже, чем мог бы.
- Первые секунды на сайте
- Анатомия первого экрана
- Сайт под масштаб бизнеса
- Сетка, отступы, шрифты, цвет
- Шапка, меню и подвал
- Ошибки, которые я вижу чаще всего
- Мобильная версия
- Скорость и вес страницы
- Картинки, иконки и шрифты
- Доверие и документы
- Нейросети в дизайне
- Когда сайту пора на редизайн
- Как мы работаем над дизайном
- Сколько стоит дизайн сайта
- Вопросы и ответы
Первые секунды: остаться или уйти
Сайт почти никто не читает с первой строки до последней. Человек открывает страницу, пробегает её глазами и за несколько секунд решает, туда ли он попал. Точную цифру называть бессмысленно, у каждой аудитории она своя. Важно другое: этих секунд хватает только на первый экран.
За это время посетитель ищет ответы на три вопроса:
- Куда я попал? Что это за компания и чем она занимается.
- Это для меня? Мой город, моя задача, мой уровень цен.
- Что делать дальше? Куда нажать, чтобы узнать цену, записаться или позвонить.
Если хотя бы на один вопрос ответа нет, человек возвращается в выдачу и открывает следующий сайт. До ваших цен, отзывов и портфолио он просто не доходит.
Смета до начала работ, еженедельные фотоотчёты, гарантия 3 года по договору.
Тест пяти секунд
Нажмите кнопку и пять секунд смотрите на экран с примером. Потом он размоется, и нужно будет ответить на три вопроса. Сайт выдуманный, компания тоже.
Попробуйте провести такой тест со своим сайтом. Он бесплатный и занимает минуту. Смотреть должен человек со стороны: вы свой сайт знаете наизусть и ответите на всё с закрытыми глазами.
Показывайте сайт на телефоне, большинство ваших посетителей увидит его именно так. Ничего не объясняйте заранее. Через пять секунд заберите телефон и задайте три вопроса из списка выше. Трёх-пяти человек хватит, чтобы увидеть проблему: если двое из пяти путаются в ответе, дело в первом экране.
Анатомия первого экрана
Первый экран делает главную работу всего сайта. Остальные блоки читают те, кто уже заинтересовался. Вот из чего он состоит на хорошем сайте услуг. Набор и порядок меняются от проекта к проекту, логика остаётся той же.
- Логотип и понятное меню. Логотип ведёт на главную, пункты меню заметнее логотипа.
- Телефон или мессенджер. На мобильном по нажатию сразу звонок.
- Для кого и где. «Ремонт квартир в Туле», «Для клиник и стоматологий».
- Заголовок с выгодой. Что человек получит, лучше с цифрой или сроком.
- Подзаголовок. Одна-две строки, которые снимают главный страх клиента.
- Одна главная кнопка. Залита цветом. Рядом запасная, контурная.
- Доверие. Рейтинг, число клиентов, гарантия, логотипы партнёров.
- Живое фото. Команда, объект или продукт. Лица целиком.
Главная кнопка одна
На первом экране часто спорят за внимание пять-шесть кнопок: позвонить, написать в мессенджер, скачать прайс, подписаться, посмотреть видео, пройти квиз. Когда вариантов много, человек выбирает самый простой из них и закрывает вкладку. Главное действие на экране должно быть одно, остальные спокойно разносятся ниже по странице.
Меню видно сразу
На компьютере меню должно быть открыто. Иконка-гамбургер на широком экране выглядит модно, но прячет разделы, а вместе с ними все пути к заявке. Люди не любят искать. Если сверху не видно, что ещё есть на сайте, они решают, что больше ничего и нет.
Текст поверх фотографии
Яркое фото на фоне съедает заголовок. Решение простое: затемнение или градиент под текстом, чтобы контраст оставался достаточным при любом кадре. И следить за кадрированием. Обрезанные лица и головы на первом экране встречаются удивительно часто, особенно на мобильной версии, где фото подрезается автоматически.
Сайт под масштаб бизнеса
Клиенты часто приносят в качестве примера сайт крупного бренда и говорят: «хочу так же». Желание понятное. У крупной компании десятки направлений, сотни статей и узнаваемое имя, поэтому её сайт решает свою задачу. Небольшому бизнесу тот же подход часто только мешает.
Если упростить, сайты делятся на две большие группы.
Первому сайту нужно провести человека коротким путём: увидел, понял, оставил заявку. Цены стоят на главной, потому что искать их по разделам никто не станет. Второй сайт работает как витрина большой компании. Посетитель должен почувствовать её размер, найти своё направление и уйти вглубь, в услугу, статью или каталог.
У больших сайтов есть приём, который я очень люблю: шаблоны страниц отличаются по категориям. Человек читает статью про уход за кожей и видит предложение по уходу за кожей, под статьёй про питание стоит продукт про питание. Точная рекомендация работает лучше одинакового баннера на всех страницах.
И ещё одна вещь. Главная кнопка зависит от этапа бизнеса. Пока компания молодая, ей нужны обращения, и на первом экране стоит «Записаться» или «Получить расчёт». Когда появились продукты, постоянные клиенты и поток контента, фокус смещается на продажи и подписку, а контакты переезжают в меню.
| Формат | Когда подходит | Главное в дизайне | Цена в Hated.Ru |
|---|---|---|---|
| Лендинг | Одна услуга или акция, реклама под конкретный запрос | Один путь к заявке, сильный первый экран, доверие, форма | от 15 000 ₽ |
| Сайт-визитка | Небольшая компания, нужно быть в поиске и на картах | Услуги, цены, контакты, отзывы, скорость | от 15 000 ₽ |
| Корпоративный сайт | Несколько направлений, команда, кейсы | Навигация, страницы услуг, портфолио, доверие | от 50 000 ₽ |
| Интернет-магазин | Каталог, корзина, онлайн-оплата | Карточка товара, фильтры, поиск, оформление заказа | от 35 000 ₽ |
Цены стартовые, итог зависит от числа уникальных страниц, функций и платформы. Подробный разбор сметы есть в статье «Сколько реально стоит сайт на Битриксе», а про выбор платформы мы писали в материале «Какую CMS выбрать в 2026 году».
Сайт должен соответствовать размеру бизнеса. Слишком скромный сайт у крупной компании вызывает недоверие. Слишком тяжёлый у небольшой только отнимает деньги и скорость.
Виктория Константинова, дизайнер Hated.Ru
Сетка, отступы, шрифты и цвет
Есть вещи, которые посетитель замечает только тогда, когда они сделаны плохо. Ровные края, одинаковые расстояния, понятная разница между заголовком и текстом. Стоит нарушить хотя бы одну, и сайт начинает выглядеть дешёвым даже с дорогими фотографиями. Посетитель не сформулирует, что именно не так. Он просто перестанет доверять.
Потяните ползунок. Содержание одинаковое, изменилась только база.
Отступы и выравнивание
Каждый блок стоит на одной сетке, расстояния повторяются. Я строю макеты на шаге, кратном 8 пикселям: 8, 16, 24, 32, 48, 64. Внутри карточки отступы меньше, между секциями больше. Когда расстояния случайные, глаз это чувствует сразу, даже если человек в жизни не слышал слова «отступ».
Иерархия
Размер элемента сообщает, насколько он важен. Самый крупный текст на экране это заголовок, за ним подзаголовок, потом основной текст и подписи. Если логотип больше меню, а кнопка меньше надписи рядом с ней, страница читается в неправильном порядке. Всё мелкое мозг автоматически записывает в неважное.
Шрифты
- Два семейства на сайт, максимум. Одно для заголовков, второе для текста. Часто хватает одного в разных начертаниях.
- Проверяйте кириллицу. У многих красивых шрифтов из зарубежных коллекций её нет, и русский текст молча подменяется системным шрифтом.
- Основной текст от 16 пикселей на телефоне и 17-18 на компьютере, межстрочный интервал 1,5-1,7.
- Длина строки 60-75 знаков. На длинной строке глаз устаёт и теряет начало следующей.
- Лицензия. Коммерческий шрифт без лицензии нарушает права точно так же, как чужая фотография.
Цвет
Фирменный цвет работает как указатель. Если им залиты кнопки, ссылки, иконки, фоны секций и заголовки одновременно, указывать ему уже не на что. Акцентный цвет я оставляю главным действиям и паре смысловых выделений, остальное держу в нейтральной гамме.
И контраст. Серый текст на сером фоне, тонкий белый шрифт на фото, светло-оранжевая кнопка с белой надписью изящно смотрятся на мониторе дизайнера и перестают читаться на телефоне под солнцем. По стандарту доступности WCAG контраст обычного текста с фоном должен быть не ниже 4,5:1. Проверить его можно в любом онлайн-калькуляторе контраста за минуту.
Ссылки, кнопки и иконки
- Ссылка выглядит как ссылка: выделена цветом или подчёркиванием и меняется при наведении. Если её не отличить от текста, на неё просто не нажмут.
- Кнопки одного типа одинаковы по всему сайту: один радиус скругления, одна высота, одни цвета.
- Иконки из одного набора и с одной толщиной линии. У каждой услуги своя иконка по смыслу. Одинаковые галочки у всех пунктов выдают ленивый дизайн с первого взгляда.
Сделайте скриншот страницы и уменьшите его до размера ладони. Если по-прежнему понятно, где заголовок, где кнопка и где границы блоков, иерархия работает. Если всё слилось в серую массу, дело в базе.
Шапка, меню и подвал
Шапка и подвал есть на каждой странице, поэтому их ошибки повторяются сотни раз. Здесь я придираюсь к мелочам сильнее всего.
Шапка
- Логотип слева и ведёт на главную, поэтому отдельный пункт «Главная» в меню лишний.
- Телефон кликабельный, рядом мессенджер. Для офлайн-бизнеса ещё город или адрес.
- Шапка появляется, когда человек начинает листать вверх, и прячется при чтении.
Меню и поиск
- 4-7 пунктов словами клиента. «Цены» понятнее, чем «Стоимость услуг и тарифы».
- Мега-меню оправдано, когда разделов много: каталог, направления, услуги с подуслугами.
- Поиск нужен сайтам с каталогом или блогом. Набрать слово проще, чем листать сотню статей.
Подвал
- Вторая навигация: разделы, услуги, контакты, соцсети. Каждый пункт кликабельный.
- Реквизиты компании, политика обработки персональных данных, оферта или договор.
- Год в копирайте подставляется автоматически. «© 2019» сообщает, что за сайтом давно никто не следит.
Контакты
- Все способы связи на одной странице, карта, время работы, схема проезда.
- Адрес и телефон перепроверены. Ошибка в номере дома стоит вам реальных клиентов.
- Короткая форма: имя, телефон, комментарий. Каждое лишнее поле отпугивает часть людей.
Ошибки, которые я вижу чаще всего
Когда клиент приносит сайт на редизайн, я начинаю с разбора. Список ниже собран из таких разборов. Большинство ошибок исправляется за день-два, а на заявки они влияют сильнее новой цветовой гаммы.
В заголовке перечислены четыре услуги сразу или стоит абстрактный слоган про качество и надёжность.
одна главная услуга в заголовке, остальные ниже отдельными блоками.
Стоковое фото с рукопожатием, общие слова и кнопка «Подробнее». Такой экран посетитель видел тысячу раз и пролистывает на автомате.
живое фото команды или продукта и конкретный заголовок с цифрой.
Позвонить, написать, подписаться, скачать, пройти квиз. Когда срочно всё, человек не выбирает ничего.
одно главное действие на экран, остальные вторым планом.
Логотип на полэкрана, крошечное меню или гамбургер на компьютере. Разделы теряются, а с ними и путь к заявке.
меню крупнее логотипа и на компьютере всегда открыто.
Логотип не на одной линии с меню, картинки уехали, у карточек разные отступы. Сайт выглядит сломанным, хотя всё работает.
общая сетка и повторяющиеся отступы на всех страницах.
Тот же цвет, никакого подчёркивания, при наведении ничего не происходит. Половина переходов теряется.
цвет или подчёркивание и заметная реакция при наведении.
Пустые рамки на месте фото, головы, срезанные краем экрана на телефоне.
проверка каждой страницы на телефоне и точка фокуса у каждого фото.
Мелкий шрифт, тяжёлые тени, узкая колонка посреди широкого экрана, «© 2019» в подвале. Первая мысль посетителя: компания вообще ещё работает?
обновить визуал и год, сверить цены и контакты.
Пара общих фраз и ни одного лица. Людям важно видеть, с кем они будут работать.
фото команды, история, цифры, документы и сертификаты.
Нет SSL-сертификата, и часть посетителей закрывает сайт, увидев предупреждение.
подключить сертификат, для большинства сайтов он бесплатный.
Одна строка с копирайтом или лента соцсетей. Потерянные переходы, подписки и звонки.
навигация, контакты, реквизиты и хотя бы один призыв к действию.
Заявки уходят в спам или в никуда, а владелец узнаёт об этом через месяц подозрительной тишины.
тестовая заявка после каждого изменения и уведомления в два канала.
Мобильная версия: рисую под палец
Откройте Яндекс Метрику, раздел «Отчёты», затем «Технологии» и «Устройства». У многих сайтов услуг и магазинов смартфоны дают больше половины визитов. Для них мобильная версия и есть основной сайт, а компьютерная идёт вторым номером.
Поэтому макет я рисую сразу в двух вариантах, для компьютера и для телефона. На телефоне часть блоков меняется местами, декоративные картинки уходят, страница становится короче. Уменьшенной копией десктопа мобильная версия быть не должна.
- Логотип и меню в одну строку, иконка меню заметная
- Кнопка звонка всегда под рукой в шапке
- Текст от 16 px, заголовки 26-34 px
- Кнопки высотой от 44-48 px, во всю ширину
- Поля формы друг под другом, с подписями
- Нет горизонтальной прокрутки
- Декоративные фото убраны, страница короче
- Анимаций меньше, чем на компьютере
Что обязательно проверить на телефоне
Наведение. Курсора на телефоне нет. Всё, что на компьютере появляется при наведении, подсказки, подменные картинки, выпадающие описания, на мобильном нужно показать по-другому. Без этого половина посетителей так и не узнает, что там было.
Зоны нажатия. Apple рекомендует делать их минимум 44 на 44 точки, Google 48 на 48. Мелкие ссылки в подвале, крестики у всплывающих окон и иконки соцсетей по 20 пикселей раздражают: в них трудно попасть пальцем с первого раза.
Формы. Печатать на телефоне неудобно, поэтому полей минимум, у поля телефона цифровая клавиатура, подпись стоит над полем. Подсказка внутри поля исчезает, как только человек начинает печатать, и он забывает, что именно вводил.
Реальные устройства. Эмулятор в браузере полезен, но показывает далеко не всё. Перед сдачей я смотрю сайт на iPhone в Safari и на Android в Яндекс Браузере и Chrome. Именно там вылезают сдвинутые блоки, прыгающие шапки и фоновые картинки, которые на iOS ведут себя по-своему.
Скорость: почему дизайнер считает килобайты
Большую часть веса страницы создаёт дизайн: фотографии, видео на фоне, шрифты, слайдеры, анимации. Поэтому о скорости я думаю уже в макете, задолго до того, как сайт попадёт к разработчику.
Для ориентира реальный пример из практики веб-дизайнеров на WordPress. После сжатия картинок, чистки шрифтов и настройки кэша вес главной упал с 6 до 2 МБ, запросов к серверу стало 48 вместо 103, а время появления главного блока сократилось с 2,3 до 1,7 секунды. Ни одного изменения в самом дизайне для этого не понадобилось.
Правила, которые я соблюдаю в макете
- Фото первого экрана до 200-300 КБ, в формате WebP или AVIF. Ширина по реальному месту на экране: около 1920 пикселей для фона во всю ширину, 800-1200 для картинок в контенте.
- Видео на первом экране ставлю, только когда без него правда никак. Чаще хватает сильного фото или короткого ролика без звука, который подгружается после основного контента.
- Шрифтов два семейства, начертаний три-четыре. Каждое начертание это отдельный файл, который скачивает каждый посетитель.
- Слайдер на первом экране меняю на одну сильную картинку. Второй и третий слайд видят единицы, а грузятся они у всех.
- Анимации появления только там, где они помогают читать. На телефоне их меньше.
- Сторонние виджеты считаю поштучно: чат, квиз, калькулятор, всплывающее окно, несколько счётчиков. Каждый тянет свой код.
Что на самом деле значат баллы PageSpeed
Клиенты часто присылают скриншот PageSpeed Insights с оранжевой цифрой и спрашивают, всё ли пропало. Этот балл считается в лаборатории, на эмуляции медленного телефона со слабым интернетом. Он хорошо подсказывает, где искать проблемы, и плохо подходит на роль цели.
Гораздо важнее три показателя Core Web Vitals, которые Google собирает по реальным посетителям:
До 2,5 секунды
Как быстро появляется главный элемент страницы, обычно фото или заголовок первого экрана.
До 200 мс
Как быстро сайт откликается на нажатие кнопки, открытие меню, ввод в форму.
До 0,1
Насколько прыгает вёрстка при загрузке. Тот случай, когда кнопка уезжает из-под пальца.
Для небольшого сайта зелёная зона по всем трём показателям вполне реальна. У большого портала с каталогом, видео и рекламой балл 60-70 может оказаться нормой, если реальные посетители при этом не ждут. У Яндекса своя оценка скорости, но медленный сайт одинаково раздражает людей в любой поисковой системе.
Полный список технических проверок перед запуском собран в нашем чек-листе запуска сайта.
Картинки, иконки и шрифты: права и качество
Картинка из поиска Яндекса или Google почти всегда кому-то принадлежит. Правообладатели находят свои фото на чужих сайтах с помощью программ, и претензию получает владелец сайта. По статье 1301 Гражданского кодекса компенсация за нарушение исключительного права составляет от 10 тысяч до 5 миллионов рублей. Сэкономленная лицензия на фото обходится дороже купленной.
Свои фото сильнее стоковых
Команда, офис, производство, готовые объекты. Даже хорошая съёмка на телефон при нормальном свете работает сильнее стокового офиса с улыбающимися моделями. Такие кадры узнают с первого взгляда и перестают им верить.
Стоки с проверкой лицензии
Бесплатные фотобанки вроде Unsplash и Pexels разрешают коммерческое использование, но у каждой лицензии есть свои условия. На платных стоках лицензия покупается под конкретное использование. Ссылку на источник и лицензию я сохраняю в папке проекта.
Нейросети для картинок
Фоны, иллюстрации, предметные сцены, концепты. Людей я ими не рисую, особенно «сотрудников» и «клиентов». Сгенерированная команда на странице «О нас» это обман, и посетители его чувствуют.
Иконки и шрифты
У бесплатных наборов иконок часто есть условие указать автора, у платных своя лицензия. Со шрифтами так же: часть бесплатна для любых целей, часть требует лицензии на веб-использование. Для русскоязычного сайта я ещё проверяю кириллицу и наличие всех нужных начертаний.
Как я готовлю фото для сайта
- Кадрирую под место на странице и ставлю точку фокуса, чтобы на телефоне лицо осталось в кадре.
- Привожу к одной цветовой обработке, чтобы кадры из разных съёмок смотрелись одной серией.
- Сохраняю в WebP в двух-трёх размерах под разные экраны.
- Даю понятное имя файлу и пишу описание (alt). Его читают поисковики и программы экранного доступа, которыми пользуются слабовидящие люди.
Доверие: что убеждает оставить заявку
Человек видит компанию впервые и ищет подтверждения, что ей можно доверить деньги. Дизайн отвечает за то, чтобы эти подтверждения было видно. Упоминание в прессе мелким шрифтом в подвале почти никто не заметит. Логотипы клиентов сразу под первым экраном заметят все.
Люди
Фото владельца и команды с именами и должностями. Страницы специалистов с опытом и сертификатами. Живое видео с объекта или из офиса.
Доказательства
Кейсы с цифрами и сроками. Отзывы с именами и ссылками на Яндекс Карты или 2ГИС. Логотипы клиентов, награды, публикации в СМИ.
Компания
Реквизиты: ИНН, ОГРН, юридический адрес. Офисы с картой, телефоны, время работы. Договор или оферта, которые можно открыть до оплаты.
Безопасность
Замок HTTPS в адресной строке. Политика обработки персональных данных и отдельное согласие у каждой формы. Уведомление о cookie, если на сайте стоит Метрика.
Отзывы должны быть настоящими. Реальный отзыв с именем, фотографией или ссылкой на карточку компании на картах весит больше десятка анонимных. Одинаковые пятизвёздочные тексты без имён дают обратный эффект: посетитель начинает сомневаться и в остальном. Как доверие к сайту связано с поиском, мы разбирали в статье про E-E-A-T в 2026 году.
С 1 сентября 2025 года согласие на обработку персональных данных оформляется отдельно от других документов, и галочку человек ставит сам. Форма без политики и согласия создаёт риск штрафа, и отвечает за это владелец сайта. Как подать уведомление в Роскомнадзор, мы рассказали в отдельной инструкции.
Нейросети в дизайне: заменят ли дизайнера
Этот вопрос мне задают почти на каждой встрече. Короткий ответ: нейросети сильно ускоряют работу, а сайт, который продаёт, по-прежнему собирает человек.
ИИ-конструкторы за несколько минут выдают страницу с текстами и картинками. Выглядит она как средний шаблон, и это видно. Даже авторы обучающих курсов, которые показывают такие конструкторы, после генерации вручную переделывают шапку, первый экран, шрифты и подвал. Сгенерированный первый экран получается устаревшим и похожим на тысячи других.
- Черновые тексты в макете вместо «рыбы». Клиент видит живую страницу и быстрее принимает решение.
- Идеи для мудборда, фоны, иллюстрации, предметные сцены.
- Варианты баннеров и обложек для тестов.
- Проверка текстов на ошибки и варианты формулировок для кнопок.
- Подсказки по техническим вопросам, которые потом проверяет специалист.
- Понять бизнес клиента, его аудиторию и конкурентов.
- Выстроить путь к заявке и расставить приоритеты на странице.
- Сохранить фирменный стиль во всех деталях, от иконки до баннера.
- Отвечать за результат, права на изображения и персональные данные.
- Почувствовать, что вызовет доверие у конкретного человека.
Отдельно про данные. Письма клиентов, базы, телефоны и договоры я в зарубежные нейросети не загружаю. Для рабочих задач есть российские сервисы, например YandexGPT, GigaChat, Шедеврум и Kandinsky, но персональные данные и туда лучше не отправлять. Как мы используем нейросети для рекламных баннеров, подробно рассказано в статье «Рекламные креативы нейросетями».
Нейросеть быстро делает средний вариант. Моя работа начинается там, где средний вариант клиента уже не устраивает.
Виктория Константинова, дизайнер Hated.RuКогда сайту пора на редизайн
Клиенты приходят к нам с разными словами. «Сайт какой-то несовременный», «заявок стало меньше», «конкуренты выглядят солиднее». За этими фразами почти всегда стоит одна из конкретных проблем, и дизайн решает далеко не каждую. Красивее ради красоты делать незачем: если сайт скучный, но приносит клиентов, его лучше улучшать точечно.
Отметьте пункты, которые узнаёте в своём сайте.
- Сайту больше пяти лет, и по шрифтам, фото и вёрстке это заметно
- На телефоне текст приходится увеличивать пальцами
- С первого экрана непонятно, чем вы отличаетесь от конкурентов
- На сайте нельзя записаться, купить или рассчитать цену онлайн
- На странице «О нас» нет ни одного человека
- Нет отзывов, кейсов и логотипов клиентов
- На мобильном интернете сайт открывается заметно дольше, чем сайты конкурентов
- Чтобы поменять цену или текст, нужен программист и неделя ожидания
- Цены, контакты или адрес на сайте давно устарели
- В формах нет политики и согласия на обработку персональных данных
- Конкуренты в выдаче выглядят современнее и солиднее
- Ссылку на сайт неловко отправлять партнёрам и знакомым
Последний пункт звучит несерьёзно, но я отношусь к нему внимательно. Когда владельцу неловко показывать сайт, он перестаёт его упоминать в разговорах, не ставит ссылку в подпись и визитки. Сайт выпадает из продаж ещё до того, как до него дошёл клиент.
Как мы работаем над дизайном сайта
Хороший дизайн начинается задолго до Figma. Вот как обычно проходит работа над сайтом у нас, от первого разговора до запуска.
Бриф и цели
Разговор о бизнесе: кто клиенты, откуда они приходят, что человек должен сделать на сайте, кто конкуренты и какие сайты нравятся самому заказчику. На выходе понятная цель: заявки, звонки, продажи или запись.
Разбор текущего сайта
Если сайт уже есть, сохраняем скриншоты всех страниц, тексты, ссылки и замеры скорости. Проверяем, какие счётчики и скрипты вшиты в шаблон, чтобы при переезде ничего не потерять. Вместе с SEO-специалистом составляем карту адресов и перенаправлений со старых страниц на новые.
Структура и прототип
Раскладываем страницы и блоки в простом чёрно-белом прототипе. Здесь решается главное: порядок блоков, путь к заявке, содержание первого экрана.
Дизайн главной
Рисую главную страницу для компьютера и телефона. На ней утверждаем стиль: шрифты, цвета, фото, кнопки, иконки.
Остальные страницы и правки
Внутренние страницы собираются на утверждённом стиле. Правки удобнее всего присылать одним списком на каждый этап: так ничего не теряется и сроки держатся.
Вёрстка и сборка
Разработчики собирают сайт на 1С-Битрикс, Tilda или WordPress. Я сверяю результат с макетом на разных экранах.
Проверка и запуск
Проходим чек-лист приёмки, открываем сайт для поисковиков, подключаем Метрику и цели. После запуска смотрим на первые заявки и поведение посетителей.
Как смотреть макет, чтобы правки помогали
Смотрите на телефоне
Откройте макет или ссылку на прототип со смартфона. Именно так сайт увидит большая часть ваших клиентов.
Оценивайте по задаче
Главный вопрос к макету звучит так: поймёт ли клиент за пять секунд, что вы предлагаете и куда нажать. Любимый цвет директора здесь вторичен.
Описывайте проблему
«Кнопку не видно на фоне фото» полезнее, чем «сделайте кнопку красной». Когда дизайнер понимает причину, он найдёт решение, которое не сломает остальную страницу.
Собирайте правки в один список
Покажите макет всем, кто принимает решение, и пришлите общий список. Правки по одной в течение недели от трёх разных людей противоречат друг другу и съедают сроки.
- Логотип в векторе и брендбук, если он есть
- Список услуг или товаров с ценами
- Фотографии команды, офиса, работ
- Отзывы и кейсы, которые можно показать
- Три-пять сайтов, которые нравятся, и чем именно
- Сайты главных конкурентов
- Доступы к текущему сайту, хостингу и Метрике
- Реквизиты и документы для раздела о компании
- Все ссылки и кнопки ведут куда нужно, логотип открывает главную
- Тестовые заявки из всех форм пришли на почту и в мессенджер
- Оплата проходит и чек приходит, если это магазин
- Все картинки загружаются и сжаты, файлов по 2-3 МБ нет
- Сайт проверен на iPhone и Android, горизонтальной прокрутки нет
- В текстах нет опечаток, цены и контакты актуальны
- Год в подвале подставляется автоматически
- У каждой формы стоят политика и согласие на обработку данных
- Работает HTTPS, старые адреса перенаправлены на новые
- Сайт открыт для индексации, Метрика и цели работают
- Всё, о чём договорились в брифе, есть на сайте
Сколько стоит дизайн сайта
Цену дизайна определяет объём работы. Вот что влияет на смету сильнее всего:
- Число уникальных шаблонов страниц. Двадцать карточек услуг на одном шаблоне обходятся дешевле пяти разных страниц.
- Мобильная версия и планшет. Адаптив нужен всегда, а сложным блокам для телефона требуется отдельное время.
- Графика. Собственные иллюстрации, иконки, анимации и 3D стоят дороже стоковых и работают сильнее.
- Контент. Тексты, фотосъёмка, обработка фото, наполнение каталога.
- Функции. Калькуляторы, квизы, личный кабинет, фильтры каталога, интеграции с 1С и CRM.
| Услуга | Стоимость |
|---|---|
| Лендинг на Tilda | от 15 000 ₽ |
| Сайт-визитка на Tilda | от 20 000 ₽ |
| Лендинг на 1С-Битрикс | от 15 000 ₽ |
| Сайт-визитка на 1С-Битрикс | от 15 000 ₽ |
| Корпоративный сайт на 1С-Битрикс | от 50 000 ₽ |
| Корпоративный сайт на Tilda | от 55 000 ₽ |
| Интернет-магазин на Tilda | от 35 000 ₽ |
| Интернет-магазин на WordPress | от 90 000 ₽ |
| Интернет-магазин на 1С-Битрикс | от 100 000 ₽ |
| Вёрстка по макету из Figma | от 30 000 ₽ |
| Графический дизайн | от 10 000 ₽ |
| Разработка логотипа | от 5 000 ₽ |
| Брендбук | от 50 000 ₽ |
| Доработка сайта на Tilda | от 1 500 ₽ |
| Доработка сайта на 1С-Битрикс | от 3 000 ₽ |
Точную смету считаем после брифа, когда понятны объём страниц, функции и контент. Если сайт у вас уже есть и хочется свежего взгляда, начните с аудита: что мы в нём проверяем, описано в статье «UX/UI-аудит сайта перед редизайном».
Вопросы и ответы
Лендинг или визитка занимают от одной-двух недель, корпоративный сайт от месяца, магазин дольше, в зависимости от каталога. Чаще всего сроки растягиваются из-за контента: текстов, фото и ответов на правки. Когда материалы готовы заранее, проект идёт заметно быстрее.
Можно, для старта это нормальный вариант. Шаблон экономит время, но его всё равно нужно адаптировать: заменить тексты и фото, убрать лишние блоки, настроить мобильную версию. Уникальный дизайн нужен, когда важно выделиться среди конкурентов или структура не укладывается в готовые решения.
Tilda удобна для лендингов и небольших сайтов, которые нужно быстро запустить и править своими силами. 1С-Битрикс выбирают для корпоративных сайтов и магазинов с каталогом, интеграцией с 1С и сложной логикой. Хороший дизайн можно сделать на обеих платформах.
Одним списком на каждый этап согласования. Так дизайнер видит всю картину, правки не противоречат друг другу, и ничего не теряется в переписке. Количество этапов согласования фиксируется в договоре до старта. Новые блоки и страницы, которые появились после утверждения макета, оцениваются отдельно.
Такой сайт лучше улучшать точечно: первый экран, мобильную версию, скорость, формы. Полный редизайн имеет смысл, когда сайт устарел визуально и технически, его неудобно поддерживать или он перестал соответствовать масштабу бизнеса.
Для черновика и проверки идеи да. Для рабочего сайта понадобится доработка: структура под вашу аудиторию, свои фото и тексты, мобильная версия, скорость, юридические документы и подключение аналитики.
Балл считается на эмуляции медленного телефона и сильно зависит от картинок, шрифтов и сторонних виджетов. Смотрите на Core Web Vitals: LCP до 2,5 секунды, INP до 200 миллисекунд, CLS до 0,1. Если они в зелёной зоне, оранжевый балл ещё не катастрофа.
Лучший вариант это съёмка: даже один день с фотографом закрывает первый экран, страницу «О нас» и услуги. Пока её нет, подойдут фотобанки с понятной лицензией и фоны или иллюстрации, созданные нейросетью. Команду и клиентов лучше показывать только настоящих.
Логотип и фирменный стиль, список услуг с ценами, фотографии, отзывы, примеры сайтов, которые нравятся, и доступы к текущему сайту и Метрике. Полный список есть в чек-листе в разделе о процессе.
Да. Делаем дизайн и разработку сайтов на 1С-Битрикс, Tilda и WordPress, фирменный стиль, логотипы и графику для рекламы. Офисы в Москве, Туле и Рязани, работаем по всей России. Напишите на offer@hated.ru или позвоните +7 985 220-54-74.
Разберём ваш сайт или идею, покажем, где теряются заявки, и предложим структуру. Дизайн, разработка на 1С-Битрикс или Tilda, SEO и реклама в одной команде.
Виктория Константинова
Графический дизайнер Hated.Ru. Окончила Высшую школу экономики по направлению «Коммуникационный дизайн», 4 года коммерческой практики. Отвечает за визуальную часть проектов студии: сайты, фирменный стиль, рекламу и полиграфию.
