Вёрстка сайта по макету
Задача звучит просто, а разваливается обычно на двух вещах: на состояниях, которых нет в макете, и на промежуточных размерах экрана. Дизайнер нарисовал десктоп и мобильный, а между ними ширина, где макет разъезжается, и никто не решил, как он должен себя вести.
Мы проговариваем это до начала: что происходит при длинном заголовке, пустом списке, отсутствующей картинке и на планшете. Вопросов немного, но они экономят круги правок.
Обсудить задачуЧто входит
- Адаптив от 320 пикселей с проверкой промежуточных ширин
- Состояния элементов: наведение, фокус, нажатие, отключено, ошибка
- Поведение при длинных текстах и отсутствующих данных
- Доступность: навигация с клавиатуры, контраст, подписи к полям
- Оптимизация изображений и шрифтов ради скорости
- Проверка на реальных устройствах, а не только в браузере на десктопе
- Чистый код с понятной структурой — его сможет вести другой разработчик
Что нужно от макета
Хороший макет содержит сетку, набор повторяющихся элементов и хотя бы две ширины экрана. Если элементы нарисованы каждый раз заново и отступы везде разные, вёрстка займёт дольше — не из-за сложности, а из-за необходимости решать за дизайнера.
Мы можем работать и с неидеальным макетом, просто скажем об этом заранее и покажем, где придётся принимать решения самим.
Что обычно спрашивают
Работаете с Figma?
Да, это основной формат. Принимаем и другие, но с Figma процесс быстрее: видно сетку, стили и повторяющиеся элементы.
Нужен ли готовый макет?
Для этой услуги — да. Если макета нет, речь идёт о разработке сайта целиком, включая проектирование и дизайн.
Подключите вёрстку к движку?
Да, натяжка на CMS или интеграция в существующий проект — обычная часть работы. Уточните, на чём сайт.
Что с поддержкой старых браузеров?
Обсуждаем заранее. Поддержка совсем старых версий заметно увеличивает объём, и обычно она не нужна — но решать по вашей аналитике.
Сколько стоит?
Считается по числу уникальных экранов и сложности элементов. Пришлите ссылку на макет — оценим по нему.