Apple

Белая комната с единственным синим выключателем

Дизайн Apple — это образец сдержанности: почти белый холст, достаточно свободного пространства и один яркий синий акцент, благодаря которому каждое действие кажется продуманным. Основной акцент делается на типографике — шрифт SF Pro с отрицательным межбуквенным расстоянием, которое уменьшается с увеличением размера, придавая заголовкам архитектурную ясность без излишней тяжести. Продукт И ЕСТЬ дизайн: доминируют крупные фотографии продукта и изображения, демонстрирующие образ жизни, а хромированные элементы отступают в тонкие рамки, полупрозрачную навигацию и тонкие линии. Разделы чередуются на светло-сером фоне с полноцветными блоками для рекламных материалов, создавая ритм за счет изменения масштаба, а не декоративных элементов.

Модель страницы с полным заполнением без фиксированной максимальной ширины контейнера — секции растягиваются от края до края, а текстовые блоки центрируются внутри примерно на 980px. Навигация представляет собой единую фиксированную глобальную панель с дополнительной подпапкой для каждого продукта, которая появляется при прокрутке. Главный шаблон всегда центрирован: крупное название продукта, однострочный слоган, две кнопки-«таблетки», затем изображение продукта, заполняющее оставшуюся область просмотра. Секции располагаются вертикально друг над другом с щедрым вертикальным ритмом (64px+ между секциями), чередуя #f5f5f7 и цветные фоны. Нижняя страница представляет собой один горизонтальный ряд карточек услуг с полным заполнением (Apple TV+, Fitness+, Music, Arcade), каждая из которых представляет собой фотографический блок с наложенным текстом и кнопкой-«таблеткой». Никаких боковых панелей, никаких многоколоночных макетов контента, никаких асимметричных композиций — все центрировано, расположено друг над другом и симметрично.

Фотография является доминирующим визуальным языком. Фотографии товаров выполняются на чисто белом или мягком сером фоне без какого-либо контекста окружающей обстановки — устройство ЯВЛЯЕТСЯ главным героем, изолированным и освещенным. Фотографии в стиле лайфстайл размещаются в баннерах во всю ширину страницы, часто с плотно обрезанными объектами. Цветовые переходы (пастельно-голубой, розовый, зеленый) служат фоном для разделов, посвященных товарам, а не украшением. Иконография минималистична и основана на линиях, толщина 1-2px, в той же серой гамме, что и текст. Никаких иллюстраций, никакой абстрактной графики, никаких 3D-рендеров, кроме самих фотографий товаров.

Минимализм

https://www.apple.com

Палитра

Бренд

Apple Blue #0071e3 — Заполненные кнопки действий, выбранные состояния — единственный интерактивный хроматический цвет, используемый экономно, чтобы каждое появление имело значение.
Link Blue #0066cc — Выделенные границы действий, встроенные ссылки — более насыщенный цвет, чем Apple Blue, используется там, где заполненная таблетка будет слишком броской.
Signal Blue #2997ff — Декоративные рамки, контуры изображений, обводка значков — самый светлый синий цвет в системе, используемый для создания атмосферы, а не для взаимодействия с пользователем.

Нейтральные

Carbon #1d1d1f — Основной текст, границы заголовков, линии навигации, границы карточек — преобладающий цвет чернил, почти черный с легким оттенком теплоты.
Frost #f5f5f7 — Холст страницы, фон основного текста, поверхность нижнего колонтитула — фирменный светло-серый цвет Apple, немного холоднее чисто белого.
Ice #f4f8fb — Выразительные поверхностные заливки, тонкие оттенки, текст кнопок на темном фоне — едва заметный синий оттенок, который оживляет раздел, не выделяя его.
Smoke #333333 — Второстепенный текст, заливка навигации, границы кнопок — универсальный нейтральный цвет для границ и значков, которым требуется большая выразительность, чем средне-серый.
Graphite #474747 — Текст навигации, границы навигации, границы ссылок — занимает промежуточное положение между Carbon и Smoke в иерархии элементов.
Ash #707070 — Текст нижнего колонтитула, границы списков, границы навигации, приглушенный основной текст — средне-серый цвет для контента, который должен присутствовать, но не выделяется.

Типографика

от 12 до 56px · 8 ступеней

SF Pro Display — замена: Inter · начертания 400, 600, 700 · Заголовки и крупный текст — размеры 40px+ используют формат отображения для более узкой диафрагмы и более сильного негативного трекинга; 700 зарезервировано для рекламных макетов, 400 — для названий продуктов в редакционных материалах.
SF Pro Text — замена: Inter · начертания 300, 400, 600 · Основной текст, навигация, кнопки, подзаголовки — рабочий шрифт; 400 для основного текста, 300 для подзаголовков и уточненных меток, 600 для элементов навигации и текста кнопок; отрицательное межбуквенное расстояние уменьшается пропорционально размеру (от -0.022em до 12px до -0.01em до 44px).

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

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

ИИ соберёт ваш сайт в стиле Apple и наполнит его

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

Создать сайт в этом стиле

Apple

Палитра

Типографика

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

ИИ соберёт ваш сайт в стиле Apple и наполнит его

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