Проектирование и реализация маркетингового сайта нашей компании: мой путь от контента до исполнения

Если ты являешься пользователем Logto, возможно, ты заметил, что сайт нашей компании недавно был обновлен. Если нет, посетите наш сайт, logto.io, и попробуйте угадать, сколько ресурсов мы вложили, чтобы это произошло.

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

Нет!

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

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

Предыстория#

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

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

Кроме того, он может выполнять несколько бизнес-целей:

• Демонстрировать бренд вашего продукта и его ценностное предложение.
• Генерировать лиды.
• Быть центром контента, что особенно важно для компаний, ориентированных на рост продуктов или разработчиков.
• Обеспечивать место для оптимизации SEO, привлечения пользователей и отслеживания регулярного трафика.

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

1. Сначала маркетинговые менеджеры и продукт-менеджеры определяют контент и требования.
2. Продукт-дизайнеры и UX-райтеры совершенствуют контент.
3. Затем мы передаем промежуточный проект, обычно это черновая версия, визуальным и бренд-дизайнерам для финальных штрихов перед производством.
4. Инженеры и продукт-менеджеры затем приступают к внедрению, сосредотачиваясь на анимации и адаптивном веб-дизайне.

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

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

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

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

Разбивка на потребности#

Для разработки успешного маркетингового сайта SaaS давайте разберем основные элементы, которые необходимы:

1. Контент: Основа любого маркетингового сайта — четкое понимание, что нужно показать. Это требует глубокого понимания целевых клиентов, их типичных кейсов использования и ценностного предложения вашего продукта. Ни один инструмент не может заменить это понимание. К счастью, мой опыт в дизайне продуктов и рыночных стратегиях позволяет мне создавать контент, который соответствует потребностям пользователей.
2. Дизайн: Сайт должен иметь безупречный и стильный внешний вид. Мой опыт в UX/дизайне продукта, хотя и не является настолько обширным, как у профессионального креативного дизайнера, позволяет мне компетентно справляться с этой задачей.
3. Инжиниринг: Основные технические аспекты включают хостинг сайта, обеспечение адаптивного дизайна и плавное выполнение микро-взаимодействий. Также важно бесшовно интегрировать сайт с другими компонентами, такими как перенаправление ссылок и страница аутентификации продукта.

Проведя некоторые исследования, вот инструменты, которые я планирую использовать для аспектов дизайна:

Продуктовый и маркетинговый контент#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper или аналогичные AI-приложения для сопилотирования.

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

1. Кто будет читать это сообщение?
2. Нужен ли им дополнительный контекст?
3. Какую ключевую мысль ты хочешь донести в этом сообщении?
4. Какое следующее действие ты ожидаешь от пользователя?
5. Это сообщение предназначено для обучения или для того, чтобы побудить к конкретному действию?
6. Есть ли у этого сообщения потенциал вводить пользователя в заблуждение или преувеличивать что-то?

Затем я напишу первоначальный черновик точек, которые хочу передать.

Иногда AI может вводить слова, которые кажутся устаревшими или искажают твоё оригинальное намерение, делая его логически правильным. Однако ты должен снова подчеркнуть своё намерение и следовать своим целям. Ты должен установить стандарты, чтобы слова, переданные аудитории, были ясными, простыми, лаконичными и прозрачными. Это особенно важно в нашей продуктовой области, которая обслуживает многие бизнесы и разработчиков.

Дизайн#

Figma, Framer для интерактивного и визуального дизайна, а также для анимации и прототипирования

У меня есть опыт в дизайне, в основном сосредоточенный на дизайне продуктов, который включает создание UI и UX. Хотя создание отполированного UI не является сложностью для меня, моя работа не так элегантна, как у профессионала. Однако с некоторыми базовыми навыками визуального дизайна и иллюстрации, и выбрав правильные инструменты, ты можешь повысить качество своей работы. Я использую Framer и Figma в этом творческом процессе.

Это наш старый дизайн, который был полностью создан в Figma

Наш оригинальный дизайн был создан в Figma. Я использовал официальный плагин Framer, "Framer to HTML", чтобы скопировать и вставить основной дизайн в Framer, что обеспечило хороший старт.

Следующим шагом является дизайн. Если ты ранее использовал Figma, переход на Framer будет плавным процессом, так как общий пользовательский интерфейс довольно схож. Я хочу выделить несколько интересных взаимодействий, которые значительно увеличивают производительность.

Макет#

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

Точки преломления для адаптивного дизайна#

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

Анимация#

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

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

Быстрая публикация#

Одно из моих ключевых требований — возможность:

1. Быстро разрабатывать множество посадочных страниц для оптимизации SEO и маркетинговых кампаний. Скорость — это необходимость.
2. Часто обновлять контент самостоятельно. Твоя посадочная страница продукта отражает последние достижения и текущую позицию продукта. Устаревший контент означает упущенные рыночные возможности и несоответствие потребностям клиентов.

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

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

Инжиниринг#

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

Наш текущий сайт состоит из 20-30 страниц; некоторые из них разработаны с использованием Framer, а другие — с использованием традиционных методов разработки программного обеспечения. Мы находимся в процессе выбора лучших инструментов для поддержания наших страниц. Например, для документации для разработчиков, которую сложно управлять с помощью Framer, использование фреймворка документации, удобного для разработчиков, для размещения вашего контента является оптимальным выбором. В будущем мы оценим наши потребности и решим, продолжать ли размещение на нашей собственной платформе или полностью перейти на Framer.

Как это изменило наш рабочий процесс#

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

Я написал этот блог, чтобы поделиться лучшими практиками. Если у тебя есть опыт работы с Framer и в дизайне красивых веб-сайтов, мне хотелось бы услышать о нем. Давайте пообщаемся и научимся друг у друга.

Теперь время ознакомиться с нашим продуктом! Посети нас на logto.io.