Wzornik, app preview. A2, kinetyczna typografia
Sztanga
Podgląd dziennika treningu siłowego: wersja do App Store, trzy formaty na social media i lekkie pętle na stronę. Liczby są tu bohaterem, a każde cięcie wypada na uderzenie 120 BPM.
- Wersja sklepowa
- 22 s, 886×1920, 30 kl./s
- Rytm
- 120 BPM, cięcie co 15 klatek
- Formaty social
- 9:16, 1:1 i 16:9
- Dźwięk
- brak, rytm niesie sam obraz
01 Klient i zadanie
Liczby czytelne z ławki
Sztanga to dziennik treningu siłowego dla osób, które ćwiczą według planu procentowego. Między ciężkimi seriami nikt nie czyta drobnego druku, nie liczy talerzy w pamięci i nie pamięta, ile podniósł tydzień temu. Aplikacja pokazuje to wszystko liczbami, które widać z ławki.
Zadanie: podgląd do App Store, który w pierwszej klatce pokaże ciężar na całą szerokość ekranu, trzy formaty na kampanię w mediach społecznościowych i pętle na stronę. Bez dźwięku, ale z rytmem, który czuć jak muzykę na siłowni.
- Użytkownik
- średniozaawansowani, trzy lub cztery treningi w tygodniu, plan procentowy
- Dane z treningu
- tydzień 3 z 4, dzień B: przysiad 5 × 3 po 140 kg, wyciskanie 5 × 5 po 92,5 kg, martwy ciąg 1 × 2 po 185 kg
- Trzy funkcje
- plan dnia z talerzami na stronę, minutnik przerwy czytelny z ławki, rekordy z szacowanym 1RM
- Ton
- krótko, głośno i konkretnie, jak trener przy sztandze
02 Kierunek
Liczba zamiast ikony, cięcie bez przenikania
Na treningu liczą się trzy rzeczy: ciężar, seria i czas przerwy. Dlatego interfejs jest typograficzny. Ciężar zajmuje całą szerokość ekranu, a krój Anybody zmienia szerokość znaków od 50 do 150, więc ta sama liczba może być wąska i wysoka albo szeroka i niska, zawsze od krawędzi do krawędzi.
Ruch idzie za muzyką z siłowni: 120 uderzeń na minutę, cięcie co 15 klatek, żadnych przenikań i sprężyn, które się kołyszą. Kolor jest jeden: pomarańcz na czerni. Gdy pada rekord, cały ekran odwraca się na jedno uderzenie.
- Czerń
- Jeden pomarańcz
- Oś szerokości
- 120 BPM
Anybody, jeden krój i oś szerokości
140 KGszerokość 50: liczby na ekranie serii i minutnik
140 KGszerokość 100: nazwy ćwiczeń i przyciski
140 KGszerokość 150: KG, słowa w wersji marketingowej
PRZYSIAD 140 KG900, liczby, nazwy, przyciski
Martwy ciąg, rekord800, etykiety mocne
TYDZIEŃ 3 Z 4 · DZIEŃ B700, etykiety, szerokość 75
Plan dnia i talerze policzone na stronę.600, zdania w wideo
Zażółć gęślą jaźń, 92,5 kg500, tekst na stronie
Czerń, biel i jeden pomarańcz
- Czerń#000000tło każdego ekranu, tekst na pomarańczu
- Grafit#141414przyciski drugorzędne, podniesione pola
- Linia#2A2A2Aseparatory, puste znaczniki serii
- Popiół#8C8C8Cetykiety i tekst drugorzędny
- Biel#FFFFFFliczby, nazwy ćwiczeń, tekst główny
- Sygnał#FF5A00jedyny kolor: przycisk, rekord, odwrócenia
Kontrast na czerni: biel 21,00:1, pomarańcz 6,71:1, popiół 6,25:1. Czarny tekst na pomarańczu ma tyle samo co pomarańcz na czerni, więc odwrócony ekran rekordu jest równie czytelny.
03 Storyboard
22 sekundy, 44 uderzenia
Sześć ujęć w 660 klatkach, czyli 44 uderzenia po 15 klatek. Hak to 140 kg na pełnym ekranie od pierwszej klatki. Potem plan z talerzami, zaliczona seria z przerwą, przyspieszony minutnik, rekord i ekran startowy.
- Każde ujęcie zaczyna się na wielokrotności 15 klatek, mniejsze wejścia wypadają na pół uderzenia.
- Trzy napisy, każdy najwyżej sześć słów i co najmniej dwie sekundy na ekranie, poza górnymi 120 i dolnymi 160 pikselami.
- Plakat sklepowy to klatka 500: pomarańczowy ekran rekordu z wynikiem 185 × 2. Domyślna klatka z piątej sekundy pokazuje talerze na stronę.
| Ujęcie | Klatki | Czas | Co się dzieje | Napis |
|---|---|---|---|---|
| 1. Hak | 0 do 59 | 0,0 s do 2,0 s | Od pierwszej klatki 140 kg na całą szerokość ekranu. Na pierwszym uderzeniu liczba rozciąga się do pełnej szerokości, tuż po nim wbijają się KG i SERIA 3/5, na drugim liczba wraca do szerokości 75. | „Liczby, które widać z ławki” klatki 4 do 72 |
| 2. Plan i talerze | 60 do 179 | 2,0 s do 6,0 s | Plan dnia B: trzy boje wchodzą po jednym na uderzenie. Cięcie na talerze: 25, 25 i 10 kg na stronę, klocek po klocku co pół uderzenia. | bez napisu |
| 3. Seria zaliczona | 180 do 299 | 6,0 s do 10,0 s | Stuknięcie w ZALICZONA odwraca przycisk na jedno uderzenie. Cięcie na przerwę: minutnik 3:00, cyfry tną się co sekundę. | „Przerwa liczona za ciebie” klatki 190 do 252 |
| 4. Przyspieszenie | 300 do 419 | 10,0 s do 14,0 s | Minutnik w przyspieszeniu schodzi do 0:00. Seria 4/5, potem ekran odwraca się na pomarańcz: SERIA 5/5, ostatnia. | bez napisu |
| 5. Rekord | 420 do 569 | 14,0 s do 19,0 s | Martwy ciąg 185 kg zaliczony. Ekran odwraca się na pomarańcz, REKORD wbija się litera po literze, potem 185 × 2 i 1RM ≈ 197 KG. Na koniec historia ośmiu tygodni. | „Nowy rekord? Sztanga zauważy.” klatki 450 do 516 |
| 6. Zakończenie | 570 do 659 | 19,0 s do 22,0 s | Ekran startowy: SZTANGA ściska się z szerokości 150 do 100, ikona wchodzi na uderzeniu, pod spodem kategoria. | bez napisu |
04 Zasady ruchu
Ruch ląduje na uderzeniu
Każdy ruch ma nazwę i wartość w tokenach projektu. Te same liczby napędzają wideo i metronom poniżej.
slam cubic-bezier(0.9, 0, 0.1, 1), 267 ms
liniowo przez całe uderzenie, 500 ms
Oba słupki startują na uderzeniu. Slam trzyma się przez chwilę i dobija w 8 klatek, więc stoi, zanim padnie następne uderzenie. Liniowy jedzie równo przez całe uderzenie i nigdy nie ląduje, dlatego w Sztandze nie ma liniowych wejść.
- beat · siatka rytmu dla każdego cięcia i wejścia
steps(1), 500 ms- 120 BPM przy 30 kl./s, czyli cięcie co 15 klatek; każde ujęcie zaczyna się na wielokrotności 15
- slam · wejście słów i liczb
cubic-bezier(0.9, 0, 0.1, 1), 267 ms- 8 klatek, ze skali 140% do 100%, pojawia się od razu, bez przenikania
- stretch · oś szerokości kroju
cubic-bezier(0.16, 1, 0.3, 1), 400 ms- szerokość od 50 do 150 w 12 klatek, zawsze na uderzeniu; rozmiar dopasowuje się tak, żeby liczba trzymała szerokość ekranu
- punch · uderzenie kamery w wersji marketingowej
cubic-bezier(0.2, 0.9, 0.1, 1), 133 ms- skala od 1 do 1,12 w 4 klatki i powrót w 10, co czwarte uderzenie
- invert · odwrócenie kolorów na akcentach
steps(1), 500 ms- czerń i pomarańcz zamieniają się twardym cięciem na dokładnie 15 klatek
- count · cyfry minutnika
steps(1), 1000 ms- każda cyfra tnie się bez przejścia; w przyspieszeniu minutnik skacze o 2 do 3 sekund na klatkę
- Wszystko na uderzeniu
- cięcia co 15 klatek, drobne wejścia co 7 albo 8 klatek
- Bez przenikań
- ekran zmienia się twardym cięciem, napis wbija się bez zanikania
- Oś szerokości
- liczba zmienia proporcje, ale zawsze trzyma szerokość ekranu
- Kamera
- uderzenie o 12% co czwarte uderzenie, telefon wchodzi i znika cięciem
05 Ekrany
Sześć ekranów, jeden krój
Sześć ekranów z jednego mini design systemu: sześć kolorów, jeden krój w kilku szerokościach, odstępy co 8 pikseli i przyciski o wysokości 72 pikseli, w które trafia się spoconym palcem. Projekt w kanwie 443×960, render w skali 2, czyli dokładnie 886×1920.
06 Wersja sklepowa i formaty
Sklep pokazuje aplikację, social gra głośno
Apple wymaga, żeby podgląd w sklepie pokazywał prawdziwy interfejs, więc wersja sklepowa to sam ekran aplikacji. Wersja marketingowa ma ogromne słowa poza telefonem, a telefon wchodzi i znika cięciem na uderzenie.
07 Co dostaje klient
Pliki gotowe do wgrania
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.
| Plik | Do czego | Wymiary | Długość | Kodek | Bitrate | Rozmiar |
|---|---|---|---|---|---|---|
| sztanga-store-886x1920.mp4Wersja sklepowa | App Store Connect, podgląd aplikacji na iPhone | 886×1920, 30 kl./s | 22,0 s, 660 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 11,4 Mb/s | 29,9 MB |
| sztanga-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 | 1,0 Mb/s | 2,4 MB |
| sztanga-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 | 872 kb/s | 2,1 MB |
| sztanga-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 | 1,1 Mb/s | 2,6 MB |
| Pętla | Wymiary | Długość | WebM, VP9 | MP4, H.264 |
|---|---|---|---|---|
| Nagłówek strony, 16:9sztanga-hero | 1280×720 | 20,5 s | 1,1 MB | 973 KB |
| Nagłówek na telefonie, 9:16sztanga-hero-9x16 | 540×960 | 20,5 s | 669 KB | 652 KB |
| Kwadrat, 1:1sztanga-social-1x1 | 720×720 | 20,5 s | 871 KB | 777 KB |
| Wersja sklepowasztanga-store | 442×960 | 22,5 s | 433 KB | 434 KB |
| Kafel z pętląsztanga-tile | 480×600 | 4,0 s | 70 KB | 62 KB |
- Ikona
- 1024×1024 PNG bez przezroczystości i podgląd z zaokrągleniem
- Storyboard
- tabela ujęć z klatkami i plansza klatek kluczowych z linijką uderzeń
- Ekrany
- sześć ekranów interfejsu w 886×1920
- Projekt ruchu
- siatka rytmu, krzywe i czasy zapisane w tokenach, opisane jak tutaj
Twoja aplikacja ma liczby, które warto pokazać?
Napisz, co robi Twoja aplikacja i kto jej używa. Zaproponuję storyboard, rytm i styl ruchu, a potem dowiozę komplet plików do App Store, Google Play i mediów społecznościowych.
Zobacz ofertę dla klientów