Wzornik, app preview. A6, izometryczny dashboard danych

Południe

Podgląd aplikacji do domowej fotowoltaiki z magazynem energii: wersja do App Store, trzy formaty na social media i lekkie pętle na stronę. Izometryczny dom, przez który płynie prąd, wykresy rysujące się w czasie i liczby, które się sumują.

Wersja marketingowa 16:9, pętla na stronę. Na telefonie odtwarza się pionowa wersja 9:16.

Wersja sklepowa: 25 s, 886×1920, 30 kl./s
Ruch: rysowanie linii, liczenie, przepływ zależny od mocy
Formaty social: 9:16, 1:1 i 16:9
Dźwięk: brak, wszystko czytelne bez niego

01 Klient i zadanie

Prąd z dachu, policzony co do kilowatogodziny

Południe to aplikacja dla rodzin, które mają na dachu od 6 do 10 kWp i magazyn energii. Falownik pokazuje im surowe liczby, a pralka i tak chodzi wieczorem, kiedy prąd trzeba kupić. Aplikacja ma pokazać, dokąd płynie energia teraz, jak wyglądał cały dzień i kiedy włączyć duże urządzenia.

Zadanie: podgląd do App Store, który w pierwszych dwóch sekundach pokaże dom z płynącym prądem i jedną dużą liczbą, trzy formaty na kampanię w mediach społecznościowych, pętle na stronę i storyboard. Bez dźwięku, bo sklep i feed startują wyciszone.

Użytkownik: rodzina w domu jednorodzinnym, instalacja z magazynem, rozliczenie net-billing
Trzy funkcje: przepływ energii na żywo, profil dnia z produkcją i zużyciem, porada, kiedy włączyć pralkę, z bilansem w złotówkach
Instalacja w historii: 8,2 kWp, czyli 20 paneli po 410 W, falownik hybrydowy 8 kW, magazyn 10,2 kWh z rezerwą 30%
Liczby: zmyślone, ale policzone z modelu dnia; ceny przykładowe: zakup 1,08 zł, sprzedaż 0,24 zł za kWh

Czwartek, 14 maja 2026, dom pod Opolem

Energia z dachu: 47,8 kWh

Dokąd poszła energia z dachu47,8 kWh

7,5 do domu7,5 do magazynu32,8 do sieci

Skąd przyszła energia w domu15,3 kWh

7,5 z dachu6,6 z magazynu1,2 z sieci

92% samowystarczalności, wartość dnia 23,10 zł: 14,1 kWh nie kupione po 1,08 zł i 32,8 kWh sprzedane po 0,24 zł. Ceny przykładowe.

02 Kierunek

Jedna informacja na ujęcie

Dane o energii łatwo zamienić w ścianę wykresów. Tutaj każde ujęcie ma jedną liczbę i jeden kolor wiodący: słońce na bursztynowo, magazyn na zielono, dom na niebiesko, sieć w kolorze łupku. Reszta czeka w 40% krycia, aż przyjdzie jej kolej.

Izometria daje danym miejsce: dom z panelami, magazyn przy ścianie i słup sieci stoją na jednej płycie, a prąd płynie między nimi po ścieżkach. Kreski biegną z prędkością zależną od mocy, więc 6,4 kW z dachu widać jako szybki strumień, a 0,5 kW do domu jako spokojny. Krój Archivo w wąskiej szerokości trzyma duże liczby zwarte i czytelne.

Izometria
Przepływ
Rysowanie w czasie
Wąskie liczby
Bilans

Archivo, jeden plik zmienny, OFL

47,8 kWh · 92%

ExtraBold 800, szerokość 75: duże liczby

Kiedy włączyć pralkę

Bold 700: tytuły ekranów

Magazyn, pełny o 13:40

SemiBold 600, szerokość 87,5: etykiety i przyciski

Zażółć gęślą jaźń, nadwyżka z dachu 4,1 kW

Regular 400 i Medium 500: tekst i opisy

Siedemnaście kolorów, cztery dla danych

Mgła#EEF2F6tło ekranów i sceny izometrycznej
Biel#FFFFFFgórne ściany brył, karty, pola
Cień lewy#DCE3EBlewe ściany brył, linie siatki wykresu
Cień prawy#C3CEDAprawe ściany brył, krawędzie kart
Grafit#15202Btekst główny i duże liczby
Łupek#4E5D6Copisy, osie, jednostki
Słońce#F2A100produkcja: linie, kreski przepływu, tarcza słońca
Słońce, tekst#965E00liczby i etykiety produkcji na bieli
Słońce, tło#FCEAC7pole nadwyżki, okno czasu w poradzie
Magazyn#2E9F5Bpoziom baterii, ładowanie, przepływ do magazynu
Magazyn, tekst#1F7A43liczby i etykiety magazynu na bieli
Magazyn, tło#D5ECDEpole pod krzywą naładowania
Dom#3A6FD8zużycie: linia, przepływ do domu, liczby
Dom, tło#D8E2F7pola zużycia i karta porady
Sieć#6B7C8Fprzepływ do sieci, słup, linie
Sieć, tekst#5F6F82liczby i etykiety sieci na bieli
Panel#2A3F5Aogniwa paneli na dachu i w ikonie

Kontrast na bieli: grafit 16,5:1, łupek 6,8:1, słońce w wersji tekstowej 5,4:1, magazyn 5,3:1, dom 4,7:1, sieć 5,1:1. Jasne słońce i jasna zieleń nigdy nie niosą tekstu, tylko linie, kreski i wypełnienia obok podpisanej liczby.

03 Storyboard

25 sekund, sześć ujęć, jedna liczba w każdym

Sześć ujęć w 750 klatkach. Hak to dom z płynącym prądem i liczba 6,4 kW z dachu od pierwszej klatki, bo w sklepie pierwsza klatka musi sprzedawać bez dźwięku. Potem magazyn, cały dzień na wykresie, porada na jutro i bilans, a na końcu ekran startowy z ikoną.

Trzy napisy, każdy najwyżej pięć słów i co najmniej 2,2 s na ekranie.
Napisy siedzą nad paskiem zakładek, poza górnymi 120 i dolnymi 160 pikselami, gdzie sklep kładzie własne elementy.
Plakat sklepowy to klatka 45: dom z przepływami i 6,4 kW z dachu. Domyślna klatka z piątej sekundy, rysująca się krzywa magazynu, też się broni.
Zegar na pasku stanu idzie z historią: 13:10 przy przepływie i magazynie, 21:40 przy podsumowaniu dnia.

Plansza sześciu klatek kluczowych wersji sklepowej z numerami ujęć, czasami i osią czasu — Plansza w pełnym rozmiarze, PNG

Tabela ujęć wersji sklepowej
Ujęcie	Klatki	Czas	Co się dzieje	Napis
1. Hak	0 do 74	0,0 s do 2,5 s	Od pierwszej klatki izometryczny dom z płynącą energią i duża liczba 6,4 kW z dachu. Kreski na ścieżkach biegną z prędkością zależną od mocy, przepływ ze słońca prowadzi, reszta czeka na 40%. Po panelach przesuwa się refleks.	„Prąd z dachu na żywo” klatki 0 do 72
2. Magazyn	75 do 224	2,5 s do 7,5 s	Stuknięcie w wiersz Magazyn. Kamera jedzie wzdłuż osi izometrii do baterii i przybliża ją, przepływ do magazynu przejmuje kolor wiodący. Krzywa naładowania rysuje się od rezerwy 30% o 6:15 do 95% teraz, poziom w bryle i liczba idą razem z nią. Na końcu plan: pełny o 13:40.	bez napisu
3. Dzień	225 do 374	7,5 s do 12,5 s	Zakładka Dzień, wieczór. Krzywa produkcji rysuje się przez cały dzień, liczba dochodzi do 47,8 kWh. Potem linia zużycia, pole nadwyżki i znacznik szczytu 6,4 kW o 13:10. Na dole bilans: dokąd poszła energia z dachu i skąd przyszła ta w domu.	„Cały dzień na jednym wykresie” klatki 240 do 312
4. Kiedy włączyć	375 do 524	12,5 s do 17,5 s	Zakładka Porady. Prognoza na jutro rysuje się, okno od 12:30 do 14:00 rozjaśnia się na krzywej. Karta pralki wjeżdża od dołu, nadwyżka liczy się do 4,1 kW, potem zmywarka i grzałka w bojlerze dostają swoje okna.	„Pralka wtedy, gdy świeci” klatki 390 do 456
5. Bilans	525 do 674	17,5 s do 22,5 s	Zakładka Bilans. Pierścień samowystarczalności rysuje się do 92%: najpierw część z dachu, potem z magazynu, a 8% z sieci zostaje szare. Pod spodem wartość dnia liczy się do 23,10 zł, w cenach przykładowych.	bez napisu
6. Zakończenie	675 do 749	22,5 s do 25,0 s	Ekran startowy: sześcian z ikony unosi się na sprężynie rise, na górnej ścianie wypełnia się tarcza słońca, pod spodem nazwa Południe.	bez napisu

04 Zasady ruchu

Ruch, który coś mierzy

Każdy ruch ma nazwę i wartość zapisaną w tokenach projektu. Linie rysują się w czasie, liczby dochodzą do wyniku, a jedyny ruch liniowy to kreski przepływu, bo pokazują moc.

47,8 kWh

draw i countlinia rusza powoli, liczba od razu skacze blisko wyniku i spokojnie dochodzi

47,8 kWh

liniowostała prędkość: linia wlecze się na początku, liczba długo pokazuje przypadkowe wartości

Długość: 40 klatek, 1,33 s

Ta sama krzywa produkcji i ta sama liczba 47,8 kWh. Po lewej krzywa draw i licznik count, po prawej oba liniowo. Ruch liniowy wygląda mechanicznie, a licznik długo pokazuje liczby, których nikt nie powinien czytać. Zmień długość, żeby zobaczyć, kiedy rysowanie robi się nerwowe.

draw · linie wykresów i ścieżki energii: cubic-bezier(0.65, 0, 0.35, 1), 1333 ms; pathLength od 0 do 1 w 40 klatek; linia rusza powoli, przyspiesza w środku dnia i dojeżdża łagodnie
count · liczby: cubic-bezier(0.22, 1, 0.36, 1), 1000 ms; 30 klatek, szybki start i długie dojście; wynik stoi potem co najmniej 45 klatek, żeby dało się go przeczytać
rise · bryły izometryczne i karty: sprężyna: masa 1, sztywność 200, tłumienie 24; wjazd o 12 pikseli wzdłuż pionu izometrii, bez widocznego odbicia; kolejne karty co 4 klatki
track · kamera między częściami sceny: cubic-bezier(0.45, 0, 0.55, 1), 800 ms; 24 klatki wzdłuż osi izometrii pod kątem 30 stopni, nigdy na skos ekranu
focus · jedna informacja na ujęcie: cubic-bezier(0.33, 1, 0.68, 1), 400 ms; kolor wiodący zostaje w 100%, pozostałe przepływy i karty schodzą do 40% w 12 klatek
flow · kreski na ścieżkach energii: cubic-bezier(0, 0, 1, 1), 600 ms; kreska 8, przerwa 10, prędkość 1 piksel na klatkę na każdy kilowat; jedyny ruch liniowy, bo pokazuje moc

Jedna informacja na ujęcie: kolor wiodący zostaje w 100%, pozostałe przepływy i wiersze schodzą do 40% w 12 klatek
Przepływ: kreska 8, przerwa 10, 1 piksel na klatkę na każdy kilowat: 6,4 kW z dachu biegnie prawie trzynaście razy szybciej niż 0,5 kW do domu
Stopniowanie: nagłówek, liczba i karta wjeżdżają co 4 klatki, linia zużycia rysuje się dopiero po produkcji
Kamera: w wersji marketingowej jedzie po osiach izometrii pod kątem 30 stopni: dach, magazyn, tablica z wykresem, pralka, słupki bilansu

05 Ekrany

Siedem ekranów, jeden model dnia

Ekrany są komponentami z jednego mini design systemu: kolory danych, krój w pięciu odmianach, karty z krawędzią jak płyta w izometrii. Wszystkie liczby pochodzą z jednego modelu dnia co 5 minut, więc magazyn, wykres i bilans mówią to samo. Projekt w kanwie 443×960, render w skali 2, czyli dokładnie 886×1920.

Ekran Teraz — **1. Teraz**Izometryczny dom z czterema przepływami: 6,4 kW z dachu dzieli się na 0,5 kW do domu, 1,3 kW do magazynu i 4,6 kW do sieci.

Ekran Magazyn — **2. Magazyn**Bateria 10,2 kWh naładowana w 95%. Krzywa pokazuje dzień od rezerwy 30% o 6:15 do teraz i plan: pełny o 13:40.

Ekran Dzień — **3. Dzień**Produkcja i zużycie na jednym wykresie, szczyt 6,4 kW o 13:10. Pod spodem bilans: 47,8 kWh z dachu to 7,5 do domu, 7,5 do magazynu i 32,8 do sieci.

Ekran Kiedy włączyć — **4. Kiedy włączyć**Prognoza na jutro i okno dla pralki od 12:30 do 14:00, kiedy dach ma 4,1 kW nadwyżki. Zmywarka i bojler dostają swoje okna.

Ekran Bilans dnia — **5. Bilans dnia**Samowystarczalność 92%: 7,5 kWh z dachu, 6,6 z magazynu i tylko 1,2 z sieci. Wartość dnia 23,10 zł w cenach przykładowych.

Ekran Miesiąc — **6. Miesiąc**Maj dzień po dniu: 462,4 kWh z dachu, 81% samowystarczalności i 255,36 zł wartości w cenach przykładowych.

Ekran Instalacja — **7. Instalacja**Dane systemu w jednym miejscu: 20 paneli po 410 W, falownik hybrydowy 8 kW, magazyn 10,2 kWh z rezerwą 30%.

06 Wersja sklepowa i formaty

Sklep pokazuje aplikację, social pokazuje dom

Apple wymaga, żeby podgląd w sklepie pokazywał prawdziwy interfejs, dlatego powstały dwie odrębne wersje. Sklepowa to sam ekran aplikacji. W marketingowej izometryczny dom zajmuje cały kadr, a telefon jest dużą wstawką z boku, przewód z falownika prowadzi prąd prosto do ekranu, a kamera przejeżdża od dachu przez magazyn i tablicę z wykresem do słupków bilansu, a zakończenie to ten sam dom o zmierzchu z nazwą aplikacji.

Wersja sklepowa, sam interfejs886×1920, 25 s, H.264

Reels, TikTok, Shorts, 9:161080×1920, 25 s

Post w kanale, 1:11080×1080, 25 s

YouTube i link w Google Play, 16:91920×1080, 25 s

07 Co dostaje klient

Pliki gotowe do wgrania, z parametrami

Klient dostaje pliki gotowe do wgrania, z parametrami sprawdzonymi przez ffprobe. Wersje pełnej jakości są za duże na stronę, dlatego tutaj odtwarzają się lekkie pętle bez dźwięku, w formacie WebM i MP4.

Wersje pełnej jakości
Plik	Do czego	Wymiary	Długość	Kodek	Bitrate	Rozmiar
poludnie-store-886x1920.mp4Wersja sklepowa	App Store Connect, podgląd aplikacji na iPhone	886×1920, 30 kl./s	25,0 s, 750 klatek	H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz	11,4 Mb/s	34,0 MB
poludnie-social-1080x1920.mp4Wersja marketingowa 9:16	Reels, TikTok i Shorts	1080×1920, 30 kl./s	25,0 s, 750 klatek	H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz	2,2 Mb/s	6,7 MB
poludnie-social-1080x1080.mp4Wersja marketingowa 1:1	post w kanale	1080×1080, 30 kl./s	25,0 s, 750 klatek	H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz	1,7 Mb/s	5,1 MB
poludnie-social-1920x1080.mp4Wersja marketingowa 16:9	YouTube, link w Google Play	1920×1080, 30 kl./s	25,0 s, 750 klatek	H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz	2,5 Mb/s	7,4 MB

Pętle na stronę internetową
Pętla	Wymiary	Długość	WebM, VP9	MP4, H.264
Nagłówek strony, 16:9poludnie-hero	1280×720	25,7 s	1,7 MB	2,0 MB
Nagłówek na telefonie, 9:16poludnie-hero-9x16	540×960	25,7 s	1,1 MB	1,1 MB
Kwadrat, 1:1poludnie-social-1x1	720×720	25,7 s	1,3 MB	1,3 MB
Wersja sklepowapoludnie-store	442×960	25,7 s	702 KB	625 KB
Kafel z pętląpoludnie-tile	480×600	5,0 s	106 KB	90 KB

Ikona: 1024×1024 PNG bez przezroczystości i podgląd z zaokrągleniem
Storyboard: tabela ujęć z klatkami i plansza klatek kluczowych w PNG
Ekrany: siedem ekranów interfejsu w 886×1920
Model danych: profil dnia co 5 minut, z którego liczą się wszystkie liczby w wideo

Twoje dane też mogą opowiadać historię

Napisz, co robi Twoja aplikacja i kto jej używa. Zaproponuję storyboard, styl ruchu i komplet plików do App Store, Google Play i mediów społecznościowych.

Zobacz ofertę dla klientów