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

Процесс разработки лендинга можно разделить на три основных этапа:

1. Этапы до дизайна.
2. Дизайн.
3. Этапы после завершения дизайна.

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

Этапы до дизайна

Анализ проекта

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

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

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

Идея проекта

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

Разработка структуры

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

Написание текста

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

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

Дизайн 

Дизайн первых трех блоков

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

Этот этап занимает 1-2 дня.

Дизайн всего сайта

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

Адаптивность, ТЗ, и Передача проекта на вёрстку.

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

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

Нарезка

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

Этапы после дизайна

Верстка и проверка макета

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

Перенос на движок. Согласование и передача заказчику

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

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