С чего начать разработку нового сайта?

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

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

Большущее ТЗ — не решение. Оно очень ненаглядно. Читая текст, дизайнеру сложно понять, как блоки должны располагаться на странице. А верстальщику и программисту бывает трудно разобраться, как страница должна работать в динамике. В итоге всё это сплетается в клубок недопонимания, перерастает в кучу согласований с заказчиком и переделок на каждом этапе работы.

Мы в «ЛидМашине» не сталкиваемся с такими проблемами, потому что перед разработкой сайта или лендинга проводим большую подготовительную работу. Что именно мы делаем? Сейчас расскажем.

Сначала мы изучаем всё-всё-всё, что есть у клиента: его бизнес, текущий сайт, конкурентов и так далее. Так мы найдём грабли, чтобы не наступить на них в будущем, и соберём список крутых идей, которые стоит реализовать на сайте.

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

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

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

Основная задача этого этапа: найти проблемные места и точки роста.

Для этого мы:

— изучаем статистику;

— смотрим тепловые карты и записи Вебвизора;

— выясняем, куда пользователи кликают, а куда нет;

— что для них важно, а на что они не обращают внимание.

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

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

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

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

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

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

Результат: список крутых решений, которые стоит внедрить в сайт заказчика.

Так сложилось, что, говоря «сделать дизайн», у нас подразумевают «нарисовать дизайн-макет». Из-за этого большинство упускает очень важный этап работы — проектирование (а ведь design переводится именно как «проектирование»).

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

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

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

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

С картой путей по сайту мы точно ни о чём не забудем — теперь у нас фактически будет список страниц и разделов, которые нужно спроектировать.

Такая карта особенно полезна, если у вас очень большой проект.

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

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

Проектировать макет можно в чём угодно: от условного Balsamiq, где вы оперируете набором заготовленных блоков, до более гибких решений типа Moqups и совсем уж профессиональных редакторов вроде Sketch, Figma, Framer или InVision Studio.

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

Интерактивный прототип можно сделать в тех же Sketch, Figma, Framer или InVision Studio, но мы предпочитаем работать в Axure — это мощный инструмент, с большим количеством функций и дополнений. В нём можно спроектировать прототип, близкий к альфа-версии сайта.

На что обратить внимание при проектировании?

• Блоки в макете и прототипе делайте реальных размеров — по ним дизайнер будет отрисовывать все элементы.
• Используйте реальные тексты.
• Продумывайте заголовки страниц, подписи к кнопкам, названия форм — не делайте их шаблонными.
• Рисуйте макет по сетке, чтобы всё выглядело аккуратно.
• Не забывайте, что это уже дизайн.
• Делайте прототип понятным.

Сэкономите время и деньги. Не нужно будет объяснять дизайнеру и заказчику последовательность блоков. А все изменения внесёте ещё на этапе условного макета, а не визуального дизайна.

Это удобно! Согласовывать детали на примере интерактивного прототипа удобнее, чем в письменном ТЗ.

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

Ну и, по моему опыту, после согласования интерактивного прототипа, изменения в проект вносят в разы реже.

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

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

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

Увы, совсем без этого не обойтись, и нужно будет обратить внимание дизайнера на нюансы.

Например:

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

Например:

О том, что нужно на старте заложить в сайт для успешного SEO-продвижения, читайте в нашей статье.

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

Доверьте нам разработку продающего сайта в рамках стратегии 1.7.

А какой подход к разработке сайтов и лендингов практикуете вы? Пишите в комментариях!

#разработка сайта

Лидмашина — агентство интернет-маркетинга. С нами вы продаете *ББДЧ — больше, быстрее, дороже, чаще. Этот подход мы позаимствовали у Игоря Манна — учредителя нашей компании.

За 12 лет мы решили 282 задачи бизнеса в онлайне.

Еще больше полезных статей в нашем блоге Учебка.

Присоединяйтесь к нашему уютному сообществу в VK и Telegram.