Коротко
- Дизайн сайта состоит из пяти этапов: прототип, концепция, дизайн страниц, адаптив, дизайн-система. Если в смете их нет по отдельности, уточните, что из этого вы получите.
- Прототип экономит больше всего денег: правка схемы стоит минут, правка готового дизайна — дней.
- Макет принимают по задачам, а не по вкусу: понятен ли оффер, видна ли цена, удобно ли с телефона, хватает ли состояний кнопок и форм.
- Исходники и права на дизайн должны перейти к вам по договору. Иначе следующий подрядчик начнёт с нуля.
- Тексты нужны до дизайна. Дизайн под «рыбу» почти всегда переделывают.
Что входит в дизайн сайта: пять этапов
Когда в смете одной строкой написано «дизайн сайта — 90 000 ₽», вы не знаете, что получите. Разберём, из чего работа состоит на самом деле.
| Этап | Что это | Результат | Ориентир по рынку |
|---|---|---|---|
| Прототип | Схема страниц: какие блоки, в каком порядке, что в каждом | Чёрно-белые схемы главной и ключевых страниц | 10 000–60 000 ₽ |
| Концепция | Стиль: цвета, шрифты, характер изображений на одном-двух экранах | 1–3 варианта первого экрана | 10 000–50 000 ₽ |
| Дизайн страниц | Отрисовка всех страниц по прототипу в выбранном стиле | Макеты для компьютера | От 5 000–30 000 ₽ за уникальный экран или шаблон страницы |
| Адаптив | Как страницы выглядят на телефоне и планшете | Мобильные макеты | 30–50% от стоимости десктопа или входит |
| Дизайн-система | Правила: кнопки, формы, отступы, сетка, состояния элементов | Страница компонентов для верстальщика | 10 000–80 000 ₽ или входит |
Цены — вилки по открытым прайсам и нашим наблюдениям, а не прайс конкретного исполнителя. Подробно о том, из чего складывается итоговая сумма и почему дизайн отдельно от вёрстки часто выходит дороже, — в статье сколько стоит дизайн сайта. Здесь сосредоточимся на этапах и приёмке.
Прототип: где решается, будет ли сайт продавать
Прототип — схема без цвета и картинок: где заголовок, где цена, где форма, в каком порядке блоки. Именно на этом этапе решается, найдёт ли клиент ответы на свои вопросы. Красивые цвета не спасут сайт, где цена спрятана на шестом экране. Как делать прототип и в чём его рисовать, мы разбирали отдельно в статье про прототип сайта.
Концепция: два-три варианта стиля на одном экране
На этом этапе дизайнер показывает стиль на первом экране и одном-двух блоках. Задача — выбрать направление до того, как отрисованы 20 страниц. Если концепцию пропускают и сразу рисуют весь сайт, а он не нравится, переделывают всё.
Адаптив и дизайн-система: то, что экономят и потом жалеют
Большая часть посетителей сайтов услуг приходит с телефона. Если мобильных макетов нет, верстальщик собирает мобильную версию на своё усмотрение, и она часто получается хуже десктопа. Дизайн-система — короткий набор правил: как выглядит кнопка в обычном состоянии, при наведении и нажатии, какие отступы между блоками, как выглядит ошибка в форме. Без неё каждая новая страница через полгода рисуется заново и выглядит чуть иначе.
Сколько стоит заказать дизайн сайта: три типовых сценария
| Лендинг | Сайт услуг, 8–15 страниц | Интернет-магазин | |
|---|---|---|---|
| Прототип | 1 страница | Главная, услуга, о компании, контакты | Главная, каталог, карточка, корзина |
| Уникальных шаблонов | 1 | 4–6 | 6–10 |
| Фрилансер | 20 000–60 000 ₽ | 60 000–150 000 ₽ | 100 000–250 000 ₽ |
| Студия | 50 000–150 000 ₽ | 120 000–400 000 ₽ | 250 000–700 000 ₽ и выше |
| Срок | 1–3 недели | 3–6 недель | 6–12 недель |
Ключевое слово — «уникальных шаблонов». Сайт на 40 страниц услуг может стоить как сайт на 8, если все страницы услуг собраны по одному шаблону. Попросите подрядчика назвать число уникальных шаблонов: это и есть объём работы.
Если вы ещё не решили, каким должен быть первый экран и какой стиль нужен, это проще увидеть на примере своего сайта, чем на чужих референсах.
Как подготовиться, чтобы дизайн не переделывали
Большинство лишних кругов правок происходит не из-за дизайнера, а из-за того, что заказчик не определился до старта. Что подготовить:
- Тексты или хотя бы их черновик. Заголовки, оффер, цены, состав услуг. Дизайн под «рыбу» потом ломается, когда заголовок оказывается в три раза длиннее. О том, почему текст идёт до дизайна, — в статье про тексты для сайта.
- Два-три сайта, которые нравятся, и чем именно. «Нравится, как показаны цены» полезнее, чем «нравится стиль».
- Один-два сайта, которые не нравятся. Это часто даёт дизайнеру больше, чем список пожеланий.
- Фирменные элементы. Логотип в векторе, цвета, шрифты, если есть.
- Фото. Свои работы, команда, офис. Стоковые фото с улыбающимися людьми в костюмах снижают доверие.
- Кто принимает решения. Если макет согласуют три человека, договоритесь, чьё слово последнее.
Как принимать макет: 12 признаков готового дизайна
Принимать дизайн «нравится — не нравится» — путь к бесконечным правкам. Принимайте по задачам. Вот список, по которому мы сами проверяем макет перед передачей в вёрстку:
- Первый экран отвечает на три вопроса: что вы делаете, для кого и что сделать дальше.
- Цена или ориентир по цене видны без поиска.
- Кнопка главного действия заметна на каждом экране, где она нужна, и выглядит одинаково.
- Тексты в макете — настоящие, а не «рыба».
- Есть мобильные макеты всех уникальных шаблонов, а не только главной.
- Кнопки и ссылки на телефоне достаточно крупные, чтобы попасть пальцем.
- Текст читается: размер основного текста на телефоне не мельче 16 px, контраст достаточный. Для ориентира — требование WCAG к контрасту обычного текста не ниже 4.5:1.
- Нарисованы состояния: кнопка при наведении, ошибка в форме, сообщение после отправки заявки.
- Нарисованы служебные страницы: «спасибо», 404, политика конфиденциальности.
- Изображения реальные или понятно, где их взять. Если в макете стоковые фото, которых нет в лицензии, это проблема.
- Шрифты с лицензией для сайта. Шрифт из макета должен быть разрешён к использованию в вебе.
- Есть страница компонентов — набор кнопок, полей, карточек и отступов для верстальщика.
Если по пунктам 1–4 есть вопросы, возвращайте макет на доработку, даже если он очень красивый. Как проверять уже свёрстанный сайт перед оплатой, описано в чек-листе приёмки сайта.
Условный пример: сколько стоит пропустить этап
Пример условный, не кейс студии. Клиника эстетической косметологии заказывает дизайн сайта на 10 страниц у фрилансера за 100 000 ₽. Прототип решили не делать, тексты обещали дописать позже.
- Дизайнер рисует главную и шаблон услуги под «рыбу». Согласование занимает две недели.
- Приходят реальные тексты: описание процедур в три раза длиннее, нужны блоки противопоказаний и цены по зонам. Шаблон услуги переделывают — плюс 20 000 ₽ и неделя.
- На вёрстке выясняется, что мобильных макетов нет. Верстальщик собирает мобильную версию сам, клинике не нравится. Дорисовка — плюс 25 000 ₽.
Итог: 145 000 ₽ и на три недели дольше. Прототип и тексты до старта обошлись бы дешевле, чем переделка. Цифры условные, но последовательность событий типичная.
Типичные споры при приёмке дизайна и как их избежать
Большинство конфликтов с дизайнерами возникает на приёмке. Вот ситуации, которые повторяются чаще всего, и как их предотвратить ещё на старте:
- «Это не то, что я хотел». Концепция утверждена, весь сайт отрисован, а заказчик понимает, что стиль не нравится. Решение — утверждать концепцию письменно и не переходить к остальным страницам до её подписания.
- «Правка» на половину макета. Заказчик просит «чуть поменять» порядок блоков, а это меняет весь прототип. Решение — в договоре определить, что правка — это изменение внутри утверждённой структуры, а изменение структуры — новая работа.
- «А где мобильная версия?» Выясняется, что адаптив не входил. Решение — прописать в смете число мобильных макетов.
- «Директор посмотрел и всё поменял». Решение — договориться о последнем слове до начала работ и показывать промежуточные этапы именно этому человеку.
- «Верстальщик говорит, что так нельзя». Дизайн на конструкторе ограничен его возможностями. Решение — если сайт будут собирать на Тильде или другом конструкторе, дизайнер должен знать это заранее.
Хорошая практика — короткий созвон после каждого этапа: дизайнер показывает работу и объясняет решения, вы задаёте вопросы. Комментарии в мессенджере по скриншотам дают больше недопонимания, чем пользы.
Права на дизайн и исходники: что прописать в договоре
Дизайн сайта — объект авторского права, это следует из статьи 1259 ГК РФ. Если в договоре ничего не сказано о правах, по общему правилу они остаются у автора. Чтобы использовать и менять дизайн без вопросов, в договоре нужен пункт об отчуждении исключительного права или лицензии с понятными условиями. Как это оформляется, описано в статье 1234 ГК РФ.
Что ещё зафиксировать:
- передаются ли исходные файлы макетов и в каком формате;
- сколько кругов правок входит в каждый этап;
- что считается правкой, а что новой работой;
- сроки согласования с вашей стороны — иначе срыв сроков из-за вас ляжет на подрядчика, и наоборот;
- лицензии на шрифты и фото: кто их покупает и на кого оформляет.
Сколько кругов правок нормально
Обычная практика — два-три круга правок на каждом этапе: прототип, концепция, страницы. Больше трёх кругов почти всегда означает, что задача не была сформулирована на старте или решения принимает слишком много людей. Чтобы правки были полезными, собирайте их одним списком от одного человека, нумеруйте и указывайте, на каком экране и что не так. «Сделайте поживее» — не правка. «Заголовок первого экрана не читается на фото, нужно затемнить фон или поменять фото» — правка, которую можно выполнить за час.
Фрилансер, студия или шаблон: что выбрать
- Шаблон конструктора подходит, если бюджет минимальный и нужно запуститься за неделю. Риск — сайт похож на сотни других.
- Фрилансер подходит для лендинга и небольшого сайта, если у него есть портфолио в вашей нише и он готов работать по этапам. Риск — пропадёт на середине или не умеет делать адаптив.
- Студия подходит, если вам нужен сайт вместе с текстами, вёрсткой, аналитикой и рекламой. Риск — дороже, больше согласований.
Мы обычно делаем дизайн в связке с запуском: сайт, Директ и 30 дней ведения стоят от 60 000 ₽, простой запуск возможен от 3 дней. Такой подход сразу проверяет дизайн реальными заявками. Панорамному остеклению, например, сайт с Директом дал 150+ заявок за первый месяц. Если хотите обсудить свой проект, оставьте контакты.
Частые вопросы
Сколько стоит заказать дизайн сайта?
Ориентиры по рынку: лендинг — от 20 000 до 150 000 ₽, сайт услуг на 8–15 страниц — от 60 000 до 400 000 ₽, интернет-магазин — от 100 000 ₽ и выше. Цена зависит от числа уникальных шаблонов, наличия прототипа, адаптива и дизайн-системы. Сравнивайте предложения по составу работ.
Сколько времени занимает дизайн сайта?
Лендинг — обычно 1–3 недели, сайт услуг — 3–6 недель, магазин — 6–12 недель. Чаще всего сроки срываются из-за согласований и отсутствия текстов.
Можно ли заказать дизайн без вёрстки?
Можно, но тогда важно получить мобильные макеты, состояния элементов и страницу компонентов. Без них верстальщик будет додумывать, и результат разойдётся с макетом. Стыковку дизайна и вёрстки лучше обсудить заранее.
Как понять, что дизайн хороший, если я не дизайнер?
Проверьте макет по задачам: понятно ли за пять секунд, что вы предлагаете, видна ли цена, легко ли оставить заявку с телефона. Покажите первый экран трём людям из вашей аудитории и спросите, что здесь продают. Если отвечают неправильно, дизайн нужно дорабатывать.
Что такое веб-дизайн сайта и чем он отличается от вёрстки?
Веб-дизайн — это макеты: как выглядит и как устроен сайт. Вёрстка — перенос макетов в код или конструктор, чтобы сайт работал в браузере. Подробнее о профессии и этапах — в статье веб-дизайн: что это.
Нужно ли заказывать дизайн, если сайт будет на Тильде?
Зависит от задачи. Для простого лендинга можно собрать сайт из стандартных блоков без отдельного дизайна, если есть хорошие тексты и фото. Если нужен узнаваемый сайт с нестандартными экранами, дизайн рисуют под Тильду с учётом её возможностей, а потом собирают в Zero Block. Главное — чтобы дизайнер с самого начала знал, на чём будут собирать сайт.
10+ лет делаю сайты и запускаю рекламу, вместе с командой запустили больше 500 проектов. Пишу о том, что проверили на практике.
Задать вопрос в Telegram →
