К содержимому
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 дней
  • Гарантия и поддержка после сдачи
Где ответить?

Без спама. Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности.