Wzornik, screenshotyWróć do portfolio

Screenshoty do sklepów

Odręczne adnotacje

Margines

Słówko z książki, serialu albo wyjazdu, zapisane razem ze zdaniem, w którym je spotkałeś. Sześć kadrów wygląda jak strona z zeszytu ucznia, który właśnie zrozumiał, jak się uczyć.

App Store, iPhone 6,9″, wersja polskaprzewiń w bok

01

kontekst zamiast listy

Słowa giną, bo tracą zdanie

Margines to aplikacja z fiszkami dla ludzi, którzy uczą się języka na własną rękę: czytają po angielsku, oglądają seriale z napisami, jadą na tydzień do Walencji. Każda fiszka zapamiętuje zdanie, z którego pochodzi słowo, a powtórki przychodzą wtedy, gdy słowo zaczyna uciekać.

Zespół potrzebował zestawu screenshotów na premierę w obu sklepach, po polsku i po angielsku, oraz drugiej wersji pierwszego kadru do testu. Kategoria jest zatłoczona, a większość konkurentów pokazuje to samo: kolorowe karty i licznik dni. Zestaw miał pokazać metodę, a nie tylko ekran.

Problem
słówka zapisane w zeszycie bez kontekstu wylatują z głowy po tygodniu
Obietnica
słowo razem ze zdaniem, powtórka w porę i własne skojarzenie
Ton
spokojny, rzeczowy, z przymrużeniem oka, jak notatki dobrego nauczyciela

02

tu nic nie jest ozdobą

Notatki na marginesie interfejsu

Każdy, kto uczył się języka, zna ten widok: kartka w kratkę, czerwony margines, słowo obwiedzione flamastrem i strzałka do dopisku. Zestaw wygląda jak strona z takiego zeszytu, tylko że notatki opisują aplikację.

Adnotacje mają jedną zasadę: każda wskazuje konkretny element interfejsu. Obwódka łapie zdanie z książki, zakreślacz liczbę kart na dziś, podwójne podkreślenie zaznaczone słowo. W kadrze są najwyżej trzy, a żadna nie zasłania tekstu w aplikacji.

Nagłówki są pisane ręcznie krojem Caveat, interfejs składa Lexend, krój projektowany z myślą o łatwości czytania. Kreski flamastra są rysowane z ustalonym ziarnem losowości, więc każdy eksport, także w nowym języku, wygląda tak samo.

Legenda flamastrów

  • Obwódkazdanie, które zostaje na karcie
  • Zakreślaczliczba kart i minut na dziś
  • Podwójna kreskasłowo zaznaczone w tekście
  • Taśmarysunek wyjęty z telefonu
  • Papier#FBF8F0
  • Kratka#CFE0EE
  • Atrament#1E2A5E
  • Flamaster#E2433B
  • Zakreślacz#FFE45E
  • Zieleń#2E9E5B
  • Ołówek#6B7080
  • Mięta#B8EBD0

Zażółć gęślą jaźń

Zażółć gęślą jaźń

Caveat w grubościach 500, 600 i 700 w nagłówkach i notatkach, Lexend w grubościach 400, 500 i 700 w interfejsie

  • papier w kratkę
  • obwódka flamastrem
  • zakreślacz
  • taśma i naklejki

03

czytaj od lewej

Metoda, wejście, nawyk

Kadry pierwszy, drugi i trzeci tłumaczą metodę: słowo ze zdaniem, powtórka w porę i własny rysunek. Czwarty pokazuje, jak słowa trafiają do aplikacji, piąty, ile to zajmuje czasu, szósty, z czego można się uczyć.

  1. Kadr 1: Fiszki, w których słówko ma zdanie

    widać w wynikach wyszukiwania

    Obietnica w jednym kadrze. Zdanie z książki obwiedzione flamastrem, a notatka na marginesie mówi, że zostaje na karcie.

  2. Kadr 2: Powtórka w porę, zanim zapomnisz

    widać w wynikach wyszukiwania

    Zakreślacz na 18 kartach i 6 minutach, a obok krzywa zapominania z kropką w miejscu, w którym przychodzi powtórka.

  3. Kadr 3: Narysuj skojarzenie, zostanie w głowie

    widać w wynikach wyszukiwania

    Rysunek z tyłu fiszki wychodzi z telefonu i ląduje na kartce, przyklejony taśmą. Strzałka prowadzi z powrotem na pusty ekran.

  4. Kadr 4: Dodaj słowo prosto z tekstu

    Jedyny kadr z telefonem na środku. Słowo podkreślone dwa razy, naklejka z plusem na przycisku dodawania.

  5. Kadr 5: Dzienna porcja na sześć minut

    Wynik z ekranu postępu obwiedziony na zielono, a na marginesie ołówkowa wersja tego samego wykresu.

  6. Kadr 6: Talie z książek, seriali i podróży

    Trzy talie wysuwają się zza telefonu jak karty z pudełka: książka, serial i podróż, każda z własnym rysunkiem.

W wynikach wyszukiwania widać tylko trzy pierwsze kadry. Razem odpowiadają na pytanie, czym Margines różni się od innych fiszek: pamięta zdanie, pilnuje terminu powtórki i zostawia miejsce na twoje skojarzenie.

04

czytelne przy 100 px

Trzy kadry w miniaturze

Neutralna makieta wyników wyszukiwania w obu sklepach. W miniaturze ręczne pismo dalej czyta się jako pierwsze, a czerwona obwódka i żółty zakreślacz od razu mówią, na co patrzeć.

05

przełącz i porównaj

Polski i angielski, oba sklepy

Przełącznik podmienia cały zestaw: język i sklep. W wersji angielskiej uczeń jest Anglikiem, który uczy się polskiego, więc na kartach są słowa takie jak spóźnić się i szczęśliwa, z polskimi znakami w pełnej krasie.

  • Fiszka ze słowem reluctant i zdaniem z książki, które ktoś obwiódł czerwonym flamastrem. Notatka na marginesie wskazuje zdanie.
  • Ekran Dziś z powtórką 18 kart w około 6 minut, zakreśloną na żółto. Obok odręczna krzywa zapominania wskazuje jutrzejszą powtórkę.
  • Tył fiszki ze znaczeniem i tłumaczeniem zdania. Rysunek latarni z karty wyjęty z telefonu i przyklejony taśmą do kartki w kratkę.
  • Wklejony akapit z książki z zaznaczonym słowem squinting, podkreślonym dwa razy flamastrem, i okienkiem dodawania fiszki z naklejką plus.
  • Ekran postępu: 412 zapamiętanych słówek i wykres minut z tygodnia. Średnie 6 minut obwiedzione na zielono, obok ołówkowy wykres.
  • Lista talii: książka po angielsku, serial i wyjazd do Walencji po hiszpańsku. Trzy papierowe karty z rysunkami wychodzą z telefonu.

06

jedna zmiana naraz

Metoda czy twój zeszyt

Wariant B zmienia tylko pierwszy kadr, w obu sklepach i obu językach. W App Store można go puścić jako test strony produktu, w Google Play jako eksperyment na karcie aplikacji.

Fiszka ze słowem reluctant i zdaniem z książki, które ktoś obwiódł czerwonym flamastrem. Notatka na marginesie wskazuje zdanie.
AFiszki, w których słówko ma zdanie
Kartka z zeszytu z odręczną listą hiszpańskich słówek, a strzałka prowadzi do telefonu, który robi z niej dziewięć fiszek.
BFiszki z twoich własnych notatek

Hipoteza. Ludzie, którzy już prowadzą zeszyt ze słówkami, mocniej zareagują na obietnicę fiszek z ich własnych notatek niż na obietnicę kontekstu. Wariant B powinien dać więcej instalacji w tej grupie.

Fiszka ze słowem reluctant i zdaniem z książki, które ktoś obwiódł czerwonym flamastrem. Notatka na marginesie wskazuje zdanie.
AGoogle Play
Kartka z zeszytu z odręczną listą hiszpańskich słówek, a strzałka prowadzi do telefonu, który robi z niej dziewięć fiszek.
BGoogle Play

07

środek zostaje wolny

Margines bez telefonu

Papier w kratkę, odręczny napis Margines podkreślony na czerwono i fiszka z rysunkiem latarni, do której prowadzi strzałka.
Wersja polska, 1024×500 px
Graph paper, the name Margines handwritten and underlined in red, and a flashcard with a tram doodle that an arrow points to.
Wersja angielska, 1024×500 px

Feature graphic do Google Play: ta sama kratka, nazwa napisana ręcznie i podkreślona flamastrem, a obok fiszka z rysunkiem przyklejona taśmą. Wszystko ważne mieści się w środkowych 80 procentach obrazu.

Ikona Margines jako pełny kwadrat, tak jak trafia do sklepu
plik źródłowy
Ikona Margines z zaokrągleniem, jakie nakłada iPhone
maska iPhone'a
Ikona Margines z zaokrągleniem, jakie nakłada Google Play
maska Google Play

Ikona to fiszka z czerwonym marginesem i gwiazdką narysowaną atramentem, jak w zeszycie przy słowie do zapamiętania. Do App Store kwadrat 1024 px bez przezroczystości, do Google Play 512 px. Zaokrąglenie dokłada system, a w paczce są też osobne warstwy do Icon Composer.

08

sprawdzone walidatorem

Paczka gotowa do wysłania

Klient dostaje jedną paczkę ZIP z folderami według sklepu i języka oraz plik z nagłówkami i tekstami alternatywnymi. Pliki są w formacie PNG, bo papier, kreski i tekst kompresują się w nim bez strat i bez rozmytych krawędzi. Każdy plik przeszedł walidator: wymiary, brak kanału alfa, RGB, rozmiar i liczba sztuk w zestawie.

Specyfikacje obu sklepów sprawdzone 7 października 2026.

margines-aso.zip10,4 MB
  • App Store, iPhone 6,9″PNG12 plików5,2 MB
    • margines-appstore-pl-01.png1320×2868 px430 KB
    • margines-appstore-pl-02.png1320×2868 px458 KB
    • margines-appstore-pl-03.png1320×2868 px511 KB
    • margines-appstore-pl-04.png1320×2868 px343 KB
    • margines-appstore-pl-05.png1320×2868 px448 KB
    • margines-appstore-pl-06.png1320×2868 px497 KB
    • margines-appstore-en-01.png1320×2868 px440 KB
    • margines-appstore-en-02.png1320×2868 px446 KB
    • margines-appstore-en-03.png1320×2868 px467 KB
    • margines-appstore-en-04.png1320×2868 px348 KB
    • margines-appstore-en-05.png1320×2868 px431 KB
    • margines-appstore-en-06.png1320×2868 px484 KB
  • Google Play, telefonPNG12 plików3,5 MB
    • margines-play-pl-01.png1080×1920 px285 KB
    • margines-play-pl-02.png1080×1920 px307 KB
    • margines-play-pl-03.png1080×1920 px347 KB
    • margines-play-pl-04.png1080×1920 px234 KB
    • margines-play-pl-05.png1080×1920 px292 KB
    • margines-play-pl-06.png1080×1920 px337 KB
    • margines-play-en-01.png1080×1920 px284 KB
    • margines-play-en-02.png1080×1920 px302 KB
    • margines-play-en-03.png1080×1920 px319 KB
    • margines-play-en-04.png1080×1920 px241 KB
    • margines-play-en-05.png1080×1920 px276 KB
    • margines-play-en-06.png1080×1920 px326 KB
  • Wariant B pierwszego screenshotuPNG4 pliki1,4 MB
    • margines-appstore-pl-01b.png1320×2868 px436 KB
    • margines-play-pl-01b.png1080×1920 px294 KB
    • margines-appstore-en-01b.png1320×2868 px434 KB
    • margines-play-en-01b.png1080×1920 px292 KB
  • Google Play, feature graphicPNG2 pliki181 KB
    • margines-feature-pl.png1024×500 px90 KB
    • margines-feature-en.png1024×500 px91 KB
  • IkonyPNG, SVG5 plików140 KB
    • margines-icon-appstore-1024.png1024×1024 px43 KB
    • margines-icon-play-512.png512×512 px35 KB
    • margines-icon.svg4,9 KB
    • margines-icon-background.png1024×1024 px18 KB
    • margines-icon-foreground.png1024×1024 px39 KB
  • Teksty nagłówkówCSV, JSON3 pliki19 KB
    • margines-teksty.csv5,7 KB
    • pl.json6,5 KB
    • en.json6,3 KB

09

tłumaczysz plik, nie obrazki

Nowy język to jeden nowy plik

Nagłówki, notatki na marginesie, teksty alternatywne i wszystkie dane w interfejsie leżą w jednym pliku na język. Adnotacje same znajdują swoje miejsce: obwódka mierzy zdanie po złożeniu tekstu, więc dłuższe zdanie w innym języku dostaje większe kółko. Kolejny język to tłumaczenie jednego pliku i ponowny eksport.

copy/pl.json
{
  "lang": "pl",
  "slots": [
    { "headline": "Fiszki, w których słówko ma zdanie" },
    { "headline": "Powtórka w porę, zanim zapomnisz" },
    { "headline": "Narysuj skojarzenie, zostanie w głowie" },
    …
  ],
  "variantB": { "headline": "Fiszki z twoich własnych notatek" }
}
copy/en.json
{
  "lang": "en",
  "slots": [
    { "headline": "Flashcards with the whole sentence" },
    { "headline": "Review right before you forget" },
    { "headline": "Draw a hint, make it stick" },
    …
  ],
  "variantB": { "headline": "Flashcards from your own notes" }
}

Twoja aplikacja też ma metodę, którą warto pokazać

Napisz, co robi twoja aplikacja i do kogo trafia. Zaproponuję historię na sześć kadrów, zaprojektuję zestaw do obu sklepów i przygotuję pliki, które przejdą walidację za pierwszym razem.

Zobacz ofertę dla klientów