Процессы в студии «Имя.»

Как строится процесс создания сайта в студии. Страница для всех участников процесса: авторов, дизайнеров, менеджеров проектов.

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

№1

ПРОТОТИП

Первый этап — создание прототипа сайта. Для утверждение текста и смыслов, которые нужно донести

Отдельное внимание обрати на блоки, в которых мы говорим о результате для клиента: так ты лучше поймёшь, какой результат на каждом этапе важен и почему.

1.1

интервью + структура

Одно или два интервью для сбора всех данных, чтобы создать структуру сайта

#АВТОР

#МЕНЕДЖЕР ПРОЕКТА

Видео о том, что важно учесть при создании структуры. С демонстрацией экрана, примерами и комментариями

6:34 на просмотр

Результат для конторы

Точное понимание объёма и задачи. Поблочная структура сайта с погрешностью 1 блок.

Результат для клиента

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

Чистое время на создание структуры для автора — 2 рабочих дня с момента проведения интервью с заказчиком.

Пример вопросов для погружения в бизнес

Пример структуры в гугл документе

1.2

ТЕКСТ

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

#АВТОР

#МЕНЕДЖЕР ПРОЕКТА

На что обратить внимание: 2 ключевых критерия хорошего текста

11:42 на просмотр

Задача для автора

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

Задача для менеджера

Дать обратную связь автору по тексту перед созданием прототипа. Проверить соответствие задачи и структуре.

Результат для дизайнера

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

Заголовок на первом экране соответствует ключевому запросу или проблеме, с которыми приходит посетитель. Нужен ответ «да, мне здесь помогут». Например, сайт для курса, на котором учат создавать собственный бренд. В таком случае результат для человека — созданный бренд, поэтому. Плохо: «Онлайн-курс по созданию личного и корпоративного бренда». Хорошо: «Онлайн-курс, на котором ты за 6 недель создашь собственный бренд, который полюбят».
Меньше оценок, больше фактов. Оценка — это то, что человек должен понять из фактов, которые прочитал. Он должен сам сделать выводы. Например. Плохо: «Испечём ваш свадебный торт быстрее всех в Воронеже». Хорошо: «Печём свадебные торты за 36 часов с момента предоплаты, доставляем за 2 часа до начала торжества».
Заголовки должны содержать ответы на ключевые вопросы посетителя. Люди листают сайт быстро и могут не прочитать ничего, кроме заголовков. Поэтому задача заголовка заинтересовать. К примеру сайт для страхового брокера и люди думают, что у вас они заплатят больше, чем в страховой. Плохо: «Наши преимущества». Хорошо: «Наши услуги бесплатны для вас. Нам платят страховые компании».
Показывать сценарии: как используют продукт или услугу, в каких ситуациях она будет полезна. Человек должен понять, что в его случае мы подходим. Плохо: «Такелажные работы в Москве. При повторном обращении скидка 15%». Хорошо: «Перемещаем ценные объекты от 200 кг до 150 тонн: трансформаторы, мед. и пищевое оборудование, автомобили, скульптуры, станки и прессы».
Кейсы вместо отзывов. Сами по себе отзывы не информативны, поэтому лучше показать, какая задача была у человека и как именно её помогли решить. Плохо «Отзывы: «ООО “Ситек” выражает благодарность сотрудникам компании...»». Хорошо «Выполнили 227 проектов за 2020 год: установили водогрейные котлы весом 43 тонны в действующую котельную».
Текст должен отличать нас от конкурентов. Если все говорят про скорость, сделайте акцент на качество. Нужно смотреть на тех конкурентов, с которыми мы будем находиться в источниках трафика.
Нужно подкреплять текст смысловыми иллюстрациями. Например, если рассказываем о том, какие крутые и подробные планировки делаем — покажите пример реальной планировки и укажите, какие детали в ней важны.
Говорите не о компании, а о клиенте. О том, как мы решаем его задачи. Клиенту не важно, какие мы хорошие. Ему важно только то, поможем мы ему или нет. Плохо: «У нас лучшие менеджеры и моментальная поддержка». Хорошо: «Задавайте вопросы в поддердку в удобных каналах: скайп, вотсап или чат на сайте. Отвечаем в течение 40 минут в рабочее время».
Делайте выводы из преимуществ. Люди покупают результат, а не процесс. Студенту не важно, как именно мы будем писать за него реферат, ему важно получить за него пятёрку. Плохо: «Сервис помощи студентам. Здесь помогут с рефератом без посредников». Хорошо: «Напишем реферат с уникальностью 80% от 1 дня и 500₽. 89% наших клиентов получают оценки 4 и 5».
Формы сбора контактов должны доносить результат конкретно и полезно, чтобы человек понимал, зачем ему их оставлять. Желательно давать сразу что-то, через что человек поймёт, что вы крутые: бесплатную консультацию, пробный период. Плохо: «Запишитесь на консультацию к стилисту. Оставить заявку». Хорошо: «Бесплатный колор бук: как сочетать цвета в гардеробе. Получить».
Не делайте длинные формы захвата. Чем больше полей, тем менее охотно их заполняют. Собирайте только те данные, которые вам нужны для продажи.
Описывайте путь. Часто, человек не до конца понимает суть процесса. Расскажите ему, что произойдёт после первого касания, чего ему нужно ожидать и к чему готовиться. Плохо: «Оставьте заявку, мы с вами свяжемся». Хорошо: «Оставьте заявку, мы перезвоним в течение 10 минут, расскажем подробнее о тарифах, поможем подобрать подходящий и расскажем, как его подключить».
Вовлекайте, а не продавайте. Если клиент нас не знает и у нас не супер-дешёвый продукт не пытайтесь закрыть на какое-то действие на первом экране. Вовлекайте — дайте ссылку на какой-то конверсионный блок, который вызовет доверие. Например, если вы продаёте курс за 50 000 ₽. Плохо: «Записаться на курс». Хорошо: «Смотреть программу».
Давайте возможность связаться по разным каналам — в соц сетях, по телефону и через форму. Не ограничивайтесь только телефоном и почтой. Сейчас многим удобнее начать диалог, например, в вотсапе или телеграме.

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

Пример текста в гугл документе

1.3

ПРОТОТИП

Создание визуального прототипа из текста и утверждение с заказчиком

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

#АВТОР

#МЕНЕДЖЕР ПРОЕКТА

Как правильно создавать прототип и что в нём самое важное

5:55 на просмотр

Задача для автора

Создание прототипа, финальное утверждение его с менеджером проекта и презентация его заказчику

Задача для менеджера

Финальное утверждение прототипа автору и договорённость о презентации с закзачиком

Результат для клиента

Утверждены тексты; понятна логика сайта; ясно, почему именно такой текст и почему именно в таком порядке

Чистое время на создание прототипа из текстов для автора — 1 рабочий день с момента утверждения текстов менеджером проекта.

Пример прототипа в фигме

№2

ДИЗАЙН

Второй этап — создание дизайна сайта. Утверждается сначала концепция их трёх экранов, потом главная, а потом остальные страницы

Отдельное внимание обрати на блоки, в которых мы говорим о результате для клиента: так ты лучше поймёшь, какой результат на каждом этапе важен и почему.

2.1

референсы

Сбор и обсуждение референсов для понимания визуальных ожиданий клиента

#ДИЗАЙНЕР

Задача для конторы

Понять ожидания клиента по дизайну и подобрать дизайнера соответствующего уровня

Результат для клиента

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

Ссылки на реальные проекты или на статичные макеты. Если обсуждение проходит голосом, можно не давать никаких комментариев. Если заказчик отвечает текстом, в документ нужно добавить комментарий: «Мы собрали разные по стилю сайты, чтобы понять ваши ожидания. Напишите, пожалуйста, что вам нравится и что не нравится по каждому из примеров. Что можно прокомментировать: что нравится в целом; что не нравится в целом; какого типа шрифты нравятся; какие цвета; какие формы; какой стиль иллюстраций/иконок; какие анимации.»

Пример подбора рефов в гугл документе

2.2

первые 3 блока

Создание первых трёх экранов дизайна и презентация концепции клиенту

У клиента есть 2 итерации корректировок на этапе.

#ДИЗАЙНЕР

#МЕНЕДЖЕР ПРОЕКТА

Видео о том, на что обращаться внимание в дизайне и каких ошибок не нужно допускать

13:59 на просмотр

Задача для дизайнера

Создание концепта на основании референсов и материалов клиента и презентация его менеджеру проекта

Результат для клиента

Найдена стилистика сайта и есть понимание, какой визуально сайт будет в итоге — за счёт присутствия всех ключевых элементов дизайна

Задача для менеджера проекта

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

Максимум 4-5 размеров шрифта: заголовок Н1, заголовок Н2, подзаголовок, описание и 1 размер для прочих не основных элементов.
Единообразные толщины у шрифтов. Если первый заголовок жирный, то все остальные заголовки на странице тоже должны быть жирными.
Единая стилистика иконок и иллюстраций: один набор с похожими персонажами/деталями, цвета и толщины линий.
Одинаковые отступы между элементами: заголовок и подзаголовок; между блоками; сверху и снизу внутри плашек. Отступы между смысловыми блоками должны быть больше отступов внутри самих блоков, чтобы визуально были очевидны переходы между блоками.
Используйте сетки и вертикальные направляющие: весь важный контент должен быть выровнен по трём-четырём силовым линиям. Силовые линии — это вертикальные линии, которые направляют весь контент.
Самый яркий цвет используйте для конверсионных кнопок и блоков. Всего на странице не больше 5 цветов: для шрифта, для основного фона, для подложек, для акцента и для второстепенного акцента.
Не используйте стоковые картинки, их все сразу видят. Лучше свои собственные, но не сильно хорошего качества, чем «счастливых людей» со стоков. Используйте фотографии с сайта unsplash, там много ещё не заезженных бесплатных картинок.
Анимация ради анимации не нужна. Задача анимации — акцентировать внимание на элементы, а не украшать. Добавляйте её только на те элементы, которые человек точно должен увидеть.
Элементы ради элементов не нужны. Лучше сконцентрировать внимание на заголовке, чем на какой-то красивой бессмысленной штучке. Дополнительный декор может быть полезен либо для отстройки от конкурентов, либо когда нужно произвести впечатление, а не продать.
Посмотрите конкурентов, придумайте, как зацепить взгляд, чтобы выделиться среди них не только текстом: цвет, композиция, видео. Если для ниши принято использовать синий — найдите оттенок синего, который будет выделяться или рискните использовать фиолетовый.
Не используйте креатив, чтобы удивить. Пусть привычные элементы будут в привычных местах, как у всех. Потому что там их и ищет человек. Например: логотип слева вверху, телефон справа вверху.
Аккуратно используйте фоновые подложки. Обычно, на них либо плохо читается текст, либо не видно сам фон. Лучше вынести важный визуал отдельно от текста — не экономьте место.
Сделайте кнопки, реагирующими на наведение. Чтобы было интуитивно понятно, что она работает и что-то произойдёт. Можно чуть изменять оттенок, добавлять анимацию или инвертировать цвет.
Не делайте строки слишком длинными — их тяжело читать. Постарайтесь уместить длину в 80 символов. А чем длиннее строки, тем больше должно быть расстояние между ними. Если текст больше 2 строк выровнен по левому краю, особенно в длинных строках.
Не используйте красивые и сложно читаемые шрифты. Главное, чтобы было легко читать, а эстетика на втором плане.

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

Пример трёх экранов в фигме

2.3

ДИзайн главной + остальных

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

У клиента есть 2 итерации корректировок на этапе.

#ДИЗАЙНЕР

#МЕНЕДЖЕР ПРОЕКТА

Задача для дизайнера

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

Результат для клиента

Утверждён дизайн главной страницы, сквозных блоков — меню, контактов, подвала и всех повторяющихся элементов — форм, попапов, выпадающих списков

Задача для менеджера проекта

Финальное утверждение главной страницы с клтиентом

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

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

Пример страницы целиком в фигме

2.4

ПЕРЕНОс + адаптация

Перенос дизайна в тильду и адаптация всех страниц под мобильные телефоны и планшеты

У клиента есть 1 итерация корректировок на этапе.

#ДИЗАЙНЕР

#МЕНЕДЖЕР ПРОЕКТА

Задача для дизайнера

Полная сборка сайта в тильде. Адаптация и проверка отображения во всех разрешениях

Результат для клиента

Утверждена свёрстанная в Тильде десктопная и мобильная версии сайта, есть возможность прокликать все кнопки, перейти на все блоки/страницы и вызвать весь скрытый контент: попапы, выпадающие списки, раскрывающиеся блоки, карточки товара

Задача для менеджера проекта

Проверка правильности переноса макета, соответствия утверждённой версии и адаптации во всех разрешениях

2.5

технические настройки

Технические настройки сайта, передача на аккаунт клиента и подготовка к приёму трафика

У клиента есть 1 итерация корректировок на этапе.

#ДИЗАЙНЕР

#МЕНЕДЖЕР ПРОЕКТА

Задача для дизайнера

Настройка сайта и подготовка к выпуску

Результат для клиента

Сайт полностью готов и проверен, находится на аккаунте клиента и готов к анонсу/запуску рекламы

Задача для менеджера проекта

Проверка технических настроек и финальная проверка работоспособности сайта

В финале менеджеру: взять отзыв у заказчика, предложить 10% за рекомендацию, обозначить кросс продукты для ltv; проследить за публикацией сайта в кейсы и соц.сети

Живой пример правильной вёрстки и адаптации