Сколько стоит верстка сайта: цены у фрилансеров и студий

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

Что такое верстка сайта и в чем суть данной услуги?

Верстка – это процесс создания HTML-разметки страниц сайта на основе PSD-макета дизайнера.

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

Современная верстка должна быть:

1. Блочной, а не табличной.
2. Кроссбраузерной, т.е. сайт должен одинаково отображаться в разных браузерах (Google Chrome, Яндекс.Браузер, Opera, Mozilla, Internet Explorer, Safari и других).

3. Адаптивной, т.е. дизайн сайта должен адаптироваться под экран пользователя и выглядеть приемлемо на больших и маленьких экранах.

На входе вы отдаете верстальщику PSD-макеты, полученные от дизайнера. На выходе получаете файл с версткой и CSS-файлы со стилями. Некоторые верстальщики могут интегрировать верстку в систему управления сайтом (CMS). Иногда это входит в услугу, иногда делается за доплату. Стоит уточнить у специалиста до начала работы, будет он интегрировать макет в CMS или нет, и сколько стоит данная услуга.

Стоимость верстки сайта напрямую зависит от объема работы и сложности проекта. Прежде, чем мы перейдем к вопросу, сколько стоит верстка, давайте разберемся – на что она влияет и каким требованиям должна соответствовать?

На что влияет верстка и почему она важна?

Вот несколько параметров, которые зависят от качества верстки на сайте или в интернет-магазине:

1. Скорость загрузки сайта и время, через которое браузер начинает отрисовывать страницы на экране пользователя. Чем лучше написан код, тем быстрее будет появляться контент. Это положительно влияет на SEO и конверсию, т.к. меньше пользователей будут уходить в ожидании загрузки сайта.
2. Корректность отображения сайта. Если верстка сделана с ошибками, в некоторых браузерах дизайн может искажаться вплоть до того, что сайтом будет невозможно пользоваться.
3. Простота поддержки. Качественный и структурированный код с комментариями проще понять другим разработчикам. Если вы привлечете к поддержке других специалистов, они быстрее смогут вносить изменения в верстку и возьмут за это меньше денег.

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

Какой должна быть качественная верстка?

1. Соответствовать PSD-макету. Внешний вид меню, форм, кнопок и других элементов, размеры шрифтов, отступы и т.д. должны быть такими же, как в макете или очень близки к нему. Например, если в макете у кнопки закругленные края, на сайте они должны быть тоже закругленными.
2. Код должен быть компактным и хорошо структурированным. В нем должны быть комментарии, которые помогут другим разработчикам разобраться в верстке и вносить в нее изменения.
3. Таблицы стилей должны выноситься в отдельные CSS-файлы.
4. Блочной, адаптивной и кроссбраузерной (одинаково отображаться в разных браузерах).
5. Название стилей должно быть логичным и продуманным.
6. Все элементы, которые можно сверстать текстом, должны быть сверстаны текстом, а не картинками.

7. Учитывать требования со стороны SEO. Часть этих требований можно найти в статье про технический аудит. Например, нельзя оформлять элементы в шаблоне страницы тегами H1…H7. Они должны использоваться только для разметки заголовков и подзаголовков в основном контенте страницы.

Допускается отклонение от макета на 3-5 пикселей, т.к. не всегда можно сверстать страницы так, как нарисовал дизайнер. Поэтому не стремитесь заказывать верстку Pixel Perfect (когда страница на экране полностью соответствует макету, без каких-либо отступлений), т.к. подобная верстка очень дорога, не всегда технически реализуема и чаще всего не имеет смысла (пользователю не важно, если какая-то кнопка будет на 2 пикселя больше, чем в PSD-макете).

Сколько стоит верстка в студиях и у фрилансеров?

Стоимость верстки зависит от времени, которое потребуется для оказания услуги:

• Стоимость часа верстальщика в студиях составляет в среднем от 1200 до 1500 рублей.

• Расценки верстальщиков-фрилансеров примерно в 2 раза меньше – от 500-600 руб. Новички могут брать еще меньше – от 100-300 руб. в час, но это низкие расценки. Важно понимать, что не все проекты могут сделать начинающие специалисты.

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

Стоимость верстки сайтов в студиях

Наименование услуги	Цена верстки, руб.
Верстка сайта по макету PSD	от 10-15 тыс. руб. в региональных студиях, от 30-40 тыс. руб. в московских студиях
Верстка лендинга	от 10 тыс. руб.
Верстка интернет-магазина	от 30-40 тыс. руб.
Внедрение адаптивной верстки на сайте	от 10-15 тыс. руб.
Стоимость верстки в топовых студиях	от 100 тыс. руб. за проект
Стоимость мелких правок в верстке, доработок	Обычно не берутся, т.к. не рентабельно.

Стоимость верстки сайтов у фрилансеров (частных специалистов)

Наименование услуги	Цена верстки, руб.
Верстка сайта по макету PSD	от 5 тыс. руб.
Верстка простого лендинга с типовыми элементами	от 1-3 тыс. руб.
Верстка сложного лендинга	от 3-5 тыс. руб.
Верстка интернет-магазина	от 10 тыс. руб.
Верстка одной страницы сайта	от 1-3 тыс. руб.
Внедрение адаптивной верстки на сайте	от 3 тыс. руб.
Стоимость верстки одного блока / экрана	от 500 руб.
Мелкие правки на странице	от 300-500 руб.
Добавление формы, калькулятора на страницу, слайдера с фотографиями	от 1-1,5 тыс. руб.

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

Как выбрать верстальщика?

• Если вам нужно поправить верстку одной страницы на готовом сайте или внести мелкие правки в дизайн, лучше обратиться к фрилансерам. Например, найти хорошего верстальщика на бирже Кворк или других биржах фрилансеров. Так вы быстро и недорого решите проблему. Выбирайте специалиста, который давно работает на бирже, имеет много положительных отзывов и проекты в портфолио, которые по сложности похожи на ваш сайт. Плюсом будет наличие опыта работы с CMS, на которой сделан ваш проект.
• Для небольших типовых проектов также лучше нанимать фрилансеров с бирж или выбирать специалистов из каталога. Например, сверстать типовой лендинг на 3-5 экранов или типовой сайт-визитку. Если бюджет сильно ограничен, можно заказать услугу новичкам с небольшим опытом и расценками. Если бюджет позволяет, выбирайте людей с опытом: вы снизите риск получить работу с багами или срыва сроков.
• Если вам нужно сверстать более сложный сайт или интернет-магазин, ищите исполнителей среди топовых фрилансеров. Как правило, им по плечу сложные проекты. Качество может быть таким же, как в студиях, а цены – в 2 раза ниже. Искать таких исполнителей можно в каталогах фрилансеров, а также по рекомендациям.
• Для верстки простого, но объемного проекта лучше заказать услуги команды фрилансеров или небольшой студии эконом или среднего ценового сегмента. Так вы получите готовый проект в приемлемые сроки и сэкономите деньги без потери в качестве.

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

Качество верстки страниц сильно зависит от качества PSD-макетов, которые предоставил дизайнер. Поэтому до начала работы покажите макеты верстальщику, чтобы он оценил их и, если что-то требуется уточнить или исправить, смог обратиться к вашему дизайнеру и переговорить напрямую.