До змісту
Tvorum.
КонцептСонячні електростанції2026

Sonce Energy — концепт сайту для монтажу СЕС

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

Це концепт, а не клієнтський проєктКонцепт-проєкт студії: демонстрація дизайну та функціоналу для ніші. Так ми бачимо сильний сайт для сонячних електростанцій: структура, дизайн, тексти й функціонал. Замовте — і ваш сайт стане наступним кейсом.

Sonce Energy — концепт сайту для монтажу СЕС — головний екран
Ніша
Сонячні електростанції
Тип сайту
Лендінг
Рік
2026
Формат
Концепт студії

01 / Задача

Яку задачу вирішує сайт

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

Сайт мав працювати на чотири цілі:

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

02 / Рішення

Дизайн і UX-рішення

Ідея — сайт як сонячний день. Кожен розділ має свою годину: 05:48 у першому екрані, 10:30 біля калькулятора, 12:30 — «пік генерації» з пакетами, 19:40 — блекаут-тест, 21:15 — заявка на виїзд. У шапці маленький «сонячний годинник» рухає сонце дугою під час прокрутки.

Візуальна мова. Світла оптимістична палітра: сонячно-жовтий, бірюза, білий і глибокий графітово-зелений для контрасту. Замість стокових фото — власна ілюстрована система на SVG: будинок із панелями, схема обладнання, план даху з розкладкою, склад із рядами панелей і нічна вулиця, де світиться лише один будинок. Типографіка — Commissioner для заголовків і Golos Text для тексту, обидва з повною підтримкою української.

Інтерактив, що продає:

  • у першому екрані «живий» будинок: небо, сонце, хмари й освітлення вікон змінюються протягом доби, а картка-монітор показує, як енергія тече між панелями, будинком, батареєю і мережею — зокрема під час відключення за графіком;
  • калькулятор станції за споживанням або площею даху з вибором регіону й цілі (економія, резерв, продаж надлишків) рахує потужність, кількість панелей, ємність батарей, тип інвертора, вартість діапазоном і окупність; тарифи редагуються, а неперевірених державних ставок немає;
  • графіки генерації по місяцях і накопиченої економії за 15 років з урахуванням деградації панелей;
  • блекаут-тест погодинно моделює заряд батареї для сезону, графіка відключень і ємності АКБ, показує години без світла і пропонує мінімальну батарею, яка закриває графік;
  • пакети 5/10/30 кВт, схема обладнання з підсвіткою компонентів і заявка на виїзд, яка автоматично підтягує розрахунок, результат блекаут-тесту або обраний пакет.

03 / Функціонал

Що є на сайті

  • Ілюстрований будинок, що живе протягом доби: небо, сонце, світло у вікнах
  • Монітор енергопотоків із симуляцією відключення за графіком
  • Калькулятор станції: за споживанням або площею даху, регіон і ціль
  • Розрахунок панелей, інвертора, батарей, вартості й окупності з редагованими тарифами
  • Графіки генерації по місяцях і економії за 15 років
  • Блекаут-тест із погодинним зарядом батареї, підбором ємності й передачею в заявку
  • Пакети 5/10/30 кВт з передачею вибору у форму заявки
  • Інтерактивна схема обладнання: панелі, інвертори, акумулятори, захист
  • Форма виїзду інженера з маскою телефону, валідацією і вибором дати
  • Адаптив до 390 px, свайп-картки на мобільному, prefers-reduced-motion

04 / Екрани

Як сайт виглядає на компʼютері й телефоні

Sonce Energy — концепт сайту для монтажу СЕС — головна сторінка повністю
Головна сторінка повністю — гортайте всередині рамки
Sonce Energy — концепт сайту для монтажу СЕС — мобільна версія
Мобільна версія

Технології

Стек

Технології підбираємо під задачу: швидке завантаження, зручне редагування контенту та інтеграції з вашими сервісами.

  • HTML5
  • CSS Grid/Flex
  • Vanilla JS
  • Ілюстрована сцена дня: SVG-будинок, небо й сонце змінюються в реальному часі
  • Симуляція енергопотоків панелі → інвертор → дім / батарея / мережа
  • Калькулятор станції: потужність, панелі, АКБ, вартість і окупність
  • SVG-графіки генерації по місяцях і грошей за 15 років
  • Блекаут-тест: погодинна модель заряду батареї за графіком відключень
  • Інтерактивна схема обладнання з ARIA-вкладками
  • IntersectionObserver-анімації з prefers-reduced-motion
  • Готовий до інтеграції з CMS

Палітра

Кольори концепту

  • Колір #ffc83d
  • Колір #12b3a8
  • Колір #0d2b33
  • Колір #fffdf6
  • Колір #e3f6f3

Портфоліо

Інші роботи

Усі роботи

0 ₴ · 24h

Хочете такий самий — але під ваш бізнес?

Залиште контакт — за 24 години покажемо безкоштовний прототип головної сторінки: у стилі цього концепту або в зовсім іншому.

  • Прототип за 24 години — безкоштовно
  • Фіксована ціна, без «доплат» в процесі
  • Запуск від 5 днів
  • Гарантія та підтримка після здачі
Де відповісти?

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