FRANKY'S
Kiosk z grami retro na ladzie sklepu ze sprzętem do skateboardingu
Język wizualny Franky'ego to połączenie stylu retro arcade i sklepu ze skateboardami: ciepłe, kremowe płótno (#f3e5df) obramowane sztywnymi, pikselowymi obramowaniami, wszechobecna czarno-biała szachownica oraz jednopikselowy font Arcade, używany do każdego słowa na stronie. Paleta barw jest celowo oszczędna – pozostały tylko dwa kolory chromatyczne (pomarańczowy sygnałowy #faa21f dla znaku i soczysta zieleń #128e44 dla przycisku kupna), a cała hierarchia została wyrażona poprzez zwiększenie grubości fontu Arcade z 400 do 700 oraz użycie czerni na kremowym tle. Powierzchnie pozostają płaskie i monolityczne; głębię uzyskuje się jedynie poprzez wstawkę kremowej linii o grubości 1 piksela na przyciskach i grę tonalną szachownicy. Komponenty nawiązują do sprite'ów witryn sklepowych z lat 90.: grube czarne obramowania, wąskie promienie obramowania 6-12 px, kompaktowe odstępy 4-8 px oraz przełączniki 3D/AR, które wyglądają jak pikselowane ikony, a nie chromowane elementy. Nowe strony mają zachować klimat gier zręcznościowych: brak gradientów poza pomarańczowym, przewijanym tekstem, brak miękkich cieni, brak dekoracyjnej typografii – tylko kremowy papier, czarne, pikselowe linie i pojedynczy, ciepły, pomarańczowy kolor.
Na komputerach stacjonarnych strona produktu wyświetlana jest na całej szerokości, wyśrodkowana, o maksymalnej szerokości 1200 px. Rytm od góry do dołu jest następujący: pomarańczowy, przewijany tekst → kremowy nagłówek z czarną linią → podział na dwie kolumny (55% szachownicy na stronie głównej / 45% dwukolumnowej siatki kart produktów) → kremowy pasek w stopce. Na urządzeniach mobilnych strona główna zwija się do szachownicy na całej szerokości, a siatka staje się układem jednokolumnowym. Karty są równomiernie rozłożone w dwukolumnowej siatce z szarymi pikselami (#e5e7eb) między nimi. Odstępy między sekcjami są minimalne (43–61 px), a interfejs nigdy nie wykorzystuje ciemnych pasów rozciągających się na całą szerokość strony – kremowy kanwa jest wyświetlana bez przerw.
Zdjęcie czapek na czystym kremowym tle, wyśrodkowane i mocno przycięte, z delikatnym, grafitowym cieniem pod spodem. Bez stylu życia, bez modeli, bez kontekstu – czapka jest gwiazdą. Wzór szachownicy za głównym elementem stanowi powierzchnię graficzną. Żadnych ilustracji, żadnych renderów 3D poza przełącznikiem rzeczywistości rozszerzonej, żadnych dekoracyjnych ikon poza pikselowanym krzyżem w logo.
Paleta
Marka
- Marquee Orange
#faa21f— Pasek powiadomień u góry ekranu, elementy akcentujące, branding. - Buy Green
#128e44— Przycisk „DODAJ DO KOSZYKA” jest wypełniony - jedyna czynność zakupowa oznaczona na zielono.
Neutralny
- Arcade Cream
#f3e5df— Tło strony, powierzchnie kart produktów, wkładki przycisków. - Ink Black
#000000— Tekst główny, układ szachownicy, wszystkie obramowania interfejsu użytkownika, kontury kart, obramowania ikon. - Pixel Gray
#e5e7eb— Cienkie obramowania, podziałki kart, strukturalne zasady pomiędzy komórkami siatki. - Charcoal
#333333— Wtórny odcień powierzchni, kwadraty cienia szachownicy, kolor cienia - Carbon
#151515— Bogate, neutralne odcienie do wypełniania ilustracji i gęsta szachownica. - Muted Gray
#737373— Wyłączony/wyciszony tekst na przyciskach i w tekście głównym
Typografia
od 10 do 18px · 4 kroki
- Arcade — wymiana: VT323 · wytyczne 400, 700 · W całym interfejsie zastosowano jedną czcionkę – wszystkie nagłówki, etykiety, ceny, przyciski, tekst główny i ikony są w Arcade. Przejście z 400 na 700 to jedyne narzędzie do tworzenia hierarchii; użycie drugiej czcionki zrujnowałoby iluzję kiosku.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 4-8px |
| Promień przycisku | 6px |
| Promień karty | 12px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 43-61px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu FRANKY'S i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- 099 SUPPLY — Ściana galerii wypełniona czarno-białymi obiektami
- teenage engineering — Katalog przemysłowy oświetlenia studyjnego - na stronie znajduje się tylko jeden istotny obiekt, a wszystko inne jest omówione wokół niego
- Custo — Galeria w kolorze stalowo-brązowym z monolityczną czcionką. Salon wystawowy w stonowanych szaro-zielonych odcieniach, gdzie pojedynczy ciemny obiekt i czcionka o szerokości 57 pikseli mówią same za siebie.
- Walden — Cisza leśnej ściółki – każdy produkt to kamień, każdy piksel to mech i cisza
- Fiverr — Centralnym punktem cyfrowego bazaru jest jaskrawozielona pulsacja na tle ciemnych scen teatralnych. Pojedyncza neonowozielona kropka stanowi punkt odniesienia dla logo; reszta jest monochromatyczna, zaprojektowana tak, aby podkreślić atrakcyjność oferowanych usług.
- Peloton — Czerwona latarnia na kruczoczarnym wybiegu. Salon fitness, gdzie pojedynczy, jaskrawoczerwony znak CTA przecina ogromną, ciemną przestrzeń wystawową i prowadzi do czystych, białych pomieszczeń z produktami.
- HOUSEPLANT — księgarnia z orzechami na papierze lnianym
- Adam Lippes — Monochromatyczna pracownia redakcyjna na kremowym papierze – rozkładówka Vogue’a, której jedyną ozdobą jest siatka układu, a nie paleta kolorów.
- Elektron — O północy panel sterowania urządzenia zamienia się w niemal czarne płótno, na którym błyszczą zdjęcia produktów, a interfejs pozostaje praktycznie niewidoczny.
- Sigmaphoto — Monochromatyczna Galeria Instrumentów Precyzyjnych to ciche, białe pomieszczenie, w którym liczy się tylko jeden kolor – ten, który zachęca do działania.
- Channel Studio — Studio fotograficzne z jednym koralowym abażurem
- Specht Studio — Ściana galerii wypełniona dyskretną ciekawością. Chromowane wykończenie studia to biała powierzchnia i czarne napisy; wizualne fajerwerki skupiają się wyłącznie na płytkach projektu.