Подготовка
Разработка сайта начинается не с красивого оформления, а с формулировки задач. Для этого нужно ответить на вопросы о потенциальных посетителях вашего сайта: кто, с какой целью и что должен делать, рассказывает Виктор Губанов, руководитель проектов digital-агентства Insaim.
«Большинство запросов, которые приходят в «Пасеку» (проект Теплицы социальных технологий, который объединяет веб-студии и фрилансеров, готовых помогать НКО. — Прим. ред.), приходят как раз на разработку сайта, — говорит Алексей Клёсов, координатор программы «Пасека» Теплицы социальных технологий. — Главное в этой работе — грамотно и четко прописать техническое задание. Чем лучше оно будет составлено, тем быстрее и проще будет сдаваться проект. Обычно приходит запрос: нам нужен красивый сайт. Разработка такого сайта может занять всю жизнь».
Цели и задачи сайта помогает понять бриф. Так называют анкету с основными требованиями и информацией о предстоящей работе над сайтом. Бриф составляют перед техническим заданием. Он помогает предварительно оценить бюджет и сроки выполнения работ.
Если проект большой и сложный или пока непонятно, что нужно делать, можно разделить его на части и начать с маленькой понятной задачи. Так вы оптимизируете бюджет и время, считает Губанов.
Составляем бриф
Бриф должен включать:
1. Информацию о вашей организации:
- Сфера деятельности;
- Возраст (и в каком положении НКО находится сейчас);
- Целевая аудитория: в идеале стоит описать портрет людей, которых вы хотите привлечь на сайт, их пол, возраст, увлечения, местонахождение. От этого зависит подача информации на сайте;
- Отличия и преимущества вашей организации;
- Есть ли у вас фирменный стиль;
- Адрес текущего сайта (если есть).
2. Технические требования к сайту:
- Тип сайта (интернет-магазин, каталог, корпоративный сайт);
- Цели и задачи сайта (информировать людей, приглашать волонтеров, собирать пожертвования);
- Языковые версии;
- Технические характеристики (нужны ли вам особые модули, например сложный калькулятор);
- Мобильная версия: лучше сделать отдельную версию сайта для мобильных устройств, так как адаптивная версия сайта может плохо отображать нужную информацию;
- Наполнение контентом и его предоставление: укажите, есть ли у вас информация для наполнения сайта;
- Навигационное меню и структура сайта: составьте схему перехода по ссылкам, куда какая ссылка будет вести пользователя;
- Наиболее важные блоки и элементы на сайте: распределите блоки по степени важности и определите примерную логику их расположения на сайте;
- Примеры сайтов, которые вам нравятся: расскажите, что именно в них нравится (цвета, шрифт);
- Примеры сайтов, которые вам не нравятся;
- Требуется ли покупка доменного имени;
- Как вы планируете продвигать сайт (контекстная реклама, SEO, партнерские сети);
- Бюджет и сроки: сколько денег вы готовы потратить на сайт и когда он должен быть готов.
3. Требования к дизайну:
- Индивидуальный или шаблонный дизайн: второй вариант дешевле, но если вы не нашли подходящего шаблона, дизайн разработают индивидуально;
- Тематический стиль сайта (ретро, модерн и др.);
- Цветовой стиль;
- Нужны ли баннеры и слайдер.
НКО могут пригодиться на сайте такие элементы, как форма пожертвований, разделы о проведенных акциях, благополучателях, партнерах, онлайн-чат, форум.
Пример оформления ТЗ доступен здесь.
Пишем техническое задание
Техническое задание (ТЗ) — это документ, который фиксирует требования к функциональности и атрибутам сайта и дизайна, ограничениям, программным интерфейсам, платформе и алгоритмам.
«Бриф — это документ, который учитывает ваши пожелания к сайту, ваше примерное видение сайта, а техническое задание — это уже документ, который составлен по информации из брифа, часть договора с разработчиком. ТЗ должно быть максимально подробным, чтобы у разработчиков не возникало дополнительных вопросов. То есть любой специалист, который занимается сайтами, поймет его и сделает именно то, что вам нужно», — объяснил Михаил Басистов, коммерческий директор студии Friendly Marketing.
В ТЗ должны быть указаны:
- Технические требования к сайту, согласованные на основании брифа;
- CMS-система: выберите «движок» сайта исходя из его функциональности (WordPress, «Битрикс» и др.);
- Функционал всех форм обратной связи: какие поля должна содержать форма обратной связи и куда эта информация отправляется (СМС, e-mail, CRM);
- Кликабельные элементы;
- Формат отображения элементов: что и как должно работать (всплывающие меню, галерея);
- Функционал модуля для пожертвований: какая платежная система, стартовые суммы;
- Переходы на другие страницы сайта: как и в брифе, нарисуйте схему, какие ссылки на какие страницы ведут;
- Сопутствующие элементы, модули и плагины: интеграция с онлайн-кассой и дополнительный функционал.
Прототип и дизайн-макет сайта
По техническому заданию создается прототип сайта — схематическое черно-белое изображение всех элементов. Заказчик должен внимательно проверить прототип и сообщить, что ему не нравится и какие ошибки нужно исправить. Потом внести изменения будет сложно.
После согласования прототипа создают дизайн-макет — полноцветное изображение будущего сайта. При создании дизайн-макета нужно учесть правильное сочетание цветов и пропорции элементов. Дизайн должен в первую очередь подходить пользователям. Если вы сами не составляете вашу целевую аудиторию, то нужно учитывать не свои вкусы, а вкусы аудитории, уточняет Михаил Басистов.
Техническое задание, прототип и дизайн-макет нужно зафиксировать в приложении к договору, который заказчик и разработчик подписывают перед версткой и программированием.
Как общаться с исполнителем
По словам Виктора Губанова, НКО не должны предлагать разработчикам конкретные решения своих задач. Вместо этого лучше рассказать о своем проекте и проблемах, которые он решает, о том, что должен сделать человек, который придет на сайт. Так исполнитель сможет предложить больше решений.
Еще одна проблема при создании сайта — недоверие НКО к исполнителю. Назначьте встречу или созвонитесь, предложите тестовую задачу, чтобы понять, что вы можете получить от разработчика.
Кроме того, чтобы быть уверенным в результате, некоторые агентства составляют дополнительные разъяснения по сайту. «Мы используем промежуточный документ для понимания задачи, — рассказал Губанов. — В нем мы резюмируем, какая задача перед нами стоит и как мы ее будем решать. Описываем текущую задачу и что будет, когда мы сделаем работу, то есть трансформацию проекта».
Нужен ли сайт
Если у НКО нет конкретной задачи для сайта и непонятно, чем он поможет пользователю, можно обойтись минимальными затратами. В некоторых случаях достаточно одной страницы с описанием деятельности организации и контактов. Однако лучше создать хотя бы одноэкранный сайт, чем не создавать его вовсе. Так доверие к организации повышается, подчеркивают эксперты.
Презентация Михаила Басистова доступна здесь, Виктора Губанова — здесь.
Справка
Мастер-класс проводился при поддержке программы «Пасека» Теплицы социальных технологий. «Пасека» — сообщество веб-студий, агентств, IT-компаний и независимых профессионалов, заинтересованных в работе с некоммерческими организациями и социальными проектами. Теплица социальных технологий – общественный образовательный проект, направленный на развитие сотрудничества между некоммерческим сектором и IT-специалистами.
Смотреть видеозапись
Мастер-класс — часть медиаклуба «АСИ — Благосфера». Он организован с использованием гранта Президента РФ на развитие гражданского общества, предоставленного Фондом президентских грантов.
Медиацентр — совместный проект центра «Благосфера» и Агентства социальной информации. Его цель – продвижение в обществе идей благотворительности и социальной ответственности, социальной активности граждан с использованием различных медиаформатов. Один из таких форматов – медиаклуб для проведения обучающих, дискуссионных и просветительских мероприятий в сфере коммуникаций с участием профессионалов для НКО, сообществ, граждан.
Подписывайтесь на канал АСИ в Яндекс.Дзен.