Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukdesenvolvedorDesenvolvemento de ferramentas de IA para empresas. Alta calidade. Asequible.Escribir en Telegram
Nike — unha vista previa dun sitio con este estilo

Nike

Unha galería monocromática de logros deportivos: paredes brancas, o produto como obra de arte, cromo disolto no fondo.

Nike.com funciona como unha galería monocromática centrada no produto: a interface de usuario é practicamente invisible, o que permite que as fotos dos produtos ocupen todas as pantallas. Toda a interface está construída en negro, branco e tres tons de gris: sen cores de acento, sen gradientes decorativos, sen cromo cálido e característico. O estilo característico de Nike reside no logotipo da galería e nas fotos, pero nunca na propia interface de usuario. A tipografía é compacta e utilitaria, baseándose nunha familia de fontes Helvetica Now deseñada a medida con 12-20 px, cun único logotipo de Nike Futura ND de gran tamaño con 76 px para os títulos. Os compoñentes son minimalistas: botóns en forma de pílula cun radio de 30 px, tarxetas de produto planas, bordos finos e practicamente cero diferenzas de altura. A páxina alterna entre superficies de produtos brancas puras e seccións editoriais rechamantes e escuras, creando ritmo a través do contraste en lugar da ornamentación.

A páxina segue un ritmo editorial robusto: unha cabeceira escura, rechamante e de ancho completo que presenta un único produto e un título grande, seguida dunha grella de categorías de ancho completo de 2x2, unha grella de desprazamento horizontal de tarxetas de produtos en 3 columnas e, finalmente, un pé de páxina denso con varias columnas. Todos os bloques de contido ocupan o ancho completo da ventá gráfica sen un ancho máximo de contedor; unha limitación de ancho máximo aplícase só á navegación e á grella de ligazóns do pé de páxina. As transicións entre as seccións son nítidas: cabeceira negra → grella de categorías branca → grella de produtos branca → pé de páxina branco, con bordos grises estreitos que serven como única unión visual. A navegación é unha barra minimalista de dous niveis (ligazóns auxiliares na parte superior, categorías principais centradas) sen fixacións, sen recheo de fondo e sen sombras. A densidade do contido é compacta nas grellas de produtos (espazado entre tarxetas axustado) e espaciosa na cabeceira (ventá gráfica de ancho completo).

A fotografía é o elemento visual dominante e define toda a identidade da marca. O sistema utiliza fotos de produtos de alta calidade e fotograma completo: calzado deportivo fotografado individualmente sobre un fondo escuro ou degradado, recortado para encher o fotograma, sen contexto de estilo de vida. As imaxes de estilo de vida aparecen dentro das categorías, mostrando os pés e as pernas dos atletas en movemento. Úsase unha combinación de cores saturadas de alto contraste: calzado vermello sobre un fondo negro, detalles de neón sobre solas brancas e iluminación cálida e fría para dramatizar os materiais. Non se empregan ilustracións, gráficos abstractos nin representacións 3D. As imaxes sempre teñen bordos limpos (sen esquinas redondeadas nos contedores de fotos), sempre ocupan todo o espazo dentro dos seus bloques e sempre van acompañadas dunha superposición de texto mínima. A iconografía é puramente funcional: iconas de contorno para a busca, a lista de desexos, o carriño e a conta en cores obsidiana ou aceiro.

Paleta

Neutro

  • Obsidian #111111 — A cor escura complementa o texto e as iconas neutras e crea un contraste forte. Evita usala como cor principal para as chamadas á acción.
  • Paper White #ffffff — Fondo da páxina, superficie da tarxeta, texto do botón sobre un fondo escuro, contorno da icona: o lenzo predeterminado para as grellas de produtos e as seccións de categorías.
  • Concrete Gray #e5e5e5 — Bordes, divisores, liñas finas que separan seccións da cuadrícula, contornos sutís dos campos de entrada.
  • Soft Mist #f5f5f5 — Cor de fondo sutil para superficies secundarias, navegación para completar o campo de busca e fondo de etiquetas.
  • Steel #707072 — Texto secundario, texto auxiliar silenciado, contornos de iconas reducidos, etiquetas de ruta de navegación, separadores de ligazóns de pé de páxina.
  • Faint Gray #9e9ea0 — Os contornos das iconas, os elementos menores da IU e os bordos con resaltado mínimo están desactivados.

Tipografía

de 12 a 76 px · 6 pasos

  • Helvetica Now Text Medium — substitución: Inter · contornos 500 · Fonte Helvetica Now Text Medium: atopada nos datos extraídos pero non descrita pola IA.
  • Helvetica Now Text — substitución: Inter or Helvetica Neue · contornos 400, 500 · O texto principal da interface de usuario: ligazóns de navegación, etiquetas dos botóns, títulos das tarxetas, nomes de produtos, listas de pés de páxina e todo o texto do corpo.
  • Helvetica Now Display Medium — substitución: Inter Medium or Helvetica Neue Medium · contornos 500 · Títulos de sección, etiquetas de categorías de tarxetas, títulos de tamaño medio: o tipo de letra medio (20-24 px) é unha característica distintiva dos títulos de Nike que non son elementos de deseño grandes: nunca en negriña, sempre concisos.

Intervalos e forma

PropósitoSignificado
Densidadedenso
Paso básico8px
Radio do botón30px
Radio da tarxeta0px
Sombrassen bordos en vez de sombras
Entre seccións48px
Largura da páxina1440px

A IA creará o teu sitio web ao estilo de Nike e o encherá

  • Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
  • Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
  • Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
  • Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.

Estilos semellantes

  • Airbnb — Unha tranquila parede de galería branca cun único marcador de libros vermello coral
  • Apple (España) — vitrina de galería branca
  • Silencio — Unha habitación branca con artefactos flotantes. Unha exposición de galería feita de papel cálido, onde cada elemento ocupa o seu lugar sobre un fondo de volume negativo, e o silencio é unha decisión de deseño intencionada.
  • Oakâme — Un obradoiro provenzal bañado polo sol esculpido en pedra cálida
  • Arc — galería branca industrial sobre a auga da medianoite
  • Rivian — Un monolito eléctrico no muro de formigón da galería. Rivian presenta cada vehículo como unha escultura contra un vasto espazo branco, cunha tipografía tan grande que se converte nun elemento arquitectónico e un único amarelo cálido que rompe a atmosfera monocromática, como a luz solar sobre unha superficie mate.
  • Analogue — Vitrina negra da galería: as mercadorías pairan no baleiro
  • ddna — vitrina de museo cálida sobre liño sen tratar
  • Zellerfeld — Un obradoiro de escultor sobre mármore branco: as superficies monolíticas do pedestal, unha única faísca de cobalto, un susurro de letras minúsculas do chan ao teito
  • UY Studio — A galería de pedra do mosteiro é un espazo tranquilo con muros de formigón, onde frascos de perfume se atopan sobre plintos brancos, iluminados por unha lámpada de 400 vatios e catro lámpadas grises cálidas.
  • Basic.Space — galería curatorial sobre mármore branco
  • COS — unha galería moderna con paredes brancas