Как передать сайт клиенту
Разбираемся, как организовать работу над проектом в Тильде так, чтобы клиенты к вам возвращались
Работа дизайнера — это не только про красивый дизайн и удобный интерфейс. Это ещё и про техническую грамотность, заботу о клиенте и внимание к деталям. Важно подготовить и передать проект в таком виде, чтобы клиент мог легко управлять сайтом без вашей помощи или с минимальной поддержкой.
Антон Командин, UX/UI-дизайнер, арт-директор Experience Agency и куратор в Школе Тильды, делится личным опытом, как подготовить проект, чтобы работа с сайтом была понятной, а клиенты советовали вас другим.
Антон Командин, UX/UI-дизайнер, арт-директор Experience Agency и куратор в Школе Тильды, делится личным опытом, как подготовить проект, чтобы работа с сайтом была понятной, а клиенты советовали вас другим.
Содержание:
Что такое передача проекта
Работа над сайтом строится поэтапно: бриф и исследование, прототипирование, разработка дизайна, вёрстка и настройка сайта, тестирование и внесение правок, и финальный — передача готового проекта клиенту. Дизайнеры чаще всего работают над сайтом в своём аккаунте, а когда всё готово, переносят в аккаунт клиента. Поэтому подготовка к передаче начинается задолго до того, как сайт технически окажется в аккаунте заказчика. Это комплекс мер, которые делают сайт завершённым и готовым к работе, а также помогут заказчику самостоятельно управлять контентом. Например, добавлять новости, обновлять расписание или менять цены.
Чтобы клиенту было проще работать с сайтом, дизайнеру на каждом этапе работы необходимо подготовить проект: выставить правильные настройки сайта, структурировать страницы и папки в личном кабинете, протестировать работоспособность форм, корзины, анимации, задать SEO-настройки, а также подготовить инструкции, которые помогут клиенту разобраться в платформе, самостоятельно вносить изменения и не нарушить работу сайта.
Чтобы клиенту было проще работать с сайтом, дизайнеру на каждом этапе работы необходимо подготовить проект: выставить правильные настройки сайта, структурировать страницы и папки в личном кабинете, протестировать работоспособность форм, корзины, анимации, задать SEO-настройки, а также подготовить инструкции, которые помогут клиенту разобраться в платформе, самостоятельно вносить изменения и не нарушить работу сайта.
Почему дизайнеру важно позаботиться о будущем проекта
Дизайнер может просто сделать сайт и забыть о нём, а может позаботиться о клиенте и тех, кто будет с ним работать. Такой подход к работе напрямую влияет на долгосрочные отношения с заказчиком и вашу профессиональную репутацию.
Вызывает доверие
Люди любят работать с профессионалами, которые думают на шаг вперёд. Проект, в котором всё структурировано, названы страницы, есть необходимые комментарии и инструкции, показывает, что вы ответственный исполнитель и цените своё и чужое время. Клиент запомнит такой подход и с большей вероятностью порекомендует вас другим или вернётся с новым заказом.
Минимизирует ошибки
Заранее подготовленные инструкции и комментарии помогут клиенту быстро разобраться в технических тонкостях работы с сайтом самостоятельно. Это минимизирует количество вопросов и риск всё сломать.
Продвигает вас
Работа дизайнера продолжает жить даже после передачи заказчику. Чем лучше клиент понимает, как управлять сайтом, тем дольше сможет сохранять его в первоначальном виде. Красиво упакованный проект в портфолио теряет ценность, если потенциальный заказчик увидит, что сейчас сайт выглядит иначе.
Люди любят работать с профессионалами, которые думают на шаг вперёд. Проект, в котором всё структурировано, названы страницы, есть необходимые комментарии и инструкции, показывает, что вы ответственный исполнитель и цените своё и чужое время. Клиент запомнит такой подход и с большей вероятностью порекомендует вас другим или вернётся с новым заказом.
Минимизирует ошибки
Заранее подготовленные инструкции и комментарии помогут клиенту быстро разобраться в технических тонкостях работы с сайтом самостоятельно. Это минимизирует количество вопросов и риск всё сломать.
Продвигает вас
Работа дизайнера продолжает жить даже после передачи заказчику. Чем лучше клиент понимает, как управлять сайтом, тем дольше сможет сохранять его в первоначальном виде. Красиво упакованный проект в портфолио теряет ценность, если потенциальный заказчик увидит, что сейчас сайт выглядит иначе.
Как организовать работу над проектом, чтобы клиенту было удобно с ним работать
1
Отключите индексацию и настройте временный домен
Первый шаг после создания проекта в Тильде — закрыть его от индексации поисковыми системами. Это необходимо, чтобы избежать ситуации, когда клиент раньше времени увидит в результатах поиска сайт с неверным заголовком, описанием страницы и стандартным значком Тильды вместо логотипа своей компании. Так произойдёт, если сайт проиндексируется до выставления корректных настроек SEO и загрузки правильного фавикона. Если сайт проиндексируется некорректно, обновление информации может занять от нескольких дней до нескольких месяцев.
Как это сделать: Настройки сайта → SEO → Запретить поисковикам индексировать сайт.
Первый шаг после создания проекта в Тильде — закрыть его от индексации поисковыми системами. Это необходимо, чтобы избежать ситуации, когда клиент раньше времени увидит в результатах поиска сайт с неверным заголовком, описанием страницы и стандартным значком Тильды вместо логотипа своей компании. Так произойдёт, если сайт проиндексируется до выставления корректных настроек SEO и загрузки правильного фавикона. Если сайт проиндексируется некорректно, обновление информации может занять от нескольких дней до нескольких месяцев.
Как это сделать: Настройки сайта → SEO → Запретить поисковикам индексировать сайт.
2
Создайте понятный временный домен
В процессе работы над сайтом, вам придётся отправлять ссылку на сайт клиенту для согласования разных этапов работы. Чтобы временный адрес был понятным и не вызывал лишних вопросов, поменяйте название. Например, вместо site-3 949 584.tilda.ws можно написать gramotno.tilda.ws.
Как это сделать: Настройки сайта → Главное → Субдомен на Тильде.
В процессе работы над сайтом, вам придётся отправлять ссылку на сайт клиенту для согласования разных этапов работы. Чтобы временный адрес был понятным и не вызывал лишних вопросов, поменяйте название. Например, вместо site-3 949 584.tilda.ws можно написать gramotno.tilda.ws.
Как это сделать: Настройки сайта → Главное → Субдомен на Тильде.
3
Подключите шрифты и настройте типографику
Всегда проверяйте лицензию на использование шрифтов перед применением, особенно если сайт коммерческий. Если в проекте будут шрифты без необходимых разрешений, клиент может получить от правообладателя, в лучшем случае, письмо с требованием оплаты, а в худшем — досудебную претензию.
Всегда проверяйте лицензию на использование шрифтов перед применением, особенно если сайт коммерческий. Если в проекте будут шрифты без необходимых разрешений, клиент может получить от правообладателя, в лучшем случае, письмо с требованием оплаты, а в худшем — досудебную претензию.
Пользователи Тильды могут бесплатно использовать фирменный шрифт Tilda Sans для любых своих проектов, даже коммерческих. Гарнитура содержит 7 начертаний от Light до Black, и доступна на 134 языках.
Задайте глобальные настройки шрифтов для сайта — выставленные параметры будут автоматически применяться ко всем блокам на всех страницах сайта. Это поможет избежать визуальной несогласованности между блоками. Например, при добавлении нового текстового блока, в нём по умолчанию будет использован такой же шрифт, как и на всём сайте. Это особенно полезно для блоков, где типографику нельзя настроить вручную, например, в карточках товаров.
Как это сделать: Настройки сайта → Шрифты и цвета.
Как это сделать: Настройки сайта → Шрифты и цвета.
4
Наведите порядок в личном кабинете Тильды
Чтобы клиенту было легче ориентироваться, используйте инструменты личного кабинета для упорядочивания страниц: папки, комментарии и лейблы.
Папки помогут сгруппировать страницы сайта, которые относятся к одному разделу. Например, все страницы, связанные с каталогом, можно поместить в папку «Каталог».
Как это сделать: Настройки страницы → Дополнительно → Создать новую папку.
Совет: Создайте папку «архив» для черновиков или страниц, которые клиент в процессе работы попросил убрать. Для этого поставьте в настройках «архивная папка», тогда страницы из этой папки не будут публиковаться на сайте. Но их можно будет быстро восстановить, если клиент передумает и попросит вернуть на сайт. Например, вы сделали страницу с отзывами, но клиент решил их не размещать на сайте. Когда через время он вернётся с просьбой добавить отзывы, вы сможете просто вытащить страницу из архива и быстро добавить на сайт.
Комментарии к страницам помогут быстро отыскать необходимую страницу. Например, если страница называется «Свяжитесь с нами 24/7», но по сути это контакты, добавьте комментарий «Контакты». Комментарии будут видны только в личном кабинете.
Лейблы — это теги для страниц, с помощью которых их также можно сгруппировать. Например, можно присвоить лейбл «О компании» страницам «О нас», «Отзывы» и «Контакты». Лейбл кликабелен — если нажать на него, отобразятся все страницы с таким тегом. Это упрощает поиск необходимых страниц, особенно при работе с большими проектами.
Как это сделать: Настройки страницы → Дополнительно → Комментарии / Лейблы.
Чтобы клиенту было легче ориентироваться, используйте инструменты личного кабинета для упорядочивания страниц: папки, комментарии и лейблы.
Папки помогут сгруппировать страницы сайта, которые относятся к одному разделу. Например, все страницы, связанные с каталогом, можно поместить в папку «Каталог».
Как это сделать: Настройки страницы → Дополнительно → Создать новую папку.
Совет: Создайте папку «архив» для черновиков или страниц, которые клиент в процессе работы попросил убрать. Для этого поставьте в настройках «архивная папка», тогда страницы из этой папки не будут публиковаться на сайте. Но их можно будет быстро восстановить, если клиент передумает и попросит вернуть на сайт. Например, вы сделали страницу с отзывами, но клиент решил их не размещать на сайте. Когда через время он вернётся с просьбой добавить отзывы, вы сможете просто вытащить страницу из архива и быстро добавить на сайт.
Комментарии к страницам помогут быстро отыскать необходимую страницу. Например, если страница называется «Свяжитесь с нами 24/7», но по сути это контакты, добавьте комментарий «Контакты». Комментарии будут видны только в личном кабинете.
Лейблы — это теги для страниц, с помощью которых их также можно сгруппировать. Например, можно присвоить лейбл «О компании» страницам «О нас», «Отзывы» и «Контакты». Лейбл кликабелен — если нажать на него, отобразятся все страницы с таким тегом. Это упрощает поиск необходимых страниц, особенно при работе с большими проектами.
Как это сделать: Настройки страницы → Дополнительно → Комментарии / Лейблы.
5
Используйте Alias-блоки
После того как вы завершите работу над сайтом, у клиента может возникнуть необходимость поменять контент. Чтобы этот процесс для него был максимально простым, вы можете использовать Alias-блоки на страницах с повторяющимися блоками, например, с формой заявки или расписанием.
Alias — это точное отображение другого блока. После внесения изменений в оригинальный блок, опубликуйте все страницы сайта, тогда новая информация автоматически отобразится во всех элиасах этого блока. Это удобно, когда на сайте есть регулярно обновляемый контент. Все изменения нужно будет внести только один раз в блок-оригинал. Элиасы позволят дольше сохранять сайт в первоначальном виде и избежать ошибок при замене контента.
Как это сделать: Добавить блок → Другое → Alias (T213).
После того как вы завершите работу над сайтом, у клиента может возникнуть необходимость поменять контент. Чтобы этот процесс для него был максимально простым, вы можете использовать Alias-блоки на страницах с повторяющимися блоками, например, с формой заявки или расписанием.
Alias — это точное отображение другого блока. После внесения изменений в оригинальный блок, опубликуйте все страницы сайта, тогда новая информация автоматически отобразится во всех элиасах этого блока. Это удобно, когда на сайте есть регулярно обновляемый контент. Все изменения нужно будет внести только один раз в блок-оригинал. Элиасы позволят дольше сохранять сайт в первоначальном виде и избежать ошибок при замене контента.
Как это сделать: Добавить блок → Другое → Alias (T213).
6
Загрузите фавикон
Загрузите фавикон — это небольшая, но важная деталь, которая делает сайт узнаваемым. Он отображается во вкладке браузера, среди закладок и в поисковой выдаче, помогая пользователям быстрее находить сайт. Без фавикона сайт выглядит незавершённым, а его вкладка теряется среди других.
Также стоит учитывать, что пользователи часто работают в режиме тёмной темы или заходят на сайт с мобильных устройств. В настройках можно загрузить разные иконки для разных сценариев, чтобы фавикон был читабельным на любом фоне.
Как это сделать: Настройки сайта → SEO → Редактирование иконок.
Загрузите фавикон — это небольшая, но важная деталь, которая делает сайт узнаваемым. Он отображается во вкладке браузера, среди закладок и в поисковой выдаче, помогая пользователям быстрее находить сайт. Без фавикона сайт выглядит незавершённым, а его вкладка теряется среди других.
Также стоит учитывать, что пользователи часто работают в режиме тёмной темы или заходят на сайт с мобильных устройств. В настройках можно загрузить разные иконки для разных сценариев, чтобы фавикон был читабельным на любом фоне.
Как это сделать: Настройки сайта → SEO → Редактирование иконок.
7
Задайте цвета для сайта
Задайте цвет по умолчанию для сайта. При работе над проектом в Тильде у вас будет светлый фон, который дизайнеры часто воспринимают как цвет сайта, но это не так. Если на странице не задан цвет по умолчанию, то блок будет прозрачным и может некорректно отображаться у пользователей с тёмной темой. Об этом точно не знают клиенты, и при добавлении новых блоков могут нарушить визуальный стиль всего сайта. Выставленные настройки цвета помогут избежать таких ошибок.
Как это сделать: Настройки сайта → Шрифты и цвета.
Задайте цвет по умолчанию для сайта. При работе над проектом в Тильде у вас будет светлый фон, который дизайнеры часто воспринимают как цвет сайта, но это не так. Если на странице не задан цвет по умолчанию, то блок будет прозрачным и может некорректно отображаться у пользователей с тёмной темой. Об этом точно не знают клиенты, и при добавлении новых блоков могут нарушить визуальный стиль всего сайта. Выставленные настройки цвета помогут избежать таких ошибок.
Как это сделать: Настройки сайта → Шрифты и цвета.
8
Загрузите бейджики для страниц
Бейджики — это изображение и описание, которые появляются, когда кто-то делится ссылкой на сайт в мессенджерах или соцсетях. Без них ссылка будет выглядеть пусто или подтянет случайное изображение и текст, что может запутать пользователей.
Бейджик не получится назначить для всего сайта, необходимо сделать это для каждой страницы отдельно.
Как это сделать: Настройки страницы → Бейджик.
Бейджики — это изображение и описание, которые появляются, когда кто-то делится ссылкой на сайт в мессенджерах или соцсетях. Без них ссылка будет выглядеть пусто или подтянет случайное изображение и текст, что может запутать пользователей.
Бейджик не получится назначить для всего сайта, необходимо сделать это для каждой страницы отдельно.
Как это сделать: Настройки страницы → Бейджик.
9
Протестируйте подключённые к сайту формы
Подключите формы к сервисам приёма данных, например, к почте или Телеграму. Обязательно проверьте, что уведомления приходят корректно и покажите заказчику, как будут выглядеть заявки. Так клиент будет понимать, где ему искать заявки и не пропустит новые заказы.
Советы:
Как это сделать: Настройки сайта → Формы.
Подключите формы к сервисам приёма данных, например, к почте или Телеграму. Обязательно проверьте, что уведомления приходят корректно и покажите заказчику, как будут выглядеть заявки. Так клиент будет понимать, где ему искать заявки и не пропустит новые заказы.
Советы:
- Сделайте тестовую заявку и попросите клиента проверить, дошло ли письмо.
- Настройте уведомления о заказе в интернет-магазине, чтобы покупатель получал письмо с деталями покупки.
- Пропишите сообщение об успешной отправке в контенте блока или добавьте страницу благодарности после отправки формы.
Как это сделать: Настройки сайта → Формы.
10
Заполните SEO-настройки
Когда сайт уже готов, необходимо выставить технические настройки SEO, чтобы сайт быстро попал в поисковую выдачу. Задайте следующие настройки.
Title и Description для всех страниц
Title — заголовок страницы, который отображается в результатах поиска и в названии вкладки браузера. Он должен быть уникальным, релевантным и содержать ключевые слова. Description — описание содержания страницы. Оно дополняет title и служит его логическим продолжением. Если не добавить мета-теги, сайт не сможет попасть в топ выдачи поиска.
Когда сайт уже готов, необходимо выставить технические настройки SEO, чтобы сайт быстро попал в поисковую выдачу. Задайте следующие настройки.
Title и Description для всех страниц
Title — заголовок страницы, который отображается в результатах поиска и в названии вкладки браузера. Он должен быть уникальным, релевантным и содержать ключевые слова. Description — описание содержания страницы. Оно дополняет title и служит его логическим продолжением. Если не добавить мета-теги, сайт не сможет попасть в топ выдачи поиска.
Теги для изображений
Alt — текстовое описание картинки. Оно отображается, если картинка по каким-то причинам не загрузилась. Alt поможет пользователю понять, что именно изображено, а если добавить ключевые слова, то изображение попадет в поисковую выдачу картинок. Title — дополнительный параметр, который появляется при наведении курсора на картинку. Его используют, когда изображение необходимо пояснить. Теги для изображений не только повышают видимость сайта для поисковых роботов, но и делают его удобным для пользователей с ограниченными возможностями.
Alt — текстовое описание картинки. Оно отображается, если картинка по каким-то причинам не загрузилась. Alt поможет пользователю понять, что именно изображено, а если добавить ключевые слова, то изображение попадет в поисковую выдачу картинок. Title — дополнительный параметр, который появляется при наведении курсора на картинку. Его используют, когда изображение необходимо пояснить. Теги для изображений не только повышают видимость сайта для поисковых роботов, но и делают его удобным для пользователей с ограниченными возможностями.
Заголовки H1, H2
Это теги, которые позволяют структурировать контент на сайте по степени важности. H1 — заголовок первого уровня и обозначает самую важную для пользователя информацию. На странице может быть только один тег H1. H2 — тег подзаголовка, который конкретизирует заголовок H1 и структурирует весь текст. Опираясь на заголовки, поисковики оценивают, насколько информация соответствует запросу пользователя.
Например, в этой статье заголовок H1 — это «Как передать сайт клиенту», а H2 — подзаголовки разделов: «Что такое передача проекта», «Почему дизайнеру важно позаботиться о будущем проекта» и другие.
Это теги, которые позволяют структурировать контент на сайте по степени важности. H1 — заголовок первого уровня и обозначает самую важную для пользователя информацию. На странице может быть только один тег H1. H2 — тег подзаголовка, который конкретизирует заголовок H1 и структурирует весь текст. Опираясь на заголовки, поисковики оценивают, насколько информация соответствует запросу пользователя.
Например, в этой статье заголовок H1 — это «Как передать сайт клиенту», а H2 — подзаголовки разделов: «Что такое передача проекта», «Почему дизайнеру важно позаботиться о будущем проекта» и другие.
Как проставить теги заголовкам: Настройки блока → SEO.
Не забудьте на этом этапе включить индексацию сайта, которую отключали в самом начале работы.
Не забудьте на этом этапе включить индексацию сайта, которую отключали в самом начале работы.
11
Протестируйте адаптивность
На разных мобильных устройствах сайт может отображаться по-разному. Очень важно проверить, как он будет выглядеть и работать на каждом из них. Для этого можно использовать эмуляторы — программы, которые помогают тестировать веб-страницы. Если есть возможность проверьте, как сайт выглядит на реальных устройствах, и убедитесь, что с ним удобно взаимодействовать.
На разных мобильных устройствах сайт может отображаться по-разному. Очень важно проверить, как он будет выглядеть и работать на каждом из них. Для этого можно использовать эмуляторы — программы, которые помогают тестировать веб-страницы. Если есть возможность проверьте, как сайт выглядит на реальных устройствах, и убедитесь, что с ним удобно взаимодействовать.
12
Перенесите проект в аккаунт клиента
Перенос проекта возможен только на аккаунт с активной оплаченной подпиской, поэтому убедитесь, что у клиента есть оплаченный аккаунт на Тильде. Передать проект на тариф Free не получится.
Как это сделать: Настройки сайта → Действия → Передать сайт на другой аккаунт.
Перенос проекта возможен только на аккаунт с активной оплаченной подпиской, поэтому убедитесь, что у клиента есть оплаченный аккаунт на Тильде. Передать проект на тариф Free не получится.
Как это сделать: Настройки сайта → Действия → Передать сайт на другой аккаунт.
Зайдите в аккаунт клиента и примите проект. Подключите Тильда CRM в аккаунте клиента, так как она привязывается к аккаунту, а не к проекту. Даже если клиент хочет получать заявки на почту, CRM может стать запасным архивом на случай, если он изменит решение или возникнут проблемы с почтовым сервисом. Это также удобно, если потребуется сделать рассылку всем клиентам. Адреса не придётся собирать вручную в почте: можно быстро выгрузить из CRM.
Как это сделать: Настройки сайта → Формы → Тильда CRM.
Как это сделать: Настройки сайта → Формы → Тильда CRM.
13
Запишите видеоинструкции
Покажите наглядно клиенту, как работать с проектом. Объясните, как управлять сайтом, добавлять контент и вносить изменения. Это поможет ему разобраться с редактированием, избежать ошибок и сэкономит ваше время.
Покажите наглядно клиенту, как работать с проектом. Объясните, как управлять сайтом, добавлять контент и вносить изменения. Это поможет ему разобраться с редактированием, избежать ошибок и сэкономит ваше время.
- Делайте видео короткими и по темам. Например, «Как поменять текст» или «Как добавить товар».
- Используйте OBS Studio или Loom для записи экрана.
- Если у клиента несколько администраторов, создайте отдельную страницу на сайте с инструкциями.
Ещё пара советов от дизайнера дизайнеру
Работайте в своём аккаунте
Даже если у клиента есть аккаунт на Тильде, лучше работать в своём. Это позволит избежать лишних правок в процессе разработки, а также воровства проекта.
Даже если у клиента есть аккаунт на Тильде, лучше работать в своём. Это позволит избежать лишних правок в процессе разработки, а также воровства проекта.
Создайте страницу «О сайте»
Это можно сделать внутри проекта на отдельной скрытой странице или создать документ в Tilda Docs. Укажите, кто разработчик сайта, контакты и ссылки на инструкции. Эта страница поможет клиенту не потерять вас и упростит процесс поддержки проекта.
Это можно сделать внутри проекта на отдельной скрытой странице или создать документ в Tilda Docs. Укажите, кто разработчик сайта, контакты и ссылки на инструкции. Эта страница поможет клиенту не потерять вас и упростит процесс поддержки проекта.
Предложите поддержку после сдачи проекта
Это может быть разовая или постоянная работа. Поддержка сайта подойдёт клиентам, у которых нет времени самостоятельно вносить изменения в контент, а также поможет сохранять сайт в актуальном состоянии.
Это может быть разовая или постоянная работа. Поддержка сайта подойдёт клиентам, у которых нет времени самостоятельно вносить изменения в контент, а также поможет сохранять сайт в актуальном состоянии.
Используйте реферальную программу Тильды
Если клиент создаст аккаунт по вашей ссылке, вы получите бонусы и сможете использовать их для оплаты подписки.
Если клиент создаст аккаунт по вашей ссылке, вы получите бонусы и сможете использовать их для оплаты подписки.
Автор: Антон Командин
Иллюстрации, дизайн и вёрстка: Мария Гайворонская
Читайте также:
