Wzornik, screenshotyWróć do portfolio

Screenshoty do sklepówMocne gradienty z przechylonymi urządzeniami

Szyld

Chleb z piekarni, pomidory z warzywniaka, tulipany od kwiaciarki. Jedno zamówienie, odbiór po drodze z pracy. Sześć kadrów, które mają tyle energii co ulica o 17:30.

App Store, iPhone 6,9″, wersja polska. Przewiń w bok.

01Klient i zadanie

Sklepy z ulicy kontra dostawa pod drzwi

Szyld to aplikacja dla małych sklepów z sąsiedztwa: piekarni, warzywniaka, sklepu żelaznego, kwiaciarni i księgarni. Klient składa jedno zamówienie w kilku sklepach naraz, wybiera godzinę i odbiera wszystko po drodze do domu, pokazując kod przy ladzie.

Zespół startuje na poznańskich Jeżycach i potrzebował zestawu screenshotów na premierę w obu sklepach, po polsku i po angielsku, plus drugiej wersji pierwszego kadru do testu. Konkurencją są wielkie platformy z dostawą, więc zestaw musiał być głośniejszy od nich, a nie grzeczniejszy.

Problem
ludzie chcą kupować lokalnie, ale nie chcą stać w kolejce ani trafić na pustą półkę
Obietnica
jeden koszyk w kilku sklepach i odbiór o wybranej godzinie
Ton
szybki, uliczny, pewny siebie, bez rabatów i wykrzykników

02Kierunek

Ruch, perspektywa i dwa gradienty

Zakupy po drodze to ruch: z pracy, rowerem, między ladami. Dlatego telefony nie stoją grzecznie na środku. Przechylają się w trzech wymiarach, wychodzą poza kadr, a etykiety sklepów wylatują z ekranu jak z witryny.

Nagłówki są większe od telefonów, złożone szerokim, ciężkim groteskiem Mona Sans w szerokości 125. W miniaturze wyników wyszukiwania czyta się je pierwsze, zanim ktokolwiek przyjrzy się interfejsowi.

Tło to dwa gradienty z ziarnem, które naprzemiennie biegną przez zestaw: butelkowa zieleń w limonkę i grejpfrut w limonkę. Żadnego fioletu ani niebieskiego. Ziarno nadaje kolorom fakturę druku i przy okazji usuwa pasy na przejściach.

  • Butelka w Limonkę#0B4A3D w #D5F25C, kadry 1, 3 i 5
  • Grejpfrut w Limonkę#FF5A36 w #D5F25C, kadry 2, 4 i 6
  • Butelka#0B4A3D
  • Limonka#D5F25C
  • Grejpfrut#FF5A36
  • Mleko#F7F4EA
  • Smoła#0E1E1A
  • Szron#DCE3DF
  • Łupek#5E6B66

Żółty szyld

Mona Sans: szerokość 125 i grubość 800 lub 900 w nagłówkach, szerokość 100 i grubość 400, 600 i 700 w interfejsie

  • perspektywa 3D
  • telefon poza kadrem
  • ziarno
  • nagłówek większy od telefonu

03Historia sekwencji

Od zamówienia do sobotniego nawyku

Kadry pierwszy, drugi i trzeci mówią, czym jest Szyld. Czwarty i piąty zdejmują dwie obawy: czy zdążę i czy postoję w kolejce. Szósty zamienia jednorazowe zakupy w zwyczaj.

  1. widać w wynikach

    Kadr 1: Zamów z ulicy, odbierz po drodze

    Obietnica w jednym zdaniu. Trzy sklepy na jednej trasie, a telefon wjeżdża w kadr z prawej, jakby ktoś szedł z nim ulicą.

  2. widać w wynikach

    Kadr 2: Sklepy z twojej okolicy na mapie

    Telefon leży jak na stole, a pinezki sklepów wstają nad mapą. Widać, że to sklepy z sąsiedztwa, a nie magazyn.

  3. widać w wynikach

    Kadr 3: Jeden koszyk, trzy sklepy, jedna trasa

    Jeden koszyk, trzy sklepy. Etykiety sklepów lecą jedna pod drugą w stronę koszyka, a nagłówek stoi w prawym górnym rogu.

  4. Kadr 4: Godzina odbioru, jaka ci pasuje

    Godzina odbioru, którą wybiera klient. Nagłówek biegnie pionowo wzdłuż krawędzi, a ogromne 17:30 w konturze stoi za telefonem jak cyfry na zegarze dworcowym.

  5. Kadr 5: Pokaż kod, zakupy w ręku

    Kod przy ladzie. Karta z kodem wysuwa się przed telefon, a na ekranie zostaje po niej puste miejsce.

  6. Kadr 6: Sobotni chleb zamówi się sam

    Stałe zamówienie na sobotę. Telefon wyrasta z dolnej krawędzi, za nim słowo SOBOTA na całą szerokość.

W wynikach wyszukiwania widać tylko trzy pierwsze kadry. Razem odpowiadają na pytanie, co to za aplikacja: zamawiasz z ulicy, widzisz sklepy z okolicy na mapie i łączysz kilka sklepów w jedną trasę.

04W wynikach wyszukiwania

Trzy kadry w miniaturze

Neutralna makieta wyników wyszukiwania w obu sklepach. Przy szerokości około 100 pikseli nagłówek dalej czyta się jako pierwszy, a ciemny i jasny gradient na zmianę odróżniają kadry od siebie.

05Cały zestaw

Polski i angielski, oba sklepy

Przełącznik podmienia cały zestaw: język i sklep. W App Store telefon jest narysowany razem z obudową, w Google Play ekran przechyla się bez obudowy, bo tak zaleca Google.

  • Ekran gotowych zamówień w aplikacji Szyld: piekarnia, warzywniak i kwiaciarnia na jednej trasie po Jeżycach, telefon przechylony.
  • Mapa Jeżyc z pinezkami sklepów, które unoszą się nad ekranem: piekarnia, warzywniak, kwiaciarnia, sklep żelazny i księgarnia.
  • Koszyk podzielony na trzy sklepy z kolejnością odbioru i trasą 1,1 km. Nad telefonem etykiety trzech sklepów.
  • Wybór godziny odbioru w każdym sklepie, zaznaczona 17:30. Za telefonem ogromne cyfry 17:30 w konturze.
  • Kod odbioru SZ 4827 z rysowanym wzorem do zeskanowania i notatką dla sprzedawcy. Karta z kodem wysuwa się przed telefon.
  • Stałe zamówienie na sobotę: chleb żytni i sześć kajzerek co tydzień o 8:30, z opcją pominięcia. Za telefonem napis SOBOTA.

06Wariant A i B

Trasa czy pewność, że towar będzie

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.

Ekran gotowych zamówień w aplikacji Szyld: piekarnia, warzywniak i kwiaciarnia na jednej trasie po Jeżycach, telefon przechylony.
AZamów z ulicy, odbierz po drodze
Strona piekarni z dzisiejszym towarem i liczbą sztuk na półce. Odznaka z godziną odłożenia do 19:00 wychodzi z ekranu.
BSklep odłoży, ty odbierzesz

Hipoteza. Obawa, że świeży chleb albo kwiaty się wyprzedadzą, przekonuje mocniej niż wygoda jednej trasy. Obietnica odłożenia towaru powinna dać więcej instalacji niż obietnica odbioru po drodze.

Ekran gotowych zamówień w aplikacji Szyld: piekarnia, warzywniak i kwiaciarnia na jednej trasie po Jeżycach, telefon przechylony.
AGoogle Play
Strona piekarni z dzisiejszym towarem i liczbą sztuk na półce. Odznaka z godziną odłożenia do 19:00 wychodzi z ekranu.
BGoogle Play

07Feature graphic i ikony

Szyld bez telefonu

Zielono-limonkowy gradient z ziarnem, nazwa Szyld, hasło o zamawianiu z ulicy i trzy etykiety sklepów w perspektywie.
Wersja polska, 1024×500 px
Green to lime gradient with grain, the name Szyld, the line about ordering local and three shop tags in perspective.
Wersja angielska, 1024×500 px

Feature graphic do Google Play: ten sam gradient z ziarnem, nazwa i hasło po lewej, trzy etykiety sklepów w perspektywie po prawej. Wszystko ważne mieści się w środkowych 80 procentach, a środek obrazu zostaje wolny pod przycisk odtwarzania.

Ikona Szyld jako pełny kwadrat, tak jak trafia do sklepu
Plik źródłowy, pełny kwadrat
Ikona Szyld z zaokrągleniem, jakie nakłada iPhone
Po masce na iPhonie
Ikona Szyld z zaokrągleniem, jakie nakłada Google Play
Po masce w Google Play

Ikona to szyld nad drzwiami: limonkowa tablica na wysięgniku z wyciętą torbą na zakupy. 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.

08Co dostaje klient

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 JPEG, bo ziarno w formacie PNG ważyłoby kilka razy więcej. 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.

szyld-aso.zip13,1 MB
  • App Store, iPhone 6,9″JPEG12 plików6,9 MB
    • szyld-appstore-pl-01.jpg1320×2868 px527 KB
    • szyld-appstore-pl-02.jpg1320×2868 px592 KB
    • szyld-appstore-pl-03.jpg1320×2868 px580 KB
    • szyld-appstore-pl-04.jpg1320×2868 px688 KB
    • szyld-appstore-pl-05.jpg1320×2868 px499 KB
    • szyld-appstore-pl-06.jpg1320×2868 px665 KB
    • szyld-appstore-en-01.jpg1320×2868 px528 KB
    • szyld-appstore-en-02.jpg1320×2868 px587 KB
    • szyld-appstore-en-03.jpg1320×2868 px567 KB
    • szyld-appstore-en-04.jpg1320×2868 px679 KB
    • szyld-appstore-en-05.jpg1320×2868 px502 KB
    • szyld-appstore-en-06.jpg1320×2868 px668 KB
  • Google Play, telefonJPEG12 plików4,2 MB
    • szyld-play-pl-01.jpg1080×1920 px320 KB
    • szyld-play-pl-02.jpg1080×1920 px373 KB
    • szyld-play-pl-03.jpg1080×1920 px361 KB
    • szyld-play-pl-04.jpg1080×1920 px417 KB
    • szyld-play-pl-05.jpg1080×1920 px288 KB
    • szyld-play-pl-06.jpg1080×1920 px399 KB
    • szyld-play-en-01.jpg1080×1920 px320 KB
    • szyld-play-en-02.jpg1080×1920 px370 KB
    • szyld-play-en-03.jpg1080×1920 px351 KB
    • szyld-play-en-04.jpg1080×1920 px406 KB
    • szyld-play-en-05.jpg1080×1920 px291 KB
    • szyld-play-en-06.jpg1080×1920 px407 KB
  • Wariant B pierwszego screenshotuJPEG4 pliki1,7 MB
    • szyld-appstore-pl-01b.jpg1320×2868 px546 KB
    • szyld-play-pl-01b.jpg1080×1920 px337 KB
    • szyld-appstore-en-01b.jpg1320×2868 px537 KB
    • szyld-play-en-01b.jpg1080×1920 px331 KB
  • Google Play, feature graphicJPEG2 pliki204 KB
    • szyld-feature-pl.jpg1024×500 px103 KB
    • szyld-feature-en.jpg1024×500 px101 KB
  • IkonyPNG, SVG5 plików82 KB
    • szyld-icon-appstore-1024.png1024×1024 px26 KB
    • szyld-icon-play-512.png512×512 px18 KB
    • szyld-icon.svg1,1 KB
    • szyld-icon-background.png1024×1024 px21 KB
    • szyld-icon-foreground.png1024×1024 px16 KB
  • Teksty nagłówkówCSV, JSON3 pliki21 KB
    • szyld-teksty.csv5,3 KB
    • pl.json8,0 KB
    • en.json7,8 KB

09Kolejne języki

Nowy język to jeden nowy plik

Nagłówki, teksty alternatywne i wszystkie dane w interfejsie, od nazw produktów po godziny odbioru, leżą w jednym pliku na język. Wersja angielska ma ten sam świat, ale pisany od nowa: ceny z kropką, godziny w formacie 5:30 pm, kajzerka jako kaiser roll. Kolejny język to tłumaczenie jednego pliku i ponowny eksport.

copy/pl.json
{
  "lang": "pl",
  "slots": [
    { "headline": "Zamów z ulicy, odbierz po drodze" },
    { "headline": "Sklepy z twojej okolicy na mapie" },
    { "headline": "Jeden koszyk, trzy sklepy, jedna trasa" },
    …
  ],
  "variantB": { "headline": "Sklep odłoży, ty odbierzesz" }
}
copy/en.json
{
  "lang": "en",
  "slots": [
    { "headline": "Order local, collect on your way" },
    { "headline": "Your street's shops on one map" },
    { "headline": "One basket, three shops, one route" },
    …
  ],
  "variantB": { "headline": "Kept behind the counter for you" }
}

Twoja aplikacja też zasługuje na głośny start

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