Блог

Как происходит процесс работы по созданию сайта

Максим Безорудько / 02.06.2016426

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

  1. Брифинг с клиентом
  2. Анализ полученной информации
  3. Проектирование и написание ТЗ
  4. Создание дизайна сайта
  5. Верстка
  6. Программирование
  7. Тестирование
  8. Сдача проекта

Рассмотрим их на конкретном примере.

1Начало. Брифинг

К нам обратился клиент из Торонто с задачей разработать новый сайт для салона красоты.

Сперва, мы провели брифинг (интервью) и уточнили проблемы текущего веб сайта и почему он хочет его переделать. Главной проблемой клиент считал отсутствие адаптации под планшеты и мобильные устройства  при переходе на сайт с телефона сайт выглядел откровенно не сильно хорошо и при этом часть кнопок вообще не работала.

Вот так выглядел старый сайт europeanbeautytoronto.com

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

Второй проблемой было отсутствие внутренней SEO оптимизации сайта, что, ввиду роста конкуренции в отрасли, приводило к планомерному уменьшению количества звонков от посетителей сайта.

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

2Анализ информации

Студии дан «зеленый свет» и начинается активная работа над проектом. Проджект менеджер ставит задачу специалисту по юзабилити и интернет маркетингу детально проанализировать сайт European Beauty Toronto, составить полный список проблем и отталкиваясь от него сформировать перечень предложений, что необходимо улучшить и дополнительно внедрить на сайте. 

Проблемы Решения
Не удобно просматривать сайт на планшетах и мобильных телефонах Адаптивная верстка сайта под мобильные устройства
Отсутствие заявок с сайта Внедрить формы с призывом к действию: «Запись на прием», «Получить консультацию», продумать акции для посетителей сайта
Долго открываются страницы сайта при просмотре с мобильного телефона Максимальное ускорение скорости сайта по Google Page Speed Insights
Отсутствие инструментов для получения обратной связи с аудиторией Создать каналы общения в социальных сетях
Пользователи редко возвращаются на сайт Регулярное обновление информации: услуги, новости о новинках и скидках, ведение блога, возможность подписки на новости для получения информационных писем. Подключение ремаркетинга
Отсутствие доверия к сайту у новых посетителей Показать преимущества почему стоит обратиться именно в эту компанию, разместить сертификаты специалистов на сайте, много фотографий салона, оборудования и процесса работы с клиентами. Создание раздела, где каждый посетитель сможет ознакомиться с отзывами и оставить свой
Неудобное представление информации на странице, тяжело найти нужный материал. Низкая глубина просмотра страниц. Создание понятной и удобной структуры разделов и подразделов. Фиксированное главное меню при прокрутке страницы сайта вниз, возможность быстро автоматически вернуться на верх страницы. Оформление контента с предоставлением всей необходимой сопутствующей информацией.
Тяжело найти сайт в поиске Провести внутреннюю SEO оптимизацию
Маленькая посещаемость сайта Расширение целевых запросов, по которым сайт могут находить из поиска посредством размещения новых полезных статей в блоге

Кроме анализа самого сайта клиента, были проанализированы несколько сайтов основных конкурентов. Целью этих работ было ознакомление со структурой их сайтов и выявление «фишек», которые они используют и которые можно применить на текущем проекте в усовершенствованном виде.

Теперь, когда вся информация собрана и согласована с клиентом, приступаем к следующему этапу.

3Проектировнаие и написание ТЗ

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

Согласованный вариант Т3 передается в работу дизайнеру для создания прототипов и визуализации структуры сайта. 

4Разработка дизайн сайта 

Дизайнер начинает свою работу с разработки прототипа главной страницы...

Когда все прототипы готовы и структура блоков страниц сайта утверждена клиентом, дизайнер готовит первый вариант дизайна:

Клиент, владелица салона, была не готова к столь кардинальной смене стиля. Интегрируем фирменный зеленый цвет и лицо компании  девушку с рекламного продукта SKEYNDOR.

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

Макет главной утвержден. В процессе общения с клиенткой мы пришли к нужном результату. Упрощаем структуру главной страницы и приступаем к внутренним.

Когда макеты всех страниц сайта готовы и согласованы клиентом, дизайнер передает их исходники верстальщику.  

5Верстка

При верстке проекта мы использовали средства HTML5, CSS3, JS. Особое внимание уделяется кроссбраузерности, корректности отображения сайта на всех устройствах и валидности кода. Готовая верстка передается для дальнейшего программирования.

6Программирование

Оптимальная платформа (CMS), на базе которой будет разрабатываться и настраиваться функционал, подбирается программистом в зависимости от структуры проекта и наличия специфических модулей по Техническому заданию, а также пожеланий клиента. Полный перечень CMS и технологий с которыми мы работает описан тут.

Конкретно для этого сайта была выбрана популярная CMS Word Press. 

7Тестирование

После того как функционал готов и сайт размещен на хостинге, мы тестируем: 

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

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

Сдача проекта

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

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

После сдачи

Дополнительно по данному проекту, после его сдачи, были произведены работы по:

  • Максимальному ускорению скорости загрузки страниц сайта под требования Google Page Speed Insights. Это позволит пользователям легко просматривать сайт даже при медленной скорости Интернета. Также послужит несомненным плюсом для дальнейшего SEO продвижения, так как сайты, которые быстро открываются имеют преимущество в поисковой выдаче Google перед сайтами, которые открываются медленней.
  • Внутренней SEO оптимизации сайта. Позволяет внести нужные настройки на сайт для корректной его индексации и дальнейшего SEO, улучшить видимость сайта в поисковой выдаче по тематическим ключевым словам, настроить средства аналитики.

Резюме

Как показывает практика, процесс работы именно по такой схеме позволяет получить на выходе сайт, который действительно будет удобным для посетителей, узнаваемым и приводить новых клиентов, служить надежным инструментом Интернет маркетинга!

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

Подпишитесь на рассылку

Наш Twitter

У вас есть проект?

Давайте обсудим его!

Свяжитесь с нами, или оставьте заявку онлайн

+38 (098) 455 35 55

Заказать звонокОтправить запрос

Остались вопросы?
Мы ответим

Оставьте заявку

и мы свяжемся с Вами в ближайшее время

Оставьте свой номер

и мы свяжемся с Вами в ближайшее время