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 — Галерея кольору збройової сталі із монолітним шрифтом. Виставковий зал у приглушених сіро-зелених тонах, де єдиний темний об'єкт та шрифт 57px говорять самі за себе
- Silencio — Біла кімната з артефактами. Галерейна вітрина з теплого паперу, де кожен елемент займає своє місце на тлі негативного об'єму, а тиша є навмисним дизайнерським рішенням
- ORYZO AI — Фоторепортаж про фотолабораторію. Самотній об'єкт, що ширяє в теплій темряві, кремовий шрифт — єдина прикраса