{"id":14262,"url":"\/distributions\/14262\/click?bit=1&hash=8ff33b918bfe3f5206b0198c93dd25bdafcdc76b2eaa61d9664863bd76247e56","title":"\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u041c\u043e\u0441\u043a\u0432\u0435 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0434\u043e 1,5 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"726c984a-5b07-5c75-81f7-6664571134e6"}

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

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

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

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

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

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

0
27 комментариев
Написать комментарий...
Sergio Mekeda

Отличная статья. Все пошагово. Я сейчас тоже начинаю общение с вопроса "Какая цель у сайта?" - "Э-э-э!" и начинаются многонедельные поиски смысла веба). А мог же просто как раньше - просто делать сайты без лишних вопросов))

Ответить
Развернуть ветку
Роман Гришин
Автор

Спасибо!

Ответить
Развернуть ветку
Арсеньев Олег

Полезная статья, спасибо!

Ответить
Развернуть ветку
Роман Гришин
Автор

Спасибо!

Ответить
Развернуть ветку
Serg_Serg

Спасибо, как раз в тему. Интуитивно % 75 сделал).

Ответить
Развернуть ветку
Doifsug Oiuhdvh

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

Ответить
Развернуть ветку
Тимофей Белоглазов

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

Ответить
Развернуть ветку
Евстигней Иванов

вот это скорость, у нас тут дизайн с июля не могут утвердить. всё не достаточно кошерно

Ответить
Развернуть ветку
Роман Гришин
Автор

Сроки - вопрос, не имеющий однозначного ответа, в том плане, что очень многое зависит, прежде всего, от заказчика и его готовности оперативно и эффективно взаимодействовать. По нашему опыту, средний проект занимает, минимум, 2-3 месяца. Сложные проекты длятся, примерно, полгода.
Что касается ценообразования, то тут такой порядок цифр:
Дизайн для стандартного интернет-магазина стоит от 60-80 т.р., но окончательная цена зависит от количества страниц.
Верстка выходит, примерно, в 90 т.р.
Программирование серьезно зависит от задач, минимально 50 т.р, в среднем 100 т.р., а так есть проекты, где более полумиллиона ушло на программирование, и еще даже конца не видно.

Ответить
Развернуть ветку
Ник Исходник

Спасибо. Как раз сейчас это проблема стоит. Вообще не знаю с чего начать=))))

Ответить
Развернуть ветку
Роман Гришин
Автор

Спасибо, теперь Вы знаете с чего начать)

Ответить
Развернуть ветку
Оксана Константинова

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

Ответить
Развернуть ветку
Nick Sappo

Это ж что за студия такая, которая за 200к проекты делает, когда фрилансеры больше берут за работу.

Ответить
Развернуть ветку
Дмитрий Клещевников

И фрилансеры и студии разные бывают, такие цены у нас тоже не навсегда :)

Ответить
Развернуть ветку
Роман Гришин
Автор

Оксана, прежде всего, нужно разобраться, что вкладывает продажник в понятие "уникальный дизайн". За 20 т.р. сценарий будет примерно следующим: Вам подберут подходящий шаблон, поменяют в нем лого, фоновую картинку и изменят цвет меню и футера под корпоративные цвета компании. Сколько это займет времени? Час, максимум. Достаточно ли этого для "уникальности"? Скорее всего, в понимании тех, кто предлагает такой вариант, да, достаточно.
Адаптив? Тот шаблон, который они "индивидуализировали", скорее всего резиновый, и вот адаптивность уже заложена с самого начала.
Итого, на "производство" сайта уйдет два-три часа. На наполнение еще несколько часов - и вот сайт за 20 т.р. готов, при затратах в 6-8 часов.
Сколько времени потребуется только на отрисовку действительно уникального дизайна главной страницы? Примерно, 16-20 часов. Только отрисовка одной страницы!
Резюмируя, за 20 т.р. никто не будет проводить предварительные исследования, проектировать структуру на основе спроса, рисовать уникальный дизайн и т.д. и т.п., просто потому, что сама себестоимость этих процессов в разы выше.
Так что 200 т.р. - это хорошая стартовая сумма для небольшого проработанного проекта, и это далеко не предел.

Ответить
Развернуть ветку
Оксана Константинова

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

Ответить
Развернуть ветку
Роман Гришин
Автор

Оксана, сайт - это отражение Вашего бизнеса. Начинать дело с сайта, не имея никаких уникальных графических элементов, мягко говоря, проблематично. Как Вас будут узнавать клиенты? Другое дело, что процессы создания фир.стиля и разработки сайта лучше запускать параллельно.
Чаще всего, это делают разные компании, но крупная компания, обладающая опытом и в том, и в другом, может сделать процесс эффективнее (за счет улучшенной коммуникации). Только ценник таких компаний обычно не на один порядок выше.

Ответить
Развернуть ветку
Оксана Константинова

Спасибо, Роман, все понятно! Ждем новых интересных статей!

Ответить
Развернуть ветку
Роман Гришин
Автор

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

Ответить
Развернуть ветку
Оксана Константинова

Спасибо за ответ, Роман! Посмотрела портфолио компании на сайте. Есть достойные работы. Но вот взять, например, вот этот сайт, который у вас указан: http://www.expert-consult.su/ . Субъективно, конечно, но с виду решение совершенно стандартное. То есть ничем не отличается от решений, которые предлагают за 20 - 50 т.р. Повторюсь, что субъективно. В сайтах не очень понимаю. Может быть и не всегда нужна эта уникальность.

Кстати, а почему с WP не работаете, а только с битрикс? Чем от лучше для компаний (если лучше)?

Ответить
Развернуть ветку
Роман Гришин
Автор

Оксана, если переходить к конкретному примеру - здесь было обновление дизайна в рамках продвижения. Юридическая тематика - все строго, ничего лишнего. Только корпоративные цвета и тд - пожелание заказчика. От заказчика всегда зависит конечный результат. Даже отличный дизайн, в который будут при наполнении вставлены разнотипные фотографии сомнительного качества,
полностью потеряет все свои преимущества. Поэтому вопрос с материалами для наполнения также должен быть продуман заранее, например, заложен бюджет на фотосъемку. На WP тоже делаем, но стараемся использовать лицензионные решения, если бюджет клиента позволяет. Сайт, на который Вы обратили внимание, как раз на WP.

Ответить
Развернуть ветку
Sergey Danilov

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

Вместо этого нужно применять agile методики, и делать сайт короткими спринтами.

Ответить
Развернуть ветку
Слон Петрович

Здравый смысл не может устареть. Сектанты просто не умеют нормально работать.

Ответить
Развернуть ветку
Дмитрий Клещевников

Это если растягивать процесс разработки на много месяцев. Речь идет в первую очередь о простых, но хороших Интернет-Магазинах и корп. сайтах. Понятно что такой подход при разработке Ozon, Ulmart и Aliexpress не допустим.

Все же думаю, чтобы применять agile методики, нужно чтобы изначально было с чем работать.

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

Ответить
Развернуть ветку
Максим Макаров

Скажу честно - больная для меня тема.
Пишу ТЗ и бриф на разработку новой версии сайта, уже года полтора и не нахожу в себе силы его закончить.
Да чего уж там, даже создавал тендер на поиска помощников и менторов в разработке тз.
Те кто откликнулись -либо совершенно не разбирались в вопросе, либо сливались через несколько дней.
А те кто не сливался, ставил ультиматумы вроде "пишем тз строго для сайта на битрикс"...
Эх, где бы найти достойного человека и наградить его баблом?
Если знаете таких, или сами такой- пишите мне в вк)

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

Может, стоит подробнее рассказать про эти_всего_лишь_30_моментов?)

...Mozilla, Opera, Bing.

Наверное, Edge имелся в виду?

Ответить
Развернуть ветку
Роман Гришин
Автор

Думаю, 30 моментов - это тема для новой статьи) Конечно речь была о флагмане "лучших" браузеров от Майкрософт.) Но мы его пока закроем, и установим Chrome (с).

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
24 комментария
Раскрывать всегда