Wzornik, app preview. A5, pixel art 8-bit
Poziomka
Podgląd trackera nawyków, w którym każde zadanie daje punkty doświadczenia: wersja do App Store, trzy formaty na social media i lekkie pętle na stronę. Szesnaście kolorów, piksele tylko w całości i ruch w rytmie starej konsoli.
- Wersja sklepowa
- 20 s, 886×1920, 30 kl./s
- Ruch
- kroki co 4 klatki, bez wygładzania
- Formaty social
- 9:16, 1:1 i 16:9
- Dźwięk
- brak, wszystko czytelne bez niego
01 Klient i zadanie
Nawyki, które nie nudzą się po dwóch tygodniach
Poziomka to tracker nawyków dla ludzi, którzy wychowali się na grach i chcą małych, codziennych zwycięstw. Większość takich aplikacji zamienia się po dwóch tygodniach w listę obowiązków. Tu każdy nawyk jest zadaniem z punktami, punkty dają poziomy, a passa hoduje w ogródku poziomkę.
Zadanie: podgląd do App Store, który w pierwszej klatce pokaże nowy poziom i od razu powie, że to gra, a nie kolejna tabelka. Do tego 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
- od 16 do 35 lat, gra w gry i chce mieć co rano jasną listę małych zadań
- Trzy funkcje
- nawyki jako zadania z XP, poziomy i passa, która hoduje ogródek, tydzień w słupkach
- Dane w historii
- poziom 7, 1160 z 1200 XP, passa 21 dni od 18 września, czwartek 8 października
- Ton
- krótko, z liczbami i bez moralizowania: punkty, dni, strony, minuty
Czwartek, 8 października
Zadania na dziś
- Szklanka wodyrano, codziennie+10 XPzrobione
- 20 min spaceruprzed pracą+30 XPzrobione
- 15 stron książkiwieczorem+20 XP
- Telefon od 22:30przed snem+40 XP
Rano +40 XP: z 1160 robi się 1200 XP i poziom 8.
02 Kierunek
Gra, ale taka, którą da się czytać
Pixel art mówi do tej grupy od pierwszej klatki: poziom, monety, skrzynia ze skarbem. Każdy element stoi na siatce, a jeden piksel rysunku to cztery piksele wideo. Nic nie jest skalowane o ułamek, nic nie ma rozmytej krawędzi, a cienie powstają z ditheringu, czyli z szachownicy dwóch kolorów, nie z gradientu.
Paleta ma dokładnie szesnaście kolorów. Tekst zawsze stoi na kremie, błękicie albo śliwce, żeby kontrast nie spadał poniżej 4,5:1. Oba kroje to prawdziwe fonty pikselowe na licencji OFL. W wideo nie są rysowane przez przeglądarkę, tylko zamienione na bitmapy, więc litery mają ostre krawędzie w każdej klatce.
- 16 kolorów
- Dithering
- Całe piksele
- 7,5 kl./s
- Grywalizacja
POZIOM 8!Zażółć gęślą jaźń
Jersey 10 (OFL), w wideo jako bitmapa Poziomka Pixel: nagłówki, liczby i napisy w wideo. Piksel kroju to 75 jednostek, wersalik ma 10 pikseli.Szklanka wody +10 XPZażółć gęślą jaźń
Tiny5 (OFL), w wideo jako bitmapa Poziomka Mini: kicker i linia w oknie dialogowym wersji marketingowej oraz podpisy na planszy storyboardu. Tekst tej strony to zwykły krój systemowy. Wersalik ma 5 pikseli, wszystkie polskie znaki są na miejscu.Szesnaście kolorów i nic więcej
- Atrament#140C1Ckontury, tekst, ramka telefonu
- Śliwka#3B2440pasek poziomu, zakładki, panele na ciemnym
- Zmierzch#6B3E5Edrugi poziom tekstu, cień pod sprite’ami
- Głęboka poziomka#A23B4Ecień owocu, skrzynia, miedź konewki
- Poziomka#E0474Fowoc, słupki tygodnia, kolor marki
- Jasna poziomka#FF8F8Fblask owocu i zaznaczenia
- Złoto#F7C873monety XP, pasek doświadczenia, nagłówki na ciemnym
- Krem#FFF3C4panele, karty zadań, kafle passy
- Las#2D5A3Aciemne liście, cień trawy
- Liść#4FA34Aliście, trawa i zrobione zadania
- Kiełek#A6DE5Cjasne liście, znak odhaczenia
- Głęboki błękit#2B4C8Cgórny pas nieba, cień chmur
- Błękit#4F8FE0środkowy pas nieba
- Jasny błękit#9ED8FFtło ekranów i strony
- Kamień#8A7F86puste kafle, linie wykresu, tylko grafika
- Biel#FFFFFFblask, chmury, oczy poziomki
Kontrast: atrament na kremie 17,2:1, na jasnym błękicie 12,5:1. Zmierzch na kremie 7,6:1, na błękicie 5,5:1. Złoto i krem stoją na śliwce, a kamień, liść i poziomka służą tylko do rysunku.
03 Storyboard
20 sekund, sześć ujęć, jedna pętla gry
Sześć ujęć w 600 klatkach, ułożonych jak pętla gry: zadanie, nagroda, poziom. Hak to baner nowego poziomu, który stoi już w pierwszej klatce, bo w sklepie pierwsza klatka musi sprzedawać bez dźwięku. Potem zadania, passa, ogródek, tydzień i ekran startowy z ikoną.
- Trzy napisy w kroju Poziomka Pixel, każdy najwyżej sześć słów i co najmniej 2,2 s na ekranie.
- Napisy pojawiają się i znikają w dwóch krokach ditheringu, bez przenikania. Każdy siedzi w wolnym miejscu swojego ekranu, nad sceną albo między panelami, poza górnymi 120 i dolnymi 160 pikselami.
- Plakat sklepowy to klatka 30: baner POZIOM 8 i poziomka w skoku. Domyślna klatka z piątej sekundy, moneta +30 XP nad spacerem, też się broni.
| Ujęcie | Klatki | Czas | Co się dzieje | Napis |
|---|---|---|---|---|
| 1. Poziom w górę | 0 do 59 | 0,0 s do 2,0 s | Baner POZIOM 8! stoi już w pierwszej klatce. Poziomka skacze w rytmie 7,5 klatki na sekundę. Pasek XP stoi pełny, po 12 klatkach panel błyska, pasek opada w trzech krokach, a licznik przechodzi z POZIOM 7 na POZIOM 8. Z obu boków ekranu wyskakują monety. | „Nawyki, za które rośnie poziom” klatki 0 do 72 |
| 2. Zadania | 60 do 209 | 2,0 s do 7,0 s | Szachownica odsłania zadania na dziś. Odhaczona woda daje +10 XP, spacer +30 XP, monety podskakują, a pasek rośnie po pikselu, aż dobija do 1200 XP i mruga. Odznaka zmienia się na POZIOM 8. | bez napisu |
| 3. Passa | 210 do 329 | 7,0 s do 11,0 s | Kalendarz 21 dni od 18 września. Kafle odwracają się po kolei co 4 klatki, licznik rośnie razem z nimi, a na końcu mruga PASSA: 21 DNI. | „Passa 21 dni i rośnie” klatki 220 do 290 |
| 4. Ogródek | 330 do 479 | 11,0 s do 16,0 s | Ogródek: kwiat w trzech pozach zamienia się w owoc, wskaźnik etapu przeskakuje na 5 z 5. Skrzynia otwiera się w trzech krokach i wypuszcza miedzianą konewkę. | „Ogródek rośnie z każdą passą” klatki 345 do 412 |
| 5. Tydzień | 480 do 539 | 16,0 s do 18,0 s | Siedem słupków XP od piątku do czwartku rośnie po 3 piksele na klatkę. Pod spodem razem 550 XP, średnio 79 dziennie i tabela: które zadanie którego dnia. | bez napisu |
| 6. Zakończenie | 540 do 599 | 18,0 s do 20,0 s | Ekran startowy: pikselowa ikona z poziomką, napis POZIOMKA wpisuje się literą na każdy takt i podpis Nawyki z poziomami. | bez napisu |
04 Zasady ruchu
Ruch krokami, bez krzywych
Poziomka jako jedyna z sześciu realizacji nie ma żadnego wygładzania. Każdy ruch to seria póz, a nowa poza wchodzi co 4 klatki, czyli 7,5 razy na sekundę. Te same wartości napędzają wideo i laboratorium poniżej.
Ta sama poziomka i ten sam skok. Po lewej płynna krzywa ease‑in‑out w 60 klatkach na sekundę: sprite przesuwa się o ułamki piksela rysunku i wypada z siatki, a ruch wygląda jak animacja interfejsu, nie jak gra. Po prawej kroki: cztery pozy, wysokość 0, 3, 5 i 3 piksele, nowa poza co 4 klatki. Zmień tempo kroków i porównaj, przy jakim skok przestaje wyglądać jak gra.
- tick · tempo animacji sprite’ów
steps(1), 133 ms- nowa poza co 4 klatki, czyli 7,5 klatki na sekundę; między pozami nic się nie przesuwa
- walk · skok poziomki
steps(4), 533 ms- 4 pozy po 4 klatki, wysokość w całych pikselach: 0, 3, 5 i 3, przy lądowaniu poziomka spłaszcza się o 1 piksel
- pop · monety i +XP
steps(3), 533 ms- moneta obraca się w 3 pozach, liczba rośnie o 1 piksel co 2 klatki przez 16 klatek i znika w 2 krokach ditheringu
- fill · pasek XP
steps(1), 33 ms- 1 piksel na klatkę, bez wygładzania; 10 XP to 7 pikseli paska
- blink · zaznaczenie i nowy poziom
steps(6), 1200 ms- 6 klatek zapalone, 6 zgaszone, trzy razy
- wipe · zmiana ekranu
steps(8), 533 ms- pas szachownicy wysoki na 16 pikseli schodzi z góry w 8 krokach po 2 klatki
- Całe piksele
- każda pozycja, rozmiar i przesunięcie to wielokrotność piksela rysunku, czyli 4 pikseli wideo
- Takt 7,5 kl./s
- sprite’y zmieniają pozę co 4 klatki; pasek XP rośnie szybciej, 1 piksel na klatkę, bo liczy punkty
- Zmiana ekranu
- szachownica schodzi z góry w 8 krokach po 2 klatki, razem 16 klatek, zawsze ta sama
- Kamera w wersji marketingowej
- chmury i ogródek przesuwają się o 2 piksele co 8 i 16 klatek, a zakończenie wchodzi tą samą szachownicą
05 Ekrany
Sześć ekranów z jednej palety
Sześć ekranów zbudowanych z jednego zestawu części: panele z obrysem, paski XP, monety, kafle i zakładki. Projekt w siatce 221×480 pikseli rysunku, każdy piksel powiększony dokładnie cztery razy, co daje 884×1920. Pasek o szerokości 2 pikseli z prawej domyka 886, bo tej szerokości nie da się podzielić na całe piksele.
Przewiń w bok, żeby zobaczyć wszystkie sześć ekranów.
06 Wersja sklepowa i formaty
Sklep pokazuje aplikację, social pokazuje świat
Apple wymaga, żeby podgląd w sklepie pokazywał prawdziwy interfejs, dlatego powstały dwie odrębne wersje. Sklepowa to sam ekran aplikacji. Marketingowa to pikselowy świat: pasy nieba z ditheringu, chmury, ogródek ze wszystkimi etapami poziomki, telefon narysowany w tej samej siatce, monety, które wyskakują z ekranu, i okno dialogowe jak w grach RPG z migającą strzałką.
07 Co dostaje klient
Pliki gotowe do wgrania, z parametrami
Klient dostaje pliki gotowe do wgrania, z parametrami sprawdzonymi przez ffprobe. Wersja sklepowa w pełnej jakości jest za duża na stronę, dlatego tutaj odtwarzają się lekkie pętle bez dźwięku, w formacie WebM i MP4. Pikselowa grafika kompresuje się tak dobrze, że pętle zostają w pełnej rozdzielczości, więc żaden piksel nie jest skalowany.
| Plik | Do czego | Wymiary | Długość | Kodek | Bitrate | Rozmiar |
|---|---|---|---|---|---|---|
| poziomka-store-886x1920.mp4Wersja sklepowa | App Store Connect, podgląd aplikacji na iPhone | 886×1920, 30 kl./s | 20,0 s, 600 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 11,4 Mb/s | 27,2 MB |
| poziomka-social-1080x1920.mp4Wersja marketingowa 9:16 | Reels, TikTok i Shorts | 1080×1920, 30 kl./s | 20,0 s, 600 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 556 kb/s | 1,3 MB |
| poziomka-social-1080x1080.mp4Wersja marketingowa 1:1 | post w kanale | 1080×1080, 30 kl./s | 20,0 s, 600 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 381 kb/s | 930 KB |
| poziomka-social-1920x1080.mp4Wersja marketingowa 16:9 | YouTube, link w Google Play | 1920×1080, 30 kl./s | 20,0 s, 600 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 546 kb/s | 1,3 MB |
| Pętla | Wymiary | Długość | WebM, VP9 | MP4, H.264 |
|---|---|---|---|---|
| Nagłówek strony, 16:9poziomka-hero | 1920×1080 | 20,5 s | 1,4 MB | 951 KB |
| Nagłówek na telefonie, 9:16poziomka-hero-9x16 | 1080×1920 | 20,5 s | 1,4 MB | 946 KB |
| Kwadrat, 1:1poziomka-social-1x1 | 1080×1080 | 20,5 s | 985 KB | 684 KB |
| Wersja sklepowapoziomka-store | 884×1920 | 20,5 s | 629 KB | 551 KB |
| Kafel z pętląpoziomka-tile | 480×360 | 4,3 s | 27 KB | 33 KB |
- Ikona
- 1024×1024 PNG bez przezroczystości, 32×32 piksele rysunku powiększone 32 razy
- Storyboard
- tabela ujęć z klatkami i plansza klatek kluczowych w PNG
- Ekrany
- sześć ekranów interfejsu w 886×1920, bez strat
- Kroje bitmapowe
- Poziomka Pixel i Poziomka Mini, bitmapy z Jersey 10 i Tiny5, z tekstem licencji OFL
Licencje krojów: Jersey 10, OFL i Tiny5, OFL.
Twoja aplikacja też może mieć swój poziom
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