Создание сайта и дизайны для него — не два отдельных заказа, а одна цепочка из четырёх звеньев: идея, дизайн, сборка, поддержка. Дизайн хорош ровно настолько, насколько он пережил все четыре. Макет, который красиво выглядел на презентации, но развалился при вёрстке или расползся через полгода правок, — это плохой дизайн, каким бы эффектным он ни был в первый день.
Ниже — что происходит с дизайном на каждом звене, как сформулировать идею, чтобы её можно было нарисовать, какие бывают уровни дизайна и за что на каждом платят, как принимать макет не по принципу «нравится — не нравится» и что нужно, чтобы сайт через год выглядел так же аккуратно, как в день запуска.
Нужен сайт, где дизайн, сборку и дальнейшую поддержку ведёт один человек и ничего не теряется на стыках? Создание сайтов под ключ: дизайн входит в цену. Лендинг — от 15 000 ₽, корпоративный сайт — от 40 000 ₽. Договор, фиксированная стоимость, гарантия 12 месяцев.
Тридцать страниц поиска: от 500 рублей до 50 000 за одно слово «дизайн»
Я просмотрел тридцать страниц, которые поиск показывает по запросам о создании сайта и дизайне, и посчитал, что написано в их заголовках и описаниях.
Восемь страниц — руководства «как сделать дизайн сайта». Семь — студии с услугой «под ключ». Шесть — биржи и площадки с исполнителями. Четыре — про нейросети, четыре обещают «бесплатно». Цену «от» называют восемь страниц, и вилка такая: на бирже — от 500 рублей, в студии — от 50 000. Разница в сто раз за услугу с одним названием.
Интереснее то, чего мало. Слово «красивый» встречается четыре раза, «удобный» — один. «Поддержка» — четыре раза, и каждый раз как отдельная услуга студии, а не как судьба дизайна после запуска. Слово «идея» — один раз. Шрифты и цвета, из которых дизайн собственно состоит, упоминает одна страница.
То есть поиск рассказывает, кто нарисует и за сколько. О том, откуда дизайн берётся и что с ним происходит потом, — почти ничего. С этого и начнём.
Создание сайта: идея, дизайн, сборка, поддержка — где теряется замысел
У каждого звена цепочки свой результат, и на каждом стыке часть замысла может потеряться. Хорошо, когда стыков нет — всё делает один человек или сыгранная команда. Плохо, когда идею придумал владелец, макет нарисовал дизайнер с биржи, собрал третий исполнитель, а правит четвёртый.
Стык первый: идея — дизайн. Если идея не записана, дизайнер рисует то, что умеет и любит. Получается красиво, но не про вас.
Стык второй: дизайн — сборка. Макет нарисован для широкого экрана с идеальными текстами по три строки. В жизни текстов больше, фотографии другого формата, а половина посетителей — с телефона. Сборщик выкручивается, и сайт уже не похож на макет.
Стык третий: сборка — поддержка. Новую страницу через полгода делает тот, кто не знает, какие были отступы и размеры заголовков. Через год на сайте пять оттенков зелёного и четыре вида кнопок.
Создание сайта: идея и дизайн — как сформулировать, чтобы можно было нарисовать
«Хочу современно и стильно» — не идея, а пожелание, под которое подходит что угодно. Идея для дизайна — это несколько коротких ответов, по которым дизайнер принимает решения сам и не гадает.
- Кто смотрит. Возраст, с какого устройства, в какой ситуации. Сайт для прорабов, которые открывают его на объекте с телефона, и сайт для невест — разные задачи.
- Что человек должен сделать. Позвонить, оставить заявку, записаться, купить. Это действие получает самую заметную кнопку.
- Какое впечатление должно остаться. Три прилагательных: «надёжно, спокойно, дорого» или «быстро, просто, недорого». Не больше трёх — иначе они начнут спорить.
- Что уже есть. Логотип, фирменные цвета, вывеска, упаковка. Сайт должен выглядеть как часть того же бизнеса, а не как чужой.
- Три сайта, которые нравятся, и что именно. Не «сделайте так же», а «здесь нравится, как показаны цены», «здесь — крупные фотографии».
Пять ответов умещаются на одной странице. С ней первый макет попадает близко к цели, без неё — начинается череда «не то, давайте ещё вариант», за которую кто-то платит: либо вы деньгами, либо исполнитель временем.
Совет вебмастера: соберите примеры не только из своей отрасли. Сайты конкурентов похожи друг на друга, и, ориентируясь на них, вы получите ещё один такой же. Удачный способ показать цены или отзывы можно подсмотреть у кого угодно.
Создание сайта: дизайны трёх уровней и разница цен в сто раз
Пятьсот рублей на бирже и пятьдесят тысяч в студии — не обман ни с одной стороны. Под словом «дизайн» продают три разные работы.
Что это: оформление, сделанное заранее для всех сразу. В него подставляют ваш логотип, тексты и фотографии.
Что получаете: аккуратный сайт за дни. Сетка, шрифты и отступы уже продуманы тем, кто делал шаблон.
Когда подходит: первый сайт, проверка спроса, небольшой бюджет, типовой бизнес.
Риск: шаблон рассчитан на идеальные материалы. С вашими фотографиями и длинными названиями услуг он может выглядеть хуже, чем на демонстрации. И такой же сайт есть ещё у сотен компаний.
Спросите исполнителя прямо, какой из трёх уровней он предлагает за названную сумму. Честный ответ на этот вопрос объясняет цену точнее любого прайса. Как устроена работа у меня по шагам — на странице «Этапы разработки сайта»: прототип и дизайн там идут вторым этапом, сразу после брифа.
Из чего состоит дизайн: пять вещей, которые можно назвать
Дизайн кажется делом вкуса, пока не разложишь его на части. Частей пять, и про каждую можно задать проверяемый вопрос.
- Сетка. Невидимые линии, по которым выровнены блоки. Если левый край заголовка, текста и кнопки не совпадает — сетки нет.
- Шрифт. Одно-два начертания и несколько размеров, связанных между собой. Не восемь случайных.
- Цвет. Основной, дополнительный и один акцентный — для кнопок и важного. Плюс достаточный контраст текста с фоном.
- Отступы. Воздух между блоками. Одинаковое расстояние между похожими элементами создаёт ощущение порядка сильнее, чем любые украшения.
- Состояния. Как выглядит кнопка при наведении, поле с ошибкой, пустая корзина, длинное название в две строки. В слабых макетах этого нет вовсе.
Со шрифтами проще всего показать на примере. Размеры заголовков не выбирают на глаз: берут размер основного текста и умножают на один и тот же коэффициент — получается лестница. Подвигайте ползунки и посмотрите, как меняется характер страницы.
Лестница размеров шрифта
Размеры: текст 16 · подзаголовок 20 · раздел 25 · страница 31 пикселей.
Умеренный шаг. Иерархия видна, заголовки помещаются на экране телефона. Так устроено большинство деловых сайтов.
То же самое с отступами и цветами: у аккуратного сайта за каждым числом стоит правило. Когда правила есть, новую страницу можно собрать через год, и она встанет в ряд с остальными.
Как принимать макет: восемь вопросов вместо «нравится — не нравится»
Самая частая реакция заказчика на макет — «что-то не то, поиграйте со шрифтами». Она бесполезна для обеих сторон. Сравните, как звучит замечание, с которым можно работать.
❌ Замечания, с которыми нечего делать
- «Сделайте повеселее».
- «Мне не нравится зелёный».
- «Как-то пусто».
- «Жена посмотрела, сказала — скучно».
- «Давайте логотип покрупнее».
✅ Замечания, по которым понятно, что править
- «На первом экране не видно, что мы работаем по области».
- «Кнопка записи теряется рядом с баннером акции».
- «Наши клиенты старше пятидесяти — текст мелкий».
- «Цены спрятаны на третьем экране, а о них спрашивают первым делом».
- «Фото из фотобанка — заменим своими, они другого формата».
Чтобы прийти ко второй колонке, пройдите по макету с восемью вопросами.
- Понятно ли за пять секунд, чем занимается компания и что предлагает сделать?
- Какая кнопка на экране главная — и одна ли она?
- Есть ли макет для телефона, а не только для широкого экрана?
- Читается ли основной текст без усилий: размер, контраст, длина строки?
- Что будет, если заголовок окажется в два раза длиннее, чем на макете?
- Показаны ли ваши настоящие тексты и фото или красивая «рыба»?
- Одинаково ли выглядят одинаковые элементы — кнопки, карточки, заголовки?
- Сможете ли вы сами добавить новую страницу, не сломав вид?
Если на вопрос нет ответа — это и есть замечание. Записывайте правки одним списком и отправляйте разом: пять сообщений в разные дни растягивают согласование на недели.
Макет с идеальными текстами по три строки ничего не доказывает. Попросите подставить ваше самое длинное название услуги и вашу худшую фотографию. Если страница выдержала — дизайн рабочий.
— Александр Рожков
Создание сайта, поддержка, дизайн: что происходит с внешним видом после запуска
В день сдачи сайт выглядит цельно. Дальше начинается жизнь: появляется новая услуга, акция, раздел с вакансиями, баннер к празднику. Каждую правку делают быстро и «примерно как было». Через год примерно-как-было накапливается.
Чтобы сайт держал форму, при сдаче нужно получить не только доступы, но и короткий набор правил. Он помещается на одну страницу:
- Цвета с кодами. Основной, дополнительный, акцентный, цвет текста и фона.
- Шрифты и размеры. Какой шрифт, какие размеры у заголовков и текста — та самая лестница.
- Кнопки и ссылки. Как выглядит главная кнопка, второстепенная и ссылка в тексте.
- Фотографии. Пропорции, минимальный размер, чего избегать.
- Готовые блоки. Из каких блоков собирать новую страницу, чтобы не изобретать её заново.
Второе условие — один ответственный. Когда новые страницы добавляет тот же, кто делал сайт, или тот, кто получил правила, вид не расползается. Этим занимается поддержка сайта: кроме обновлений и резервных копий, в неё входят правки, сделанные в общем стиле. А если сайт уже расползся, его не обязательно перерисовывать — часто хватает доработки: привести к одному виду кнопки, заголовки и отступы.
Есть идея, но нет макета, или есть макет, который никто не может аккуратно собрать? Напишите, что у вас на руках, — скажу, с какого звена цепочки начинать. Как выглядят готовые проекты, можно посмотреть в портфолио, а что входит в цену — на странице услуги.
Нейросети и дизайн: где они помогают
Четыре страницы из тридцати — про дизайн с помощью нейросетей, так что коротко и об этом. Сейчас они полезны на первом звене цепочки: быстро набросать несколько вариантов первого экрана, подобрать сочетание цветов, предложить структуру страницы. Это хороший способ понять, что вам нравится, до разговора с исполнителем.
Слабее они там, где нужна последовательность: единые отступы на двадцати страницах, поведение блоков на телефоне, состояния форм. Сгенерированную картинку всё равно кто-то должен превратить в работающий сайт и потом поддерживать — то есть остальные три звена остаются на людях.
Кому заказывать: дизайнеру, студии или одному исполнителю
Выбор исполнителя — это выбор числа стыков в цепочке.
- Дизайнер с биржи. Отдаёт макет. Сборку и поддержку ищете отдельно — два стыка на вашей ответственности. Подходит, если у вас уже есть тот, кто соберёт.
- Студия. Все звенья внутри, но у разных людей: менеджер, дизайнер, верстальщик, отдел поддержки. Стыки есть, просто вы их не видите. Цена выше, зато большой проект по силам.
- Один исполнитель под ключ. Тот, кто рисует, сам же собирает и потом правит. Стыков нет, но объём ограничен силами одного человека — это формат для лендингов, визиток, корпоративных сайтов и небольших магазинов.
Какой бы вариант вы ни выбрали, смотрите не на картинки макетов, а на работающие сайты, которым больше года. По ним видно главное: пережил ли дизайн сборку и поддержку.
Итог
Дизайн сайта — не картинка, а решение, которое должно пройти четыре звена: родиться из записанной идеи, быть нарисованным с учётом настоящих текстов и телефона, без потерь превратиться в работающие страницы и не расползтись за годы правок. Цена дизайна зависит от уровня — шаблон, адаптация или индивидуальный макет, — и сравнивать предложения стоит только внутри одного уровня.
Запишите идею пятью ответами, принимайте макет по восьми вопросам, а при сдаче попросите страницу с правилами. Если хотите, чтобы всю цепочку вёл один человек, — посмотрите, как устроено у меня создание сайтов, и опишите задачу.
Опрос
Какой дизайн вы выберете для своего сайта?
Проголосуйте, чтобы увидеть, как думают другие читатели
Часто задаваемые вопросы
Входит ли дизайн в стоимость создания сайта?
Зависит от исполнителя — уточняйте до договора. У меня дизайн входит в цену сайта вместе с вёрсткой, формой заявки и счётчиком статистики. На биржах дизайн чаще продают отдельно: вы получаете макет, а сборку ищете сами.
Почему дизайн стоит от 500 рублей до 50 000?
Под одним словом продают три работы: подстановку логотипа в готовый шаблон, адаптацию шаблона под компанию и индивидуальный макет с нуля. Сравнивать цены имеет смысл только внутри одного уровня.
С чего начать, если есть только идея?
Запишите пять ответов: кто будет смотреть сайт, что он должен сделать, какое впечатление должно остаться, какие фирменные элементы уже есть и какие три сайта вам нравятся и чем. С этой страницей можно идти к любому исполнителю.
Нужен ли индивидуальный дизайн небольшой компании?
Чаще хватает шаблона с адаптацией: надёжная основа и свой облик за разумные деньги. Индивидуальный макет оправдан, когда внешний вид — часть продукта или структура сайта нестандартная.
Сколько вариантов макета должен показать дизайнер?
Обычно один, продуманный по вашему брифу, и оговорённое число кругов правок. Несколько вариантов «на выбор» означают, что идея не сформулирована и её ищут перебором. Число вариантов и правок запишите в договоре.
Почему сайт со временем начинает выглядеть неаккуратно?
Потому что новые страницы и баннеры добавляют без правил: чуть другой отступ, другой оттенок, другая кнопка. Помогают две вещи — страница с правилами оформления, полученная при сдаче, и один ответственный за правки.
Можно ли сделать дизайн сайта нейросетью?
Набросать варианты первого экрана и подобрать цвета — да, это удобно на этапе идеи. Выдержать единый стиль на всех страницах, продумать телефон и состояния форм нейросеть пока не может; собирать и поддерживать сайт всё равно будет человек.
