Apple
Egy fehér szoba egyetlen kék kapcsolóval
Az Apple formatervezése a visszafogottság mintaképe: szinte fehér vászon, bőséges fehér terület és egyetlen, élénk kék díszítés, amely minden mozdulatot átgondoltnak sugároz. A fő hangsúly a tipográfián van – az SF Pro negatív betűközzel, amely a méret növekedésével csökken, építészeti tisztaságot kölcsönözve a címsoroknak anélkül, hogy túlzottan nehézkesek lennének. A termék maga a dizájn: a nagyméretű termékfotók és életstílus-képek dominálnak, míg a krómozott elemek vékony keretekbe, áttetsző navigációba és finom vonalakba húzódnak. A világosszürke háttér előtti részek váltakoznak a promóciós anyagok teljes színű blokkjaival, a ritmust inkább a méretarányváltásokkal, mint a díszítőelemekkel teremtve.
Az oldal elrendezése teljes szélességű, rögzített maximális konténerszélesség nélkül – a szakaszok széltől szélig húzódnak, a szövegblokkok pedig körülbelül 980 képpontos középponttal vannak ellátva. A navigáció egyetlen, rögzített globális sáv, amelyen minden egyes termékhez egy további almappa található, amelyek görgetés közben megjelennek. A fő elrendezés mindig középre igazított: egy nagy terméknév, egy egysoros szlogen, két tabletta gomb, majd egy termékkép, amely kitölti a fennmaradó látómezőt. A szakaszok függőlegesen egymásra vannak halmozva, nagyvonalú függőleges ritmussal (64 képpont+ a szakaszok között), váltakozva a #f5f5f7 hashtagekkel és színes hátterekkel. Az alsó oldal egyetlen vízszintes sor teljes szélességű szolgáltatáskártyákkal (Apple TV+, Fitness+, Zene, Játékgép), mindegyik egy fotóblokk átfedő szöveggel és egy tabletta gombbal. Nincsenek oldalsávok, nincsenek többoszlopos tartalomelrendezések, nincsenek aszimmetrikus kompozíciók – minden középre igazított, egymásra halmozott és szimmetrikus.
A fénykép a domináns vizuális nyelv. A termékfotókat tiszta fehér vagy lágy szürke háttér előtt készítik, bármilyen kontextus nélkül – az eszköz A sztár, elszigetelten és megvilágítva. Az életstílusfotók teljes szélességű bannerekben jelennek meg, gyakran szorosan kivágott objektumokkal. A színátmenetek (pasztellkék, rózsaszín, zöld) a termékrészek háttereként szolgálnak, nem dekorációként. Az ikonográfia minimalista és vonalas, 1-2 képpont vastagságú, a szöveggel megegyező szürkeárnyalatos. Nincsenek illusztrációk, absztrakt grafika, 3D-s látványtervek, kivéve magukat a termékfotókat.
Paletta
Márka
- Apple Blue
#0071e3— Kitöltött akciógombok, kiválasztott állapotok – az egyetlen interaktív kromatikus szín, amelyet takarékosan használnak, hogy minden megjelenés értelmes legyen. - Link Blue
#0066cc— Kiemelt műveleti szegélyek, beágyazott linkek – az Apple Blue-nál telítettebb színt használnak ott, ahol egy kitöltött tablet túl feltűnő lenne. - Signal Blue
#2997ff— Dekoratív keretek, képkörvonalak, ikonszegélyek – a rendszer legvilágosabb kék színe, amelyet inkább a hangulat megteremtéséhez, mint a felhasználói interakcióhoz használnak.
Semleges
- Carbon
#1d1d1f— A fő szöveg, a címsorok szegélyei, a navigációs sorok, a kártyák szegélyei – a tinta domináns színe majdnem fekete, enyhe melegséggel. - Frost
#f5f5f7— Az oldalvászon, a fő szöveg háttere és a lábléc felülete az Apple jellegzetes világosszürkéje, ami egy kicsit hűvösebb a tiszta fehérnél. - Ice
#f4f8fb— Kifejező felületi kitöltések, finom színárnyalatok, gombszöveg sötét háttéren – egy finom kék árnyalat, amely élénkíti a részt anélkül, hogy az kitűnne. - Smoke
#333333— Másodlagos szöveg, navigációs kitöltés, gombszegélyek – Sokoldalú semleges szín szegélyekhez és ikonokhoz, amelyekhez nagyobb ütősségre van szükség, mint egy középszürke. - Graphite
#474747— Navigációs szöveg, navigációs szegélyek, hivatkozás szegélyek – az elemhierarchiában a Szén és a Füst között foglalnak el köztes helyet. - Ash
#707070— Lábléc szövege, listaszegélyek, navigációs szegélyek, elnémított szövegtörzs – Középszürke olyan tartalomhoz, amelynek jelen kell lennie, de nem feltűnőnek.
Tipográfia
12-től 56 képpontig · 8 lépésben
- SF Pro Display — csere: Inter · körvonalak 400, 600, 700 · Címsorok és nagyméretű szövegek – A 40 képpontnál nagyobb méretek keskenyebb rekesznyílást és erősebb negatív követést biztosító megjelenítési formátumot használnak; a 700 képpont a hirdetési elrendezésekhez, a 400 pedig a szerkesztői tartalmakban található terméknevekhez van fenntartva.
- SF Pro Text — csere: Inter · körvonalak 300, 400, 600 · Törzsszöveg, navigáció, gombok, alcímek – működő betűtípus; 400 a törzsszöveghez, 300 az alcímekhez és a minősített címkékhez, 600 a navigációs elemekhez és a gombok szövegéhez; a negatív betűköz a mérettel arányosan csökken (-0,022em-ről 12 képpontra, majd -0,01em-ről 44 képpontra).
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | átlagos |
| Alapvető lépés | 12px |
| Gomb sugara | 980px |
| Kártya sugara | 8px |
| Árnyékok | nincs - szegélyek árnyékok helyett |
| Szakaszok között | 64px |
| Oldal szélessége | 1440px |
A mesterséges intelligencia Apple stílusban fogja elkészíteni a weboldaladat, és kitölti azt.
- Töltsd fel termékeidet és posztjaidat a linkeken keresztül - Instagram, TikTok, Facebook.
- Tartalom átvitele régi webhelyéről – csak adja meg a címet.
- Modern dizájn a legjobb keresőmotoron: React ( Next.js) szerveralapú rendereléssel és SEO optimalizálással, azonnal használható formában.
- Teljesen automatizált SEO optimalizálás a keresési eredményekhez és a neurális hálózati ajánlásokhoz.
Hasonló stílusok
- Studio — Egy mozgó galériafal. Minden paraván egy csendes, szürke kiállítófelületet képvisel, ahol tipográfiai anyagok és egymást átfedő kreatív alkotások versengenek a figyelemért.
- Mollie — Egy kasmírpult, egy sötét főkönyv. Hagyj bőséges fehér helyet a fekete szöveg körül a szerkesztői dizájnnak, majd erősítsd meg a termékekkel kapcsolatos pontokat meleg krémszínűekkel, eszpresszóbarnákkal és a tényleges fizetési módok tapintható fotóival.
- Basis Theory — Fizetési terminálok a tervezőstúdióban. Fehér műszaki papír, átfedő áttetsző tranzakciós rétegek és egyetlen türkiz vezérlőelem határozza meg a vizuális irányt.
- CleanShot X — Egy stúdió kéken megvilágított asztallal. Hozz létre egy nyugodt fehér teret a tömör fekete szöveg körül, majd hagyd, hogy a gazdag kék vezérlők és a réteges Mac termékképek kerüljenek középpontba.
- Modern Treasury — Pénzügyi főkönyv milliméterpapíron. Hozzon létre olyan oldalakat, amelyek egy csendes, fehér működési lapra hasonlítanak, ahol a pénzáramlásokat finom vonalak, feliratozott csomópontok és precíz, rejtett vezérlők jelenítik meg.
- Basha-Franklin — Egy galériarács fehér áthidaló alatt. Használj meleg #f4ede6 árnyalatot, finom fekete szerkezetet és aszimmetrikus oszlopokat, amelyek fényképek alapján készültek, és nyomtatott építészeti portfólióra hasonlítanak.
- Bajgart Office — Szerkesztői galériafal. Használjon nagy fehér területet, ahol a finom talpas betűtípusok és a portfóliótöredékek nagyobb vizuális súllyal bírnak, mint a krómozott felhasználói felület elemei.
- Heptabase — Egy napsütötte íróasztal. Meleg, papírszerű felületek, szénszínű vezérlők és a kutatáshoz használható lebegő ablakok egy rendezett munkaterület érzetét keltik, nem pedig egy szoftveres kezelőpanelét.
- Bejamas — Pizsama – savas mész fekete üvegen keresztül. Alkosson nyugodt, világosszürke szerkesztőségi oldalakat, amelyeket magával ragadó fekete panelek szakítanak meg, ahol elmosódott zöld fénycsíkok metszik a felületet.
- Baba — Gondoskodásra felírt üzenetek vörös napfényben. Hozz létre széles piros narratív csíkokat az intim fehér, rózsaszín és krémszínű információs felületek köré, az emberek fényképeit érzelmi középpontként használva.
- Grafana Labs — A Sunrise Jelzőállomás irányítóterme. A csendes szürke-fehér munkaterület széles, négyszínű horizontátmenettel és precíz kék interfészjelekkel ötvöződik.
- Kagi — Külön olvasóterem. Hozz létre egy nyitott fehér teret a vastag grafitszínű szöveg körül, finom lila díszítésekkel és meleg pasztellfelületekkel, hogy megtörd a nyugalmat.