Apple
Бяла стая с един-единствен син ключ
Дизайнът на Apple е модел за сдържаност: почти бяло платно, изобилие от бяло пространство и един-единствен, ярък син акцент, който кара всяко действие да изглежда обмислено. Основният фокус е типографията – SF Pro, с отрицателно разстояние между буквите, което намалява с увеличаване на размера, придавайки на заглавията архитектурна яснота, без да са прекалено тежки. Продуктът Е дизайнът: доминират големи снимки на продукти и изображения на начин на живот, докато хромираните елементи се отдръпват в тънки рамки, полупрозрачна навигация и фини линии. Секциите се редуват на светлосив фон с пълноцветни блокове за рекламни материали, създавайки ритъм чрез промени в мащаба, а не чрез декоративни елементи.
Оформлението на страницата е с пълна ширина, без фиксирана максимална ширина на контейнера – секциите се разтягат от край до край, като текстовите блокове са центрирани на приблизително 980 пиксела. Навигацията е единична, фиксирана глобална лента с допълнителна подпапка за всеки продукт, която се появява при превъртане. Основното оформление е винаги центрирано: голямо име на продукта, едноредов слоган, два бутона за хапчета и след това изображение на продукта, което запълва останалия изглед. Секциите са подредени вертикално с щедър вертикален ритъм (64 пиксела+ между секциите), редувайки се #f5f5f7 и цветни фонове. Долната страница е един хоризонтален ред от карти за услуги с пълна ширина (Apple TV+, Fitness+, Music, Arcade), всяка от които е фото блок с наслагващ се текст и бутон за хапчета. Няма странични ленти, няма многоколонни оформления на съдържанието, няма асиметрични композиции – всичко е центрирано, подредено и симетрично.
Фотографията е доминиращият визуален език. Снимките на продуктите са заснети на чисто бял или мек сив фон, без никакъв контекст – устройството Е звездата, изолирана и осветена. Лайфстайл снимките се показват в банери с пълна ширина, често с плътно изрязани обекти. Цветовите градиенти (пастелно синьо, розово, зелено) служат като фон за продуктовите секции, а не като декорация. Иконографията е минималистична и базирана на линии, с дебелина 1-2 пиксела, в същата скала на сивото като текста. Няма илюстрации, няма абстрактна графика, няма 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 — Отделна читалня. Създайте отворено бяло пространство около удебелен графитен текст, използвайки фини лилави акценти и топли пастелни повърхности, за да разчупите спокойствието.