Создание сайта: что предусмотреть на всех этапах05.12.2017 12:21

Советы от руководителя команды разработки компании Dfaktor Романа Гришина.

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

• выбирает подрядчиков на создание сайта, но не понимает, как оценить адекватность предложений на рынке;

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

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

Шаг первый: поставить цель

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

Например.

• Я создаю портал, посвящённый киноиндустрии, планирую привлекать пользователей из поисковых систем и соцсетей, получать доход за счёт рекламы на портале.

• Я создаю интернет-магазин одежды, планирую привлекать на него пользователей из поисковых систем, соцсетей, с помощью контекстной и нативной рекламы, из рассылок.

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

Этот шаг прост и очень важен.

Шаг второй: определить целевую аудиторию

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

Например, так: «Наша аудитория — это 70% мужчин в возрасте от 18 до 25 лет. Они импульсивны, целевое действие хотят выполнить сразу, не вникая в контент».

Эти данные будут учтены при разработке посадочных страниц с точки зрения маркетинга и дизайна.

Распространённая ошибка на данном этапе — говорить, что ваш сайт создаётся для всех.

Шаг третий: показывать на сайте то, что хотят видеть пользователи

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

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

Пример. Вы решили разработать сайт, посвящённый кино, привлечь на него пользователей и монетизировать его через рекламу. По каким шаблонам запросов пользователи смогут найти этот сайт? Давайте посмотрим на статистику запросов в wordstat.yandex.ru:

• Подборки фильмов по режиссерам или сценаристам (фильмы Скорсезе)

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

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

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

Затем очистить его от мусора, сгруппировать запросы по поисковой выдаче «Яндекса» или Google и в итоге получить всевозможные группы запросов, относящиеся к будущим страницам сайта, то есть полную его структуру.

Шаг четвёртый: создать подходящий контент и быть впереди конкурентов

Полноценная структура сайта под поисковый спрос — это только половина успеха. Остальное зависит от правильного содержания страниц.

Как на этапе проектирования сайта продумать, какое потребуется содержание страниц и в каких объёмах?

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

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

Анализ поисковой выдачи на примере портала о кино

• Ввести в поиск запрос, относящийся к определённому типу страниц. Например, к категории фильмов с каким-либо актёром.

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

Такой детальный анализ выполняется для всех типов страниц. Все данные фиксируются.

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

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

Шаг пятый: проработать юзабилити

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

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

Шаг шестой: техническое задание

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

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

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

• Детальное описание основных параметров сайта: размеры содержательной области, цветовая гамма, важные элементы и пожелания.

• Заложенные настройки под SEO: корректные настройки сервера (чтобы избежать будущих дублей), подключённые дружественные ссылки, возможность прописать уникальные title, description, keywords и h1 для каждой статической страницы, правильные настройки составления и обновления XML-карты сайта, настройки пагинации, меню и прочая навигация на обычных ссылках, а не на скрипте. И еще около 30 моментов.

• Описание адаптивности под различные устройства.

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

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

• Прототипы каждой страницы с детальным описанием каждого элемента.
• Детальное описание алгоритма работы каждого динамического элемента.
• Детальное описание функциональности.

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

Адекватный прототип можно создать в Paint или Excel. Пример части прототипа:

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

Шаг седьмой: дизайн

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

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

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

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

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

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

Шаг восьмой: вёрстка

Вёрстка — это процесс перевода графического изображения в код. Её можно объединить с программированием, но на этом этапе много технических аспектов. Расскажу, на что нужно обратить внимание обычному человеку при приёме работ по вёрстке.

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

• Сайт корректно открывается во всех популярных браузерах: Chrome, Safari, Yandex Browser, Mozilla, Opera, Bing.
• CSS и скрипты вынесены в отдельные файлы.
• Сайт быстро открывается. Для проверки можно использовать сервис Google Page Speed Insights, но не стоит забывать, что сайт находится на тестовом сервере и показатели скорости загрузки могут быть сильно занижены.

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

Шаг девятый: выбор CMS и программирование

CMS — это система управления сайтом. Через неё будет происходить наполнение и редактирование содержания сайта, управление заказами и так далее. К выбору CMS нужно отнестись внимательно.

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

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

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

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

Шаг десятый: наполнение сайта

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

Ещё на этапе подготовки определитесь, кто и каким способом наполняет сайт, как информация будет обновляться потом. И не забудьте оптимизировать картинки перед загрузкой.

Шаг одиннадцатый: приём сайта

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

Как бы смешно это ни звучало, но часто заказчик получает на руки компакт-диск с файлами. А дальше как хотите.

©  vc.ru