{"id":13657,"url":"\/distributions\/13657\/click?bit=1&hash=566d340c54b853eeeda9db62318bf71978b30f8d7cf7d9099caa6c0c5d13ed5b","title":"\u041a\u0430\u043a \u0434\u0438\u0432\u0435\u0440\u0441\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0440\u0442\u0444\u0435\u043b\u044c? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00ab\u0437\u0435\u043b\u0451\u043d\u044b\u043c\u0438\u00bb \u043e\u0431\u043b\u0438\u0433\u0430\u0446\u0438\u044f\u043c\u0438","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"d34c044f-5676-50b8-b978-ab47dfaf9fed","isPaidAndBannersEnabled":false}
Дизайн
Юлия Сабукевич

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

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

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

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

Контент vs дизайн: как это обычно бывает

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

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

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

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

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

Контент + дизайн = ❤

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

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

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

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

Типичный процесс создания сайта в busy.

Бриф — обязательно вместе с редактором

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

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

Обо всем этом редактор может (и должен) расспросить клиента на брифе. Поэтому с самой первой встречи с клиентом общаются и арт-директор, и редактор.

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

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

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

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

3) о дизайне.

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

Часть вопросов к брифу в busy. В зависимости от клиента список может адаптироваться — что-то мы убираем, что-то добавляем.

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

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

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

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

Коммерческое предложение и структура

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

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

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

Можно назвать это «техническим заданием», но пишет его не клиент, а исполнитель.

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

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

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

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

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

В отличие от аккуратного вайрфрейма, у такой неидеальной версии есть супер-способность — она понятна для клиента.

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

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

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

Контент и иллюстрации

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

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

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

Задача редактора — сделать так, чтобы тексты, которые обычно никто не читает, зацепили внимание читателя.

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

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

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

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

Эволюция идеи от кривого драфта до финального дизайна. Редактор продумывает сразу смысловой узел: заголовок, абзац, кнопка, иллюстрация.

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

Дизайн и верстка

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

1. Бриф.

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

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

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

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

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

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

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

0
13 комментариев
Написать комментарий...
Артём Гусев

Работал с ребятами, могу их отчаянно рекомендовать!

Ответить
Развернуть ветку
Cyra Ah

Дизайнерка прислала мне эту статью, а сам я - редактор:) Вместе посмеялись, обсудили. Пришли к выводу, что с небольшими оговорками работаем примерно также. Спасибо за статью:)

Ответить
Развернуть ветку
Юлия Сабукевич
Автор

Очень здорово, когда редакторы и дизайнеры умеют работать вместе)

Ответить
Развернуть ветку
Pavel Shakhanin

Все бы так подрядчики работали)

Ответить
Развернуть ветку
Юлия Сабукевич
Автор

Были плохие кейсы?)

Ответить
Развернуть ветку
Влада Полякова

Очень четко, глаз порадовался

Ответить
Развернуть ветку
Юлия Сабукевич
Автор

Влада, спасибо:)

Ответить
Развернуть ветку
A8D Design

Круто все структурировано! Можно применять и в нашей работе тоже

Ответить
Развернуть ветку
Yulia Vlasenko

Дизайн 🤝 редактор

Ответить
Развернуть ветку
Боровков Евгений

А еще копирайтер и дизайнер могут работать над прототипом в https://wmtools.ru/
И не мешать друг другу :)

Ответить
Развернуть ветку
Юлия Сабукевич
Автор

Мы обычно работаем сразу в Фигме) А почему советуете попробовать веб-мастер?

Ответить
Развернуть ветку
Боровков Евгений

Причин много, на самом деле.
В вашем случае, основные это:
— По сравнению с Фигмой — первые наброски в нашем сервисе создаются гораздо быстрее. Дизайнер может и привык, но многим копирайтерам фигма кажется сложной. (дальше выгрузил в пдф и импортнул в фигму — красота же)
— У нас есть краулинг сайтов (можно собрать структуру конкурентов за пару кликов). Это нужно не всем, но эта фича может стать дополнением к предпроектной работе.
— Не все заказчики готовы ждать пока загрузится проект в фигме (когда вы им показываете). Или не понимают куда нажать чтобы что-то посмотреть.
У нас это очень просто и быстро работает

Ответить
Развернуть ветку
Olga Melnik

Просто топ инфа 🔥🔥🔥

Ответить
Развернуть ветку
Читать все 13 комментариев
null