Шаблоны для создания сайта бывают двух видов, и в выдаче их почти всегда смешивают. Первый вид — шаблоны дизайна: готовая заготовка страниц, которую наполняют своим текстом. Второй — шаблоны процесса: бриф, техническое задание, список этапов, по которым сайт делают без потерь. Ниже о том, когда готовый шаблон дизайна экономит деньги, а когда обходится дороже своего, как устроен шаблон страницы изнутри, из каких этапов складывается создание шаблона и какие документы-шаблоны стоит заполнить до разработки.
Нужен сайт на готовом шаблоне, адаптированном под ваш бизнес, или на своём шаблоне с нуля? Я делаю сайты лично, по договору, с фиксированной ценой и гарантией 12 месяцев. Подробности — на странице создания сайтов.
Тридцать страниц поиска: каталоги, конструкторы и пять инструкций
По запросу «шаблоны создания сайт» я разобрал первые 30 результатов. Картина предсказуемая: почти всё — витрины. Двенадцать страниц — каталоги готовых шаблонов на тысячи позиций, в том числе с генерацией шаблона нейросетью. Одиннадцать — галереи шаблонов внутри конструкторов: Tilda, uKit, mottor, Wilda, 1C-UMI, конструктор Т-Банка и другие. Пять страниц объясняют, как создать свой шаблон: от HTML-заготовки до шаблонов сайтов SharePoint. Две статьи — о том, как выбрать шаблон и что такое сайт на шаблоне.
Чего нет нигде: ни одна страница не говорит, что шаблон дизайна — это меньшая часть работы. Сайт ломается не на выборе картинки, а на том, что заказчик не знает, какие страницы ему нужны и что на них написать. Для этого существуют другие шаблоны — шаблон брифа и шаблон ТЗ, и о них в выдаче ни слова.
Два смысла слова «шаблон»
❌ Шаблон как готовый сайт
Выбрали красивую заготовку в каталоге, заменили тексты и фото. Быстро и дёшево, но структура и блоки — чужие, придуманные под абстрактный бизнес. Тексты подгоняются под дизайн, а не дизайн под задачу.
✅ Шаблон как каркас и порядок работы
Сначала бриф и ТЗ по шаблону: кто клиенты, какие страницы, что на каждой. Потом под это подбирается или создаётся шаблон страниц. Готовый дизайн при этом вполне можно взять — но уже зная, что в него положить.
Оба смысла нужны. Шаблон при создании сайта экономит время на дизайне и вёрстке, шаблоны процесса создания сайта экономят деньги на переделках. Дальше — по порядку: сначала про шаблоны дизайна, потом про документы.
Готовый шаблон или свой: где проходит граница
Шаблоны создания своего сайта — это не только каталоги и конструкторы. У любой CMS есть темы: у WordPress, OpenCart, Битрикса. На практике выбор выглядит так.
- Готовый шаблон конструктора — для лендинга или визитки, если вы готовы делать и поддерживать сайт сами. Цена — подписка на конструктор; при переезде шаблон с собой не забрать.
- Готовая тема CMS с доработкой — для корпоративного сайта или магазина с типовой структурой. Тема даёт основу, вебмастер адаптирует её под ваши разделы, убирает лишнее и подключает формы, аналитику, оплату.
- Свой шаблон с нуля — когда структура нестандартная, нужна своя логика каталога или фирменный стиль, который в готовую тему не помещается без костылей.
Мои ориентиры по цене: лендинг от 15 000 ₽ за 3–7 дней, сайт-визитка — 25 000 ₽ за 7–14 дней, корпоративный сайт — 40 000 ₽ за 2–4 недели, интернет-магазин на OpenCart — 60 000 ₽ за 3–6 недель. Использую ли я готовую тему или верстаю шаблон сам, решается под задачу и в договоре фиксируется заранее.
Главный вопрос к готовому шаблону — не «нравится ли он», а «сколько блоков из него придётся удалить и сколько добавить». Если переделывать больше трети — дешевле и чище сделать свой.
Как устроен шаблон страницы изнутри
Создание шаблонов для страниц сайта начинается с простой мысли: у сайта не столько шаблонов, сколько страниц, а столько, сколько разных типов страниц. Все услуги устроены одинаково, все статьи блога — тоже. Шаблон — это каркас с общими частями (шапка, меню, подвал) и слотами, куда подставляется содержимое конкретной страницы.
Цены на схеме — условный пример. Смысл в том, что правка в шаблоне — новая кнопка, другой блок отзывов — сразу появляется на всех страницах этого типа. Именно поэтому до вёрстки важно понять, сколько типов страниц на сайте на самом деле. Таблица ниже помогает это посчитать: отметьте, какие блоки стоят на каждой странице. Страницы с одинаковым набором блоков обслуживает один шаблон.
Блоки: Экран — первый экран, Услуги — список услуг, Цены — цены, Фото — фото работ, Статья — текст статьи, Отзывы — отзывы, Форма — форма заявки, Карта — карта проезда.
| Страница | Экран | Услуги | Цены | Фото | Статья | Отзывы | Форма | Карта |
|---|---|---|---|---|---|---|---|---|
| Главная | ||||||||
| Ремонт ванной | ||||||||
| Ремонт кухни | ||||||||
| Ремонт под ключ | ||||||||
| Цены | ||||||||
| Наши работы | ||||||||
| Статья в блоге | ||||||||
| Ещё статья | ||||||||
| Контакты |
В примере девять страниц, а шаблонов получается семь, причём две страницы услуг отличаются всего одним блоком. Снимите галочку «Отзывы» у ремонта ванной и кухни — все три страницы услуг сольются в один шаблон, и их станет шесть. Чем их меньше, тем дешевле вёрстка и проще поддержка: правка в одном месте применяется ко всем страницам типа.
Этапы создания шаблона сайта
Своё создание и вёрстка шаблона сайта — это не «нарисовать и сверстать». Шаблон проходит несколько этапов, и каждый следующий опирается на предыдущий.
- Бриф. Ответы заказчика: чем занимается бизнес, кто клиенты, чего ждём от сайта, какие сайты нравятся и почему.
- Техническое задание. Список страниц, блоков на каждой, форм и интеграций. По нему считается цена и проверяется результат.
- Прототип. Схема страниц серыми прямоугольниками: что где стоит, без цвета и шрифтов. Его быстро переделать.
- Макет. Дизайн для компьютера, планшета и телефона. Если берётся готовый шаблон, этот этап — подгонка цветов, шрифтов и блоков.
- Вёрстка. Макет превращается в HTML и CSS, страница начинает работать в браузере.
- Натяжка на CMS. В вёрстке размечаются места, куда система подставляет заголовок, текст, цены и фото из админки. После этого страницы создаются без программиста.
- Заполнение. Создание шаблона и заполнение сайта — разные работы, и вторую часто недооценивают: тексты, фото, цены, мета-теги для каждой страницы.
- Проверка. Телефон, скорость загрузки, формы, отправка заявок, индексация.
Совет вебмастера: заполнение заложите в план отдельной строкой, с ответственным и сроком. Сайт на прекрасном шаблоне с текстом-«рыбой» и стоковыми фото не запустится, а на сборе материалов у заказчика уходит иногда больше времени, чем на всю вёрстку.
Шаблон брифа для создания сайта
Бриф — первая анкета проекта. Шаблон брифа для создания сайта не должен быть длинным: двадцать вопросов на десяти страницах заказчик заполнит формально или не заполнит вовсе. Мне хватает десяти вопросов, на которые можно ответить за полчаса.
- Чем занимается компания — в двух предложениях, как вы объяснили бы знакомому.
- Кто ваши клиенты и откуда они приходят сейчас.
- Что посетитель должен сделать на сайте: позвонить, оставить заявку, купить, приехать.
- Какие услуги или товары главные, а какие второстепенные.
- Три-пять конкурентов и что у них нравится или раздражает.
- Есть ли логотип, фирменные цвета, фото работ, тексты.
- Какие страницы вы представляете на сайте — списком, как получится.
- Кто будет добавлять новости, цены, товары после запуска.
- Нужны ли интеграции: 1С, оплата, CRM, онлайн-запись.
- Бюджет и срок, к которому сайт нужен.
Брифы-шаблоны для создания сайта, которые студии выкладывают для скачивания, часто устроены наоборот: много вопросов о дизайне («какие цвета вам нравятся?») и мало о бизнесе. А дизайн как раз проще всего решить потом, когда понятно, для кого сайт.
Шаблон ТЗ: что в нём должно быть
Если бриф — это вопросы, то ТЗ — ответы, превращённые в список работ. Шаблон ТЗ на создание сайта, которым я пользуюсь, состоит из шести разделов.
- Цель и аудитория — коротко, из брифа.
- Структура — список страниц с адресами и иерархией.
- Шаблоны страниц — для каждого типа страницы список блоков сверху вниз. Это та самая таблица из инструмента выше.
- Функции — формы и куда уходят заявки, каталог и фильтры, оплата, личный кабинет.
- Контент — кто и к какому сроку готовит тексты, фото, цены.
- Приёмка — как проверяем: какие браузеры и устройства, скорость, отправка форм.
Раздел «Шаблоны страниц» — самый недооценённый. Без него фраза «сделать страницы услуг» понимается каждой стороной по-своему, и спор о том, входит ли блок отзывов в цену, начинается уже после вёрстки.
Шаблоны процесса создания сайта
Кроме брифа и ТЗ есть ещё несколько рабочих шаблонов, которые снимают большую часть вопросов в проекте.
- Таблица контента — страница, адрес, заголовок, кто готовит текст, статус. Одна на весь проект.
- Чек-лист запуска — от формы заявки и счётчика аналитики до robots.txt и sitemap.xml.
- Акт приёмки — что сделано и проверено, подпись обеих сторон.
- Регламент сопровождения — кто, что и как часто обновляет после запуска.
Это и есть шаблоны процесса создания сайта: не дизайн, а договорённости, записанные по одной и той же форме из проекта в проект. За 15 с лишним лет и 200+ проектов у меня поменялось многое, но эти таблицы — почти нет.
Один шаблон — много страниц: как работает заполнение
Когда шаблон натянут на CMS, страница собирается из шаблона и данных. На этом же принципе строят и сайты с сотнями страниц — например, «услуга + город». Инструмент ниже показывает, что получается: впишите шаблон с метками в фигурных скобках и строки с данными — он соберёт страницы и проверит, не получились ли они слишком похожими.
В примере у последней строки нет цены — инструмент это покажет. И обратите внимание на долю своих слов: при шаблоне из двух предложений она низкая, почти весь текст одинаковый. Для пяти страниц это не страшно, для пятисот — повод для поисковика считать раздел малополезным. Шаблон отвечает за форму, а содержание каждой страницы всё равно нужно наполнять фактами, которые есть только у вас.
Пять ошибок с готовыми шаблонами
- Не прочитана лицензия. «Бесплатный» шаблон может требовать ссылку на автора в подвале или запрещать коммерческое использование. Платная тема из каталога обычно покупается на один сайт.
- Взломанная платная тема. Темы, которые раздают «бесплатно» на сторонних сайтах, нередко содержат вредоносный код или скрытые ссылки. Сэкономленные пару тысяч рублей потом обходятся чисткой сайта.
- Шаблон тянет всё сразу. Демо-версия с десятью слайдерами, анимацией и пятью шрифтами медленно открывается на телефоне. Неиспользуемые блоки и скрипты нужно убирать, а не прятать.
- Структура подогнана под шаблон. В шаблоне есть «Команда», «Тарифы» и «Партнёры» — и они появляются на сайте, хотя ни команды на фото, ни тарифов у бизнеса нет.
- Шаблон нельзя обновить. Если тему правили прямо в её файлах, обновление от автора сотрёт правки. Доработки делаются в дочерней теме или отдельном файле стилей.
Шаблон — это заготовка, а не сайт. Разница между сайтом «на шаблоне» и сайтом, который выглядит шаблонно, — в том, сколько в нём ваших фактов: фото работ, цены, сроки, ответы на вопросы клиентов.
Как ищут: короткие ответы
- «шаблоны создания сайт» — если нужен готовый дизайн, смотрите галереи конструкторов и темы CMS; если нужен порядок работы — начните с шаблона брифа и ТЗ из этой статьи.
- «шаблон при создании сайта» — экономит время на дизайне и вёрстке, но не на текстах и фото: их всё равно готовите вы.
- «шаблоны создания своего сайта» — для самостоятельной сборки подходят конструкторы; для сайта, который будет расти, — тема CMS или свой шаблон.
- «брифы шаблон создание сайта» — десять вопросов о бизнесе важнее двадцати вопросов о цветах.
- «шаблон тз создание сайта» — шесть разделов: цель, структура, шаблоны страниц, функции, контент, приёмка. Самый важный из них — шаблоны страниц, где для каждого типа страницы перечислены блоки сверху вниз; без него цена и сроки остаются условными.
- «создание шаблона для сайта часть 2» — так обычно ищут продолжение видеоурока по вёрстке. Если урок дошёл до HTML и CSS, следующий шаг — подключить шаблон к CMS, чтобы страницы создавались из админки.
Когда заказчик приходит со ссылкой на понравившийся шаблон, я первым делом прошу его открыть демо и вслух назвать, что он поставит в каждый блок. Обычно на третьем блоке становится понятно, что половина шаблона не нужна, а того, что действительно важно для бизнеса, в нём нет. Это не повод отказываться от шаблона — это повод сначала написать ТЗ.
— Александр Рожков
Нужен сайт, где шаблон подобран или сделан под вашу структуру, а не наоборот? Условия и сроки — на странице создания сайтов, ориентир по цене — в калькуляторе.
Итог
Шаблоны для создания сайта — это и готовый дизайн, и рабочие документы. Готовый шаблон оправдан, когда структура типовая и переделывать придётся меньше трети блоков; иначе дешевле свой. Число шаблонов страниц равно числу типов страниц, а не числу страниц, — это стоит посчитать до вёрстки. Этапы создания шаблона — бриф, ТЗ, прототип, макет, вёрстка, натяжка на CMS, заполнение и проверка; готовая тема сокращает середину, но не начало и не конец. И самые полезные шаблоны в проекте — короткий бриф, ТЗ с разделом «шаблоны страниц» и таблица контента.
Если нужен сайт на адаптированном или своём шаблоне — условия на странице создания сайтов.
Опрос
С чего вы начинаете сайт?
Проголосуйте, чтобы увидеть, как думают другие читатели
Часто задаваемые вопросы
Что такое шаблон сайта?
Заготовка страниц с общими частями — шапкой, меню, подвалом — и местами, куда подставляется содержимое конкретной страницы. Бывают готовые шаблоны конструкторов, темы CMS и шаблоны, свёрстанные под проект.
Что выбрать: готовый шаблон или свой?
Готовый — если структура типовая и переделывать придётся меньше трети блоков. Свой — если структура нестандартная, нужен фирменный стиль или своя логика каталога.
Сколько шаблонов страниц нужно сайту?
Столько, сколько разных типов страниц: главная, услуга, статья, контакты и так далее. На сайте услуг обычно выходит от четырёх до восьми.
Из каких этапов состоит создание шаблона?
Бриф, техническое задание, прототип, макет, вёрстка, подключение к CMS, заполнение и проверка на телефоне и по скорости.
Что должно быть в брифе на создание сайта?
Вопросы о бизнесе, клиентах, целевом действии на сайте, конкурентах, готовых материалах, страницах, интеграциях, бюджете и сроке. Десяти вопросов обычно достаточно.
Чем ТЗ отличается от брифа?
Бриф — вопросы и ответы заказчика. ТЗ — список работ: страницы, блоки на каждом типе страницы, функции, контент и порядок приёмки.
Можно ли использовать бесплатный шаблон для коммерческого сайта?
Зависит от лицензии: некоторые требуют ссылку на автора или запрещают коммерческое использование. Взломанные платные темы использовать не стоит — в них бывает вредоносный код.
