Тэлеграм, WhatsApp  +380637610482
Валерый Данюк
Валерый ДанюкраспрацоўшчыкРаспрацоўка ІІ-інструментаў для бізнесу. Якасна. Нядорага.Напісаць у Telegram
Nike - папярэдні прагляд сайта ў гэтым стылі

Nike

Манахромная галерэя спартыўных дасягненняў - белыя сцены, прадукт як твор мастацтва, хром, раствораны ў фоне

Nike.com працуе як манахромная галерэя, дзе на першым месцы стаіць прадукт: карыстацкі інтэрфейс практычна незаўважны, каб фатаграфіі тавараў займалі кожны экран. Увесь інтэрфейс пабудаваны з чорнага, белага і трох адценняў шэрага - без акцэнтных колераў, без дэкаратыўных градыентаў, без цёплага фірмовага хрому. Фірмовы стыль Nike жыве ў лагатыпе-галерэі і фатаграфіях, але ніколі не ў самым карыстацкім інтэрфейсе. Друкарня кампактная і ўтылітарная, абапіраецца на спецыяльна распрацаванае сямейства шрыфтоў Helvetica Now памерам 12-20px з адным павялічаным лагатыпам Nike Futura ND памерам 76px для загалоўкаў. Кампаненты мінімалістычныя: кнопкі ў форме таблетак радыусам 30px, плоскія карткі тавараў, тонкія межы і практычна нулявы перапад вышынь. Старонка чаргуецца паміж чыста белымі паверхнямі тавараў і эфектнымі цёмнымі рэдакцыйнымі раздзеламі, ствараючы рытм за кошт кантрасту, а не арнаменту.

Старонка вытрымана ў поўным рэдакцыйным рытме: эфектны цёмны загаловак ва ўсю вышыню вобласці прагляду з адным таварам і буйным загалоўкам, за якім ідзе сетка катэгорый 2x2 ва ўсю шырыню старонкі, затым гарызантальна пракручваная сетка картак тавараў у 3 калонкі, і, нарэшце, шчыльны шматкалонкавы ніжні калантытул. Усе блокі кантэнту займаюць усю шырыню вобласці прагляду без абмежавання максімальнай шырыні кантэйнера; абмежаванне максімальнай шырыні прымяняецца толькі да навігацыі і сеткі спасылак ніжняга калантытула. Пераходы паміж раздзеламі рэзкія: чорны загаловак → белая сетка катэгорый → белая сетка тавараў → белы ніжні калантытул, з вузкімі шэрымі рамкамі ў якасці адзінага візуальнага шва. Навігацыя ўяўляе сабой мінімалістычную двухузроўневую панэль (дапаможныя спасылкі уверсе, асноўныя катэгорыі па цэнтры) без замацавання, без фонавага залівання і без ценю. Шчыльнасць кантэнту кампактная ў сетках тавараў (шчыльны водступ картак) і прасторная ў загалоўку (поўная шырыня вобласці прагляду).

Фатаграфія з'яўляецца дамінантным візуальным элементам і вызначае ўсю ідэнтычнасць брэнда. Сістэма выкарыстоўвае высакаякасныя поўнафарматныя фатаграфіі прадукцыі: спартыўны абутак, сфатаграфаваны асобна на цёмным або градыентным фоне, дастаткова абрэзаны, каб запоўніць кадр, без кантэксту, які адлюстроўвае стыль жыцця. Выявы ў стылі лайфстайл з'яўляюцца ў катэгорыях, дэманструючы ступні і галёнкі спартсменаў у руху. Выкарыстоўваецца высокакантрасная і насычаная каляровая гама - чырвоны абутак на чорным фоне, неонавыя акцэнты на белых падэшвах, цёплае і халоднае асвятленне для драматызацыі матэрыялаў. Ніякіх ілюстрацый, абстрактнай графікі, 3D-рэндэраў. Выявы заўсёды маюць выразныя краі (без закругленых кутоў у кантэйнерах для фатаграфій), заўсёды займаюць увесь пляц усярэдзіне сваіх блокаў і заўсёды суправаджаюцца мінімальным тэкставым накладаннем. Іканаграфія чыста функцыянальная: контурныя абразкі для пошуку, спісу жаданняў, кошыка і ўліковага запісу ў колерах Obsidian або Steel.

Палітра

Нейтральныя

  • Obsidian #111111 — Цёмны колер дапаўняе нейтральны колер тэксту, значкоў і стварае моцны кантраст. Не варта выкарыстоўваць яго ў якасці асноўнага колеру для заклікаў да дзеяння.
  • Paper White #ffffff — Фон старонкі, паверхня карткі, тэкст кнопак на цёмным фоне, абводка абразкоў - палатно па змаўчанні для таварных сетак і раздзелаў катэгорый.
  • Concrete Gray #e5e5e5 — Межы, падзельнікі, тонкія лініі-падзельнікі паміж секцыямі сеткі, ледзь прыкметныя контуры палёў уводу.
  • Soft Mist #f5f5f5 — Далікатнае адценне фону для другарадных паверхняў, заліванне поля пошуку ў навігацыі, фон тэгаў.
  • Steel #707072 — Другарадны тэкст, прыглушаны дапаможны тэкст, контуры значкоў паменшанага памеру, подпісы навігацыйнага ланцужка, падзельнікі спасылак у ніжнім калантытуле.
  • Faint Gray #9e9ea0 — Адключаны абводкі значкоў, другарадныя элементы карыстацкага інтэрфейсу, межы з мінімальным вылучэннем.

Друкарня

ад 12 да 76px · 6 прыступак

  • Helvetica Now Text Medium — замена: Inter · напісання 500 · Шрыфт Helvetica Now Text Medium - знойдзены ў вынятых дадзеных, але не апісаны ІІ.
  • Helvetica Now Text — замена: Inter or Helvetica Neue · напісання 400, 500 · Асноўны тэкст карыстацкага інтэрфейсу - спасылкі навігацыі, подпісы кнопак, загалоўкі картак, назвы тавараў, спісы ў ніжнім калантытуле, увесь асноўны тэкст.
  • Helvetica Now Display Medium — замена: Inter Medium or Helvetica Neue Medium · напісання 500 · Загалоўкі частак, пазнакі катэгорый картак, загалоўкі сярэдняга памеру - сярэдні шрыфт (20-24px) з'яўляецца адметнай рысай загалоўкаў Nike, якія не з'яўляюцца буйнымі элементамі дызайну: ніколі не тоўсты, заўсёды лаканічны.

Інтэрвалы і форма

ПрызначэннеЗначэнне
Шчыльнасцьшчыльная
Базавы крок8px
Радыус кнопак30px
Радыус картак0px
Ценіне - межы замест ценяў
Паміж секцыямі48px
Шырыня старонкі1440px

ІІ збярэ ваш сайт у стылі Nike і напоўніць яго

  • Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
  • Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
  • Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
  • Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.

Падобныя стылі

  • Airbnb — Ціхая белая сцяна галерэі з адной каралава-чырвонай закладкай
  • Apple (España) — белая вітрына галерэі
  • Silencio — Белы пакой з парылымі артэфактамі. Галерэйная вітрына з цёплай паперы, дзе кожны элемент займае сваё месца на фоне негатыўнага аб'ёму, а цішыня з'яўляецца наўмысным дызайнерскім рашэннем
  • Oakâme — Залітая сонцам правансальская майстэрня, высечаная з цёплага каменя
  • Arc — індустрыяльная белая галерэя над паўночнай вадой
  • Rivian — Электрычны маналіт на бетоннай сцяне галерэі. Rivian уяўляе кожны аўтамабіль як скульптуру на фоне велізарнай белай прасторы, з друкаркай настолькі буйнай, што яна становіцца архітэктурным элементам, і адным цёплым жоўтым колерам, які парушае манахромнасць, падобна сонечнаму святлу на матавай паверхні.
  • Analogue — Чорная галерэйная вітрына - тавары параць у пустаце
  • ddna — цёплая музейная вітрына на неапрацаваным ільняным палатне
  • Zellerfeld — Майстэрня скульптара на белым мармуры - маналітныя паверхні пастамента, адзіная іскра кобальту, шэпт маленькіх літар ад падлогі да столі.
  • UY Studio — Манастырская каменная галерэя - ціхая прастора з бетоннымі сценамі, дзе на белых пастаментах стаяць флаконы з духамі, асветленыя адной свяцільняй магутнасцю 400 Вт і чатырма цёплымі шэрымі лямпамі.
  • Basic.Space — куратарская галерэя на белым мармуры
  • COS — модная галерэя з белымі сценамі