Вёрстка сайта по макету

Когда нужна только вёрстка

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

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

Как мы верстаем

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

Если макет нарисован только для компьютера, мобильную версию продумываем вместе с вами — подробнее на странице мобильной версии сайта.

В каком виде отдаём результат

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

Если ваша команда работает с конкретным фреймворком или сборщиком, подстраиваемся под него и под ваши правила оформления кода, чтобы вёрстка легла в проект без переделок.

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

Проверка перед сдачей

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