Бесплатно проконсультируем в течение 15 минут в рабочее время
Ответим на все вопросы, выясним всё о задаче и расскажем, как её лучше решить. Консультация займёт от 10 до 30 минут.
Где с вами удобнее связаться?
Нажимая на кнопку «Узнать стоимость», я соглашаюсь с политикой конфиденциальности
Как строится процесс создания сайта в студии. Страница для всех участников процесса: авторов, дизайнеров, менеджеров проектов.
Чтобы понять, как мы работаем и органично встроиться в команду — изучи всю цепочку, даже для тех ролей, которые не связаны напрямую с твоими задачами. Так бы будешь лучше понимать, почему мы принимаем некоторые решения и будешь получать меньше критической обратной связи. Примерное время на изучение — 40 минут.
№1
ПРОТОТИП
Первый этап — создание прототипа сайта. Для утверждение текста и смыслов, которые нужно донести
Отдельное внимание обрати на блоки, в которых мы говорим о результате для клиента: так ты лучше поймёшь, какой результат на каждом этапе важен и почему.
1.1
интервью + структура
Одно или два интервью для сбора всех данных, чтобы создать структуру сайта
#АВТОР
#МЕНЕДЖЕР ПРОЕКТА
Видео о том, что важно учесть при создании структуры. С демонстрацией экрана, примерами и комментариями
6:34 на просмотр
Результат для конторы
Точное понимание объёма и задачи. Поблочная структура сайта с погрешностью 1 блок.
Результат для клиента
Понимание, сколько будет блоков и какой смысл заложен в каждый из них. Фиксированный ценник за весь проект.
Чек-лист для автора
  1. Написать предварительный список вопросов для клиента. Чтобы он смог подготовить ответы заранее и понимал, о чём пойдёт речь на интервью.
  2. Провести живое интервью с заказчиком и выяснить все вводные, которые нужны для создания структуры сайта
  3. Создать структуру сайта в гугл документа. Она должна содержать: точное количество блоков; перечисление конкретных смыслов, которые заложены в каждый блок.
  4. Провести живую презентацию для клиента: рассказать, почему именно такие смыслы, именно в таком порядке; пояснить, какое целевое действие и как мы побудим человека сделать с помощью этой структуры.
Чек-лист для менеджера
  1. Создание карточки по проекту в трелло и загрузка исходных данных
  2. Передача исходных данных автору 
  3. Передача предварительных вопросов для интервью с заказчиком для возможности подготовиться
  4. Договорённость о времени интервью с заказчиком. В течение двух рабочих дней после оплаты этапа
  5. Обратная связь автору по структуре перед презентацией с закзчиком
  6. Создание чатика в телеграме с заказчиком, менеджером и редактором
  7. Расчёт стоимости работ для клиента после утверждения структуры
  8. Создание дорожной карты проекта: фиксация сроков для дизайнера и редактора по этапам
  9. Передача сроков по каждому этапу заказчику
Чистое время на создание структуры для автора — 2 рабочих дня с момента проведения интервью с заказчиком.
1.2
ТЕКСТ
Внутренний этап, для передачи текста дизайнеру в работу и презентации его менеджеру проекта
#АВТОР
#МЕНЕДЖЕР ПРОЕКТА
На что обратить внимание: 2 ключевых критерия хорошего текста
11:42 на просмотр
Задача для автора
Полностью готовый текст перед переносом в прототип. Согласуется с менеджером проекта для проверки соответствия задаче и структуре.
Задача для менеджера
Дать обратную связь автору по тексту перед созданием прототипа. Проверить соответствие задачи и структуре.
Результат для дизайнера
Гугл документ который соответствует критериям. Нужен чтобы дизайнеру было удобно копировать текст без стилей.
Чек-лист автору для текста
  1. Заголовок на первом экране соответствует ключевому запросу или проблеме, с которыми приходит посетитель. Нужен ответ «да, мне здесь помогут». Например, сайт для курса, на котором учат создавать собственный бренд. В таком случае результат для человека — созданный бренд, поэтому. Плохо: «Онлайн-курс по созданию личного и корпоративного бренда». Хорошо: «Онлайн-курс, на котором ты за 6 недель создашь собственный бренд, который полюбят».
  2. Меньше оценок, больше фактов. Оценка — это то, что человек должен понять из фактов, которые прочитал. Он должен сам сделать выводы. Например. Плохо: «Испечём ваш свадебный торт быстрее всех в Воронеже». Хорошо: «Печём свадебные торты за 36 часов с момента предоплаты, доставляем за 2 часа до начала торжества».
  3. Заголовки должны содержать ответы на ключевые вопросы посетителя. Люди листают сайт быстро и могут не прочитать ничего, кроме заголовков. Поэтому задача заголовка заинтересовать. К примеру сайт для страхового брокера и люди думают, что у вас они заплатят больше, чем в страховой. Плохо: «Наши преимущества». Хорошо: «Наши услуги бесплатны для вас. Нам платят страховые компании».
  4. Показывать сценарии: как используют продукт или услугу, в каких ситуациях она будет полезна. Человек должен понять, что в его случае мы подходим. Плохо: «Такелажные работы в Москве. При повторном обращении скидка 15%». Хорошо: «Перемещаем ценные объекты от 200 кг до 150 тонн: трансформаторы, мед. и пищевое оборудование, автомобили, скульптуры, станки и прессы».
  5. Кейсы вместо отзывов. Сами по себе отзывы не информативны, поэтому лучше показать, какая задача была у человека и как именно её помогли решить. Плохо «Отзывы: «ООО “Ситек” выражает благодарность сотрудникам компании...»». Хорошо «Выполнили 227 проектов за 2020 год: установили водогрейные котлы весом 43 тонны в действующую котельную».
  6. Текст должен отличать нас от конкурентов. Если все говорят про скорость, сделайте акцент на качество. Нужно смотреть на тех конкурентов, с которыми мы будем находиться в источниках трафика.
  7. Нужно подкреплять текст смысловыми иллюстрациями. Например, если рассказываем о том, какие крутые и подробные планировки делаем — покажите пример реальной планировки и укажите, какие детали в ней важны.
  8. Говорите не о компании, а о клиенте. О том, как мы решаем его задачи. Клиенту не важно, какие мы хорошие. Ему важно только то, поможем мы ему или нет. Плохо: «У нас лучшие менеджеры и моментальная поддержка». Хорошо: «Задавайте вопросы в поддердку в удобных каналах: скайп, вотсап или чат на сайте. Отвечаем в течение 40 минут в рабочее время».
  9. Делайте выводы из преимуществ. Люди покупают результат, а не процесс. Студенту не важно, как именно мы будем писать за него реферат, ему важно получить за него пятёрку. Плохо: «Сервис помощи студентам. Здесь помогут с рефератом без посредников». Хорошо: «Напишем реферат с уникальностью 80% от 1 дня и 500₽. 89% наших клиентов получают оценки 4 и 5».
  10. Формы сбора контактов должны доносить результат конкретно и полезно, чтобы человек понимал, зачем ему их оставлять. Желательно давать сразу что-то, через что человек поймёт, что вы крутые: бесплатную консультацию, пробный период. Плохо: «Запишитесь на консультацию к стилисту. Оставить заявку». Хорошо: «Бесплатный колор бук: как сочетать цвета в гардеробе. Получить».
  11. Не делайте длинные формы захвата. Чем больше полей, тем менее охотно их заполняют. Собирайте только те данные, которые вам нужны для продажи.
  12. Описывайте путь. Часто, человек не до конца понимает суть процесса. Расскажите ему, что произойдёт после первого касания, чего ему нужно ожидать и к чему готовиться. Плохо: «Оставьте заявку, мы с вами свяжемся». Хорошо: «Оставьте заявку, мы перезвоним в течение 10 минут, расскажем подробнее о тарифах, поможем подобрать подходящий и расскажем, как его подключить».
  13. Вовлекайте, а не продавайте. Если клиент нас не знает и у нас не супер-дешёвый продукт не пытайтесь закрыть на какое-то действие на первом экране. Вовлекайте — дайте ссылку на какой-то конверсионный блок, который вызовет доверие. Например, если вы продаёте курс за 50 000 ₽. Плохо: «Записаться на курс». Хорошо: «Смотреть программу».
  14. Давайте возможность связаться по разным каналам — в соц сетях, по телефону и через форму. Не ограничивайтесь только телефоном и почтой. Сейчас многим удобнее начать диалог, например, в вотсапе или телеграме.
Чек-лист автору для документа
  1. Разбитый на отдельные смысловые блоки
  2. Без стилей и переносов энтером
  3. Название документа = название проекта
  4. Открытый доступ для редактирования
Чек-лист для менеджера
  1. Проверить, что все основные смыслы по блокам из структуры донесены
  2. Проверить соответствие прототипа зафиксированной в структуре идее
Чистое время на написание текста для автора — 3 рабочих дня с момента проведения повторного интервью с заказчиком и получения от него всех необходимых для работы материалов.
1.3
ПРОТОТИП
Создание визуального прототипа из текста и утверждение с заказчиком
У заказчика есть две итерации корректировок по главной странице и две итерации по остальным страницам. После полного утверждения прототипа — переход к дизайну.
#АВТОР
#МЕНЕДЖЕР ПРОЕКТА
Как правильно создавать прототип и что в нём самое важное
5:55 на просмотр
Задача для автора
Создание прототипа, финальное утверждение его с менеджером проекта и презентация его заказчику
Задача для менеджера
Финальное утверждение прототипа автору и договорённость о презентации с закзачиком
Результат для клиента
Утверждены тексты; понятна логика сайта; ясно, почему именно такой текст и почему именно в таком порядке
Чек-лист по оформлению прототипа для автора
  1. В прототипе выделены необходимые акценты: текст жирным, ключевые кнопки цветом, важные блоки подложкой для фона
  2. В комментариях прописано, куда ведёт каждая кнопка или ссылка
  3. За пределами артборда показаны все всплывающие окна, формы или другой спрятанный контент
  4. Использован реальный текст для всех блоков. Если в каких-то блоках нет текста — дать комментарий, когда он появится и кто его даст
  5. Открыт доступ для комментирования, чтобы заказчик или дизайнер могли задавать вопросы
Чек-лист по презентации для автора
  1. Пояснения, почему именно такие смыслы заложены в каждый блок
  2. Почему именно в таком порядке раскрываем ответы на вопросы посетителей
  3. Почему именно такие лид-магниты и призывы используем
Чек-лист для менеджера
  1. Финальное утверждение прототипа автору
  2. Договорённость о презентации с автором закзачиком
  3. Провести презентацию прототипа совместно с автором
  4. Зафиксировать комментарии заказчика, которые он дал на презентации: собрать в гугл документе
  5. Получить финальные комментарии заказчика по прототипу
  6. Зафиксировать для заказчика срок, когда комментарии будут внесены
  7. Утвердить прототип и поставить задачу на дизайн
Чистое время на создание прототипа из текстов для автора — 1 рабочий день с момента утверждения текстов менеджером проекта.

№2
ДИЗАЙН
Второй этап — создание дизайна сайта. Утверждается сначала концепция их трёх экранов, потом главная, а потом остальные страницы
Отдельное внимание обрати на блоки, в которых мы говорим о результате для клиента: так ты лучше поймёшь, какой результат на каждом этапе важен и почему.
2.1
референсы
Сбор и обсуждение референсов для понимания визуальных ожиданий клиента
#ДИЗАЙНЕР
Задача для конторы
Понять ожидания клиента по дизайну и подобрать дизайнера соответствующего уровня
Результат для клиента
Понимание, в какой визуальной стилистике он получит сайт на выходе: что нравится и хочется, а что нет
Чек-лист по референсам для дизайнера
  1. Собрать минимум 5 разноплановых примеров в гугл документе
  2. Получить и зафиксировать комментарии от заказчика по: что нравится в целом; что не нравится в целом; какого типа шрифты нравятся; какие цвета; какие формы; какой стиль иллюстраций/иконок; какие анимации
  3. Исходя из общего понимания пожеланий по 5 примерам, собрать ещё 2-5 примеров, которые больше отражают визуальные предпочтения клиента
Ссылки на реальные проекты или на статичные макеты. Если обсуждение проходит голосом, можно не давать никаких комментариев. Если заказчик отвечает текстом, в документ нужно добавить комментарий: «Мы собрали разные по стилю сайты, чтобы понять ваши ожидания. Напишите, пожалуйста, что вам нравится и что не нравится по каждому из примеров. Что можно прокомментировать: что нравится в целом; что не нравится в целом; какого типа шрифты нравятся; какие цвета; какие формы; какой стиль иллюстраций/иконок; какие анимации.»
2.2
первые 3 блока
Создание первых трёх экранов дизайна и презентация концепции клиенту
У клиента есть 2 итерации корректировок на этапе.
#ДИЗАЙНЕР
#МЕНЕДЖЕР ПРОЕКТА
Видео о том, на что обращаться внимание в дизайне и каких ошибок не нужно допускать
13:59 на просмотр
Задача для дизайнера
Создание концепта на основании референсов и материалов клиента и презентация его менеджеру проекта
Результат для клиента
Найдена стилистика сайта и есть понимание, какой визуально сайт будет в итоге — за счёт присутствия всех ключевых элементов дизайна
Задача для менеджера проекта
Приёмка работы у дизайнера, обратная связь дизайнеру и презентация концепта клиенту
Чек-лист по дизайн-системе для дизайнера
  1. Максимум 4-5 размеров шрифта: заголовок Н1, заголовок Н2, подзаголовок, описание и 1 размер для прочих не основных элементов.
  2. Единообразные толщины у шрифтов. Если первый заголовок жирный, то все остальные заголовки на странице тоже должны быть жирными.
  3. Единая стилистика иконок и иллюстраций: один набор с похожими персонажами/деталями, цвета и толщины линий.
  4. Одинаковые отступы между элементами: заголовок и подзаголовок; между блоками; сверху и снизу внутри плашек. Отступы между смысловыми блоками  должны быть больше отступов внутри самих блоков, чтобы визуально были очевидны переходы между блоками.
  5. Используйте сетки и вертикальные направляющие: весь важный контент должен быть выровнен по трём-четырём силовым линиям. Силовые линии — это вертикальные линии, которые направляют весь контент.
  6. Самый яркий цвет используйте для конверсионных кнопок и блоков. Всего на странице не больше 5 цветов: для шрифта, для основного фона, для подложек, для акцента и для второстепенного акцента.
  7. Не используйте стоковые картинки, их все сразу видят. Лучше свои собственные, но не сильно хорошего качества, чем «счастливых людей» со стоков. Используйте фотографии с сайта unsplash, там много ещё не заезженных бесплатных картинок.
  8. Анимация ради анимации не нужна. Задача анимации — акцентировать внимание на элементы, а не украшать. Добавляйте её только на те элементы, которые человек точно должен увидеть.
  9. Элементы ради элементов не нужны. Лучше сконцентрировать внимание на заголовке, чем на какой-то красивой бессмысленной штучке. Дополнительный декор может быть полезен либо для отстройки от конкурентов, либо когда нужно произвести впечатление, а не продать.
  10. Посмотрите конкурентов, придумайте, как зацепить взгляд, чтобы выделиться среди них не только текстом: цвет, композиция, видео. Если для ниши принято использовать синий — найдите оттенок синего, который будет выделяться или рискните использовать фиолетовый.
  11. Не используйте креатив, чтобы удивить. Пусть привычные элементы будут в привычных местах, как у всех. Потому что там их и ищет человек. Например: логотип слева вверху, телефон справа вверху.
  12. Аккуратно используйте фоновые подложки. Обычно, на них либо плохо читается текст, либо не видно сам фон. Лучше вынести важный визуал отдельно от текста — не экономьте место.
  13. Сделайте кнопки, реагирующими на наведение. Чтобы было интуитивно понятно, что она работает и что-то произойдёт. Можно чуть изменять оттенок, добавлять анимацию или инвертировать цвет.
  14. Не делайте строки слишком длинными — их тяжело читать. Постарайтесь уместить длину в 80 символов. А чем длиннее строки, тем больше должно быть расстояние между ними. Если текст больше 2 строк выровнен по левому краю, особенно в длинных строках.
  15. Не используйте красивые и сложно читаемые шрифты. Главное, чтобы было легко читать, а эстетика на втором плане.
Чек-лист по оформлению макета для дизайнера
  1. Попапы и эффекты раскрытия не показаны
  2. Основные элементы дизайна присутствуют: заголовок Н1, заголовок Н2, подзаголовок, описание, цвета фонов/акцентов/текста, тени, плашки, стилистики иллюстраций
  3. Открыто комментирование проекта, если фигма
  4. Адрес сайта = название проекта, если тильда
Чек-лист по презентации для дизайнера
  1. Почему выбран именно такой цвет или палитра
  2. Почему выбран именно такой шрифт или пара
  3. Почему выбраны именно такие фотографии/иллюстрации/иконки: стилистика, форма, толщина и так далее
  4. За счёт чего сделана отстройка от основных конкурентов
  5. Какие дизайн-элементы выбраны и почему: тени, скругления, фигуры
Чек-лист для менеджера проекта перед презентацией
  1. Гугл документ или комментарии в фигме для дизайнера
  2. Проверка соответствия референсам и комментариям заказчика к ним
  3. Проверка соответствия прототипу: акценты, наличие всех элементов
Чек-лист для менеджера проекта на презентацию
  1. Почему выбран именно такой цвет или палитра
  2. Почему выбран именно такой шрифт или пара
  3. Почему выбраны именно такие фотографии/иллюстрации/иконки: стилистика, форма, толщина и так далее
  4. За счёт чего сделана отстройка от основных конкурентов
  5. Какие дизайн-элементы выбраны и почему: тени, скругления, фигуры
  6. Зафиксированы в гугл документе во время созвона и утверждены с заказчиком после презентации все его комментарии и правки
  7. Составлен список правок от заказчика для дизайнера в гугл документе или фигме
Каждая новая итерация правок от заказчика — новый артборд в фигме. Чтобы можно было отследить изменения и, при необходимости, откатиться на предыдущую версию.
2.3
ДИзайн главной + остальных
Создание дизайна лендинга целиком или главной страницы многостраничника. После полного утверждения — дизайн всех остальных страниц
У клиента есть 2 итерации корректировок на этапе.
#ДИЗАЙНЕР
#МЕНЕДЖЕР ПРОЕКТА
Задача для дизайнера
Полностью собрать дизайн главной страницы сайта и всех сквозных блоков, повторяющихся элементов — форм, попапов, выпадающих списков
Результат для клиента
Утверждён дизайн главной страницы, сквозных блоков — меню, контактов, подвала и всех повторяющихся элементов — форм, попапов, выпадающих списков
Задача для менеджера проекта
Финальное утверждение главной страницы с клтиентом
Чек-лист по оформлению макета для дизайнера
  1. Показываем попапы и эффекты раскрытия элементов: выпадающие списки, формы, переключатели, слайдеры
  2. Все ссылки внутри страницы работают, если тильда
  3. Если фигма — есть пояснения, куда именно ведут ссылки, а сбоку от артборда показан дизайн всех всплывающих окон или скрытых элементов, если они визуально отличаются друг от друга
  4. Открыто комментирование проекта, если фигма
  5. Адрес сайта = название проекта, если тильда
Чек-лист для менеджера проекта перед презентацией
  1. Гугл документ или комментарии в фигме для дизайнера
  2. Проверка соответствия референсам и комментариям заказчика к ним
  3. Проверка соответствия прототипу: акценты, наличие всех элементов
Каждая новая итерация правок от заказчика — новый артборд в фигме. Чтобы можно было отследить изменения и, при необходимости, откатиться на предыдущую версию.
После полного утверждения дизайна главной страницы, переходим к дизайну всех остальных страниц, если это многостраничник. Все, кроме главной утверждаем все за один раз
2.4
ПЕРЕНОс + адаптация
Перенос дизайна в тильду и адаптация всех страниц под мобильные телефоны и планшеты
У клиента есть 1 итерация корректировок на этапе.
#ДИЗАЙНЕР
#МЕНЕДЖЕР ПРОЕКТА
Задача для дизайнера
Полная сборка сайта в тильде. Адаптация и проверка отображения во всех разрешениях
Результат для клиента
Утверждена свёрстанная в Тильде десктопная и мобильная версии сайта, есть возможность прокликать все кнопки, перейти на все блоки/страницы и вызвать весь скрытый контент: попапы, выпадающие списки, раскрывающиеся блоки, карточки товара
Задача для менеджера проекта
Проверка правильности переноса макета, соответствия утверждённой версии и адаптации во всех разрешениях
Чек-лист по переносу макета в тильду для дизайнера
  1. Результат в Тильде полностью соответствует макету в Фигме: формы, размеры, расстояния, эффекты, цвета
  2. Все картинки ужаты с помощью сервиса https://tinypng.com/
  3. Если на страницах есть повторяющиеся блоки, то копии сделаны с помощью алиас блока T213
  4. Шапка и подвал сделаны отдельными страницами и заданы в настройках, даже если это лендинг
  5. Все ссылки заданы в формате /link, без прописывания домена
  6. В подвал добавлен блок плавного скролла T178
  7. Попапы подписаны понятными названиями, в настройках им задано название, как в заголовках форм
  8. Все кликабельные элементы реагируют на наведение: меняют цвет, размер, прозрачность, появляются дополнительные элементы
  9. Если используются сторонние шрифты — они загружены в формате woff через вкладку «Свой шрифт»
  10. У каждой формы есть кликабельная ссылка на политику конфиденциальности
  11. Якорные ссылки на странице сделаны с помощью блока T173
  12. Телефоны кликабельны с помощью вставки ссылки tel:+78000000000
Чек-лист по адаптации для дизайнера
  1. Проверка корректного отображения на всех разрешениях
  2. Если использованы типовые и зеро блоки, размеры шрифта сделаны едиными с помощью кода
  3. Сделано отдельное меню для мобильного, оно закреплено при скролле
  4. Если есть горизонтальные элементы дизайна, они преобразованы в вертикальные, чтобы лучше читались
Чек-лист проверки для менеджера
  1. Свёрстанный сайт в тильде полностью соответствует утверждённому с клиентом макету
  2. Сайт правильно отображается в мобильной версии
2.5
технические настройки
Технические настройки сайта, передача на аккаунт клиента и подготовка к приёму трафика
У клиента есть 1 итерация корректировок на этапе.
#ДИЗАЙНЕР
#МЕНЕДЖЕР ПРОЕКТА
Задача для дизайнера
Настройка сайта и подготовка к выпуску
Результат для клиента
Сайт полностью готов и проверен, находится на аккаунте клиента и готов к анонсу/запуску рекламы
Задача для менеджера проекта
Проверка технических настроек и финальная проверка работоспособности сайта
Чек-лист по тех.настройкам для дизайнера
  1. Подключение домена, настройка на стороне регистратора
  2. Настройка https, переадресация с www на основной домен и с http на https
  3. Создание фавкионки для ретины (64×64 пикселя)
  4. Создание бейджика для отображения в соц.сетях
  5. Заполнение названия и описания для всех страниц
  6. Подключение базовых приёмщиков к формам, доступных в тильде
  7. Проставление тэгов H1, H2, H3 на заголовки страниц сайта
  8. Создание типовой страницы 404, если сайт многостраничный
  9. Создание страницы с политикой конфиденциальности + добавление её к формам
  10. Перелинковка, проверка всех кликабельных элементов
  11. При необходимости подключение базовых платёжных систем на стороне тильды
  12. Установка номеров счётчиков для яндекса и гугла
  13. Установка кода разработчика в настройках сайта: q1xaa8y31h
  14. Добавление подписи «Сайт сделало Имя.» в подвал сайта
Чек-лист проверки для менеджера
  1. Все ссылки работают
  2. Заявки из форм приходят
  3. Сайт открывается по https
  4. У сайта есть фавиконка, бейджики и описания страниц
Что нужно запросить у клиента менеджеру
  1. Заполнение политики конфиденциальности и итоговый текст для неё здесь: https://tilda.cc/ru/privacy-generator/
  2. Доступ к оплаченному аккаунту Тильда
  3. Доступ к регистратору домена
  4. Информация о приёмщике данных из форм
  5. Информация для подключения платёжной системы
  6. Номера счётчиков для яндекс метрики и гугл аналитики
В финале менеджеру: взять отзыв у заказчика, предложить 10% за рекомендацию, обозначить кросс продукты для ltv; проследить за публикацией сайта в кейсы и соц.сети