Телеграм, 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 — Монастырская каменная галерея — тихое пространство с бетонными стенами, где на белых постаментах стоят флако…
  • Basic.Space — кураторская галерея на белом мраморе
  • COS — модная галерея с белыми стенами