Le Puzz
Sunny Sunday Circular to tabloid pełen zagadek.
Le Puzz to maksymalistyczny system e-commerce dla butików, zbudowany na dwukolorowym fundamencie: soczysta, przypominająca plaster miodu żółć w połączeniu z czystą czernią na chłodnym, perłowo-szarym tle. Jego styl to połączenie starej gazety i układanki: tekst główny jest pisany szeryfowym krojem pisma Times, a nagłówki niestandardowym krojem pisma Times Now, celowo zrywającym z tradycyjnymi konwencjami e-commerce, które opierają się na czcionkach bezszeryfowych. Sam interfejs jest prosty i oparty na siatce, co pozwala na wizualne oddziaływanie opakowania produktu (gęste, ilustrowane kompozycje wypełnione zabawkami). Elementy sterujące interfejsu są dość solidne: przyciski z czarną ramką na żółtym tle, ikony w kształcie pigułek, karty o promieniu 12 pikseli i duże odstępy między literami wersalików, co nadaje nawet przyciskowi „SZYBKIE DODAWANIE” redakcyjny charakter.
Klasyczna siatka e-commerce z charakterystycznym projektem redakcyjnym. Nagłówek to żółty pasek o strukturze plastra miodu z czarną obwódką o szerokości 1, mieszczący wyśrodkowane logo i dodatkowy rząd przycisków nawigacyjnych. Poniżej, nad trzykolumnową siatką produktów na szarym tle, znajduje się wyśrodkowany nagłówek powitalny w czcionce Times Now. Głównym elementem jest wyśrodkowany blok zdjęć o zaokrąglonych rogach (40), flankowany dwiema kartami produktów. Zachowano rytm sekcji: duża przestrzeń w pionie (30), naprzemiennie żółte i szare powierzchnie oraz maksymalna szerokość około 4,5 cm, wyśrodkowane na stronie. Karty produktów mają ten sam rozmiar i są ułożone w schludnej, trzykolumnowej siatce z 5-centymetrowymi odstępami. Układ jest symetryczny i powiązany z siatką – brak asymetrycznych kompozycji i nakładających się elementów.
Elementem wizualnym jest fotografia produktu. Pudełka z puzzlami są fotografowane w całości na białym/neutralnym tle, a następnie umieszczane na ciepłym, niebieskim lub naturalnym tle studyjnym. Główne zdjęcie przedstawia osobę trzymającą kilka pudełek z puzzlami – przedmiot codziennego użytku, uchwycony z naturalną energią. Samo opakowanie jest bogate, ilustracyjne i maksymalistyczne: mnóstwo zabawek, produktów spożywczych i postaci w jasnych kolorach podstawowych z grubymi, czarnymi konturami, zaprojektowanych tak, by wyglądały jak ilustracje z książek dla dzieci, rozrzucone po 500-elementowej układance. Żadnych abstrakcyjnych grafik, żadnych renderów 3D, żadnej ikonografii poza pojedynczą lupą – same puzzle stanowią język wizualny.
Paleta
Marka
- Honeycomb Yellow
#ffd931— Podstawowy kolor marki, pasek tytułu, główne przyciski akcji, aktywny stan nawigacji, kolor podkreślenia linku, wypełnienie akcentujące — pojedyncza nuta kolorystyczna, wokół której kręci się wszystko inne.
Neutralny
- Carbon Black
#000000— Tekst główny, grube obramowania, kontury przycisków, kontury ikon i tekst nawigacyjny stanowią podstawę strukturalną całego systemu. - Ink Black
#231f20— Tekst dodatkowy, tekst główny, obramowania przycisków, obramowania pól wprowadzania danych – w nieco cieplejszym, prawie czarnym kolorze, nadającym wrażenie większej miękkości. - Pearl Gray
#c8cbcd— Płótno strony, tła kart produktów, efektowna scena, na której pojawiają się kolory żółty i czarny. - Fog Gray
#a6a8aa— Stonowane powierzchnie znaczków, tła drugorzędnych chipów i subtelne wypełnienia interfejsu użytkownika. - Smoke Line
#d6d6d6— Wąskie przegródki, dyskretne podziałki na stół/karty.
Typografia
od 11 do 47px · 6 kroków
- Times Now — wymiana: Playfair Display · wytyczne 100, 400 · Czcionka szeryfowa do nagłówków i podtytułów – używana do nagłówków głównych, nazw produktów i tytułów sekcji. Ultralekka czcionka o wysokości 100 punktów i odstępie 47 pikseli tworzy wysoki, niemal skondensowany charakter redakcyjny; skondensowane kształty liter (wysokość linii 0,87–0,90) pozwalają na umieszczenie dużych nagłówków blisko tekstu, naśladując wydrukowany plakat.
- Times — wymiana: Times New Roman · wytyczne 400 · Tekst szeryfowy to nieoczekiwany wybór dla sklepu internetowego, nadający całej witrynie literacki, katalogowy charakter. Mały odstęp między wierszami (1,15) sprawia, że akapity są zwarte i czytelne.
- Helvetica Neue — wymiana: Helvetica · wytyczne 100, 400 · Drobny tekst w interfejsie użytkownika, tekst na przyciskach i mikrotekst są napisane czcionką o wielkości 11 pikseli i dużym odstępem między literami (0,0730 em), co sprawia wrażenie pisania wielkimi literami nawet przy komfortowej temperaturze ciała.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 15px |
| Promień przycisku | 12px |
| Promień karty | 12px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 30-40px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Le Puzz 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
- Agence Foudre — Okładka magazynu ma delikatny różowy kolor, przypominający szminkę.
- INVERSA — Terminal topograficzny o północy. Ciemny panel dowodzenia, gdzie ogromna czcionka redakcyjna i pojedyncza warstwa neonowozielonych znaczników nałożone są na zdjęcia satelitarne Ziemi, każdy z monochromatyczną etykietą, jakby odczytywał współrzędne misji.
- Acne Studios — Minimalistyczna przestrzeń galerii wypełniona żywymi fotografiami – magazyn mody rozłożony na marmurze
- GTE — Terminal handlowy za oświetleniem galerii
- Diabla — Śródziemnomorski dziedziniec w południe – ściany w odcieniach różu wyblakłego od słońca, jedna jaskrawoczerwona płócienna markiza i szeryfowe nagłówki artykułów ciągnące się po niebie.
- Subset — Butik redakcyjny wykonany z surowego lnu
- Cursor — Przytulny warsztat pergaminowy, oświetlony tlącymi się węglami
- MindMarket — Przytulna, bajkowa książka na kremowym papierze – przyjazne płótno redakcyjne, na którym duże nagłówki Interu i wycięte z papieru postacie współistnieją na nasłonecznionej, miękkiej jak naklejka powierzchni.
- Lamborghini — Czarny kolor nadwozia w salonie, pod reflektorami - jeden żółty samochód
- Amplemarket — Zalane słońcem miejsce pracy pokryte konfetti
- Getharvest — Biurko o złotej godzinie – ciepłe kremowe płótno, białe pocztówki zawieszone na płótnie i pojedynczy, jasnopomarańczowy płomień
- Drive Capital — Plakat z retro podróżą samochodem na ciepłym papierze