Строительный инструмент

Как заказать хороший сайт: пошаговое руководство для чайников

Вы наверняка читали про «в наше время каждый уважающий себя бизнес должен иметь веб-сайт». А знаете ли вы, как правильно заказывать сайты: как определять функциональность и выбирать CMS, на что обращать внимание при обращении в студию, как понять, почему один ресурс стоит 10 тыс. рублей, а второй 150 тыс. рублей? Из пошагового гайда вы узнаете, как и где заказать сайт.

Нужен разработчик сайта? Первое, что вы должны понять — заказать сайт в сочи трудно
Дело не в том, что агентства и веб-студии не умеют работать. Проблема в вас. Вы прекрасно разбираетесь в своем деле: строите красивые дома, производите замечательную косметику, готовите самые вкусные в мире стейки. Но вы совсем не разбираетесь в сайтах. Нет, конечно, вы знаете, что сайт интернет-магазина «Евросеть» выглядит отлично и очень вам нравится, а вот ресурс Захолусть-глубинковского треста по производству рогов и копыт — это просто отстой.
Вы не понимаете, что требовать от студии. Когда менеджер рассказывает вам о типах меню, верстке в одну или две колонки, формах регистрации, личном кабинете и адаптивном дизайне, у вас есть только один выбор: верить или не верить собеседнику. Из-за этого вы можете потратить слишком много денег, получить ресурс с неподходящей функциональностью, разругаться с подрядчиком из-за несоответствия дизайна вашим ожиданиям. И дело не в непорядочности или непрофессионализме агентств. Просто вы говорите на разных языках.
Злые вы, уйду в другую студию: заказчики и разработчики сайтов часто говорят на разных языках
Злые вы, уйду в другую студию: заказчики и разработчики сайтов часто говорят на разных языках
Если хотите получить сайт уже сегодня, не ждите, пока агентства научатся разговаривать на вашем языке. Нет, это не попытка перевести стрелки с разработчиков на заказчиков сайта. Просто главный здесь вы. Это у вас успешный бизнес по производству косметики или строительству домов. У вас нет времени ждать, пока наемный менеджер веб-студии найдет нужные слова, чтобы доходчиво объяснить, почему лучше делать сайт на Joomla!, а не на Drupal. Ниже вы найдете информацию, которая поможет вам заказать качественный сайт.
Шаг 1: определите, зачем вам сайт
Если вы знаете, зачем создаете сайт, считайте, что прошли половину пути к успешному запуску ресурса. Смотрите сами: понимание цели существования сайта позволяет заказчику и разработчику пошагово реализовывать задуманное. С другой стороны, если вы заказываете сайт, потому что так принято, то рискуете попасть в ловушку «а может, а давайте». Вот она:
— А давайте еще форум прикрутим.
— А может в меню поменять местами ссылки «О компании» и «Наши продукты»?
— А что, если здесь поиграть цветами, а в подвале добавить вензеля и рюшечки?
— Все замечательно, спасибо вам большое, но вот чего-то еще не хватает, что-то не так.
Конечно, вы имеете полное право не беспокоиться о психическом здоровье разработчиков. В конце концов, работа у них такая. Но непонимание цели создания сайта и следующий из него тупик «а может, а давайте» обходится слишком дорого именно вам. Во-первых, вы зря тратите время. Во-вторых, вы выкидываете на ветер деньги. Вензеля, форум и изменение порядка ссылок в меню вряд ли повлияют на эффективность ресурса. Да что там, они вам просто не нужны.
Как определить, зачем вам сайт? Займитесь целеполаганием. Определите и запишите на бумаге, какой цели вы хотите добиться с помощью ресурса. Также зафиксируйте задачи, которые необходимо решить для достижения цели.
Кстати, вам повезло. Если вы заказываете бизнес-сайт, цель уже готова. Она звучит так: заработать побольше денег. Ну, вы можете причесать ее на свой вкус, сделать измеримой, конкретной и специфичной вашему бизнесу. Суть останется неизменной: любое предприятие или индивидуальный предприниматель создают сайт, чтобы больше зарабатывать.
А дальше вам придется потрудиться. Вы должны записать задачи, которые помогут зарабатывать больше денег с помощью сайта. Чтобы правильно их сформулировать, отвечайте на вопрос «что нужно сделать, чтобы увеличить прибыль благодаря сайту?»
Ваш будущий ресурс может решать следующие задачи, способствующие росту прибыли:
Привлекать новых клиентов.
Обеспечивать возможность продавать продукт онлайн.
Повышать эффективность маркетинга. Эту задачу можно разбить на много подзадач, например, такие:
Расширять воронку продаж.
Формировать лояльную аудиторию.
Уменьшать стоимость привлечения клиента и увеличивать LTV.
Преодолевать рекламную глухоту с помощью контент-маркетинга.
Уменьшать расходы на маркетинг и рекламу в офлайне.
Обеспечивать потенциальным и существующим клиентам доступ к достоверной информации.
Преодолевать географические ограничения.
Показывать товар лицом. Речь идет о фото и описаниях продуктов, портфолио, списке клиентов и реализованных проектов и т.п.
Предоставлять аудитории социальные доказательства.
Повышать качество обслуживания клиентов.
Удовлетворять конкретные потребности аудитории. Речь идет об интернет-сервисах.
Этот список можно продолжить. Но суть уже понятна: вам необходимо зафиксировать задачи, которые будет решать ваш сайт. Потренируйтесь на живом примере. Например, сформулируйте цели и задачи создания сайта, которые преследовала стоматологическая клиника из Иркутска. Обязательно запишите их на бумаге.
Как вы считаете, зачем нужен сайт предприятию, работающему исключительно в офлайне?
Как вы считаете, зачем нужен сайт предприятию, работающему исключительно в офлайне?
Что у вас получилось? У меня так:
Цель создания сайта: зарабатывать больше денег. Если хотите, добавьте конкретику, специфику и измеримость. Но сойдет и так.
Задачи создания сайта:
Информирование аудитории. Здесь можно выделить несколько подзадач: от сообщения пользователям о существовании клиники и ее возможностях до обучения клиентов.
Формирование доверия.
Привлечение клиентов. Выделяем подзадачи в зависимости от используемых способов: от контекстной рекламы до поискового маркетинга, включая локальный поиск.
Повышение качества обслуживания. Например, на сайте можно выбрать доктора, посмотреть стоимость услуг, записаться на прием или задать вопрос специалисту.
Что-то еще?
Записанные на бумаге цель и задачи помогут вам понять, каким должен быть сайт. Благодаря этому вам будет намного проще общаться с разработчиками.
Шаг 2: определите требующуюся функциональность сайта
Это очень простой шаг. Возьмите лист бумаги с записанными задачами создания ресурса. Возьмите красную ручку и сформулируйте из задач вопросы.
Формулируем из задач вопросы
Формулируем из задач вопросы
У вас получатся такие вопросы:
Что нужно, чтобы информировать аудиторию с помощью сайта?
Какие функции необходимы, чтобы привлекать новых клиентов?
Что должен «уметь» сайт, чтобы повысить качество обслуживания пользователей?
Первый раз ответьте на вопросы самостоятельно. Позже вы вернетесь к ним с менеджером или разработчиками агентства. Отвечайте подробно и письменно. Например, запишите функции, необходимые для информирования клиентов:
Сайт должен отображать статические страницы: «О компании», «Список продуктов», «Контакты, время работы, условия доставки и оплаты» и т.п.
На сайте должен быть блог или раздел «Полезные публикации».
Где-то сбоку должны выводиться сообщения из «Твиттера» главного специалиста. Он будет оперативно сообщать об изменениях графика работы, поступлении новых товаров, акциях.
В подвале должны быть опубликованы условия работы.
Где-то на видном месте нужно повесить лицензии, сертификаты, призы, список клиентов и ссылки на социальные профили.
Теперь потренируйтесь. Запишите, какие по вашему мнению функции нужны сайту стоматологической клиники, чтобы повысить качество обслуживания пациентов.
Обязательно обсудите записанные функции с разработчиком. Профессионал наверняка откорректирует список в соответствии с задачами, которые должен решать ресурс. Что делать, если специалист предлагает добавить функцию, с которой вы не знакомы? Попросите рассказать о ней. Если сомневаетесь, возьмите время на обдумывание и изучите информацию самостоятельно.
Материал по теме: Продвижение сайта с нулевым бюджетом: 65 шагов бесплатного покорения поисковых ТОПов
Шаг 3: определите, как должен выглядеть сайт
Это один из самых сложных шагов. Причина? Каждый человек имеет собственное представление об идеальном, хорошем, плохом и отстойном дизайне. Если ресурс нравится вам, это не гарантирует, что он понравится вашим клиентам. Это утверждение работает и в обратную сторону. Впрочем, вы делаете сайт для публики, а не для себя, поэтому ставьте ее интересы на первое место.
Чтобы согласовать с разработчиками внешний вид сайта, вам необходимо решить две задачи. Во-первых, определите подходящую разметку сайта. Во-вторых, наполните ее нужными визуальными компонентами.
Как выбрать разметку сайта
Выбирать разметку вы будете вместе с разработчиками сайта. До общения с ними запомните несколько тезисов:
Для разных страниц сайта можно использовать разные шаблоны. Например, главную страницу, страницу публикаций и рекламный лэндинг можно организовать по-разному.
Разметка должна соответствовать тематике сайта и задачам, которые решает страница. Например, для контент-проекта и портфолио фотографа наверняка лучше использовать разные шаблоны.
Структура страниц влияет на восприятие контента. Выбирайте разметку, которая поможет обратить внимание аудитории на наиболее важную информацию.
Во время первой встречи с менеджером или при заполнении брифа вам предложат выбрать одну из типичных структур страницы, например, такие:
Разметка в форме буквы «г». Страницы с этим шаблоном соответствуют особенностям восприятия контента. Попадая на них, пользователь сканирует контент слева направо и сверху вниз. Благодаря этому он обращает внимание на информацию в шапке и левой колонке, а после этого приступает к чтению основного контент-блока. Данная структура подходит для корпоративных сайтов, контент-проектов, сервисов, для которых важно обеспечить пользователю возможность навигации и быстрого поиска нужных данных, а также необходимо информировать пользователей.
Структура в форме буквы «г»
Структура в форме буквы «г»
Разметка в форме обратной буквы «г». Эта структура хорошо подходит для блогов, контент-проектов и страниц публикаций на универсальных сайтах. Человек сканирует страницу слева направо и сверху вниз, поэтому он сначала обращает внимание на основной контент, а потом приступает к изучению вспомогательной информации. Разметку в форме обратной буквы «г» можно увидеть на сайтах маркетологов Хайди Коэн и Сергея Кокшарова.
Структура в форме обратной буквы «г»
Структура в форме обратной буквы «г»
Разметка в форме буквы «т». Вы наверняка с закрытыми глазами назовете десяток сайтов с визуально тяжелой шапкой и выделенной центральной колонкой. Вспомогательная информация, например, меню, список категорий, формы регистрации, находятся в левой или правой колонках.
Структура в форме буквы «т»
Структура в форме буквы «т»
Вы не должны обязательно выбирать типовые структуры. Попросите разработчика предложить подходящие на его взгляд разметки. Сравните их с разметками сайтов, которые нравятся вам и предположительно понравятся вашим клиентам. Озадачьте представителя агентства собственными вариантами шаблонов для главной страницы, страницы публикаций или рекламного лэндинга. Обязательно прислушивайтесь к мнению и рекомендациям дизайнера. Ваши представления о сайте должны пройти через фильтр его профессионализма.
Сделайте мне так, так или так
Сделайте мне так, так или так
После согласования модульной структуры вам придется ответить еще на один вопрос. Выберите тип верстки: статичный, резиновый или адаптивный.
Статичная верстка предполагает, что размеры элементов страницы остаются одинаковыми для всех размеров экранов и браузеров. Разработчики называют это решение самым простым и стабильным. Главный недостаток статичной верстки проявляется, когда пользователь открывает ваш сайт с помощью гаджета с маленьким экраном. Если вы остановитесь на этом варианте, будьте готовы инвестировать в разработку мобильной версии сайта.
На страницах с резиновой версткой блоки растягиваются по ширине. Это дает возможность удобно просматривать сайт на экранах разного размера. Адаптивный дизайн — это продвинутый вариант резиновой верстки. У адаптивных страниц модульные блоки меняют размер в зависимости от разрешения экрана пользователя, а также меняется расположение и содержание модулей. Например, на экране десктопа сайт с адаптивной версткой может отображаться в три колонки, а на экране смартфона в одну.
Адаптивная верстка страницы: меняется положение модульных блоков
Адаптивная верстка страницы: меняется положение модульных блоков
Адаптивная верстка страницы: меняется положение модульных блоков
Какой вариант выбрать? Остановитесь на адаптивной верстке. Благодаря ей ваш сайт будет одинаково удобным для владельцев гаджетов с любым разрешением экрана.
Материал по теме: Кейс: Адаптивный дизайн как инструмент SEO
Как выбрать внешний вид сайта
Это один из самых простых этапов работы для вас, но один из самых сложных для разработчиков. Вам достаточно передать специалистам брендбук и обсудить ваше представление об идеальном дизайне. Представителям агентства придется воплощать ваши идеи в реальность, а потом реагировать на просьбы типа поиграть шрифтами и переместить логотип немного ближе к центру и окаймить его золотом.
Кстати, лучше не тратьте свое время и нервы подрядчиков на игры с цветами и шрифтами. Поверьте, профессионал лучше вас знает, каким должен быть фон, цвет кнопок и кегль шрифта заголовков. Но если у вас есть свободное время и желание активно участвовать в разработке дизайна, обратите внимание на следующие нюансы:
Попросите разработчиков обеспечить читабельность контента. Чтобы понять, что требовать от веб-студии, почитайте материалы раз и два.
Перед просьбой поиграть со шрифтами изучите этот вопрос. Это поможет вам осознанно требовать от разработчиков результата. Полезными для вас будут материалы о выборе шрифта и создании текста. А в списке обязательных элементов для блога вы найдете важную информацию о длине и ширине строки, интервалах и фоне.
Оцените потенциал конверсионности посадочных страниц. Помните, что в качестве лэндинга необходимо рассматривать все важные для аудитории страницы сайта. Вам поможет статья о создании посадочных страниц, а также список правил и факторов. А вот список типичных ляпов при создании лэндингов.
Уделите отдельное внимание дизайну главной страницы. Вам поможет статья об оформлении домашних страниц.
Задайте разработчику несколько вопросов о юзабилити. Чтобы разговор был предметным, ознакомьтесь со статьями о навигации, формах и кнопках. Если у вас нет опыта развития ресурсов, придется довериться профессионализму дизайнера. В дальнейшем вы сможете оценивать юзабилити самостоятельно, а также повышать его с помощью сплит-тестов.
Помните, сайт — не задание на уроке рисования в пятом классе. Дизайн ресурса должен обеспечивать визуальную привлекательность и читабельность контента. В идеале ваши пользователи вообще не должны думать о дизайне. Поэтому не требуйте от дизайнеров что-то добавить, убрать или изменить только потому, что хотите продемонстрировать художественные предпочтения.
Пример отличного дизайна
Пример отличного дизайна
Шаг 4: выберите CMS
На этом этапе вам придется решить две задачи. Во-первых, определите, станете ли вы использовать CMS или закажете сайт на HTML. Во-вторых, если вы решите делать сайт с «движком», определите, какую именно систему управления контентом лучше использовать в вашем случае.
Что выбрать: сайт на CMS или на HTML
По данным Web Technology Surveys, 41,9 % всех сайтов работают на CMS, а 58,1 % не используют «движок». Какую из двух групп выбрать?
Сайты на HTML дают вам следующие преимущества:
Практическое отсутствие ограничений в выборе структуры, дизайна и функциональности.
Нетребовательность к ресурсам. Сайты на HTML быстро загружаются и стабильно работают на пиках посещаемости.
Отсутствие необходимости платить за «движок».
Отсутствие привязки к CMS дает разработчикам возможность реализовать любые задумки заказчика. Однако главный недостаток ресурсов на HTML может перечеркнуть все преимущества. Если вы хорошо строите дома или готовите стейки, но ничего не понимаете в веб-программировании, то не сможете самостоятельно публиковать контент. Вам придется нанять специалиста или платить разработчикам за поддержку ресурса.
Вы готовы платить за то, что можно быстро делать самостоятельно?
Вы готовы платить за то, что можно быстро делать самостоятельно?
Сайты с системой управления контентом обеспечивают такие преимущества:
Возможность самостоятельно добавлять и редактировать контент. Для этого не нужны знания в области веб-программирования.
Самостоятельное изменение архитектуры, функциональности и технических характеристик сайта. Конечно, вы потратите время на изучения административной панели «движка». Зато вы сможете редактировать меню, настраивать резервное копирование, управлять кэшированием без изменения кода.
Возможность решать специфические задачи с помощью шаблонных инструментов: модулей, плагинов, виджетов. Например, вы можете в несколько кликов добавить на сайт, работающий под CMS WordPress, плагин для семантической разметки страниц. Разметить страницы сайта на HTML без специальных знаний вы не сможете.
Возможность использовать шаблонный дизайн. Например, вы легко найдете платные темы для WordPress, которые выглядят лучше многих вариантов индивидуально разработанного дизайна.
Выбирайте сайт на HTML в двух случаях: если вам нужен давно умирающий сайт-визитка из одной статичной страницы или если вы готовы платить за поддержку ресурса разработчикам и штатному программисту. Используйте CMS, если хотите иметь возможность самостоятельно публиковать контент.
Какую CMS выбрать
Если вам предложат «самописный движок», откажитесь. Вам необходима система управления контентом, с которой любой разработчик сможет работать без предварительного изучения и исправления «багов». Поэтому выбирайте популярную CMS, достоинства и недостатки которых хорошо известны и подтверждены практикой.
Менеджер агентства наверняка предложит вам несколько «движков» на выбор после изучения цели и задач создания сайта. Среди них будут такие CMS:
WordPress. На этой системе работает около четверти всех сайтов в Сети и около 60 % ресурсов, работающих на «движках». На WordPress можно сделать разные типы ресурсов: от личного блога до корпоративного сайта, от интернет-магазина до большого контент-проекта. Более того, если у вас есть желание и время учиться, вы можете сделать ресурс на WordPress самостоятельно.
Joomla! Это второй по популярности «движок» после WordPress. Он считается более функциональным и кастомизируемым по сравнению с лидером. Но с «Джумлой» вам будет труднее разобраться самостоятельно. Зато специалисты считают эту CMS более подходящей для создания интернет-магазинов.
Drupal. На этой CMS работает 2,1 % от общего числа сайтов и 5 % ресурсов на «движках». Выбирайте этот «движок», если вам нужно решать нестандартные задачи, поддерживать сложные сервисы. Обратите внимание, если в WordPress и Joomla! можно добавить практически любые функции с помощью готовых плагинов, то при работе с Drupal вам придется чаще обращаться к программистам.
1С-Битрикс. Это отечественный «движок», которым пользуются владельцы 1,2 % от общего числа сайтов в интернете. Эта система управления контентом обеспечивает безопасность данных, достаточную для реализации сложных проектов функциональность и удобство использования. Сайт на CMS «Битрикс» легко интегрировать с программными продуктами 1С, например, 1С: Предприятие.
OpenCart. Этот «движок» выбрали владельцы 0,9 % ресурсов, работающих на CMS. OpenCart — это WordPress для интернет-магазинов. Система управления контентом отличается простотой, кастомизацией с помощью плагинов, безопасностью. В нем встроены основные функции, необходимые для организации онлайн-торговли.