Apple
Біла кімната з єдиним синім вимикачем
Дизайн Apple - це зразок стриманості: майже біле полотно, досить вільного простору і один яскравий синій акцент, завдяки якому кожна дія здається продуманою. Основний акцент робиться на друкарні - шрифт SF Pro з негативною міжлітерною відстанню, яка зменшується зі збільшенням розміру, надаючи заголовкам архітектурну ясність без зайвої тяжкості. Продукт І Є дизайн: домінують великі фотографії продукту та зображення, що демонструють спосіб життя, а хромовані елементи відступають у тонкі рамки, напівпрозору навігацію та тонкі лінії. Розділи чергуються на світло-сірому фоні з повнокольоровими блоками для рекламних матеріалів, створюючи ритм за рахунок зміни масштабу, а не декоративних елементів.
Модель сторінки з повним заповненням без фіксованої максимальної ширини контейнера – секції розтягуються від краю до краю, а текстові блоки центруються всередині приблизно на 980px. Навігація є єдиною фіксованою глобальною панеллю з додатковою підпапкою для кожного продукту, яка з'являється при прокручуванні. Головний шаблон завжди центрований: велика назва продукту, однорядковий слоган, дві кнопки-«таблетки», потім зображення продукту, що заповнює область перегляду. Секції розташовуються вертикально один над одним із щедрим вертикальним ритмом (64px+ між секціями), чергуючи #f5f5f7 та кольорові фони. Нижня сторінка є одним горизонтальним рядом карток послуг з повним заповненням (Apple TV+, Fitness+, Music, Arcade), кожна з яких є фотографічним блоком з накладеним текстом і кнопкою-«таблеткою». Жодних бічних панелей, жодних багатоколоночних макетів контенту, ніяких асиметричних композицій — все центровано, розташоване один над одним і симетрично.
Фотографія є домінуючою візуальною мовою. Фотографії товарів виконуються на чисто білому або м'якому сірому фоні без будь-якого контексту навколишнього оточення - пристрій є головним героєм, ізольованим і освітленим. Фотографії в стилі лайфстайл розміщуються в банерах на всю ширину сторінки, часто із щільно обрізаними об'єктами. Кольорові переходи (пастельно-блакитний, рожевий, зелений) є тлом для розділів, присвячених товарам, а не прикрасою. Іконографія мінімалістична і заснована на лініях, товщина 1-2px, у тій самій сірій гамі, що й текст. Жодних ілюстрацій, жодної абстрактної графіки, жодних 3D-рендерів, крім самих фотографій товарів.
Палітра
Бренд
- 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-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Studio — Галерейні стіни в русі. Кожен екран являє собою тиху сіру виставкову поверхню, де друкарські матеріали і креативні роботи, що перекриваються з ними, конкурують за увагу
- Mollie — Кашемірова стійка, темна бухгалтерська книга. Залиште широкий білий простір для редакційного оформлення навколо чорного тексту, а потім закріпіть моменти, пов'язані з продуктом, теплими кремовими, коричневими відтінками еспресо та тактильними фотографіями реальних способів оплати
- Basis Theory — Платіжні термінали у проектній майстерні. Білий технічний папір, накладені один на одного напівпрозорі шари транзакцій та один увімкнений елемент управління бірюзового кольору визначають візуальний напрямок
- CleanShot X — Студія з синім освітленням робочий стіл. Створіть спокійний білий простір навколо компактного чорного тексту, а потім дозвольте насиченим синім елементам керування та багатошаровим зображенням продуктів Mac стати центральними елементами
- Modern Treasury — Казначейська книга на міліметровому папері. Створіть сторінки у вигляді тихого білого операційного листа, де грошові потоки відображаються тонкими лініями, поміченими вузлами та точними прихованими елементами управління
- Basha-Franklin — Галерейна сітка під білою перемичкою. Використовуйте теплий відтінок #f4ede6, тонку чорну структуру та асиметричні колони, створені на основі фотографій, що виглядають як друковане архітектурне портфоліо
- Bajgart Office — Стіна редакційної галереї. Використовуйте широке біле поле, де ледве помітні шрифти із засічками та фрагменти портфоліо несуть у собі більше візуальної маси, ніж хромовані елементи інтерфейсу
- Heptabase — Залитий сонячного світла робочий стіл. Теплі, схожі на папір поверхні, елементи керування вугільного кольору та плаваючі вікна для досліджень створюють відчуття організованого робочого простору, а не панелі керування програмного забезпечення
- Bejamas — Піжама – кислотний лайм крізь чорне скло. Створіть спокійні світло-сірі редакційні сторінки, що перериваються захоплюючими чорними панелями, де розмиті зелені смуги світла перетинають поверхню
- Baba — Записки з догляду у червоному сонячному світлі. Створіть широкі червоні оповідальні смуги навколо інтимних білих, рожевих та кремових інформаційних поверхонь, використовуючи фотографії людей як емоційний центр
- Grafana Labs — Диспетчерська сигнальна станція «Схід сонця». Поєднання тихого сіро-білого робочого простору з широким чотириколірним градієнтом горизонту та точними синіми інтерфейсними сигналами
- Kagi — Окрема читальна зала. Створіть відкритий білий простір навколо виразного тексту графітового кольору, використовуючи невеликі фіолетові акценти та теплі пастельні тони для обробки поверхонь, щоб порушити спокій