Как редактору и дизайнеру работать над сайтом вместе

Редакторы влезают в процесс и портят своими текстами согласованный дизайн? У нас не так. Рассказываем, как работает студия busy, где дизайнер и редактор не мешают друг другу, а работают вместе с первого этапа проекта.

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

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

Представим: дизайнеру заказали лендинг. Он продумал структуру, собрал вайрфреймы, нарисовал дизайн, согласовал все с клиентом.

Когда структура и дизайн готовы, дизайнер зовет редактора и дает ему задачу: «Причеши тут текст, чтобы было единообразно». Для текста есть серые коробочки, куда нужно вставить предложения.

Хороший редактор начнет задавать вопросы: «А для кого это? А зачем это? А где почитать про продукт больше? А почему преимуществ три, а не пять?» Потому что хороший редактор знает, что главное — это не инфостиль, а попадание в запрос аудитории.

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

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

Мы в busy работаем по другому флоу и начинаем не с дизайна, а со смысла.

В чем плюсы такого подхода:

• У редактора нет ограничений — серых коробочек для текста.
• Дизайнер работает с готовой фактурой, ему не нужно верстать сайт еще раз, когда появится текст.
• Клиент не ищет копирайтера, ему не нужно менеджерить два процесса: написание текстов и дизайн сайта.
• Сайт получается понятным, не перегруженным информацией.

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

Чтобы сайт продавал или собирал лиды, редактору нужно:

• Изучить аудиторию и их боли.
• Понять, как продукт решает их проблему.
  
• Описать ценность продукта на языке аудитории.
  
• Показать юзкейсы.

Вопросы для брифа

Если мы делаем лендинг, то на брифе успеваем задать три типа вопросов:

1) о задаче и результате в целом,

2) о продукте,

3) о дизайне.

Не меньше трети из этих вопросов обычно задает редактор — потому что потом ему из ответов собирать структуру и текст страницы.

После брифа мы собираем от клиента все визуальные материалы, которые есть, — фото, видео, брендбук.

Как упростить бриф для клиента

Частый вопрос: «А не устают ли клиенты от брифов?» Устают, но вот что помогает в этом случае:

• Проводить бриф онлайн, а не просить ответить письменно. Писать обычно сложнее, чем говорить.
• Рассказывать, зачем нужен бриф. Если объяснить клиенту, что час общения на старте поможет сэкономить 6+ часов на правки в процессе, то это в его глазах будет оправданной инвестицией.
  

Сроки, стоимость, понимание задачи

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

В коммерческом предложении мы описываем, как поняли задачу, как видим ее решение, добавляем референсы.

Структура страницы

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

Для структуры работает несколько ключевых принципов:

• Нет «рыбы» вместо текста. Заголовки и абзацы могут быть неидеальными, но уже отражают суть.
• Нет серых квадратов на месте иллюстраций или фотографий. Редактор может нарисовать кривые картинки от руки, драфт.
  
• Клиент согласует не форму, а содержание.
  

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

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

После проработки структуры мы беремся за проработку контента.

Что мы называем контентом:

• Заголовки.
• Подзаголовки.
• Абзацы.
• Теги, выноски, фактоиды.
• Иллюстрации и подписи.

Только если у редактора есть этот набор инстурментов, он может управлять вниманием.

Кейс — сайт для студии

Весной мы делали главную сайта для студии BEsmart. На сайте BEsmart хотели рассказать о трех продуктах. При этом в будущем ребята планируют добавить ролик или пример для каждого продукта.

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

До разработки дизайна проект проходит следующие этапы:

1. Бриф.

2. Сбор референсов.

3. Изучение конкурентов.

4. Поиск метафоры.

5. Разработка логики страницы и текстов.

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

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