Telegram, WhatsApp  +380637610482
Walery Danyuk
Walery DanyukwywoływaczTworzymy narzędzia AI dla firm. Wysoka jakość. Przystępna cena.Napisz na Telegram
Nike — podgląd witryny w tym stylu

Nike

Monochromatyczna galeria osiągnięć sportowych – białe ściany, produkt jako dzieło sztuki, chrom rozpuszczony w tle

Nike.com funkcjonuje jak monochromatyczna galeria, nastawiona na produkty: interfejs użytkownika jest praktycznie niewidoczny, dzięki czemu zdjęcia produktów zajmują cały ekran. Cały interfejs zbudowany jest z czerni, bieli i trzech odcieni szarości – bez kolorów akcentujących, dekoracyjnych gradientów, ciepłego, charakterystycznego chromu. Charakterystyczny styl Nike przejawia się w logo galerii i zdjęciach, ale nigdy w samym interfejsie użytkownika. Typografia jest zwarta i praktyczna, oparta na specjalnie zaprojektowanej rodzinie czcionek Helvetica Now o wysokości 12–20 px, z pojedynczym, powiększonym logo Nike Futura ND o wysokości 76 px w nagłówkach. Elementy są minimalistyczne: przyciski w kształcie pigułki o promieniu 30 px, płaskie karty produktów, cienkie obramowania i praktycznie zerowe różnice wysokości. Strona naprzemiennie przechodzi między czysto białymi powierzchniami produktów a wyrazistymi, ciemnymi sekcjami redakcyjnymi, tworząc rytm poprzez kontrast, a nie ozdobniki.

Strona podąża za zdecydowanym rytmem redakcyjnym: przyciągający wzrok, pełnoekranowy, ciemny nagłówek z pojedynczym produktem i dużym tytułem, po którym następuje pełnoekranowa siatka kategorii 2x2, poziomo przewijana siatka kart produktów w 3 kolumnach i wreszcie gęsta, wielokolumnowa stopka. Wszystkie bloki treści zajmują całą szerokość obszaru roboczego bez ograniczenia maksymalnej szerokości kontenera; ograniczenie maksymalnej szerokości dotyczy jedynie siatki linków nawigacji i stopki. Przejścia między sekcjami są ostre: czarny nagłówek → biała siatka kategorii → biała siatka produktów → biała stopka, z wąskimi szarymi obramowaniami stanowiącymi jedyne wizualne połączenie. Nawigacja to minimalistyczny, dwupoziomowy pasek (linki pomocnicze u góry, kategorie główne wyśrodkowane) bez przypinania, bez wypełnienia tła i cienia. Gęstość treści jest zwarta w siatkach produktów (ciasne odstępy między kartami) i przestronna w nagłówku (pełnoekran).

Fotografia jest dominującym elementem wizualnym i definiuje całą tożsamość marki. System wykorzystuje wysokiej jakości, pełnoklatkowe zdjęcia produktów: buty sportowe fotografowane indywidualnie na ciemnym lub gradientowym tle, przycięte tak, aby wypełnić kadr, bez kontekstu lifestylowego. Zdjęcia lifestylowe pojawiają się w kategoriach, prezentując stopy i nogi sportowców w ruchu. Zastosowano kontrastową, nasyconą kolorystykę – czerwone buty na czarnym tle, neonowe akcenty na białych podeszwach oraz ciepłe i zimne oświetlenie, aby nadać materiałom dramatyzmu. Nie stosuje się ilustracji, abstrakcyjnych grafik ani renderów 3D. Zdjęcia zawsze mają wyraźne krawędzie (brak zaokrąglonych rogów w kontenerach zdjęć), zawsze zajmują całą przestrzeń w swoich blokach i zawsze towarzyszy im minimalistyczny tekst. Ikonografia ma charakter czysto funkcjonalny: kontury ikon wyszukiwania, listy życzeń, koszyka i konta w kolorach obsydianowym lub stalowym.

Paleta

Neutralny

  • Obsidian #111111 — Ciemny kolor uzupełnia neutralny tekst i ikony, tworząc silny kontrast. Unikaj stosowania go jako koloru podstawowego w wezwaniach do działania.
  • Paper White #ffffff — Tło strony, powierzchnia karty, tekst przycisku na ciemnym tle, kontur ikony — domyślne płótno dla siatek produktów i sekcji kategorii.
  • Concrete Gray #e5e5e5 — Granice, podziały, cienkie linie oddzielające sekcje siatki, subtelne kontury pól wprowadzania danych.
  • Soft Mist #f5f5f5 — Subtelny kolor tła dla powierzchni drugorzędnych, wypełnienie pola wyszukiwania w nawigacji, tło tagu.
  • Steel #707072 — Tekst pomocniczy, wyciszony tekst pomocniczy, zmniejszone kontury ikon, etykiety ścieżki nawigacyjnej, separatory łączy stopki.
  • Faint Gray #9e9ea0 — Kontury ikon, drobne elementy interfejsu użytkownika i obramowania z minimalnym podświetleniem są wyłączone.

Typografia

od 12 do 76px · 6 kroków

  • Helvetica Now Text Medium — wymiana: Inter · wytyczne 500 · Czcionka Helvetica Now Text Medium - znaleziona w zebranych danych, ale nieopisana przez sztuczną inteligencję.
  • Helvetica Now Text — wymiana: Inter or Helvetica Neue · wytyczne 400, 500 · Główny tekst interfejsu użytkownika — linki nawigacyjne, etykiety przycisków, tytuły kart, nazwy produktów, listy stopek, cały tekst główny.
  • Helvetica Now Display Medium — wymiana: Inter Medium or Helvetica Neue Medium · wytyczne 500 · Nagłówki sekcji, etykiety kategorii kart, nagłówki średniej wielkości — czcionka średniej wielkości (20–24 px) to cecha charakterystyczna nagłówków Nike, które nie są dużymi elementami projektu: nigdy pogrubiona, zawsze zwięzła.

Interwały i forma

ZamiarOznaczający
Gęstośćgęsty
Podstawowy krok8px
Promień przycisku30px
Promień karty0px
Cienienie - granice zamiast cieni
Między sekcjami48px
Szerokość strony1440px

Sztuczna inteligencja zbuduje Twoją witrynę w stylu Nike 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

  • Airbnb — Cicha, biała ściana galerii z pojedynczą koralowo-czerwoną zakładką
  • Apple (España) — biała gablota wystawowa
  • Silencio — Biały pokój z unoszącymi się w powietrzu artefaktami. Wystawa galerii wykonana z ciepłego papieru, gdzie każdy element zajmuje swoje miejsce na tle negatywowej objętości, a cisza jest celowym zabiegiem projektowym.
  • Oakâme — Skąpany w słońcu prowansalski warsztat wykuty w ciepłym kamieniu
  • Arc — przemysłowa biała galeria nad północną wodą
  • Rivian — Elektryczny monolit na betonowej ścianie galerii. Rivian prezentuje każdy pojazd jako rzeźbę na tle ogromnej białej przestrzeni, z typografią tak dużą, że staje się elementem architektonicznym, i pojedynczą ciepłą żółcią, która przełamuje monochromatyczną atmosferę, niczym światło słoneczne na matowej powierzchni.
  • Analogue — Czarna gablota wystawowa – towary unoszą się w próżni
  • ddna — ciepła gablota muzealna na nieobrobionym lnie
  • Zellerfeld — Pracownia rzeźbiarska na białym marmurze – monolityczne powierzchnie cokołu, pojedyncza iskra kobaltu, szept małych liter od podłogi do sufitu
  • UY Studio — Kamienna galeria klasztoru to cicha przestrzeń z betonowymi ścianami, w której na białych postumentach stoją flakony perfum, oświetlone jedną 400-watową lampą i czterema ciepłymi, szarymi żarówkami.
  • Basic.Space — galeria kuratorska na białym marmurze
  • COS — modna galeria z białymi ścianami