Этапы создания сайта – проектирование, дизайн, программирование

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

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

1 этап: определяем цель

Целеполагание — чуть ли не главный этап создания веб-сайта, от которого зависит вектор работы над проектом. Глобально все web-ресурсы делятся на коммерческие и некоммерческие. Исходя из основной цели, накручивается их функционал.

Цель — продажи? Значит, нужен защищенный протокол, удобная форма заказа, а товары или услуги мы расписываем так, чтобы у пользователя сложилось ощущение живого взаимодействия с продуктом.

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

В вашей сфере постоянно что-то происходит? Делаем акцент на новостном блоке. Таким образом подстраиваемся под каждую цель. Вот самые распространенные:

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

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

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

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

2 этап: выбираем тип сайта

В зависимости от задач, выбираем тип будущего проекта.

• Интернет-магазин. Такие площадки живут по определенным правилам: здесь есть обязательные атрибуты:
  
  • карточки товаров;
  • корзина;
  • форма заказа и оплаты с подключением платежных систем;
  • оформление доставки.
• Сайт услуг. Небольшие ресурсы с описанием услуг, прайсом, отзывами клиентов, формой записи или бронирования.
• Сайт-визитка или лендинг. Обычно это одностраничник с презентацией чего-то понятного, не слишком масштабного:
  
  • конкретного специалиста: фотографа, копирайтера, массажиста, массовика-затейника;
  • несложной услуги, типа гадания на картах таро, маникюра, визажа;
  • мероприятия: концерта, соревнования, похода, спектакля, экскурсии.
• Сайт компании или корпоративный. Это полноценный многостраничник с разными тематическими разделами: главной страницей, каталогом продукции или услуг, историей компании, кейсами, новостным блоком, контактами и формой обратной связи. Начинка корпоративного ресурса зависит от характера бизнеса.
• Портал. Здесь концентрируется тематический контент: статьи, фото, видео. Цель портала — аккумулировать полезную информацию на определенную тему.
• Форум. Это площадка для живого общения аудитории. На форумах обсуждаются вопросы, крутящиеся вокруг одной общей темы. Сейчас классические форумы постепенно замещаются общением в соцсетях.

3 этап: подбираем доменное имя

Доменное имя — это название, и одновременно интернет-адрес web-ресурса. Домен невозможно застолбить за собой навсегда: его арендуют обычно на год, а потом продлевают аренду. Покупать доменное имя лучше у надежных регистраторов типа REG.RU или RU-CENTER. Проверьте историю домена: адрес, побывавший под фильтрами в прошлой жизни, в будущем будет очень сложно продвигать. Интернет помнит все: тень от недобросовестного предшественника ляжет на вас.

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

Выбор имени — ответственный этап создания сайта, здесь нужно соблюдать основные правила:

• не вылезать за объем в 12 символов;
• проверять, чтобы адрес легко диктовался и воспринимался на слух;
• ограничиться словом или короткой фразой.

Доменная зона — буквы после точки на конце адреса — тоже влияет на ранжирование в поисковиках. Есть традиционные географические маркеры (.ru, .com, .ua) и тематические (.media, .travel). Среди тематических выделяют группу подозрительных зон, где сосредоточены ресурсы сомнительного содержания: порно, интернет-казино, финансовые махинаторы. В эту компанию лучше не попадать.

4 этап: выбираем хостинг

На 4 этапе создания сайта придется изучить вопрос с хостингами. Для бесперебойной работы нужен надежный хостинг-провайдер. Это компании, предоставляющие в аренду место для хранения файлов вашего проекта на своих серверах. Хостинги бывают разных типов, у каждого из которых свой набор функций, но, пожалуй, главный параметр Uptime — время бесперебойной работы. Норма от 99,95 %.

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

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

Подробно о выборе хостинга читайте в нашей статье Как хостинг влияет на SEO продвижение сайта.

5 этап: выбираем движок

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

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

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

Существуют разные форматы программного обеспечения для управления сайтами:

• коробочный — готовый софт, требующий установки на сервер;
• облачные конструкторы — упрощенная версия для чайников;
• самописный — уникальный софт, созданный под конкретный проект;
• SaaS (software as a service) — пакетный онлайн-сервис со встроенной админкой, возможностями кастомизации и масштабирования своего проекта;
• Open source — софт с открытым кодом, когда все желающие на любом этапе создания сайта могут вносить изменения в html-код, подгоняя функционал под себя.

6 этап: составляем ТЗ

Русская народная поговорка «Без ТЗ результат ХЗ», несмотря на грубоватость формулировки, максимально точно характеризует этот этап работы над созданием сайта. Грамотное техническое задание — это гарантия для заказчика и исполнителя, что результат работы будет предсказуемым, а усилия команды не окажутся напрасными.

Главные задачи ТЗ:

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

Каким должно быть хорошее ТЗ, мы рассказали в статье Создание технического задания на разработку сайта. По сути, ТЗ — это инструкция для всей команды разработчиков, но написанная таким языком, который будет понятен и заказчику без перевода. Если кратко, то важны 3 качества документа:

• доскональная проработка деталей: заносим в ТЗ любые мелочи, которые, на первый взгляд, кажутся очевидными;
• точные формулировки, не допускающие разночтений;
• понятные для всех участников проекта описания.

На этапе составления ТЗ собирается и кластеризируется семантическое ядро, на основе которого выстраивается структура. Семантическое ядро — это запросы, по которым вас будут находить пользователи в сети. Под каждую группу запросов создается отдельная страница. Качественное семантическое ядро позволит не только сформировать логичную структуру, но и поможет SEO-специалистам эффективно продвигаться в поисковых системах.

7 этап: прототипирование

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

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

Прототипирование снимает целый ряд проблем:

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

Прототипы можно рисовать хоть на бумаге, но проще освоить специальные сервисы типа Figma, InVision Studio, Wireframe.cc, Google-рисунков. Часть из них рассчитана на профи, но многие годятся для чайников и, благодаря понятному интерфейсу, осваиваются неискушенными пользователями очень быстро.

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

8 этап: готовим контент

Прототипы сделаны, но перед окончательной разработкой дизайна сайта, нужно пройти этап подготовки контента. Здесь возможны 3 сценария:

• подготовка контента полностью ложится на плечи команды разработчика: проводятся интервью, пишутся статьи, организуется фото- и видеосъемка;
• контент готовит сторона компании-заказчика, готовые материалы предоставляются разработчику, который заливает всю информацию на сайт;
• разработчик готовит «рыбу» и обучает заказчика самостоятельно управлять контентом.

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

Что нужно учитывать, создавая контент:

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

9 этап: создаем дизайн

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

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

К созданию дизайна можно подойти с двух сторон:

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

10 этап: разрабатываем дизайн для адаптивной версии

Создание адаптива мы вынесли в отдельный пункт, потому что теперь это едва ли не основная версия сайта для пользователей. Большинство посетителей заходит в интернет со смартфонов. Из-за этого, не имея мобильной версии своего web-ресурса, вы лишаетесь огромной части трафика.

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

11 этап: верстка

Изо всех перечисленных этапов разработки сайта верстка — чисто техническая часть, когда верстальщики и программисты переводят всю красоту в HTML-код. На многих популярных CMS знание кода не нужно, т.к. в них предусмотрена модульная система, а с конструкторами типа «Тильды» способны разобраться самые отъявленные гуманитарии.

Грамотно сверстанный сайт должен быть:

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

12 этап: программирование функционала

Сайт — это интерактивный продукт, в котором все должно вертеться, нажиматься, открываться, отправляться, куда надо. Настройкой интерактивного функционала занимаются программисты.

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

13 этап: тестирование

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

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

14 этап: запуск

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

Придется обучить сотрудников работать в админке, управлять контентом, анализировать статистику в специальных сервисах поисковиков – «Яндекс.Метрике» и Google Analytics. Для решения сложных технических задач потребуется регулярная техподдержка. Чтобы сайт высоко ранжировался в поисковых системах и был виден пользователям, нужен SEO-специалист, который будет заниматься оптимизацией. То есть удобный, полезный и качественный web-ресурс даже после запуска должен обслуживаться командой специалистов.

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

Заключение

Мы рассказали, из каких этапов состоит создание сайта, но как оценить результат? Выделим шесть критериев оценки качества проекта:

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

Оценить эффективность сайта нельзя сразу после запуска. Следите за статистикой и анализируйте динамику. Для понимания реальной картины потребуется, как минимум, несколько месяцев.