Кейс: разработка страницы сайта сварог.москва/apartment
Заказчик пришёл с запросом создать новую страницу на сайте. Ранее мы уже сотрудничали: я настраивала для этой компании рекламу в Яндексе на системы вентиляции и кондиционирования.
Уже тогда я поняла, что сайт не конверсионный, абсолютно пуст относительно настроек SEO, а также не настроены формы обратной связи — все кнопки на сайте вели на переход в мессенджер.
Устранив на старом сайте основные недочёты, я приступила к настройке рекламы.
И вот пришло время для новой страницы. Клиент попросил оформить её в новых цветах и скинул примеры сайтов конкурентов, которые ему нравятся. Поэтому я разработала три новых цвета (красный, синий и светло‑бежевый) и, взяв их за основу, приступила к созданию страницы.
Был переделан логотип: точнее, его цвета — из мрачного чёрно‑золотого он стал сине‑белым. Шрифты я оставила прежние. Затем я разработала в Zero‑блоке обложку с заголовком и достоинствами бренда, добавила форму обратной связи для вызова замерщика.
После этого я перешла к блоку достоинств бренда и создала иконки в фирменных цветах к каждому пункту. В пункте «Типы ремонтов» я добавила оформление в виде обводки и кнопки с эффектом тени, чтобы они казались «живыми». Затем я создала моментальный калькулятор для быстрого примерного расчёта стоимости ремонта.
Далее последовал блок о том, почему нужно выбрать именно эту компанию, — я перечислила этапы работы. В этом месте возник «затык»: клиент хотел расположить кнопку прямо под первым из пяти пунктов, которые располагались в блоке в шахматном порядке. Кнопка под первым пунктом выглядела бы чужеродной, поэтому было принято решение нарисовать стрелку от первого пункта к кнопке, которая осталась стоять в самом низу блока по центру.
В мобильной и планшетной версии кнопку расположила между пунктами — она идеально вписалась под первым и вторым пунктом, а стрелочка встала на место, как будто "так и было"!
В следующем пункте пришлось попыхтеть: мы приняли решение сделать примеры работ в виде «было — стало», но у Тильды нет в настройках такого блока, чтобы расположить несколько примеров работ — там можно сделать только один пример. Я написала код HTML и вместила все четыре примера в один блок, оптимизировав их под все устройства. Затем мы ещё несколько раз поменяли фотографии в коде — это доработка недочётов, как обычно бывает при создании сайта.
После этого я добавила сложную форму заявки с типом ремонта и помещения, его квадратурой, а также именем и телефоном клиента. Затем я рассказала, кто сотрудничает с клиентом из известных брендов, добавила блок с вызовом замерщика и кликабельным номером телефона, а также кнопки мессенджеров. Далее я добавила пункт «Отзывы», а затем перешла к контактам с кнопкой «Оставить заявку»: при нажатии на неё открывается поп‑ап‑окно с формой обратной связи.
В подвале сайта находится ссылка на текстовый поп‑ап с политикой конфиденциальности и логотипом разработчика — SnowBars.
По мелочи были добавлены:
– виджет обратной связи;
– кнопка «Наверх», чтобы упростить навигацию по странице;
– меню, расположенное статично вверху;
– ещё одно меню, которое при скролле (пролистывании) сайта всегда видно — оно как бы приклеено вверху сайта.
– для мобильной версии было создано отдельное меню в виде «гамбургера», которое всегда закреплено в правом верхнем углу, но свернуто.
В итоге клиент сказал, что сайт слишком минималистичен и нужно добавить изюминку. Поэтому я добавила в фоновое изображение сайта фотографию примера работы организации — она периодически возникает в виде фонового изображения в некоторых блоках сайта.
Клиент оказался доволен.
__________________
Нужен сайт? Пишите!
snowbars74.ru
snow_bars74
+7 (952) 523‑33‑27
#разработкасайтов #вебразработка #созданиесайтов #дизайнсайта #вёрстка #адаптивныйсайт #мобильнаявёрстка #webdesign #webdevelopment #frontend #backend #cms #tilda #wordpress #tilda #прототипирование #юзабилити #интернетмагазин #лендинг #корпоративныйсайт #оптимизациясайта #скоростьсайта #сео #пользовательскийопыт
Уже тогда я поняла, что сайт не конверсионный, абсолютно пуст относительно настроек SEO, а также не настроены формы обратной связи — все кнопки на сайте вели на переход в мессенджер.
Устранив на старом сайте основные недочёты, я приступила к настройке рекламы.
И вот пришло время для новой страницы. Клиент попросил оформить её в новых цветах и скинул примеры сайтов конкурентов, которые ему нравятся. Поэтому я разработала три новых цвета (красный, синий и светло‑бежевый) и, взяв их за основу, приступила к созданию страницы.
Был переделан логотип: точнее, его цвета — из мрачного чёрно‑золотого он стал сине‑белым. Шрифты я оставила прежние. Затем я разработала в Zero‑блоке обложку с заголовком и достоинствами бренда, добавила форму обратной связи для вызова замерщика.
После этого я перешла к блоку достоинств бренда и создала иконки в фирменных цветах к каждому пункту. В пункте «Типы ремонтов» я добавила оформление в виде обводки и кнопки с эффектом тени, чтобы они казались «живыми». Затем я создала моментальный калькулятор для быстрого примерного расчёта стоимости ремонта.
Далее последовал блок о том, почему нужно выбрать именно эту компанию, — я перечислила этапы работы. В этом месте возник «затык»: клиент хотел расположить кнопку прямо под первым из пяти пунктов, которые располагались в блоке в шахматном порядке. Кнопка под первым пунктом выглядела бы чужеродной, поэтому было принято решение нарисовать стрелку от первого пункта к кнопке, которая осталась стоять в самом низу блока по центру.
В мобильной и планшетной версии кнопку расположила между пунктами — она идеально вписалась под первым и вторым пунктом, а стрелочка встала на место, как будто "так и было"!
В следующем пункте пришлось попыхтеть: мы приняли решение сделать примеры работ в виде «было — стало», но у Тильды нет в настройках такого блока, чтобы расположить несколько примеров работ — там можно сделать только один пример. Я написала код HTML и вместила все четыре примера в один блок, оптимизировав их под все устройства. Затем мы ещё несколько раз поменяли фотографии в коде — это доработка недочётов, как обычно бывает при создании сайта.
После этого я добавила сложную форму заявки с типом ремонта и помещения, его квадратурой, а также именем и телефоном клиента. Затем я рассказала, кто сотрудничает с клиентом из известных брендов, добавила блок с вызовом замерщика и кликабельным номером телефона, а также кнопки мессенджеров. Далее я добавила пункт «Отзывы», а затем перешла к контактам с кнопкой «Оставить заявку»: при нажатии на неё открывается поп‑ап‑окно с формой обратной связи.
В подвале сайта находится ссылка на текстовый поп‑ап с политикой конфиденциальности и логотипом разработчика — SnowBars.
По мелочи были добавлены:
– виджет обратной связи;
– кнопка «Наверх», чтобы упростить навигацию по странице;
– меню, расположенное статично вверху;
– ещё одно меню, которое при скролле (пролистывании) сайта всегда видно — оно как бы приклеено вверху сайта.
– для мобильной версии было создано отдельное меню в виде «гамбургера», которое всегда закреплено в правом верхнем углу, но свернуто.
В итоге клиент сказал, что сайт слишком минималистичен и нужно добавить изюминку. Поэтому я добавила в фоновое изображение сайта фотографию примера работы организации — она периодически возникает в виде фонового изображения в некоторых блоках сайта.
Клиент оказался доволен.
__________________
Нужен сайт? Пишите!
snowbars74.ru
snow_bars74
+7 (952) 523‑33‑27
#разработкасайтов #вебразработка #созданиесайтов #дизайнсайта #вёрстка #адаптивныйсайт #мобильнаявёрстка #webdesign #webdevelopment #frontend #backend #cms #tilda #wordpress #tilda #прототипирование #юзабилити #интернетмагазин #лендинг #корпоративныйсайт #оптимизациясайта #скоростьсайта #сео #пользовательскийопыт