Przeciągnij pole w dowolną stronę albo użyj strzałek w rogu. Na planecie strzałki przechodzą do sąsiedniej, Enter otwiera jej kartę, a Home wraca na start.
Mirumee · zadanie rekrutacyjne · 2021
Star Wars: planety, które kandydaci mieli zakodować
Interfejs zaprojektowany jako zadanie rekrutacyjne dla Front-End Developerów w Mirumee: pole pikselowych planet przewijane w każdą stronę, etykieta po najechaniu, filtr populacji i terenów oraz karta planety. Pole na tym ekranie to jego działająca replika — na danych z SWAPI.
Przeciągnij pole. Najedź na planetę, a kliknięcie otworzy jej kartę.
- Mirumee, Wrocław
- 11.2021
- osoby w zespole
- 4
- tereny w filtrze
- 22
Interfejs serwisu był po angielsku — replika zostawia jego napisy bez zmian.
Zadanie
Projekt, który sprawdzał kandydatów
Mirumee rekrutowało Front-End Developerów. Ten interfejs był zadaniem rekrutacyjnym: kandydat dostawał projekt i miał go zakodować — z ruchem, stanami i filtrowaniem. Zaprojektowaliśmy go w listopadzie 2021.
Ruch w każdą stronę
Pole planet przesuwa się w obu osiach, a wskazówka „scroll everywhere” mówi o tym wprost. Planety ucięte krawędzią ekranu pokazują, że dalej jest więcej.
Etykieta po najechaniu
Nazwa planety cyjanem, pod nią pikselowe paski, a od planety biegnie do niej schodkowa linia z pikseli.
Filtr w panelu
Panel z prawej: zakres populacji na suwaku z dwoma uchwytami i 22 tereny do zaznaczenia. Przycisk FILTER zostawia w polu tylko pasujące planety.
Karta planety
Kliknięcie otwiera kartę: duża planeta, nazwa i pięć linijek danych. Pole za kartą przygasa.
Scroll everywhere
Ekran to tylko kadr większego pola
Na ekranie startowym planety są ucięte jego krawędzią — znak, że pole ciągnie się dalej. Wskazówka pod logo mówi to wprost: przewijaj w każdą stronę.
Kadr ma rozmiar ekranu z projektu: 1440 × 1025 px. W replice pole powtarza się co 3300 × 2400 px w obu osiach — granice kafli zaznacza przerywana linia.
Pixel art
Planety z pikseli
Dwanaście całych planet i trzy postacie, wycięte z ekranów projektu w ich własnej rozdzielczości — piksel po pikselu. Na stronie są tylko powiększone, bez wygładzania.
Pasy 39 × 39 pikseli
Drobne pasy 26 × 26 pikseli
Kratery 28 × 28 pikseli
Plamy 26 × 26 pikseli
Spękania 33 × 33 piksele
Postacie nad logo
Pasy, drobne pasy i kratery to ten sam rysunek w kilku kolorach — mapy jasności pokrywają się niemal piksel w piksel.
Grafiki: Paweł Janczarek, Mirumee
Najechanie i kliknięcie
Nazwa, paski i karta planety
Najechanie pokazuje nazwę planety z pikselowymi paskami i schodkową linią. Kliknięcie otwiera granatową kartę z danymi. Po lewej oryginał, po prawej replika — wybierz dowolną z 59 planet SWAPI.
- Nazwa Wersaliki Source Code Pro, cyjan #74FBFE.
- Paski Magenta i cyjan: kwadrat, krótki pasek i dłuższy, pod nimi pełna linia.
- Linia Schodki z pikseli od planety do etykiety.
Oryginał · Ekran z projektu, 2021
Replika · Karta planety
Tatooine
- Population:
- 200000
- Climates:
- arid
- Terrains:
- desert
- Orbital Period:
- 304
- Diameter:
- 10465
Wartości to surowe dane SWAPI. Makieta miała w piątej linijce „Temperate: 12500” — to średnica Alderaana w SWAPI, więc replika podpisuje ją „Diameter”.
Oryginał · Ekran z projektu, 2021
Filtr
Populacja i tereny, jeden przycisk
Ikona menu wysuwa panel z prawej. Suwak z dwoma uchwytami zawęża populację, 22 checkboxy wybierają tereny, a FILTER zamyka panel i zostawia w polu tylko pasujące planety. Sprawdź na replice.
Przeciągnij pole w dowolną stronę albo użyj strzałek w rogu. Na planecie strzałki przechodzą do sąsiedniej, Enter otwiera jej kartę, a Home wraca na start.
Widać 59 z 59 planet
- Etykiety terenów w panelu to dosłownie wartości z SWAPI, w kolejności z API.
- Wszystkie tereny zaznaczone = bez filtra terenów. Planety z terenami spoza listy (np. „gas giant”) widać tylko wtedy.
- Pełny zakres populacji przepuszcza też planety z populacją „unknown”, zawężony — już nie.
Dane planet w replice: SWAPI (swapi.dev), migawka z 28.10.2026.
Oryginał · Ekran z projektu, 2021
System
Pięć kolorów, jeden krój
Cały interfejs to kilka elementów, które wracają wszędzie: czerń pola, granat paneli, żółty do działania, cyjan i magenta do etykiet. Kolory to próbki z ekranów projektu.
Paleta
- Czerńtło pola
- Granatpanel filtrów i karta planety
- Żółtycheckboxy i przycisk FILTER
- Cyjannazwa planety, paski, linia
- Magentapaski etykiety
- Bieltekst i uchwyty suwaka
Próbki z plików JPEG ekranów. Logo ma własny żółty: #FFE820.
Krój
Source Code Pro
Monospace w całym interfejsie: nazwy planet, panel, karta, wskazówka. Tutaj — w każdym słowie prezentacji.
Kontrolki
Population
Kwadratowy żółty checkbox, suwak z wartościami w kroplach i żółty przycisk. Wszystkie działają.
Ikony
- Menu — wysuwa panel filtrów
- Zamknij — panel i kartę
- Scroll everywhere — wskazówka startowa
Etykieta
Nazwa, paski i linia schodkowa.
Powierzchnie
- Panel — granat przy krawędzi ekranu
- Karta — granat na środku
- Przygaszone pole za nimi
Nagranie
Cały przepływ w 17 sekund
Nagranie z projektu: wejście z logo, pole planet, panel filtrów, wynik filtra, etykieta i karta planety. Rozdziały przewijają do swojego momentu.
Ekrany
Sześć ekranów projektu
Ekran z projektu, 2021
Podsumowanie
Cztery stany, jedno pole
Ruch, najechanie, filtr i karta — cały interfejs mieści się na jednym ekranie pikselowych planet. Zaprojektowaliśmy go w czteroosobowym zespole Mirumee.
- Iwo RzepielaHead of Design
- Jakub NowakUX/UI — projekt interfejsu i doświadczenia
- Marcin KuligowskiUX/UI
- Paweł JanczarekGrafiki — planety i postacie w pixel arcie
Dane planet w replice: SWAPI (swapi.dev), migawka z 28.10.2026.
Star Wars i logo Star Wars są znakami towarowymi Lucasfilm Ltd. Projekt powstał jako zadanie rekrutacyjne Mirumee.