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