Послуги Розробка сайтів Веб-додатки і SaaS Мобільні застосунки Доробки й технічні правки Прискорення сайтів Технічне SEO Міграція з конструкторів Інтеграції та автоматизація Підтримка й супровід Кейси Ціни Процес Блог Контакти
Аудит сайту Розрахувати вартість
Автодетейлінг · Чикаго

Сайт автодетейлінгу, зверстаний точно за макетом

Студія детейлінгу прийшла з готовим макетом у Figma. Завдання було не «зробити схоже», а перенести дизайн один в один — з окремими сторінками під кожну послугу й двома мовами.

Сайт автодетейлінгу, зверстаний точно за макетом
6
напрямів з окремою сторінкою
1:1
відповідність макету
2
мовні версії

Задача

У преміальних послугах вигляд сайту — частина продукту: людина, яка віддає машину на керамічне покриття, оцінює акуратність ще до першого дзвінка. Макет був намальований до нас, і будь-яке «майже так» у відступах, кеглях чи тінях зчитувалося б як неохайність — саме та, якої клієнт не пробачає майстру.

Рішення

Робота починалася не з верстки, а з розбору макета: які відступи повторюються, які кеглі складають типографічну шкалу, скільки насправді різних кнопок і карток. Дизайнер малює вільно, і в макеті майже завжди є випадкові розбіжності — три різні відступи там, де мала бути одна величина.

Ці розбіжності ми зводимо до системи ще до першого рядка коду. Далі верстка йде не «на око по скріншоту», а за узгодженою шкалою — і саме тому результат збігається з макетом на всіх екранах, а не лише на тому, під який його малювали.

Сторінка під кожну послугу

Детейлінг — це не одна послуга, а шість різних, і шукають їх окремо: тонування, керамічне покриття, захисна плівка, повний детейлінг, вініловий обклей, ремонт вм'ятин без фарбування. Кожна отримала власну сторінку з описом, прикладами робіт і своїм зверненням — замість одного спільного розділу «Послуги», який не відповідає на жоден конкретний запит.

Дві мови

Чикаго — місто, де частина клієнтів шукає послуги не англійською. Сайт зроблено двомовним із самого початку: не автоперекладом, а окремими версіями сторінок, які можна вести незалежно.

Що враховано в дизайні

  • Темна тема з червоним акцентом — робота з машинами показується на темному тлі виграшніше, ніж на білому
  • Великі фото робіт у картках послуг: у цій ніші купують очима
  • Телефон і запит ціни винесені в шапку на всіх сторінках
  • Розділ робіт і блог — місце для доказів і для матеріалів під пошукові запити

Усі кейси

Розкажіть, що треба зробити

Опишіть задачу двома реченнями. Відповімо протягом години й одразу скажемо, чи беремося та скільки це коштуватиме.

Натискаючи кнопку, ви погоджуєтесь із політикою конфіденційності.

Написати в Telegram