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 — Асобная чытальная зала. Стварыце адкрытую белую прастору вакол выразнага тэксту графітавага колеру, выкарыстоўваючы невялікія фіялетавыя акцэнты і цёплыя пастэльныя тоны для аздаблення паверхняў, каб парушыць спакой