Ręcznie przerysować ikony mapy / domu (SVG, gotowe do Mapbox)

1. Ogólny opis zadania

Należy ręcznie przerysować (manual redraw - not auto-traced) ikony (dom + pinezka) na podstawie dostarczonych referencji PNG.

Referencje są dostarczane tylko jako wizualny punkt odniesienia.
Finalne pliki muszą być czystymi, lekkimi SVG, zoptymalizowanymi do użycia w aplikacji webowej z interaktywną mapą (Mapbox).

⚠️ To NIE:

• branding

• redesign

• ilustracja

• artystyczna interpretacja

To precyzyjne wektorowe przerysowanie dla UI produktu.

2. Zakres prac (OBOWIĄZKOWO)

2.1 Ikony pinezki (2 stany)

Należy stworzyć dwa stany tej samej ikony:

1. Aktywna pinezka

2. Nieaktywna pinezka

Wymagania:

• Ta sama forma

• Ta sama geometria

• Różnica tylko przez muted treatment:

  • kolor

  • kontrast

  • nasycenie

• Nieaktywna pinezka ma wyglądać celowo i zgodnie z marką, a nie jak domyślnie “disabled”

2.2 Ikona domu (2 stany)

Należy stworzyć dwa stany ikony domu, zgodne z logiką pinezek:

1. Aktywna ikona domu

2. Nieaktywna ikona domu (muted)

Wymagania:

• Ta sama geometria

• Ta sama forma

• Bez zmian struktury ikony

• Nieaktywny stan osiągany wyłącznie przez kolor / kontrast

• Styl i logika muszą odpowiadać nieaktywnej pinezce

❗ To NIE redesign, a wariacja stanu.

3. Wymagania dotyczące wektora (KRYTYCZNIE WAŻNE)

3.1 Geometria

• Ręczne rysowanie (Pen Tool)

• Minimalna liczba punktów kotwiczących

• Czyste krzywe Béziera

• Spójne promienie

• Starannie kontrolowane formy

❌ Zabronione:

• Image trace

• Auto-trace

• Expand appearance z efektów

3.2 Struktura SVG

SVG muszą być:

• Lekkie

• Niska liczba ścieżek

• Bez:

  • masek

  • ścieżek przycinających

  • filtrów

  • osadzonych rastrowych

  • niepotrzebnych grup

• Bez dekoracyjnych efektów SVG

SVG powinny:

• Poprawnie renderować się w przeglądarkach

• Działać stabilnie w Mapbox

• Skalować się bez artefaktów

3.3 Optymalizacja pod małe rozmiary

Ikony muszą być czytelne na:

• 16 px

• 20 px

• 24 px

Jeśli niektóre szczegóły są nieczytelne:
👉 należy je uprościć lub przebudować, nawet jeśli są obecne w referencji.

4. Kolory

• Orientacja na kolory z referencji

• Dopuszczalne niewielkie korekty dla poprawy czytelności

• Aktywne / nieaktywne stany muszą wyraźnie się różnić

5. Finalne deliverables

Obowiązkowe pliki:

• house-active.svg

• house-inactive.svg

• pin-active.svg

• pin-inactive.svg

Wymagania:

• Jeden SVG = jeden plik

• Zrozumiałe nazwy plików

• Gotowość do integracji bez dodatkowego czyszczenia

6. Kryteria akceptacji pracy

Praca jest akceptowana, jeśli:

• SVG są czyste i zoptymalizowane

• Ikony są czytelne w małych rozmiarach

• Tożsamość wizualna jest zachowana

• Pliki są gotowe do produkcji bez poprawek

• Maksymalnie czysta struktura SVG (wygodna dla deweloperów)

• Zgodna logika nieaktywnych stanów między pinezką a domem

• Staranne wyrównanie i optyczna równowaga form