Как мы создаем веб-сайты в Articulate Marketing

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

Эта статья основана на одном из наших вебинаров, который проводила я, Иоана Негулеску, руководитель студии Articulate Marketing. Посмотреть видео и скачать слайды можно ниже:

Проблемы создания веб-сайта

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

Когда мы слышим...

«Мы беспокоимся о новом веб-сайте, потому что предыдущий был такой проблемой».

Мы делаем это...

Мы слышали это так много раз. Итак, мы стремимся стать лучше.

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

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

Когда мы слышим...

«Мы так много раз пытались преследовать разработчика, что они просто не возвращаются к нам».

Мы делаем это...

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

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

Когда мы слышим...

«Что, если новый веб-сайт не оправдает наших ожиданий?»

Мы делаем это...

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

Затем мы переходим к архитектуре бренда. Здесь мы изложим основы веб-сайта. Цвета, изображения или иллюстрации, элементы UX/UI, шрифты — общая эстетика сайта. Это чрезвычайно совместный процесс. Наши клиенты участвуют на каждом этапе , поэтому их вклад и требования учитываются в конечном продукте.

Пример: ГТГ

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

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

• Амбициозные цели роста бизнеса
• Устаревший веб-сайт (и бренд)
• Мало возможностей для захвата потенциальных клиентов
• Неуклюжая навигация
• Плохой пользовательский опыт
• Низкая производительность сайта

Если это похоже на вас, то зайдите сюда, чтобы оценить свой сайт.

Процесс артикуляции

Вот наш процесс, в двух словах. Нажмите на это изображение, чтобы просмотреть его более подробно:

Вернемся к примеру с HTG. С ними мы следовали нашему обычному семиэтапному процессу:

1. Начало

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

2. Мудборды и структура сайта

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

Во-вторых, с нашей командой копирайтеров по маркетингу мы составили рекомендации по картам сайта. Это структура навигации и страницы, которые нам нужно построить.

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

3. Первоначальный дизайн и каркасы

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

Параллельно мы разрабатываем стратегию по структуре страницы. То есть какой контент попадает на какую страницу? Какие кубики Lego нам нужны?

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

4. Спроектируйте все модули и напишите черновик веб-копии

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

5. Разработать сайт

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

При работе с разработчиком, любым разработчиком, вы должны задать ему несколько уместных вопросов:

• Какие основные шаги вы предпринимаете для кодирования нашего веб-сайта?
• Как убедиться, что код аккуратный? (Основная проблема с веб-шаблонами.)
• Когда и как часто вы проверяете скорость и общую производительность?
• Как выглядит создание страницы после разработки веб-сайта? Это удобный пользовательский интерфейс для тех, кто создает страницу?

Или, если вы работаете с Articulate, «Сколько времени вы быстрее всего собрали кубик Рубика?» Мы приветствуем такие вопросы.

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

Мы формируем все модули в HTML, затем начинаем смотреть на стили. Итак, подумайте о кирпичах, штукатурке, покраске и отделке.

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

6. Заполните страницы

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

7. Запуск!

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

Наконец, конечно же, мы празднуем!

10 советов для отличного дизайна сайта

Вот несколько правил, которые мы усвоили за годы и за десятки веб-сайтов:

1. Ставьте свои предпочтения на второе место, а болевые точки ваших персонажей — на первое.
2. Сосредоточьтесь на том, как вы помогаете своим клиентам, а не просто на перечислении своих услуг.
3. Не пытайтесь изобретать велосипед. Что работает, работает по какой-то причине. Например, сосредоточение внимания исключительно на области выше сгиба — это миф. Все знают, как прокручивать. Об этом даже есть сайт: http://abovethefold.fyi/
4. Держите навигацию короткой и простой.
5. Сделайте кнопки ценностно-ориентированными. По возможности избегайте общих копий.
6. Всегда ссылайтесь на релевантную страницу, если существует страница с большим количеством контекста.
7. На ключевых страницах избегайте слишком большого количества внешних ссылок. (Ваш блог — это отдельная история.)
8. Всегда заканчивайте страницу одним или несколькими CTA (призывами к действию), переводя пользователя на следующий этап процесса.
9. Не недооценивайте силу страницы контактов — слишком часто это точка выхода, но вы действительно хотите удержать людей на этой странице.
10. Меньше - больше!

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

Когда мы разрабатывали веб-сайт HTG, их логотип уже устарел и больше не соответствовал бренду, к которому мы стремились. Мы модернизировали его, внеся несколько простых изменений:

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

Что происходит после запуска?

Хорошо. У вас новый сайт. Что теперь? Как мы уже говорили, в Articulate мы рассматриваем веб-сайты как маркетинговые инструменты, поэтому наше участие не должно заканчиваться с запуском. На самом деле, это только начало пути для большинства наших клиентов.

От создания нового контента, такого как блоги, основные страницы, закрытые предложения и «сжатые» страницы, до отслеживания поведения и многовариантных тестов — ваш веб-сайт может делать гораздо больше.

Скрытая информация: Nucleus

Итак, как вы можете получить веб-сайт HubSpot? Есть несколько вариантов, таких как создание веб-сайта на заказ, но один из способов — использовать тему HubSpot. Nucleus — это собственная тема Articulate.

Тема похожа на гораздо более сложный шаблон веб-сайта. Наш собственный веб-сайт построен на Nucleus, и мы использовали его для нескольких клиентов с огромным разнообразием стилей дизайна. Мы запускаем его на HubSpot Marketplace в 2022 году. С Nucleus мы можем создавать высокооптимизированные веб-сайты для наших клиентов за недели и даже дни. Все довольно увлекательно!

>> Нажмите здесь, чтобы изучить Nucleus <<