Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukdeveloperPagbuo ng mga kagamitang AI para sa mga negosyo. Mataas ang kalidad. Abot-kaya.Mag-chat sa Telegram
Nike — isang preview ng isang site sa ganitong istilo

Nike

Isang monochrome gallery ng mga nagawa sa palakasan – mga puting pader, ang produkto bilang isang likhang sining, chrome na natunaw sa likuran

Ang Nike.com ay gumagana bilang isang monochrome, product-first gallery: ang user interface ay halos hindi nakikita, na nagpapahintulot sa mga larawan ng produkto na sakupin ang bawat screen. Ang buong interface ay gawa sa itim, puti, at tatlong lilim ng kulay abo—walang mga accent na kulay, walang mga pandekorasyon na gradient, walang mainit, signature chrome. Ang signature style ng Nike ay naninirahan sa logo ng gallery at mga larawan, ngunit hindi kailanman sa user interface mismo. Ang tipograpiya ay siksik at praktikal, umaasa sa isang custom-designed na Helvetica Now font family na 12-20px, na may isang oversized na Nike Futura ND logo na 76px para sa mga heading. Minimalist ang mga bahagi: mga butones na hugis-pill na may 30px radius, mga patag na product card, manipis na mga border, at halos walang pagkakaiba sa taas. Ang pahina ay nagpapalitan sa pagitan ng purong puting mga ibabaw ng produkto at kapansin-pansin, madilim na mga seksyon ng editoryal, na lumilikha ng ritmo sa pamamagitan ng contrast sa halip na dekorasyon.

Ang pahina ay sumusunod sa isang matibay na ritmo ng editoryal: isang kapansin-pansin, full-width, at madilim na header na nagtatampok ng isang produkto at isang malaking pamagat, na sinusundan ng isang full-width, 2x2 category grid, isang pahalang na nag-iiskrol na grid ng mga product card sa 3 column, at sa wakas ay isang siksik at maraming column na footer. Sinasakop ng lahat ng content block ang buong lapad ng viewport nang walang maximum na lapad ng container; ang maximum na limitasyon sa lapad ay nalalapat lamang sa navigation at footer link grid. Malinaw ang mga transisyon sa pagitan ng mga seksyon: itim na header → puting category grid → puting product grid → puting footer, na may makikipot na kulay abong mga border na nagsisilbing tanging visual seam. Ang navigation ay isang minimalist, two-tiered bar (mga auxiliary link sa itaas, nakasentro ang mga pangunahing kategorya) na walang pinning, walang background fill, at walang shadow. Siksik ang densidad ng nilalaman sa mga product grid (makitid na espasyo ng card) at maluwag sa header (full-width viewport).

Ang potograpiya ang nangingibabaw na elementong biswal at tumutukoy sa buong pagkakakilanlan ng tatak. Gumagamit ang sistema ng mga de-kalidad at full-frame na larawan ng produkto: mga sapatos na pang-atleta na kinunan ng litrato nang paisa-isa laban sa madilim o gradient na background, na ginupit upang mapuno ang frame, nang walang konteksto ng pamumuhay. Lumilitaw ang mga larawan ng pamumuhay sa loob ng mga kategorya, na nagpapakita ng mga paa at binti ng mga atletang gumagalaw. Ginagamit ang isang high-contrast, saturated color scheme—pulang sapatos laban sa itim na background, neon accents sa puting talampakan, at mainit at malamig na ilaw upang i-dramatize ang mga materyales. Walang mga ilustrasyon, abstract graphics, o 3D rendering na ginagamit. Ang mga imahe ay laging may malinis na gilid (walang bilugan na sulok sa mga lalagyan ng larawan), palaging sumasakop sa buong espasyo sa loob ng kanilang mga bloke, at palaging may kasamang kaunting text overlay. Ang iconography ay purong gumagana: mga outline icon para sa paghahanap, wishlist, cart, at account sa mga kulay na Obsidian o Steel.

Paleta

Neutral

  • Obsidian #111111 — Ang madilim na kulay ay bumagay sa neutral na teksto at mga icon at lumilikha ng malakas na contrast. Iwasang gamitin ito bilang pangunahing kulay para sa mga panawagan para sa aksyon.
  • Paper White #ffffff — Background ng pahina, ibabaw ng card, teksto ng button sa madilim na background, outline ng icon—ang default na canvas para sa mga grid ng produkto at mga seksyon ng kategorya.
  • Concrete Gray #e5e5e5 — Mga border, divider, manipis na linya na naghihiwalay sa mga seksyon ng grid, banayad na balangkas ng mga input field.
  • Soft Mist #f5f5f5 — Banayad na kulay ng background para sa mga pangalawang ibabaw, pagpuno ng field ng paghahanap sa nabigasyon, background ng tag.
  • Steel #707072 — Pangalawang teksto, naka-mute na helper text, pinaikling mga balangkas ng icon, mga label ng breadcrumb, mga panghiwalay ng footer link.
  • Faint Gray #9e9ea0 — Hindi pinagana ang mga balangkas ng icon, maliliit na elemento ng UI, at mga border na may kaunting pag-highlight.

Tipograpiya

mula 12 hanggang 76px · 6 na hakbang

  • Helvetica Now Text Medium — kapalit: Inter · mga balangkas 500 · Katamtamang font ng Helvetica Now Text - matatagpuan sa kinayod na datos ngunit hindi inilarawan ng AI.
  • Helvetica Now Text — kapalit: Inter or Helvetica Neue · mga balangkas 400, 500 · Ang pangunahing teksto ng user interface - mga link sa nabigasyon, mga label ng button, mga pamagat ng card, mga pangalan ng produkto, mga listahan ng footer, lahat ng body text.
  • Helvetica Now Display Medium — kapalit: Inter Medium or Helvetica Neue Medium · mga balangkas 500 · Mga pamagat ng seksyon, mga label ng kategorya ng card, mga pamagat na katamtaman ang laki - Ang katamtamang laki ng font (20-24px) ay isang tatak ng mga pamagat ng Nike na hindi malalaking elemento ng disenyo: hindi kailanman naka-bold, palaging maigsi.

Mga pagitan at anyo

LayuninKahulugan
Densidadsiksik
Pangunahing hakbang8px
Radius ng buton30px
Radius ng card0px
Mga aninowalang - mga hangganan sa halip na mga anino
Sa pagitan ng mga seksyon48px
Lapad ng pahina1440px

Gagawa ang AI ng website mo sa estilong Nike at pupunuin ito

  • Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
  • Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
  • Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
  • Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.

Mga katulad na estilo

  • Airbnb — Isang tahimik na puting gallery wall na may isang coral red bookmark
  • Apple (España) — puting display case ng gallery
  • Silencio — Isang puting silid na may mga lumulutang na artifact. Isang gallery display na gawa sa mainit na papel, kung saan ang bawat elemento ay pumuwesto laban sa isang negatibong backdrop ng volume, at ang katahimikan ay isang sinadyang desisyon sa disenyo.
  • Oakâme — Isang Provençal workshop na nasisinagan ng araw na inukit mula sa mainit na bato
  • Arc — industriyal na puting gallery sa ibabaw ng tubig sa hatinggabi
  • Rivian — Isang de-kuryenteng monolito sa kongkretong pader ng gallery. Inilalarawan ng Rivian ang bawat sasakyan bilang isang iskultura laban sa isang malawak na puting espasyo, na may napakalaking tipograpiya na nagiging isang elemento ng arkitektura, at isang mainit na dilaw na sumisira sa monokromatikong atmospera, tulad ng sikat ng araw sa isang matte na ibabaw.
  • Analogue — Itim na display case ng gallery – mga paninda na nakapatong sa kawalan
  • ddna — mainit na display case ng museo sa hindi ginamot na linen
  • Zellerfeld — Isang pagawaan ng iskultor sa puting marmol—ang mga monolitikong ibabaw ng pedestal, isang kislap ng kobalt, isang bulong ng maliliit na letra mula sahig hanggang kisame
  • UY Studio — Ang galeriyang bato ng monasteryo ay isang tahimik na espasyo na may mga pader na kongkreto, kung saan nakatayo ang mga bote ng pabango sa mga puting plinth, na naliliwanagan ng isang 400-watt na lampara at apat na mainit na kulay abong bombilya.
  • Basic.Space — galeriya ng kuratoryal sa puting marmol
  • COS — isang naka-istilong gallery na may mga puting pader