A Customer First AC: редизайн і доопрацювання сайту

Новий дизайн і набір доопрацювань для сайту HVAC-компанії в Південній Флориді. Концепція побудована на жалюзі повітряної решітки, на кожній сторінці зрозумілий шлях до дзвінка або заявки, чотири мови та швидкі сторінки. Робота триває: додаються нові розділи й уточнення.

Напрям: Доопрацювання вебсайтів
Ніша: HVAC-послуги
Ринок: Флорида, США
Мови: 4 мови
Платформа: Astro, Cloudflare Pages
Сайт: acustomerfirstac.com

400+сторінок в одній дизайн-системі

4мови з перемикачем із прапорами в шапці та підвалі

62 КБсередня вага HTML сторінки, приблизно вдвічі менша за колишню

Що зроблено

Дизайн-концепція

Авторська концепція на основі жалюзі повітряної решітки, впізнаваного елемента HVAC
Палітра небесно-блакитного та лаймового зі смугою ламелей між секціями та по краях карток
Концепцію обрано з набору дизайн-варіантів і перевірено на реальних сторінках
Єдина типографська шкала й єдиний набір компонентів для всіх типів сторінок
Дрібний текст і посилання тримаються на контрасті 4,5:1 і вище

Головна сторінка

Фото на першому екрані за справжніми ламелями, які повертаються одна за одною
На комп’ютері ламелі слідують за курсором, на сенсорних екранах відкриваються під час завантаження, йдуть за прокруткою, а від дотику закриваються й відкриваються знову
Блоки в порядку конверсії: смуга довіри, послуги з картинками, переваги, відгуки, свіжі статті, форма заявки
Кнопки дзвінка та Schedule Now в шапці та в панелі, що лишається на телефонах

Шапка та навігація

Нова рамка шапки з номером телефону та кнопкою Schedule Now
Випадні меню з картинками послуг і прості списки для розділу About Us
Перемикач мов із прапорами в шапці та підвалі для чотирьох мов
Один рядок хлібних крихт над заголовком на кожній внутрішній сторінці, з даних сторінки
Компактна висота шапки на телефонах і комп’ютерах

Шапки сторінок і текст

Небесно-блакитна смуга шапки сторінки з крихтами та заголовком
Довгий текст одним компонентом: вступний абзац, заголовки зі смугою від блакитного до лаймового, списки картками з пташками
FAQ окремим розділом під текстом, усі відповіді розкриті
Блок «Читати далі», що згортається, всередині картки

Послуги та міста

Хаб послуг із власним першим екраном і картками з картинками в сітці
Сторінки послуг: смуга, текст, фото та блок консультації
Хаб «Райони обслуговування» з картками міст, згрупованими за округами
Форма заявки на хабі послуг

Статті та блог

Шапка статті в тій самій смузі, широкий текст і рейка Jump to до восьми пунктів
Рядок автора з назвою компанії, датою та часом читання
Кнопки Summarize with AI: ChatGPT, Perplexity, Claude і Grok
Картка дзвінка, що лишається на видноті, і дзвінок одним дотиком усередині статті на телефонах
Список блогу та сторінки категорій збираються з одного каталогу
Картки статей із логотипом компанії в аватарі

Приймання заявок і відгуки

Картка заявки: панель з даними ліворуч, форма праворуч, на головній форма стоїть останньою
Форми надсилаються через поштовий Worker із перевіркою джерела кожної заявки
Спливна форма заявки кожною мовою
Відгуки каруселлю з трьох карток зі стрілками, справжні відгуки показано дослівно
Рядок з оцінкою поруч із формою та на хабі послуг

Швидкість і технічна база

Статичні сторінки на Cloudflare Pages, кеш на краю оновлюється за кожного викладання
Прибрано дублі аналітичних скриптів, аналітика стартує після відмальовування сторінки
Прибрано невикористані веб-шрифти, Bootstrap зменшено з 227 КБ до 72 КБ
Картинки віддаються в розмірі, в якому відмальовані
Середня вага HTML сторінки 62 КБ, приблизно вдвічі менша за колишню
Конвеєр викладання з автоматичною перевіркою посилань і мікророзмітки

Результат

Одна дизайн-система на 400+ сторінках і чотирьох мовах: головна, послуги, міста, блог, статті, контакти та про компанію
До дзвінка або заявки один дотик із будь-якої сторінки: телефон у шапці, Schedule Now, панель на телефонах, форма заявки та картка дзвінка в статті
Середня вага HTML сторінки 62 КБ, приблизно вдвічі менша за колишню, і 72 КБ Bootstrap замість 227 КБ
Дрібний текст і посилання на контрасті 4,5:1 і вище
Будь-яку статтю можна переказати через ChatGPT, Perplexity, Claude або Grok одним кліком
Робота триває: додаються нові розділи й уточнення