Веб-дизайн и веб-разработка: кто за что отвечает в проекте

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

Что делает веб-дизайнер

UX — пользовательский опыт

Исследование аудитории и сценариев, структура сайта, навигация, прототипы. Ответ на вопрос «как человеку быстрее всего найти нужное и сделать действие».

UI — пользовательский интерфейс

Визуальная часть: композиция страниц, цвета, шрифты, иконки, кнопки, состояния элементов. Ответ на вопрос «как это выглядит и воспринимается».

Результат работы дизайнера — макеты страниц для разных экранов, UI-кит, прототипы. Код он обычно не пишет.

Что делает веб-разработчик

• Вёрстка макетов в HTML и CSS
• Интерактивность на JavaScript
• Серверная логика и база данных
• Интеграции с внешними системами
• Настройка CMS и административной панели
• Размещение сайта на сервере, производительность, безопасность

Результат — работающий сайт, код и документация.

Вёрстка — мост между ними

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

Где возникают конфликты

• Дизайнер рисует эффект, который сложно и долго реализовать или который замедлит сайт
• Разработчик упрощает дизайн «как удобнее», не согласовав с дизайнером
• Никто не отвечает за состояния: загрузку, пустые списки, ошибки
• Макеты меняются после начала вёрстки без фиксации изменений
• Шрифты или изображения не переданы в нужном формате

Как организовать работу

1. Разработчик смотрит прототипы и концепцию дизайна до утверждения
2. Дизайнер готовит макеты с компонентами и состояниями, а не только красивые экраны
3. Передача макетов — с созвоном и разбором вопросов
4. Дизайнер проверяет вёрстку на соответствие и даёт замечания
5. Изменения дизайна после передачи согласуются и оцениваются

Один человек или двое

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

Что важно заказчику

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

Итог

Дизайн отвечает на вопрос «что и как должно быть», разработка — «как сделать, чтобы это работало». Сайт получается хорошим, когда эти ответы согласованы между собой до начала основной работы.

Как читать оценку проекта

В смете обычно видны строки «прототипирование», «дизайн», «вёрстка», «программирование», «тестирование». Если дизайна в смете нет, значит, будет использован готовый шаблон или ваши макеты. Если нет вёрстки мобильной версии, уточните, как сайт будет выглядеть на телефоне. Раздельная оценка помогает понять, за что именно вы платите и где можно сократить объём без потери качества.