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 — Фотарэпартаж аб фоталабараторыі. Самотны аб'ект, які лунае ў цёплай цемры, крэмавы шрыфт - адзінае ўпрыгожванне