Макет — это картинка, нарисованная в Figma. Она показывает, как сайт должен выглядеть на одном размере экрана. Вёрстка превращает картинку в код, который браузер показывает одинаково хорошо на сотнях разных устройств.
Что делает верстальщик
- Переводит макет в HTML и CSS.
- Настраивает, как блоки перестраиваются на разных экранах.
- Оптимизирует изображения и шрифты для быстрой загрузки.
- Проверяет сайт в разных браузерах.
- Делает разметку понятной для поисковиков и экранных читалок.
Где макет и сайт расходятся
- В макете короткие тексты, а реальные заголовки длиннее и ломают блоки.
- Нарисован только компьютер, а мобильную версию «додумывают» на ходу.
- Нет состояний: как выглядит кнопка при нажатии, ошибка в форме, пустой список.
- Красивые эффекты, которые тормозят на телефоне.
Как избежать проблем
Попросите дизайнера нарисовать мобильные версии ключевых страниц и состояния элементов. Подставляйте в макет реальные тексты. Согласовывайте вёрстку на тестовом сайте, а не по скриншотам.
Полную картину стоимости работ даёт статья «Сколько стоит разработка сайта и из чего складывается смета».
Нужна помощь с сайтом?
Расскажите о задаче — подготовим вопросы и предложим следующий шаг.