От идеи до реализации: этапы разработки сайта в студии

Из чего складывается разработка сайта «под ключ», что важно учесть в работе с клиентом и как сократить количество правок — разбираем в статье. Информация будет полезна начинающим дизайнерам и тем, кто планирует заказать сайт для своего бизнеса.
Люди, которые не сталкивались с созданием сайта, могут думать, что бо´льшая часть этого процесса — работа над внешним видом: композицией, цветами и типографикой. Однако это лишь одна четвёртая часть времени, которое затрачивается на проект.

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

Как это сделать и создать сайт для бизнеса, который выделит компанию среди конкурентов, принесёт целевые заявки и продажи, рассказывает Фёдор Михайлов, веб-дизайнер и арт-директор MIKHAILOV studio.
Фёдор Михайлов
Веб-дизайнер и арт-директор MIKHAILOV studio
Содержание:

Знакомство с заказчиком

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

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

Заполнение брифа на разработку сайта

Когда клиент дал согласие на запуск проекта, можно переходить к брифу. Для этого мы созваниваемся с заказчиком, предупредив о длительности встречи. Обычно она длится 1,5−2 часа. Чтобы разговор прошёл эффективно и комфортно, учтите следующие моменты:
  • Включите камеру. Клиент должен вас видеть во время разговора. Это влияет на его доверие к вам.
  • Предупредите, что заметки будете вести вы. В процессе интервью вы будете задавать много вопросов и человек может переживать, что ему нужно что-то запоминать или записывать. Перед созвоном снимите опасения с клиента и предупредите, что конспект будете вести вы.
  • Персонализируйте бриф. Начинающие дизайнеры часто скачивают шаблон брифа из интернета и не меняют вопросы под клиента. Обязательно задавайте только те вопросы, которые помогут вам выполнить проект.
  • Записывайте видеовстречу. Во время созвона вы можете что-то забыть зафиксировать, а к видеозаписи сможете вернуться в любой момент. Обязательно предупредите заказчика, что будет запись. Если он будет возражать, объясните, чем полезна запись звонка и как вы будете её использовать.
Бриф должен помочь собрать вам всю информацию для создания сайта. Поэтому задавайте открытые вопросы, которые помогут выделить цели клиента и преимущества его продукта. Например:
1
За какими конкурентами следит заказчик. Хотя мы тоже делаем анализ рынка конкурентов, всё равно всегда спрашиваем, за какими компаниями следит заказчик. Это помогает понять, что клиенту нравится, что не нравится, что он хотел бы видеть у себя на сайте.
2
Кто целевая аудитория, для которой разрабатывается сайт, и какую задачу он должен решать. У любого сайта есть цель, например, собирать заявки на консультацию или регистрации на мероприятия. Без понимания цели не получится создать сайт, который будет соответствовать потребностям бизнеса.
3
Какой есть готовый контент. Запросите у клиента его текущий сайт (если он есть), фотографии, статьи, социальные сети и всю информацию, которая поможет вам решить задачу.
4
Каким клиент видит взаимодействие целевой аудитории с его сайтом. Отвечая на этот вопрос, заказчик проговорит пользовательский сценарий, который его бы устроил, и вы сможете подчеркнуть для себя важные тезисы.
5
Почему людям следует выбрать продукт заказчика, а не конкурентов. Этот вопрос часто вводит в тупик, но заставляет задуматься, что важно вынести на сайт.
Если вы не знаете, как обычно выглядит бриф на создание сайта — посмотрите пример от MIKHAILOV studio. Но помните, что для каждого проекта бриф нужно редактировать и персонализировать под заказчика.
Заполненный и согласованный клиентом бриф обязательно прикрепляйте к договору. Подписанный договор помогает обезопасить исполнителя и заказчика от разногласий и конфликтов.
После оплаты мы сразу назначаем ответственного за проект, который будет отвечать за коммуникацию с клиентом. Общение удобно вести в чате мессенджера, а важные документы, например, чеки и договоры, пересылать по почте.

Анализ конкурентов

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

Также смотрите проекты в тематике клиента на Behance и Dprofile, обращая внимание на смысловую структуру сайтов.
Ещё один совет — всегда читайте отзывы на конкурентов. Анализируя их, вы можете узнать, что важно для целевой аудитории и учесть это при создании сайта.
Итогом такого анализа будут топ 15−20 сайтов в тематике клиента, в которых собраны интересные маркетинговые решения, блоки, акции и основные заголовки.

Создание прототипа сайта

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

Поиск референсов для дизайна

Референсы помогают находить визуальные решения для проектов и скоординировать видение дизайна с клиентом. Мы чаще всего ищем проекты в #madeontilda — галерее лучших проектов пользователей Тильды. Для нас это приоритетная площадка, так как сайты мы разрабатываем на этой платформе.

Презентация прототипа и решений клиенту

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

Разработка дизайн-концепции

Для создания одностраничного сайта достаточно продумать дизайн-концепцию первых пяти блоков страницы, а затем согласовать её с клиентом. Для этого нужно внутри команды обсудить уровень креативности в зависимости от целевой аудитории, продумать удобство использования сайта и иерархию элементов, то есть на что человек должен обращать внимание на странице в первую очередь.
Дизайнер до начала создания макета собирает идеи по композиции, типографике и цветам. Я как арт-директор призываю дизайнеров фиксировать, как они принимали решения, чтобы процесс был прозрачный и был виден путь от прототипа до конечного результата.

Доработка оставшихся блоков и перенос в Тильду

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

Адаптация сайта под мобильные устройства и сдача проекта

Дизайн полностью утверждён, значит его можно адаптировать под мобильные устройства. На Тильде можно настроить под какие разрешения экранов будет адаптирован дизайн.
Перед сдачей проекта мы также рекомендуем:
1
Подключить систему аналитики и базово настроить SEO: задать title, description, теги заголовков. Сайт — это маркетинговый инструмент, поэтому для нас это обязательная часть проекта. После окончания работ вы можете предложить клиенту поддержку сайта, например, на месяц и заходить в аналитику, карту кликов, вебвизор. Это поможет понять, надо ли что-то поменять в структуре сайта.
2
Создать технические страницы: «Спасибо», которая будет отображаться после отправки форм, Политику конфиденциальности и 404.
3
Перенести сайт на аккаунт клиента. В нашей студии мы регистрируем аккаунт заказчика в Тильде по реферальной ссылке. Это даёт нам и клиенту бонус к подписке.
4
Записать видеоинструкции для клиента: познакомить с интерфейсом, блочной структурой, редактированием контента, созданием новых страниц и функциями, которые могут пригодиться заказчику.
5
Подготовить итоговое письмо и файл с доступами. Соберите также обратную связь от заказчика, чтобы улучшить процессы и оставить приятное впечатление от совместной работы.
Если вы начинающий дизайнер, уделяйте время всем этапам, чтобы у клиента на выходе был рабочий инструмент для его бизнеса. А если вы планируете заказывать разработку сайта, будьте готовы сотрудничать с дизайнерами и подробно рассказывать про продукт, целевую аудиторию и ваши цели. Так работа над сайтом будет максимально эффективной для обеих сторон.

Чек-лист для дизайнеров по созданию сайта на Тильде на заказ

1
Познакомиться с заказчиком и собрать основные требования к проекту.
2
Составить коммерческое предложение и подписать договор с клиентом.
3
Провести интервью с заказчиком с помощью подготовленного брифа, заполненный бриф прикрепить к договору.
4
Провести анализ конкурентов и зафиксировать, какие приёмы на сайтах они используют.
5
Создать прототип сайта с готовыми текстами.
6
Презентовать прототип заказчику и согласовать.
7
Собрать референсы и разработать дизайн-концепцию первых пяти блоков сайта.
8
Презентовать дизайн и согласовать его с клиентом.
9
Доработать оставшиеся блоки, перенести дизайн в Тильду и презентовать работу заказчику.
10
Адаптировать сайт под мобильные устройства.
11
Подключить аналитику и базово настроить SEO.
12
Передать сайт заказчику с сопроводительным письмом и доступами.

Автор: Фёдор Михайлов

Редактор: Анастасия Степанова

Иллюстрации, дизайн и верстка: Мария Белая, Егор Зеленый

Если материал вам понравился, поставьте лайк — это помогает другим узнать о нем и других статьях Tilda Education и поддерживает наш проект. Спасибо!
Читайте также:
Бесплатный онлайн курс, который научит создавать эффективные посадочные страницы
Курс, который научит вас продвигать свой сайт
Теоретический курс Никиты Обухова по веб-дизайну
Бесплатный учебник по веб-анимации с примерами и правилами использования