
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 — модная галерэя з белымі сценамі