Телеграм, WhatsApp +380637610482
Валерий Данюк
Валерий ДанюкразработчикРазработка ИИ‑инструментов для бизнеса. Качественно. Недорого.Написать в Telegram
Apple (España) — превью сайта в этом стиле

Apple (España)

Собор белого пространства с едва слышными заголовками. Огромный светлый зал, где в воздухе висят огромные шрифты 700-й плотности, скрепленные лишь пастельными цветами и единственной синей нитью

Язык страниц продуктов Apple — это образец типографической щедрости: огромные заголовки SF Pro Display, парящие на почти белом фоне, окруженные огромным пустым пространством, благодаря которому каждое слово кажется продуманным. Палитра почти монохромная — текст на #1d1d1f, холст, чередующийся между #ffffff и #f5f5f7 — с единственным синим акцентом (#0071e3), зарезервированным исключительно для интерактивных моментов. Цвет присутствует в самих изображениях продукта (пастельные тона), никогда не в качестве декоративных элементов интерфейса. Компоненты без рамок: закругленные карточки с радиусом 28px, кнопки в форме таблеток, почти касающиеся краев страницы, без видимых контейнеров и без теней. Ритм создается за счет чередования белых и серых полос, а не разделителей или границ.

Разделы занимают всю ширину страницы и растягиваются от края до края с большим внутренним отступом (примерно 40–100 сторон). Максимальная ширина контента фактически центрирована внутри каждой полосы. Главный элемент представляет собой центрированный стек: метка в виде брови, увеличенный заголовок, одна кнопка призыва к действию, строка с ценой, а затем изображение продукта, заполняющее нижнюю часть области просмотра. Разделы следуют повторяющемуся шаблону: заголовок, выровненный по левому краю в полосе, затем либо двухколоночный макет с описанием товара (текст слева/изображение справа или чередующийся), трехколоночная сетка из карточек, либо центрированная визуальная витрина. Ритм контента полностью контролируется чередованием белого/трехцветного фона с вертикальными промежутками в 100–100 см — без разделителей, без карточек, переносящих элементы. Глобальная навигация представляет собой единую фиксированную панель. В разделах технических характеристик продукта используются полосы во всю ширину с большим внутренним пространством, где текст располагается в узких колонках (~560px) по центру на фоне более широкой визуальной области.

Визуальный язык Apple — это, прежде всего, фотография продукта: крупные планы аппаратного обеспечения на чисто белом или цветном фоне, без контекста образа жизни или постановочных сцен. На главном изображении показаны руки, держащие MacBook Neo пастельно-зеленого цвета — человеческий элемент здесь второстепенный, он демонстрирует масштаб и текстуру, а не эмоции. В разделах с вариантами продуктов два устройства представлены рядом на фоне соответствующих цветов отделки (розовый, зеленый, серебристый, небесно-голубой), каждая карточка представляет собой плоское цветное поле с продуктом по центру. Детальные снимки используют экстремальные крупные планы (шарнир ноутбука, модуль камеры) на нейтральном фоне. Здесь нет иллюстраций, нет абстрактной графики, нет декоративных изображений — продукт САМ является визуальным элементом. Иконография повсюду — монохромные линейные иконки в стиле SF Symbols толщиной 1,5–2px, взятые из набора системных иконок Apple. Фотосъемка всегда выполнена в высоком ключе: равномерное, бестеневое освещение, которое сводит продукт к графической форме, а не к объемному объекту.

Палитра

Бренд

  • Electric Blue #0071e3 — Заполненные кнопки действий — единственный цветовой акцент в пользовательском интерфейсе, используемый экономно для призывов к действию.
  • Link Blue #0066cc — Встроенные текстовые ссылки, ссылки со стрелками и шевронами.
  • Citrus Gradient #3b3b23 — Альтернативный вариант отделки, ставший визитной карточкой продукта — темная основа, плавно переходящая в желто-зеленые блики.

Нейтральные

  • Primary Ink #1d1d1f — Заголовки, основной текст, подписи к кнопкам — доминирующий тон переднего плана на всех поверхностях; фон главного изображения товара — плавно переходит от сплошного #1d1d1f вверху в хроматический синий.
  • Mid Gray #707070 — Вторичный текст, неактивное состояние навигации, приглушенные метки пользовательского интерфейса
  • Deep Gray #474747 — Навигационный текст и иконография выделены средним шрифтом.
  • Hairline #d6d6d6 — Тонкие границы между разделами и элементами пользовательского интерфейса.
  • Canvas #f5f5f7 — Чередование фонов разделов — серая полоса, которая разделяет белые участки.
  • Paper #ffffff — Поверхность карточки, основной фон страницы, текст кнопки на темном фоне.

Типографика

от 12 до 96px · 10 ступеней

  • SF Pro Display — замена: Inter · начертания 600, 700 · Заголовки-«герои» и подзаголовки для отображения — вес 700 при 80–96px с отрицательным межбуквенным интервалом до -1.44px создают фирменный стиль Apple «огромный заголовок, парящий в белом цвете». Заменители: Inter, system-ui
  • SF Pro Display — замена: Inter · начертания 600 · Заголовки разделов, названия карточек, подзаголовки — шрифт 600 с немного положительным межбуквенным интервалом воспринимается как теплый и дружелюбный при средних размерах, в отличие от кратких заголовков выше.
  • SF Pro Text — замена: Inter · начертания 400, 500, 600 · Основной текст, навигация, вспомогательные абзацы, небольшие подписи — шрифт с индексом 400 при 17px является основным. Отрицательное межбуквенное расстояние позволяет сделать основной текст более лаконичным на страницах с большим количеством информации.

Интервалы и форма

НазначениеЗначение
Плотностьплотная
Базовый шаг8-10px
Радиус кнопок980px
Радиус карточек28px
Тенинет — границы вместо теней
Между секциями100-120px
Ширина страницы1200px

ИИ соберёт ваш сайт в стиле Apple (España) и наполнит его

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

Похожие стили

  • Airbnb — Тихая белая стена галереи с одной кораллово-красной закладкой
  • Peak Design — Стена галереи, частично освещенная
  • Ramp — Финансовый отдел редакции, черно-белые страницы с одним неоновым маркером. Практически монохромная поверхнос…
  • 099 SUPPLY — Стена галереи, заполненная черно-белыми объектами
  • Orderful — палуба управления промышленной логистикой — распечатанный контрольный лист диспетчера логистики, выполненный…
  • Apple (España) — белая витрина галереи
  • teenage engineering — Промышленный каталог в студийном освещении — продукт является единственным значимым объектом на странице, а …
  • Apple (España) — Галерейная витрина в утреннем тумане
  • Lightship — Кинематографическая диорама открытой дороги. Теплые кремовые стены галереи, украшенные крупными пейзажными ф…
  • Custo — Галерея цвета оружейной стали с монолитным шрифтом. Выставочный зал в приглушенных серо-зеленых тонах, где е…
  • Silencio — Белая комната с парящими артефактами. Галерейная витрина из теплой бумаги, где каждый элемент занимает свое …
  • ORYZO AI — Фоторепортаж о фотолаборатории. Одинокий объект, парящий в теплой темноте, кремовый шрифт — единственное укр…