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

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

Павел ШУДНЕВ

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

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

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

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

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

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-вёрстку, программирование, размещение на сервере и пр. И эти работы оплачиваются отдельно. Однако об этом мы поговорим в другой раз.

Другие статьи
Почему я решил завести блог?
Потому, что пришло понимание: пора! Чтобы научиться им, блогом, пользоваться. Научиться его продвигать. Развивать. Чтобы с нуля создать интеллектуальный продукт и вывести его на рынок. Кто знает, быть может это станет началом большого пути? Читать далее
Что такое адаптивный дизайн сайта?
Как и следует из названия статьи, адаптивный дизайн сайта – это дизайн, который адаптируется под устройства, с которых просматривается сайт: компьютеры, планшеты и смартфоны. Чтобы сайт на любом устройстве выглядел хорошо, разрабатывается несколько вариантов дизайна – для каждого устройства. Читать далее
Рекламный макет
В этой заметке я расскажу о том, как создать профессиональный рекламный макет, какие к нему предъявляются требования и как оценить его эффективность. Читать далее
О разработке лендинга Uber
Мы получили заказ от петербургского подразделения Uber на разработку адаптивного лендинга для привлечения новых водителей. Задачу нам предстояло решить «под ключ»: написать тексты для лендинга, разработать 6 версий дизайна и выполнить работы по программированию – включая back-end, связанный с обработкой заявок. Читать далее