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

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

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

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

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


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

Блочной, а не табличной.

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

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

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

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


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

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

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

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

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

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


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

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

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

Таблицы стилей должны выноситься в отдельные CSS-файлы.

Блочной, адаптивной и кроссбраузерной (одинаково отображаться в разных браузерах).

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

Все элементы, которые можно сверстать текстом, должны быть сверстаны текстом, а не картинками.

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

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


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

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

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

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

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


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


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

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


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

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

Для небольших типовых проектов также лучше  или выбирать специалистов из . Например, сверстать типовой лендинг на 3-5 экранов или типовой сайт-визитку. Если бюджет сильно ограничен, можно заказать услугу новичкам с небольшим опытом и расценками. Если бюджет позволяет, выбирайте людей с опытом: вы снизите риск получить работу с багами или срыва сроков.

Если вам нужно сверстать более сложный сайт или интернет-магазин, ищите исполнителей среди топовых фрилансеров. Как правило, им по плечу сложные проекты. Качество может быть таким же, как в студиях, а цены – в 2 раза ниже. Искать таких исполнителей , а также по рекомендациям.

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

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

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