Как упаковать сайт и передать клиенту
Разбираемся, как дизайнеру организовать работу над проектом в Тильде так, чтобы клиенты к вам возвращались
Работа дизайнера — это не только про красивый дизайн и удобный интерфейс. Это ещё и про техническую грамотность, заботу о клиенте и внимание к деталям. Важно подготовить и передать проект в таком виде, чтобы клиент мог легко управлять контентом без вашей помощи или с минимальной поддержкой.
Антон Командин, 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 — текстовое описание картинки. Оно отображается, если картинка по каким-то причинам не загрузилась.
Title — дополнительный параметр, который появляется при наведении курсора на картинку. Его используют, когда изображение необходимо пояснить. Теги для изображений не только повышают видимость сайта для поисковых роботов, но и делают его удобным для пользователей с ограниченными возможностями.
Alt — текстовое описание картинки. Оно отображается, если картинка по каким-то причинам не загрузилась.
Title — дополнительный параметр, который появляется при наведении курсора на картинку. Его используют, когда изображение необходимо пояснить. Теги для изображений не только повышают видимость сайта для поисковых роботов, но и делают его удобным для пользователей с ограниченными возможностями.
Заголовки H1, H2
Это теги, которые позволяют структурировать контент по степени важности.
H1 — заголовок первого уровня и обозначает самую важную для пользователя информацию. На странице может быть только один тег H1.
H2 — тег подзаголовка, который конкретизирует заголовок H1 и структурирует весь текст. Опираясь на заголовки, поисковики оценивают, насколько информация соответствует запросу пользователя.
Это теги, которые позволяют структурировать контент по степени важности.
H1 — заголовок первого уровня и обозначает самую важную для пользователя информацию. На странице может быть только один тег H1.
H2 — тег подзаголовка, который конкретизирует заголовок H1 и структурирует весь текст. Опираясь на заголовки, поисковики оценивают, насколько информация соответствует запросу пользователя.
Например, в этой статье заголовок H1 — это «Как передать сайт клиенту», а H2 — подзаголовки разделов: «Что такое передача проекта», «Почему дизайнеру важно позаботиться о будущем сайта» и другие.
Как проставить теги заголовкам: Настройки блока → SEO.
Не забудьте на этом этапе включить индексацию, которую отключали в самом начале работы.
Не забудьте на этом этапе включить индексацию, которую отключали в самом начале работы.
11
Протестируйте адаптивность
На разных мобильных устройствах сайт может отображаться по-разному. Очень важно проверить, как он выглядит и работает на каждом. Для этого можно использовать эмуляторы — программы, которые помогают тестировать веб-страницы. Если есть возможность проверьте на реальных устройствах, и убедитесь, что всё отображается, как и задумано.
На разных мобильных устройствах сайт может отображаться по-разному. Очень важно проверить, как он выглядит и работает на каждом. Для этого можно использовать эмуляторы — программы, которые помогают тестировать веб-страницы. Если есть возможность проверьте на реальных устройствах, и убедитесь, что всё отображается, как и задумано.
12
Перенесите проект в аккаунт клиента
Перенос возможен только на аккаунт с активной оплаченной подпиской, поэтому убедитесь, что заказчик оплатил Тильду. Передать проект на тариф Free не получится.
Как это сделать: Настройки сайта → Действия → Передать сайт на другой аккаунт.
Перенос возможен только на аккаунт с активной оплаченной подпиской, поэтому убедитесь, что заказчик оплатил Тильду. Передать проект на тариф Free не получится.
Как это сделать: Настройки сайта → Действия → Передать сайт на другой аккаунт.
Зайдите в аккаунт клиента и примите проект. Подключите Тильда CRM в аккаунте клиента, так как она привязывается к аккаунту. Даже если заказчик хочет получать заявки на почту, CRM может стать запасным архивом на случай, если он изменит решение или возникнут проблемы с почтовым сервисом. Это также удобно, если потребуется сделать рассылку всем клиентам. Адреса не придётся собирать вручную в почте: можно быстро выгрузить из CRM.
Как это сделать: Настройки сайта → Формы → Тильда CRM.
Как это сделать: Настройки сайта → Формы → Тильда CRM.
13
Запишите видеоинструкции
Покажите заказчику, как работать с проектом. Объясните, как управлять сайтом, добавлять контент и вносить изменения. Это поможет избежать ошибок и сэкономит ваше время.
Покажите заказчику, как работать с проектом. Объясните, как управлять сайтом, добавлять контент и вносить изменения. Это поможет избежать ошибок и сэкономит ваше время.
- Делайте видео короткими и по темам. Например, «Как поменять текст» или «Как добавить товар».
- Используйте OBS Studio или Loom для записи экрана.
- Если у клиента несколько администраторов, создайте отдельную страницу с инструкциями.
Ещё пара советов от дизайнера дизайнеру
Работайте в своём аккаунте
Даже если у клиента есть аккаунт на Тильде, лучше работать в своём. Это позволит избежать лишних правок в процессе разработки, а также воровства.
Даже если у клиента есть аккаунт на Тильде, лучше работать в своём. Это позволит избежать лишних правок в процессе разработки, а также воровства.
Создайте страницу «О сайте»
Это можно сделать на отдельной скрытой странице или создать документ в Tilda Docs. Укажите, кто разработчик, контакты и ссылки на инструкции. Это поможет клиенту не потерять вас и упростит процесс поддержки.
Это можно сделать на отдельной скрытой странице или создать документ в Tilda Docs. Укажите, кто разработчик, контакты и ссылки на инструкции. Это поможет клиенту не потерять вас и упростит процесс поддержки.
Предложите поддержку после сдачи проекта
Это может быть разовая или постоянная работа. Подойдёт клиентам, у которых нет времени самостоятельно вносить изменения, а также сохранять сайт в актуальном состоянии.
Это может быть разовая или постоянная работа. Подойдёт клиентам, у которых нет времени самостоятельно вносить изменения, а также сохранять сайт в актуальном состоянии.
Используйте реферальную программу Тильды
Если клиент создаст аккаунт по вашей ссылке, вы получите бонусы и сможете использовать их для оплаты подписки.
Если клиент создаст аккаунт по вашей ссылке, вы получите бонусы и сможете использовать их для оплаты подписки.
Автор: Антон Командин
Иллюстрации, дизайн и вёрстка: Мария Гайворонская
Читайте также:
