Студия ВебМаус логотип

У Вас сайт на HostCMS?

доработка 1 200 руб./час

Выбрать дизайн для сайта

1500 вариантов дизайна

Купить готовый сайт

это удобно и выгодно

обратный звонок
ИП Меньщиков А.В.
ОГРНИП: 324762700034718, ИНН 761016505790
Телефон 8 (962) 211-56-75
Telegram:
ArtemVM84

Особенности разработки нового сайта на шаблоне дизайна

статья опубликована 06 ноября 2020 г.

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

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

Читайте внимательно — здесь есть вся информация, которая вам необходима!

Что такое шаблон дизайна

В большинстве случаев далеко не все клиенты понимают, что такое шаблон дизайна, поэтому сначала определимся с тем, что это такое! Внимательно прочтите определение ниже.

Шаблон дизайна — это НЕ готовый сайт!

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

Повторим ещё раз — это НЕ готовый работоспособный сайт, а просто ОБРАЗЦЫ страниц сайта. Таким образом, любой шаблон определяет для будущего сайта:

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

Чтобы было удобно подбирать шаблон, для каждого из них предусмотрено онлайн-демо. Иногда у одного шаблона может быть несколько онлайн-демо, то есть это варианты одного шаблона, отличающиеся друг от друга.

Что такое онлайн-демо шаблона?

Это ссылка, которую можно открыть в браузере и посмотреть шаблон дизайна «в действии», то есть просмотреть все типовые страницы шаблона, переходя по ссылкам «сайта». Именно так и нужно выбирать шаблон.

Шаблоны дизайна — это статичные HTML файлы. Никакой динамический функционал у них не работает и работать не должен (формы обратной связи и прочие формы, оформление заказа в магазине, авторизация в личном кабинете, добавление комментариев и так далее).

Из чего состоит шаблон дизайна

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

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

Язык шаблона дизайна

Чаще всего все надписи в шаблоне английские, потому что это наиболее универсальный вариант. Это не проблема, поскольку базовые знания английского языка есть у всех. Естественно, что на готовом сайте всё будет на русском языке.

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

Обычно эта проблема выявляется в самом начале разработки сайта и приводит к тому, что шрифт, на котором основан шаблон, придётся менять на другой (что в свою очередь, вызывает правки стилей и/или вёрстки). Таким образом, подобная проблема может увеличить срок разработки сайта из выбранного шаблона. Это нормально.

Во избежание (или для минимизации) проблем со шрифтами, мы рекомендуем не выбирать шаблоны с "вычурными" нестандартными шрифтами.

Почему шаблон дизайна уменьшает стоимость создания сайта

Если создавать дизайн сайта полностью с нуля, то нужно выполнить следующие операции:

  • Придумать концепцию дизайна.
    Включая структуру сайта, цветовую схему, расположение блоков на страницах и так далее. Дело существенно осложняется тем, что нужно выяснить у клиента, что именно он хочет получить (проблема в том, что почти все клиенты либо не знают что хотят, либо знают, но не могут это выразить правильно).
  • Нарисовать дизайн-макеты для всех типовых страниц.
    Чем сложнее сайт, тем больше типовых страниц на нём есть. А поскольку все сайты сейчас адаптированы и для мобильных устройств, то каждый макет нужно отрисовать в нескольких вариантах (как минимум в двух: для ПК и для мобильных). С учётом предыдущего пункта, довольно часто приходится переделывать макеты до тех пор, пока клиенту не понравится конечный результат (именно по причине того, что результат работы оценивается субъективно, такие работы выполняются только с почасовой оплатой).
  • Вёрстка макетов.
    Нарисованные макеты нужно сверстать, то есть получить образцы типовых страниц, которые уже можно открыть в браузере. Это также довольно длительная работа.
  • Программирование сайта
    Процесс наложения свёрстанного дизайна на систему управления контентом (платформу сайта). Эта работа выполняется программистом вручную и занимает много времени.

Таким образом, выбор готового шаблона дизайна исключает из работы по созданию нового сайта пункты с первого по третий включительно, а значит стоимость разработки существенно снижается (для сложных сайтов выгода может составлять сотни тысяч рублей)..

Как правильно выбирать шаблон дизайна при помощи онлайн-демо

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

  • Выбираем раздел каталога с шаблонами нужного типа (например, блоги или интернет-магазины). Если у вас сайт определённой тематики, то можно выбирать не по типу сайта, а по его направленности (для этого воспользуйтесь списком тематических подборок справа в каталоге).
  • Просматриваем список шаблонов и смотрим скриншоты главной страницы. Если какой-то скриншот понравился, то кликаем на него и увеличиваем, чтобы посмотреть детали.
  • Если интерес к данному шаблону не пропал, открываем онлайн-демо. Если у шаблона несколько вариантов демо, то нужно открыть страницу полного описания шаблона и посмотреть все варианты.

Подбор шаблона дизайна — это, что вы должны сделать сами, ведь это ваш будущий сайт и никто за вас не решит как он должен выглядеть. И да, это может быть долго (но если вам действительно нужен сайт, то подбор шаблона превращается в интересную задачу).

Выбираем шаблон дизайна под свои нужды

При выборе шаблона стоит помнить, что:

  • Язык большинства шаблонов английский. Не обращайте внимания.
  • Контент (тексты, картинки) на страницах тоже все временные (кроме тех, что являются частью дизайна сайта, например, фоновые картинки, кнопки и так далее).
  • Часто в составе шаблона одна и та же страница может быть представлена в двух или более вариантах (например, разные варианты главной страницы). Выберите то, что вам больше нравится и подходит.

Если шаблон вам нравится, то не поленитесь посмотреть все образцы типовых страниц, в том числе на мобильном!

Совет при просмотре страниц шаблона.

Мысленно подставьте свой контент (тексты, картинки) на место тестового контента шаблона и подумайте, насколько вам нравится результат.

Сайт на шаблоне неподходящего типа

Стоит помнить, что «тип шаблона», так же как и «тип сайта» — это не более чем условности.

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

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

Особенности навигации по страницам шаблона

Также можем дать советы по навигации по страницам шаблона, поскольку они все устроены примерно одинаковы с точки зрения взаимосвязи страниц. Прочтите рекомендации ниже (это общие правила, но могут и бывают исключения).

  • Разные варианты главной страницы.
    Если в шаблоне есть несколько вариантов главной страницы, то обычно посмотреть их можно через основное меню сайта (выпадающее меню с названием Home или аналогичным).
  • Раздел со статьями обычно называется в меню Blog.
    Такой раздел состоит из образцов списка элементов (статей) и страницы статьи. И то и другое может быть в нескольких вариантах. Также раздел блога (и вообще шаблоны блогов) можно использовать не только для собственно статей, но и приспособить его для других целей (в том числе акции, каталог товаров и прочие многостраничные разделы).
  • Раздел с примерами работ обычно называется Portfolio.
    В зависимости от шаблона это может быть как просто фотогалерея, так и возможность сделать для каждого примера работ отдельную страницу. Страницы такого типа обычно применяют для размещения фотографий, выполненных проектов, списка каких-то объектов и так далее.
  • Раздел магазина обычно называется Shop (реже Product).
    Для магазина обычно есть образцы страниц списка товаров и категорий, и страница карточки товара. Также может быть корзина (Shop Cart или просто Cart), страница оформления заказа (Checkout), страница производителей (Producers), избранные товары (Wishlist). Могут быть и другие типы страниц. Также карточка товара и/или список товаров могут быть в нескольких вариантах.
  • Фотогалерея обычно называется Gallery.
    Разделы такого типа обычно предназначены только для размещения фотографий, увеличивающихся при клике. Галерея может быть просто списком, а может быть с возможностью сортировки (фильтрации) фото по группам.
  • Страница Contacts предназначается для размещения контактов.
    Типовая страница с контактами, картой и формой обратной связи. Напоминаем, что формы в шаблонах не работают!
  • Страница About предназначается для размещения информации о компании.
    Может быть в одном или нескольких вариантах. Такие страницы могу быть как очень простыми, так и навороченными (много блоков, часто ненужных). Лишнее всегда можно убрать.
  • Раздел услуг обычно называется Servises.
    Что там внутри — зависит от конкретного шаблона. Раздел с услугами необходим любым компаниям, оказывающих услуги. Также сайты услуг неплохо получаются из подходящих шаблонов блогов.
  • Служебный раздел Pages.
    Может называться не обязательно так. В любом случае часто в такой раздел шаблона помещают все остальные типы страниц, которым не нашлось места в меню. Что-то может пригодиться, что-то нет. В любом случае посмотрите.
  • Служебный раздел Elements.
    Может называться не обязательно так. Предназначается обычно для показа образцов типографики шаблона и каких-то общих для страниц блоков (например, слайдеры, модальные окна, сообщения на странице и другие компоненты страниц).

Выше описаны типовые разделы. Их состав в разных шаблонах отличается, так что смотрите сами, что есть в конкретном шаблоне.

Как делается сайт из шаблона дизайна

При создании нового сайта на основе выбранного шаблона дизайна вся работа по программированию выполняется только вручную!

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

Если шаблон уже выбран, с вариантами отдельных страниц (если они есть) определились, что убрать и что добавить тоже выяснили, то можно приступать собственно к созданию сайта из выбранного шаблона. Как именно это делается, вам как клиенту знать не нужно и неинтересно. Скажем только, что это сложная и длительная работа.

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

Изменение шаблона или его частей в процессе создания сайта

В процессе создания сайта из шаблона в исходный дизайн можно внести нужные вам изменения, если это требуется. Таким образом, можно что-то добавить, а что-то удалить. Любые изменения могут как увеличивать, так и уменьшать конечную стоимость разработки сайта.

Таким образом, можно переделать практически что угодно.

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

Сколько будет стоить разработка сайта

Общая стоимость разработки сайта из шаблона дизайна зависит от следующих факторов:

  • Сложность шаблона дизайна.
    Чем сложнее шаблон, тем больше времени уйдёт на разработку сайта. Часто встречаются шаблоны, предполагаемый функционал которых запрограммировать на готовом сайте очень сложно, а есть наоборот очень простые шаблоны.
  • Доработки выбранного шаблона.
    Если какие-то разделы или блоки страниц вам не нужны, то их можно исключить. Это уменьшит время разработки и, следовательно, общую стоимость проекта. Напротив, добавление в готовый сайт того, что в шаблоне отсутствует (новые блоки на страницах, новые разделы сайта, смена цветовой гаммы шаблона), увеличит общую стоимость создания сайта.
  • Загрузка контента.
    Если это каталог товаров, услуг или интернет-магазин, то заполнение каталога не входит в стоимость разработки сайта и рассчитывается отдельно. Если вы не хотите заполнять каталог самостоятельно, мы сделаем это за вас, но конечная стоимость сайта возрастёт (существенно, если каталог большой и/или сложный).

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

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

Дополнительные расходы на лицензию платформы

Мы делаем разработку новых сайтов только на профессиональной платформе HostCMS, что обеспечивает не только высокое качество сайта, но и большие возможности для его последующего развития. В зависимости от требуемого функционала сайта может потребоваться та или иная лицензия на платформу сайта. Если бесплатной редакции недостаточно, стоимость лицензии прибавляется к общей цене сайта.

Дилер HostCMS

С ценами на лицензии и их функциональными отличиями вы можете познакомиться здесь.

Примерные сроки и цены для сайтов разных типов

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

  • Лэндинг (одна страница).
    От одного до трёх дней.
    Цена от 5 до 15 т.р. (включая размещение контента)
  • Сайт-визитка.
    От трёх до семи дней.
    Цена от 15 до 35 т.р. (включая размещение контента)
  • Каталог товаров.
    От пяти до 14-ти дней.
    Цена от 25 до 50 т.р. (включая размещение контента основных страниц, но не включая заполнение каталога товарами)
  • Интернет-магазин.
    От 10-ти до 30-ти дней или более.
    Цена от 50 до 150 т.р. и более (включая размещение контента основных страниц, но не включая заполнение каталога товарами)
  • Блог.
    От четырёх до семи дней.
    Цена от 20 до 35 т.р. (включая размещение контента основных страниц, но не включая размещение статей)
  • Портфолио.
    От четырёх до семи дней.
    Цена от 20 до 35 т.р. (включая размещение контента основных страниц, но не включая размещение готовых работ или фото в разделе портфолио; впрочем, бывают и исключения, если данных немного)
  • «Премиум шаблоны».
    В этом разделе у нас собраны различные шаблоны, обычно сложные. Если это магазин, ориентируйтесь на цены и сроки для магазинов. В таких шаблонах может быть и блог, и магазин и портфолио, а также много чего ещё. Сроки и стоимость индивидуальны (впрочем, какие-то разделы можно удалить, если они не нужны, но сам шаблон нравится).
  • Заглушки на сайт.
    В пределах одного дня.
    Заглушки — это фактически одна страница, для которой даже платформы сайта не требуется. Обычно стоимость в пределах пары тысяч рублей, если заглушка не содержит форм и другой подобный функционал.
  • Страница ошибки 404.
    В пределах одного дня, если требуется именно отдельная страница 404/403, а не интеграция её в дизайн существующего сайта.
    Для сайта на платформе HostCMS стоимость в пределах пары тысяч рублей.

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

Если вас заинтересовал какой-то конкретный шаблон, свяжитесь с нами и мы попробуем по возможности уточнить стоимость разработки сайта на выбранном шаблоне.

Остались вопросы?

Прежде всего перечитайте ещё раз с самого начала! Если и тогда что-то осталось непонятным, перейдите в каталог шаблонов дизайна по ссылке, указанной в начале статьи, и попробуйте выбрать подходящий шаблон по типу сайта (меню слева) и/или по его тематике (теги справа).

Если вы уже подобрали более или менее подходящий шаблон, свяжитесь с нами для уточнения деталей будущего проекта. Для выбранного шаблона мы можем попытаться уточнить стоимость разработки сайта, но помните, что от вас также могут потребоваться уточнения (например, что в шаблоне вам не нужно; что добавить и т.д.). Если шаблон очень сложный и/или вы хотите внести много правок (или они значительные, сложные и т.д.), то уточнение цены скорее всего будет невозможным.

В любом случае помните, что вам так или иначе придётся участвовать в процессе создания сайта — это нормально, ведь это ваш сайт!

Выбрать шаблон сайта

студия WebMouse, мини-логотип
С уважением,

опубликовано 06 ноября 2020 г.

Поделиться ссылкой на эту статью

Если вам понравилась статья, поделитесь ей с друзьями или коллегами. Также вы можете присылать нам свои собственные статьи для публикации.

WebMouse — официальный дилер HostCMS
Вы занимаетесь своим бизнесом. Мы — вашим сайтом.