Дизайн сайта: три разных объёма работы под одним словом и как выбрать нужный

Что вообще называют дизайном сайта

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

Цена и срок отличаются в разы именно потому, что за одним словом стоят три объёма. Когда клиент просит «дизайн сайта», а получает оформление, ощущение обмана возникает у обеих сторон: подрядчик сделал ровно то, что назвал, заказчик ждал другого.

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

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

Уровень первый: оформление

Это самая частая и самая дешёвая работа. Структура уже есть — она пришла из шаблона, от предыдущего подрядчика или сложилась исторически. Задача дизайнера — привести её в порядок: типографика, отступы, сетка, состояния кнопок, единый визуальный язык.

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

Чего оформление не делает: оно не чинит структуру. Если человек не находит нужный раздел или не понимает, что вы предлагаете, аккуратная типографика этого не исправит. Она сделает непонятное непонятным, но красивым.

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

Уровень второй: проектирование

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

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

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

Проектирование дороже оформления, потому что включает работу до отрисовки. Оно же чаще всего и окупается — большинство проблем сайта живёт в структуре, а не в оформлении.

Уровень третий: система

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

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

Система не обязана быть большой. Для сайта из десяти страниц достаточно описания сетки, шкалы, трёх типов карточек и правил для форм. Раздутый на сто страниц гайд для такого проекта — переплата.

Главный признак рабочей системы тот же, что и у фирменного стиля: по ней собирает страницу человек, который её не делал.

Что влияет на результат сильнее всего

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

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

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

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

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

Как устроен процесс

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

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

Дальше — состояния и мелочи, которые обычно забывают: пустые списки, ошибки в форме, длинные заголовки, отсутствующие изображения. Именно они портят впечатление на реальном контенте.

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

Что должно быть в передаче: «» — это три разных объёма работы, а не один.

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

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

Полезно письменно зафиксировать, что в работу не входило. Это снимает большую часть споров при приёмке и делает границы проекта видимыми обеим сторонам.

И указание, какие изображения можно использовать и на каких условиях: собственная съёмка, стоковые кадры с лицензией или сгенерированные материалы — у каждого варианта свои ограничения.

Как выбрать уровень под задачу

Три вопроса дают ответ быстрее любого обсуждения. Первый: вы согласны с текущим набором страниц? Если нет — нужно проектирование, оформление не поможет.

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

Третий: что именно не работает сейчас — люди не доходят, не понимают или не доверяют? Первое чинится структурой, второе текстом и структурой, третье доказательствами и оформлением.

В VITON13 дизайн-услуга начинается от $70 за отдельный маршрут знака, включает сфокусированный объём за $120, уровень запуска страницы за $290 и систему за $540; срок по услуге — от одного до восьми рабочих дней в зависимости от объёма.

И последнее: договоритесь заранее, кто отвечает за перенос макета в код. Дизайн, который никто не собирается реализовывать точно, живёт ровно до первой правки на стороне разработки.