Разработка сайтов 4 мин чтения

Адаптация дизайна АСПРО: что можно менять

Что меняется в дизайне АСПРО настройками решения, что требует вёрстки и как часы дизайна зависят от числа отдельных макетов ключевых страниц сайта.

28.09.2026 Обновлено 06.10.2026 Олег Макаров, ADSCentr

Дизайн АСПРО адаптируется под бренд: фирменные цвета, шрифты, логотип, состав и порядок блоков меняются настройками решения. Глубже — отдельные макеты страниц, нестандартные секции и своя сетка каталога: это работа дизайнера и верстальщика. Дизайн считается по ставке от 1 500 ₽ за час, часы фиксируются до старта; готовое решение не означает одинаковый сайт у всех.

Что меняется настройками

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

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

Что требует вёрстки

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

Такие блоки верстают в child-шаблоне. Изменения хранятся отдельно от кода продукта, поэтому обновления решения их не затирают. Правки прямо в файлах решения не делаем: первое же обновление их заберёт.

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

Этапы разработки сайта

  1. Бриф

    задачи, аудитория, рамки бюджета

  2. Оценка

    состав работ, сроки, вилка цен

  3. Прототип

    структура страниц и сценарии

  4. Дизайн

    макеты страниц и мобильных версий

  5. Сборка

    вёрстка, платформа, интеграции

  6. Контент

    тексты, изображения, наполнение каталога

  7. Тестирование

    устройства, формы, скорость, аналитика

  8. Передача

    обучение, доступы, месяц сопровождения

Сколько часов занимает адаптация

Объём зависит от числа отдельных макетов, а не от размера сайта. Один шаблон карточки обслуживает тысячи товаров, десять нестандартных разделов — это десять макетов. Ориентиры по проектам целиком: корпоративный сайт — 40–⁠60 часов работ, интернет-магазин с обменом с 1С и кабинетом дилера — от 100 часов.

Дизайн считается по ставке от 1 500 ₽ за час, вёрстка и программирование — от 2 000 ₽ за час. Часы фиксируются до старта: в смете видно, сколько времени заложено на каждый макет. Страницы, которые собираются из готовых блоков, отдельными часами не считают — их верстают по уже согласованным макетам.

Объём увеличивают:

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

Что сокращает срок

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

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

Что дизайн изменить не может

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

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

Где смотреть условия и расчёт

Условия и состав работ приведены на странице сайты на АСПРО; отдельное направление дизайна описано на странице дизайна. Предварительный расчёт часов по набору макетов и модулей даёт калькулятор.

Частые вопросы

Будет ли сайт похож на другие проекты на АСПРО

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

Можно ли обойтись без дизайнера

Можно, если есть фирменный стиль и готовые макеты. Тогда цвета и шрифты настраиваем по брендбуку, а отдельные страницы собираем из готовых блоков. Времени и денег уходит меньше.

Сколько макетов нужно для магазина

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

Входит ли мобильная версия в адаптацию дизайна

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

Олег Макаров — основатель ADSCentr, Санкт-Петербург

Ведёт проекты по SEO, Яндекс.Директу и разработке на WordPress, 1С-Битрикс и Laravel: от аудита и семантики до внедрения и аналитики. Подробнее об опыте →

Нужна такая же работа по вашему сайту?

Начнем с бесплатного аудита точек роста — пришлем разбор за 3 дня.

Получить аудит точек роста →