Телеграм, 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 — модна галерея з білими стінами