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-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Ui — клінічний план на матовому папері
- ElevenLabs — Фоторепортаж у теплих кремових тонах із ненав'язливими заголовками. Блокнот у стилі Баухаус — папір кольору яєчної шкаралупи, чорне чорнило, один фіолетовий та помаранчевий акцент для демонстрації продукту.
- monopo saigon — Рідке сяйво, що переливається, за редакційною тишею — монохромна редакційна галерея, що ширяє на розплавленому світлі.
- Awesomic — Редакційна цинкова сітка з помаранчевими розділовими знаками, що нагадують конфетті
- Monad — редакційний технічний журнал на теплому пергаменті
- Dub — матова панель управління Link на рисовому папері
- Seline Analytics — Тихий аналітичний стіл на теплий папір
- Ventriloc — Редакційна обсерваторія даних на теплому папері - єдиний помаранчевий куточок, що підкреслює монохромну точність.
- Duolingo — Грайливий талісман класу на білому папері
- Stripe — Бухгалтерська книга, написана індиговим чорнилом, на матовому склі
- Notion — Теплий паперовий блокнот під полуденним сонцем
- Hyer Aviation — Сутінки в кабіні пілота над пергаментом. Бліде світане небо зустрічається з логотипом із засічками розміром з фюзеляж, а один теплий глиняний акцент порушує монохромну стриманість