Процесс разработки сайта

Подготовительные работы
  • Интервью с маркетологом-прототипировщиком.
  • Подготовка технического задания.
  • Создание ментальной карты проекта в Miro.
  • Прототипирование в Figma.

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

И также мы обязательно рассмотрим способы привлечения клиентов на сайт, чтобы заложить основу под будущее SEO-продвижение.

Готовьтесь к подробному интервью!

Результат:

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

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

Можно приступать к дизайну и подготовке контента (Заказчиком).

Отрисовка дизайна
  • Предложение концепции дизайна на основе прототипа и других и рекомендаций прототипировщика-маркетолога, пожеланий клиента и брендбука в виде отрисованного дизайна главной страницы.
  • Обсуждение полученной концепции, внесение правок.
  • Утверждение концепции.
  • Дизайн внутренних страниц, согласно прототипам.

Рисуем ли мы дизайн «с нуля» или используем в качестве источника вдохновения, хорошее готовое решение, адаптируя его под ваши задачи — мы в любом случае создаем макет каждой посадочной страницы в Figma. А вы сможете наблюдать за процессом отрисовки в режиме реального времени и оставлять свои комментарии.

Результат:

Готовые дизайны типовых страниц в сервисе Figma, в т.ч. с адаптивной версией.

Можно приступать к вёрстке.

Посмотрите примеры:

Примеры дизайнов в Figma
Вёрстка — фронтенд
  • Процесс переноса графического дизайна в HTML-код, понятный браузерам. Задача верстальщика добиться точного соотвествия страниц макетам а) в различных современных браузерах (кроссбраузерность) и б) на различающихся по размеру экрана устройствах (адаптивность).
  • Наличие адаптивной верстки — одно из важнейших требований к сайту при его SEO-продвижении.

Для тех, кто в теме: верстка на html+CSS по методологии БЭМ, без тяжелых библиотек, с полным адаптивом до ширины экрана 320 px (iPhone 5S/SE). Смысловые блоки на сайте создаются с равномерными отступами для возможности менять их местами в случае необходимости. Основные элементы выносятся во внешние компоненты, согласно компонентному подходу.

Результат:

готовые адаптивные и кроссбраузерные типовые страницы сайта в виде html-файлов, которые можно открыть в браузере. На этом этапе видны визуальные эффекты — перелистывание фотографий, нажатие кнопок, иные визуальные эффекты, но отсутствует функционал (то есть, к примеру, кнопка нажимается, но ничего не происходит).

Иногда мы объединяем этот этап со следующим.

Как оценить адаптивность?

Нажмите на клавиатуре кнопку «F12», чтобы оценить адаптивность любого сайта.

Инструкция
Сборка сайта на движке — бэкенд
  • Разворачивание на техническом домене выбранной системы управления сайтом (CMS).
  • Интеграция вёрстки на CMS.
  • Программирование функционала, запланированного в техническом задании.
  • Формирование структуры страниц согласно ментальной карте.
  • Написание модулей импорта контента (если это оговорено).
  • Импорт контента и (или) ручное наполнение сайта контентом, предоставленным Заказчиком (если не оговорено иное).
  • Настройка форм обратной связи.

В зависимости от поставленных задач и оговоренных в техническом задании условий, сборка сайта производится как на популярных движках и фреймворках (WordPress, Bitrix, MODX и php-фреймворки Webasyst, Laravel, Yii 2.0), так и в чистом виде на HTML+CSS+PHP без панели администратора.

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

Результат:

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

Осталось чуть-чуть!

Выдержки из инструкций по управлению сайтом

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

Дополнительные услуги:

  • Настройка корпоративной почты на домене.
  • Помощь в подготовке контента.
  • Интеграция и настройка аналитических сервисов, CRM-систем, онлайн-чатов.

Результат:

сайт открывается по выбранному Заказчиком домену, полностью функционирует и может индексироваться поисковыми системами.

Можно приступать к его продвижению.

Оставьте заявку и мы вместе определим оптимальный бюджет, способы привлечения клиентов и  сроки окупаемости Оставить заявку