Сайт геодезической компании «Геосервис»: с нуля до принятой версии за 18 дней

Что было до нас

ООО «Геосервис» работает в Рязани и Рязанской области: инженерные изыскания, геодезические и кадастровые работы, проекты планировки и межевания территории. Клиентов две группы. Первая: застройщики, проектировщики, администрации и предприятия. Вторая: частные собственники участков, домов и гаражей.

Проект начали с нуля. Материалы приходили по частям: тексты и ответы на вопросы в Word-файлах, кейсы и фото через Яндекс.Диск, логотип в формате CorelDRAW, дизайн в виде 15 PNG-картинок. Исходников в Figma не было, были только готовые картинки.

Сначала тексты, потом дизайн

Первые две недели занимались только содержанием. Страницы разделили на четыре типа: направление, услуга, район и одиночная. Шаблон согласовывали на первой странице каждого типа, остальные после этого только наполнялись текстами. Итого 15 страниц.

Каждый текстовый прототип шёл с пометками «источник → дословно»: откуда взят факт на странице. 17 и 18 августа мы вторым проходом проверили сами пометки и нашли места, где «дословно» было неправдой: текст обрезан, дополнен или собран из разных мест. Исправили до отправки клиенту.

Отдельно следили за числами, которые легко перепутать. «Застрахованы на 25 млн ₽» писать нельзя: это компенсационный фонд СРО, а страховка кадастровых инженеров другая и меньше. Два числа не смешали ни на одной странице.

Дизайн по картинкам

Макеты пришли в виде 15 PNG-картинок. Цвета снимали пипеткой с кнопок и крупных заливок, шрифт Manrope определили по макету, ширину сетки замерили: 1672 пикселя. Тонкие иконки пипеткой не снять, поэтому их перерисовали по кропам из макета, всего 38 штук.

Что внутри

Сайт собран без CMS и конструкторов: HTML-файлы, стили и небольшие скрипты на чистом JavaScript. Единственная серверная часть: PHP-обработчик формы заявки.

• Калькулятор стоимости на странице «Цены и расчёт»: направление, тип участка, число объектов, округ и срочность, на выходе «от N ₽» по прайсу клиента.
• Интерактивная карта из 29 округов Рязанской области.
• Форма заявки: округ, имя, телефон и необязательное вложение, выписка из ЕГРН или техническое задание.
• Блог из 6 статей.
• Счётчик Яндекс.Метрики и sitemap.xml на 22 адреса.

Хронология без прикрас

• 13 августа. Старт: закрытая от индексации площадка для прототипов.
• 14 августа. Первая версия: главная и 4 страницы услуг в виде текстов.
• 17–21 августа. Тексты остальных страниц, ответы клиента по услугам и ценам, страница «Цены и расчёт» с калькулятором (20 августа). 21 августа клиент подтвердил тексты всех 15 страниц.
• 25 августа. Реальные фото четырёх сотрудников вместо инициалов.
• 26–27 августа. Макеты главной от клиента, сборка «один в один», логотип в SVG, шрифт Manrope, интерактивная карта округов.
• 31 августа. Клиент принял дизайн главной. Это 18 дней от старта.
• 31 августа – 3 сентября. Дизайн остальных страниц: 4 направления, 4 услуги, 2 района, 3 одиночные страницы и «Цены».
• 4 сентября. Аудит дизайна всех страниц: мобильное меню, горизонтальный скролл в формах.
• 17 сентября. Первые 6 статей блога от клиента.
• 21–22 сентября. Страницы вынесены на боевые адреса, форма подключена к amoCRM.
• 22–25 сентября. Запуск на домене геосервис.рус.
• 2 октября. Последняя пачка правок мобильной версии.

Всего 94 коммита с 13 августа по 2 октября.

Грабли

Вот что по дороге ломалось на самом деле.

• Первая сборка главной разошлась с макетом. Мы перепутали тёмные и светлые варианты блоков и нарисовали иконки крупными плашками вместо тонких линий. Макет вернули с формулировкой «нужно один в один», главную пересобрали.
• Логотип одного из заказчиков при копировании руками обрезался: строка SVG оборвалась на середине, и на странице осталась только вторая половина названия. На обычном скриншоте это не видно, заметили на увеличенном куске. С тех пор длинные SVG переносим только скриптом.
• На телефоне меню просто пряталось, замены не было: от навигации оставались логотип и кнопка. Нашли при аудите 4 сентября, сделали гамбургер, который закрывается по Esc и по клику вне меню.
• Поле выбора файла в форме должно быть невидимым, но правило «все поля ввода на всю ширину» оказалось сильнее класса скрытия, и поле растягивалось на 705 пикселей. На 10 страницах из 15 появился горизонтальный скролл. Нашли скриптом, который перебирает все элементы страницы и ищет те, что вылезают за край экрана.
• Подключение к amoCRM пришлось поправить на следующий день: 22 сентября контакт стали создавать отдельным запросом перед сделкой.
• Пуш в репозиторий не равен выкатке на боевой домен. Он обновляет только тестовую площадку, а на геосервис.рус сайт заливается отдельно по FTP.

Что осталось у клиента

Боевой сайт работает на домене геосервис.рус, заявки уходят в amoCRM клиента. Исходники лежат в репозитории проекта, на боевой домен сайт выкладывается отдельной заливкой по FTP.

Частые вопросы

Сколько времени занимает разработка сайта для геодезической компании?

Принятая клиентом версия готова за 18 дней: старт 13 августа, приёмка 31 августа. К этой дате согласованы тексты 15 страниц и дизайн главной. Остальные страницы, блог, запуск на боевом домене и подключение заявок к amoCRM заняли ещё около месяца: боевой запуск состоялся 22–25 сентября, мобильные правки шли до 2 октября.

Как заявки с сайта попадают в CRM?

Форма отправляет данные на серверный PHP-обработчик, он создаёт в amoCRM клиента контакт и сделку. Порядок пришлось поправить 22 сентября: контакт теперь создаётся отдельным запросом перед сделкой. Файл с выпиской из ЕГРН или техническим заданием к заявке можно приложить, но это необязательно.

Нужна ли для такого сайта CMS или конструктор?

Для сайта на 22 страницы с редкими правками обошлись без них. Страницы это HTML-файлы, правка текста или цены сводится к изменению файла и заливке на хостинг. Серверная часть одна: PHP-обработчик формы. Если клиенту нужно часто менять контент самому, это стоит заложить в проект заранее.

Что делать, если дизайн прислали картинками без Figma?

Цвета снимать пипеткой с крупных заливок и кнопок, а не с тонких линий и текста: на краях букв получается неверный оттенок. Шрифт и ширину сетки определить по макету. Тонкие иконки перерисовать по кропам: на Геосервисе так сделали 38 штук. И сразу попросить у заказчика вектор: логотип в CorelDRAW пришлось заменять на SVG.