Нужен сайт. С чего начать?

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

Павел ШУДНЕВ

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

Что, с точки зрения структуры, из себя представляет типичный сайт небольшой российской компании? Главная страница – есть всегда. Страница «О компании» – почти всегда. Другие страницы: «Контакты», «Услуги», «Цены» и пр. Чтобы понять суть, давайте рассмотрим структуру компании «Рога и копыта», на сайте которой есть страница «О нас», «Услуги» и «Контакты».

На странице «О нас» идет речь о том, как вам несказанно повезло, что вам выпал шанс поработать с этой чудесной компанией. На странице «Контакты» есть адрес, телефон и схема проезда к офису. На странице «Услуги» говорится об услугах, которые компания оказывает. Их две: обрезка копыт и заточка рогов. Что важно: на каждую услугу также сделана своя страница.

Простая структура

Таким образом, структуру этого сайта можно представить так:

1. О нас
2. Услуги
2.1. Обрезка копыт
2.2. Заточка рогов
3. Контакты

Правильно? Неправильно: не указана главная страница. Должно быть:

Главная
1. О нас
2. Услуги
— 2.1. Обрезка копыт
— 2.2. Заточка рогов
3. Контакты

В этом примере услуг всего две. Но их может быть и десять, и пятнадцать, и двадцать. И что – каждую нужно прописывать?! Ответ на самом деле и да, и нет: да – для заказчика (чтобы он понимал, что у него в итоге должно быть на сайте), нет – для дизайнера и/или разработчика. Последним нужно просто понимать, сколько типовых шаблонов нужно будет разработать.

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

Главная
1. О нас
2. Услуги
2.1. Страница услуги
3. Контакты

Обратите внимание: вместо энного количества страниц о конкретных услугах компании появляется всего одна страница – страница услуги!

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

О шаблонах и их количестве

Работа веб-дизайнера сводится к разработке так называемых шаблонов на основании предоставленной заказчиком структуры сайта. Что такое шаблон? Рассмотрим на примере – с картинками, чтобы вы не скучали 🙂

Вот две страницы. Первая:

clusterwin-support-780

Вторая:

clusterwin-sotr-780

Чем они отличаются? У них разные картинки, разные тексты, разное меню боковых колонок. Это две разные страницы. Заметьте: все эти элементы расположены одинаково. И если их рассматривать не как страницы, а как шаблоны, то шаблон это будет один.

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

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

Шаблон проектирования – это повторимая архитектурная конструкция, представляющая собой решение проблемы проектирования в рамках некоторого часто возникающего контекста

О как. Вы можете спросить: и зачем мне всё это знать? А затем, что от количества шаблонов сайта зависит цена работы. Как дизайнера, так и разработчика. Чем меньше шаблонов – тем ниже стоимость. И тем быстрее можно сделать работу.

Структура сайта » Количество шаблонов » Цена

Вернёмся к нашим баранам. Точнее к тому, что от них осталось – к «Рогам и копытам». Сначала ещё раз повторим упрощённую структуру сайта этого трансатлантического конгломерата:

Главная
1. О нас
2. Услуги
— 2.1. Страница услуги
3. Контакты

Посчитаем шаблоны:

  1. Главная страница – шаблон №1
  2. Страницы «О нас» и «Услуги» могут быть сделаны по одному образу и подобию – по одному шаблону (в среде веб-дизайнеров и разработчиков этот шаблон принято называть типовой страницей)
  3. Шаблон страницы «Контакты» пусть будет отличаться (это наш 3-й шаблон)
  4. И страница услуги (будь то обрезка копыт или заточка рогов) – тоже может отличаться от других, следовательно, это четвёртый шаблон

Я бы представил структуру этого сайта так:

Главная
1. О нас – ТИПОВАЯ
2. Услуги – ТИПОВАЯ
— 2.1. Страница услуги
3. Контакты

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

Что осталось неясным? Наверное, вопрос ценообразования.

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

На момент написания этой статьи (апрель 2014 года) разработка дизайна шаблона главной страницы сайта у меня стоит 10-15 т.р. (на неё уходит больше всего времени), дизайн шаблонов внутренних страниц (все остальные страницы, кроме главной) – таких как «Услуги», «Контакты», «О нас» и пр. – 2-3 т.р.

Нетрудно посчитать, что разработка дизайна сайта условного ЗАО «Рога и копыта» у меня бы стоила: 10÷15 (главная) + 3*2÷3 (три шаблона внутренних страниц) = 10÷15 + 6÷9 = 16÷24 – от 16 до 24 тысяч рублей или в среднем двадцать тысяч рублей.

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

Другие статьи
Три задачи главной страницы сайта
Главная страница сайта должна решать три задачи: дать представление о том, чем занимается компания, вызвать доверие и подсказать, куда двигаться дальше. Как правильно решить эти задачи, читайте ниже. Читать далее
Зачем нужен лендинг пейдж?
В прошлой статье мы ответили на вопрос, что такое лендинг и чем он отличается от обычного сайта. В этот раз мы решили рассказать о том, для каких именно целей нужен landing page. Читать далее
Адаптирован ли ваш сайт для мобильных устройств? Проверьте сами!
При помощи специального сервиса Google всего за два клика можно узнать, удобно ли просматривать ваш сайт на мобильных устройствах. На фоне официального занижения в результатах поиска неадаптивных сайтов, вопрос удобства просмотра с мобильных девайсов становится всё более актуальным. Читать далее
Три вида тестирования сайтов
Как показывает опыт, готовые сайты всегда (!) отличаются от запланированных. Чтобы выявить отличия – и получить именно то, что вы заказали (а не что-то похожее), нужно проверить на соответствие запланированному внешний вид сайта (дизайн) и его работу (функционал). Иногда – скорость загрузки сайта. Об этих видах тестирования – читайте ниже. Читать далее