Уже почти 10 лет я занимаюсь разработкой сайтов. За это время я прошел путь от html-страничек на народе до больших масштабируемых веб-сервисов и пришел к определенным наиболее эффективным и удобным этапам разработки. Этим опытом я  хочу поделиться сегодня.

Этап 1: “А оно нам надо?”

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

Как можно ответить на этот вопрос? Например: “Хочу заработать денег”, “Хочу продать свою услугу”, “Хочу стать известным блоггером”,  “Хочу научиться делать сайты”. Если Вы четко ответили на этот вопрос, двигаемся дальше.

Этап 2: “Четко поставленная цель - половина успеха!”

Выяснив, зачем Вам сайт, конкретизируйте, сформулируйте и запишите, какие точно задачи он будет решать, например: “Я фотограф. Мне нужен сайт, чтобы получать новых клиентов на фотосъемку”. Отлично, теперь Вы понимаете, что все Ваши дальнейшие действия должны быть направлены на то, чтобы получить клиентов на фотосъемку.

Этап 3: “А как этого добиться?”

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

В своей работе я часто слышу: “Сначала сделаем сайт, а уж потом решим, как продвигать” - это серьезная ошибка, которая будет стоить денег и времени. С рекламной кампанией нужно определяться заранее.

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

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

Этап 4: “Блочная структура”

На основании маркетинговой концепции, определяем список разделов и сервисов на сайте и рисуем Структуру сайта. Я для быстрого проектирования использую онлайн-сервис https://www.draw.io. Можете использовать любую программу, где Вы привыкли рисовать. Должно получиться что-то такое:

Этап структурирования

Теперь Вы не упустите ни один раздел. В вашей голове сформируется структура Вашего сайта, сгруппируются разделы, кнопки. Уверен, придет в голову много нового и полезного.

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

Этап 5: "Прототипы"

Когда структура готова, переходим к прототипированию. Прототип - это сетка страницы без дизайна. При разработке прототипа мы распределяем текстовые блоки, меню, кнопки, которые продумали, разрабатывая структуру сайта. Стараемся при этом, чтобы выделенные разделы попали в более заметные места сетки. Также не забываем о традиционном положении некоторых элементов: если вы делаете корзину, поставьте её справа вверху, ведь именно там её привыкли искать. Даже если она очень здорово вписалась в дизайн футера, поставьте её справа вверху:)
Должно получиться что-то такое:

 Этап прототипирования

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

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

Этап 6: "Реализация"

Если вы сделали прототипы, самое сложное позади! Далее Вы можете:

  1. Найти шаблон, похожий на Вашу сетку.
  2. Разработать и сверстать самостоятельно (попробуем сделать вместе в следующих статьях).
  3. Пойти в веб-студию с готовой сеткой - это будет отличное дополнение к ТЗ!

Разработка дизайна

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

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

Надеюсь, этот материал будет Вам полезен. Жду вопросов! Успехов в веб-разработке!

Продолжение темы: Сколько стоит Сайт-визитка?

Изображения и примеры: iti52.ru/portfolio/casparus/

  • 23:01 19 июля 2015
  • Koder