Верстка сайта
Переводим утвержденный макет в HTML, CSS и JavaScript. Страницы адаптируются к ширине экрана, а кнопки, поля, меню, формы и простой интерактив получают согласованные состояния.
Когда верстку заказывают отдельно
Верстку можно заказать как отдельный этап со своим дизайнером или разработчиком.
Подходит отдельная верстка
- Дизайн уже утвержден. Макет готов, и по нему нужно собрать страницы для браузера.
- Дизайн делала другая команда. Берем на себя верстку, а спорные места уточняем у дизайнера до начала работы.
- У вас есть свой программист. Передаем ему комплект кода и описание структуры файлов.
- CMS будет подключаться позже. Сначала делаем адаптивную верстку, затем ее можно подключить к 1С-Битрикс или WordPress.
- Проект разделен на этапы. Этапы можно заказать и принять по отдельности.
- Нужен один блок или одна страница. Верстаем локальную часть нового макета без разработки всего сайта.
Сначала нужен другой этап
- Макета нет. Сначала нужен дизайн.
- Готовый сайт сломан на телефоне. Задача относится к адаптации сайта.
- Нужно изменить старый код. Задача относится к доработке сайта.
Стоимость верстки
Точную сумму называем после просмотра макета и состава страниц.
Верстка по готовому макету
от 7 000 руб.Проверим страницы, уникальные шаблоны, мобильную версию, состояния и интерактив.
Цены на верстку
- Отдельный блок — от 7 000 руб.
- Простая страница — от 15 000 руб.
- Лендинг — от 25 000 руб.
- Корпоративный сайт — от 40 000 руб.
- Премиум-корпоративный — от 65 000 руб.
- Каталог или магазин — от 80 000 руб.
- Сложный интерфейс — по смете от 110 000 руб.
- Правки после утверждения — 3 000 руб./час
Что входит в верстку
- Разбор страниц, блоков, шаблонов и состояний в макете
- HTML-структура согласованных страниц и шаблонов
- CSS для сетки, отступов, цветов, шрифтов, карточек, форм, таблиц и кнопок
- Адаптив для компьютера, планшета и телефона
- Состояния кнопок, ссылок, полей, форм, меню и всплывающих окон
- Простой JavaScript для меню, вкладок, раскрывающихся блоков, модальных окон, слайдеров, переключателей и аккордеонов
- Подготовка изображений, иконок и шрифтов для страниц
- Проверка в популярных браузерах и на разных ширинах экрана
- Сверка результата с макетом и исправление ошибок нашей работы
- Передача HTML, CSS, JavaScript, изображений и описания структуры файлов
Что меняет оценку
Объем зависит от числа уникальных страниц, шаблонов и блоков, полноты мобильной версии и состояний, анимации и интерактива. Для каталога, магазина или сложного интерфейса отдельно смотрим фильтры, личный кабинет, серверную логику, интеграции, роли и зависимости между состояниями.
Что вы получаете после верстки
Комплект можно передать своей команде или использовать для следующего этапа у Менокома.
Страницы открываются в браузере
HTML согласованных страниц и шаблонов открывается в браузере и сохраняет утвержденную структуру.
Стили и скрипты подключены по порядку
CSS и JavaScript подключены в порядке, который описан в структуре проекта.
Изображения, иконки и шрифты в комплекте
В комплект входят подготовленные изображения, иконки и передаваемые шрифты, использованные на страницах.
Страницы перестраиваются под экран
Страницы перестраиваются под согласованные ширины, элементы показывают предусмотренные состояния.
Короткое описание структуры
В коротком описании указано, где находятся страницы, стили, скрипты и шрифты и что учесть при подключении к CMS.
Сайты, которые сделал Меноком
Эти сайты Меноком разрабатывал целиком — от дизайна до запуска. Они показывают выполненные работы компании, но не подтверждают отдельный заказ верстки по чужому макету.
Корпоративный сайт с услугами, ценами, проектами и статьями.
Посмотреть проект →
Сайт-каталог с сотнями товаров, фильтрами и региональными страницами.
Посмотреть проект →
Сайт академии тенниса с занятиями, тренерами, расписанием и ценами.
Посмотреть проект →
Сайт школы финансовой грамотности с программами и онлайн-оплатой.
Посмотреть проект →
Сайт сети центров кузовного ремонта с услугами и быстрым обращением.
Интернет-магазин морепродуктов с каталогом и оформлением заказа.
Интернет-магазин электроинструмента с большим каталогом и поиском.
Сайт-каталог строительной компании с проектами домов и бань.
Корпоративный сайт компании с направлениями работы и каталогом продукции.
Интернет-магазин косметики с каталогом, акциями и подборками.
Сайт детейлинг-центра с услугами, ценами и записью.
Топ-Ремонт
Пришлите макет на оценку
Если данных достаточно, назовем стоимость и срок. Если нет — перечислим, что нужно уточнить до оценки.
- Макет и список страниц или блоков.
- Мобильная версия и состояния элементов, если они есть.
- Интерактивные элементы и будущая система управления.
Что прислать для оценки
Чем полнее исходные данные, тем меньше решений придется согласовывать после начала работы.
Утвержденный макет
Исходный файл с утвержденными страницами, блоками и размерами.
Список страниц и шаблонов
Отметьте уникальные страницы и повторяющиеся шаблоны, которые нужно сверстать.
Мобильная версия
Показывает, как перестраиваются меню, карточки, таблицы и формы. Если ее нет, сначала оценим, можно ли собрать адаптив по логике макета; сложные экраны согласуем отдельно.
Состояния элементов
Кнопки, поля, ошибки, успешная отправка, меню, всплывающие окна и вкладки.
Шрифты, изображения и иконки
Нужны исходные файлы и право использовать их в проекте.
Комментарии к интерактиву
Что открывается, закрывается, переключается и двигается.
Следующий этап
Укажите, кто подключит код к CMS: Меноком или ваша команда.
Пришлите исходный файл макета. Сначала проверим, доступны ли в нем слои, шрифты, графика и состояния.
Как проверяем верстку перед сдачей
Проверяем страницы, файлы и согласованные состояния.
Адаптив
Проверяем страницы в популярных браузерах и на разных ширинах экрана: без горизонтальной прокрутки, наездов текста, сломанных колонок и слишком мелких кнопок.
Сверка с макетом
Смотрим цвета, шрифты, отступы, расположение блоков и согласованные состояния.
Интерактив
Проверяем меню, вкладки, раскрывающиеся блоки, модальные окна, слайдеры и переключатели.
Код и файлы
Ищем ошибки разметки, лишние файлы, тяжелые изображения и неверный порядок подключения стилей и скриптов.
Ошибки нашей работы
Если после сдачи работ находится ошибка в нашей работе, исправляем ее бесплатно в течение трех месяцев.
Новые требования
Изменения утвержденного макета, новые блоки и новая логика относятся к отдельной задаче.
Как проходит верстка
Каждый этап заканчивается результатом, который можно проверить.
- 01
Разбираем макет
Смотрим страницы, мобильную версию, состояния, шрифты и интерактив.
Результат: вопросы собраны, состав макета понятен.
- 02
Фиксируем состав
Записываем страницы, блоки, состояния, границы верстки и следующий этап.
Результат: состав работ согласован.
- 03
Верстаем страницы
Собираем согласованные страницы по утвержденному макету.
Результат: страницы открываются в браузере.
- 04
Настраиваем адаптив
Настраиваем перестроение страниц и согласованные состояния элементов.
Результат: страницы работают на согласованных ширинах экрана.
- 05
Проверяем
Сверяем результат с макетом, проверяем разметку, файлы и простой интерактив.
Результат: ошибки нашей работы исправлены, комплект готов к передаче.
- 06
Передаем код
Передаем комплект файлов и короткое описание структуры. Если следующий этап выполняет Меноком, подключение начинается с подготовленной структуры.
Результат: материалы находятся у клиента или команды подключения.
Почему Меноком
Шесть оснований заказать у нас отдельную верстку.
Учитываем подключение
Заранее уточняем, кто и к какой CMS будет подключать код, и подготавливаем структуру файлов.
Не смешиваем услуги
Заранее фиксируем, что входит в верстку и что остается следующим этапом.
Адаптив входит в работу
Перестроение страниц и согласованные состояния проверяем вместе с основной версткой.
Можно заказать один этап
Работаем с макетом вашего дизайнера и передаем результат вашему разработчику.
Код и файлы остаются у вас
Комплект передаем вместе с описанием структуры.
Разрабатываем сайты с 2004 года
С 2004 года с Менокомом работали более 1600 клиентов из 80 тематик.
Верстка в проектах клиентов
В этих отзывах верстка названа частью комплексной разработки сайта. Отдельный заказ верстки по чужому макету они не подтверждают.
ОМТ-Мебель
Частые вопросы
01Верстка — это уже готовый сайт?
Нет. Верстка — это HTML, CSS и JavaScript по макету. Страницы открываются в браузере, но админки в них нет. Управление контентом появляется после подключения к 1С-Битрикс или WordPress.
02Можно сверстать без дизайна или по картинке?
Без утвержденного макета верстка превращается в дизайн по ходу работы. Если исходный файл неполный, сначала проверим, достаточно ли в нем размеров, шрифтов, графики, мобильной версии и состояний.
03Что делать, если в макете нет мобильной версии?
Сначала оценим, можно ли собрать адаптив по логике макета. Для таблиц, сложных карточек и нестандартных экранов может понадобиться отдельный мобильный дизайн.
04Формы будут отправлять заявки?
В верстке форма показывает состояния заполнения, ошибки и успешной отправки. Настоящую отправку на почту, в Telegram или CRM настраивают при подключении к CMS.
05Вы подключаете верстку к Битриксу или WordPress?
Да, это отдельный этап. Если верстку делали мы, подключение начинается с нашей структуры файлов.
06Можно передать вашу верстку другой команде?
Да. Передаем HTML, CSS, JavaScript, изображения, передаваемые шрифты и короткое описание структуры файлов.
07Можно сверстать одну страницу или один блок?
Да. Состав фиксируем по макету: от одного блока до набора шаблонов сайта.
08Что происходит, если после начала изменился макет?
Новые блоки, новая структура и изменение согласованной логики становятся отдельной задачей.
09Есть ли гарантия?
Если после сдачи работ находится ошибка в нашей работе, исправляем ее бесплатно в течение трех месяцев.
10В каких браузерах проверяете?
Проверяем на компьютере, планшете и телефоне в популярных браузерах. Особые требования к устройствам и старым браузерам фиксируем до начала работы.
11Повлияет ли верстка на позиции сайта в поиске?
Верстка отвечает за код страниц, адаптив и состояния элементов. Позиции зависят и от других факторов; SEO не входит в эту услугу.
12Какие работы относятся к отдельным задачам?
Дизайн и структура сайта, тексты, подбор фотографий, новая графика, подключение к CMS, отправка форм, PHP, API, база данных, корзина, фильтры, поиск, личный кабинет, авторизация, хостинг, домен, почта, аналитика, реклама, SEO и исправление старой чужой верстки не входят в отдельную верстку по макету.
Если нужен сайт целиком
Разработаем сайт с дизайном, сборкой и запуском.
Прислать макет на оценку
Пришлите макет, список страниц и блоков, мобильную версию и состояния, если они есть. Напишите, какие элементы должны открываться или переключаться и кто будет подключать код к CMS. Если данных достаточно, назовем стоимость и срок. Если нет — перечислим, что нужно уточнить до оценки.
