Wzornik, app preview. A4, claymorphism pastelowy

Kiełek

Podgląd aplikacji do pielęgnacji roślin domowych: wersja do App Store, trzy formaty na social media i lekkie pętle na stronę. Miękkie, napompowane kształty, ciepłe pastele i maskotka, która gra razem z interfejsem.

Pętla marketingowa: 1:1 na komputerze, 16:9 na tablecie, 9:16 na telefonie.

Wersja sklepowa: 21 s, 886×1920, 30 kl./s
Ruch: sprężyny z odbiciem, zgniecenie, krople
Formaty social: 9:16, 1:1 i 16:9
Dźwięk: brak, wszystko czytelne bez niego

01 Klient i zadanie

Mniej przelanych roślin, więcej zielonych liści

Kiełek to aplikacja dla ludzi, którzy mają w mieszkaniu od pięciu do dwudziestu roślin i nie pamiętają, która kiedy piła. Rośliny domowe częściej giną od nadmiaru wody niż od suszy, a ich potrzeby zależą od gatunku, okna i pory roku.

Zadanie: podgląd do App Store, który w pierwszych dwóch sekundach pokaże, że aplikacja jest życzliwa i konkretna, 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: mieszkanie w mieście, od 5 do 20 roślin, pierwsze kwiatki albo już mała dżungla
Trzy funkcje: plan podlewania zmieniany z porą roku, diagnoza po objawach na liściach, pokoje ze światłem i wilgotnością
Rośliny w historii: monstera Zdzisia, kalatea Kalina, sansewieria Szabla, epipremnum Lolek i trzy inne, w salonie, sypialni i kuchni
Ton: ciepły i życzliwy, ale z liczbami: mililitry, dni i procenty

Czwartek, 8 października

Dziś podlej 3 rośliny

Zdzisiamonstera, salon400 ml
Kalinakalatea, sypialnia250 ml
Szablasansewieria, salon150 ml

Razem 800 ml

02 Kierunek

Miękko, ciepło i z charakterem

Rośliny kojarzą się z czymś żywym i miękkim, a nie z tabelką. Dlatego interfejs wygląda jak ulepiony z plasteliny: karty są napompowane, mają jasny brzeg u góry i miękki cień pod spodem. Nie ma ostrych narożników ani zimnych szarości, a promień nigdy nie spada poniżej 18 pikseli.

Paleta jest ciepła: brzoskwiniowe tło, pistacja dla zdrowych roślin, masło dla dzisiejszych zadań, róż dla tych, które potrzebują uwagi, i woda w kroplach. Maskotka Kiełek to kiełek w doniczce zbudowany z kilku brył. Cieszy się po podlaniu, martwi się przy diagnozie i kiwa głową, gdy znajdzie rozwiązanie.

Plastelina
Ciepłe pastele
Zaokrąglony krój
Maskotka
Odbicie

M PLUS Rounded 1c, trzy wagi, OFL

Dziś podlej 3 rośliny

Black 900: tytuły, liczby i nazwa

Żółte dolne liście

ExtraBold 800: chipy, przyciski i etykiety

Zażółć gęślą jaźń, 400 ml co 7 dni

Medium 500: tekst i objaśnienia

Dziesięć kolorów, wszystkie ciepłe

Brzoskwinia#FFE6D6tło każdego ekranu i sceny
Śmietanka#FFF5EEkarty, pola, kafle dni
Pistacja#BFE29Aroślina zdrowa, podlane, głowa maskotki
Liść#7DBE5Aliście maskotki i drobne akcenty, nigdy pod tekstem
Masło#FFE07Adziś, wybrane, aktywna zakładka
Róż#FFC2CCroślina potrzebuje uwagi, obudowa telefonu
Terakota#E8896Bdoniczki, tylko jako dekoracja
Woda#AEE3D3krople, wilgotność, ilość wody
Śliwkowy brąz#4A2C2Atekst, oczy maskotki, ikony
Brąz łagodny#7A5650objaśnienia na brzoskwini, śmietance, maśle i wodzie

Kontrast: śliwkowy brąz na brzoskwini 10,4:1, na śmietance 11,6:1. Brąz łagodny na brzoskwini 5,4:1, na śmietance 6,0:1. Na pistacji i różu tekst jest zawsze śliwkowy, a liść i terakota służą tylko do rysunku.

03 Storyboard

21 sekund, sześć ujęć, każde ląduje z odbiciem

Sześć ujęć w 630 klatkach. Hak to maskotka w doniczce i karta Dziś podlej 3 rośliny, obie na ekranie od pierwszej klatki, bo w sklepie pierwsza klatka musi sprzedawać bez dźwięku i od razu mówić, do czego jest aplikacja. Potem podlewanie, kalendarz, który sam zmienia się z porą roku, diagnoza i pokoje, a na końcu ekran startowy z ikoną.

Trzy napisy, każdy najwyżej pięć słów i co najmniej 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 30: Kiełek po skoku nad kartą Dziś podlej 3 rośliny. Domyślna klatka z piątej sekundy, pistacjowa karta Zdzisi i cieszący się Kiełek, też się broni.

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 59	0,0 s do 2,0 s	Od pierwszej klatki Kiełek siedzi w doniczce, a pod nim stoi karta Dziś podlej 3 rośliny. Kiełek podskakuje, ląduje ze zgnieceniem, karta ugina się razem z nim, potem mrugnięcie.	„Rośliny podlane na czas” klatki 0 do 66
2. Dziś	60 do 209	2,0 s do 7,0 s	Kiełek przeskakuje do karty, która dojeżdża na górę. Trzy karty roślin wskakują co 5 klatek. Stuknięcie Podlane przy Zdzisi: kropla spada, zgniata się, karta robi się pistacjowa, licznik spada do 2, Kiełek się cieszy.	bez napisu
3. Kalendarz	210 do 329	7,0 s do 11,0 s	Zakładka przeskakuje na Kalendarz. Tygodnie wjeżdżają po kolei, krople lądują na 8, 15, 22 i 29 października. Przełącznik przechodzi na zimę i krople przeskakują na 20 października i 1 listopada.	„Plan dopasowany do pory roku” klatki 220 do 292
4. Diagnoza	330 do 479	11,0 s do 16,0 s	Stuknięcie Żółte dolne liście, potem Mokra. Karta odpowiedzi nadmuchuje się: za dużo wody, odstaw konewkę na 10 dni. Kiełek najpierw się martwi, potem kiwa głową.	„Podpowie, co dolega liściom” klatki 344 do 412
5. Pokoje	480 do 569	16,0 s do 19,0 s	Trzy kafle pokoi. Sypialnia dostaje różową obwódkę, pasek wilgotności rośnie do 41%, przy 60% pojawia się Kalina lubi 60%, a pod spodem rada: przestaw ją do kuchni.	bez napisu
6. Zakończenie	570 do 629	19,0 s do 21,0 s	Ekran startowy: ikona nadmuchuje się na sprężynie bounce, pod nią napis Kiełek i Pielęgnacja roślin. Kiełek mruga w ikonie.	bez napisu

04 Zasady ruchu

Zamiast stopu, odbicie

Każdy ruch ma nazwę i wartość zapisaną w tokenach projektu. Te same liczby napędzają wideo i laboratorium kropli poniżej.

Sprężyna bouncemasa 1, sztywność 180, tłumienie 12przestrzelenie 20,3%, najwyższe rozciągnięcie 1,02, spokój po 858 ms

Sprężyna sztywnamasa 1, sztywność 260, tłumienie 34przestrzelenie 0,0%, najwyższe rozciągnięcie 1,00, spokój po 538 ms

Sztywność: 180Tłumienie: 12

Po lewej kropla na sprężynie bounce, po prawej na sztywnej sprężynie bez przestrzelenia. Obie spadają po tej samej krzywej drop i zgniatają się przy zetknięciu z liściem, różni je tylko powrót do kształtu. Zmień sztywność i tłumienie, żeby zobaczyć, kiedy odbicie robi się galaretowate, a kiedy znika.

bounce · karty, przyciski, wejście maskotki: sprężyna: masa 1, sztywność 180, tłumienie 12; wyraźne przestrzelenie, około 20%, i dwa miękkie odbicia, spokój po około 0,86 s; każda karta dojeżdża jak napompowana
squash · lądowanie: cubic-bezier(0.33, 1, 0.68, 1), 133 ms; przy zetknięciu skala pionowa 0,88 i pozioma 1,1 przez 4 klatki, potem powrót na sprężynie bounce
puff · chipy, znaczniki, napisy: sprężyna: masa 1, sztywność 260, tłumienie 14; skala od 0 do 1, cień rośnie razem z kształtem przez 6 klatek
drop · krople wody: cubic-bezier(0.55, 0, 1, 0.45), 467 ms; spadek z przyspieszeniem w 14 klatek, a po zetknięciu squash i trzy kropelki rozprysku
wiggle · liście w spoczynku: sprężyna: masa 1, sztywność 120, tłumienie 6; obrót o ±4° co 50 klatek, liście maskotki nigdy nie stoją zupełnie nieruchomo
stagger · listy i siatki: steps(1), 167 ms; 5 klatek odstępu między elementami listy, każdy wjeżdża na sprężynie bounce; w kalendarzu 5 klatek między tygodniami

Nic nie staje jak wryte: karty, chipy i maskotka dojeżdżają z przestrzeleniem około 20% i dwoma miękkimi odbiciami
Lądowanie: każde zetknięcie ma zgniecenie 0,88 na 1,1 przez 4 klatki, także karta, która dojeżdża na górę ekranu
Stopniowanie: karty roślin co 5 klatek, tygodnie kalendarza co 5 klatek, słowa nagłówków co 3 klatki
Zmiana zakładki: stary ekran odjeżdża w lewo w 6 klatek, nowy wjeżdża z prawej na sprężynie bounce i ugina się przy hamowaniu, a nagłówek wchodzi dopiero, gdy poprzedni ekran zniknie
Kamera w wersji marketingowej: powolna orbita: tło, rekwizyty i telefon przesuwają się na różnej głębokości, więc płaska scena wygląda na trójwymiarową

05 Ekrany

Sześć ekranów z jednej plasteliny

Sześć ekranów zbudowanych jako komponenty z jednego mini design systemu: kolory, krój w trzech wagach, odstępy, promienie i trzy poziomy cienia. Projekt w kanwie 443×960, render w skali 2, czyli dokładnie 886×1920.

Ekran Dziś — **1. Dziś**Kiełek wita i mówi, co podlać: trzy rośliny, razem 800 ml. Po stuknięciu Podlane karta robi się pistacjowa, a licznik spada.

Ekran Roślina — **2. Roślina**Monstera Zdzisia: pierścień do następnego podlewania, 400 ml co 7 dni latem i co 12 zimą, światło, wilgotność i historia.

Ekran Kalendarz — **3. Kalendarz**Miesiąc w kroplach. Od połowy października plan sam przechodzi z 7 na 12 dni i przesuwa krople.

Ekran Diagnoza — **4. Diagnoza**Objaw i stan ziemi wystarczą do odpowiedzi: żółte dolne liście i mokra ziemia to przelanie, więc konewka odpoczywa 10 dni.

Ekran Pokoje — **5. Pokoje**Każdy pokój ma okno, światło i wilgotność. W sypialni jest 41%, a Kalina lubi 60%, więc Kiełek podpowiada kuchnię.

Ekran Dodaj roślinę — **6. Dodaj roślinę**Wyszukiwarka gatunków z krótką instrukcją przy każdym wyniku i wyborem pokoju, do którego trafi roślina.

06 Wersja sklepowa i formaty

Sklep pokazuje aplikację, social pokazuje Kiełka

Apple wymaga, żeby podgląd w sklepie pokazywał prawdziwy interfejs, dlatego powstały dwie odrębne wersje. Sklepowa to sam ekran aplikacji. Marketingowa ma różowy telefon z plasteliny, unoszące się doniczki i krople, Kiełek prowadzi opowieść: przy każdym akcie podskakuje obok telefonu jako gospodarz, a w chwili podlewania wychodzi z ekranu i siada na jego krawędzi. Sam telefon wjeżdża z boku na sprężynie.

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

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

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

YouTube i link w Google Play, 16:91920×1080, 21 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
kielek-store-886x1920.mp4Wersja sklepowa	App Store Connect, podgląd aplikacji na iPhone	886×1920, 30 kl./s	21,0 s, 630 klatek	H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz	11,4 Mb/s	28,5 MB
kielek-social-1080x1920.mp4Wersja marketingowa 9:16	Reels, TikTok i Shorts	1080×1920, 30 kl./s	21,0 s, 630 klatek	H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz	2,6 Mb/s	6,5 MB
kielek-social-1080x1080.mp4Wersja marketingowa 1:1	post w kanale	1080×1080, 30 kl./s	21,0 s, 630 klatek	H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz	2,0 Mb/s	5,1 MB
kielek-social-1920x1080.mp4Wersja marketingowa 16:9	YouTube, link w Google Play	1920×1080, 30 kl./s	21,0 s, 630 klatek	H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz	2,3 Mb/s	5,9 MB

Pętle na stronę internetową
Pętla	Wymiary	Długość	WebM, VP9	MP4, H.264
Nagłówek strony, 16:9kielek-hero	1280×720	21,7 s	1,1 MB	1,3 MB
Nagłówek na telefonie, 9:16kielek-hero-9x16	540×960	21,7 s	831 KB	1,0 MB
Kwadrat, 1:1kielek-social-1x1	720×720	21,7 s	912 KB	1,1 MB
Wersja sklepowakielek-store	442×960	21,7 s	807 KB	874 KB
Kafel z pętląkielek-tile	480×600	5,0 s	172 KB	195 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: sześć ekranów interfejsu w 886×1920
Projekt ruchu: tokeny kolorów, typografii i ruchu, opisane jak tutaj

Twoja aplikacja też może mieć charakter

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