Apple
Biela izba s jediným modrým vypínačom
Dizajn spoločnosti Apple je vzorom zdržanlivosti: takmer biele plátno, dostatok bieleho priestoru a jediný, žiarivý modrý akcent, vďaka ktorému každá akcia pôsobí premyslene. Hlavným zameraním je typografia – SF Pro s negatívnym rozstupom písmen, ktorý sa zmenšuje so zvyšujúcou sa veľkosťou, čo dodáva titulkom architektonickú jasnosť bez toho, aby boli príliš ťažké. Produkt JE dizajn: dominujú veľké fotografie produktov a obrázky životného štýlu, zatiaľ čo chrómové prvky ustupujú do tenkých rámov, priesvitnej navigácie a jemných línií. Sekcie sa striedajú na svetlosivej pozadí s plnofarebnými blokmi pre propagačné materiály, čím sa vytvára rytmus skôr zmenami mierky ako dekoratívnymi prvkami.
Rozloženie stránky je na celú šírku bez pevne stanovenej maximálnej šírky kontajnera – sekcie sa rozťahujú od okraja k okraju s textovými blokmi vycentrovanými vo vnútri s rozmermi približne 980 pixelov. Navigácia tvorí jeden pevný globálny panel s ďalším podpriečinkom pre každý produkt, ktorý sa zobrazí pri rolovaní. Hlavné rozloženie je vždy vycentrované: veľký názov produktu, jednoriadkový slogan, dve tlačidlá s nápismi a potom obrázok produktu, ktorý vyplní zvyšnú časť zobrazovanej oblasti. Sekcie sú vertikálne naskladané s veľkorysým vertikálnym rytmom (64 pixelov a viac medzi sekciami), striedavo sa používajú nápisy #f5f5f7 a farebné pozadia. Spodná stránka je jeden horizontálny riadok kariet služieb na celú šírku (Apple TV+, Fitness+, Hudba, Arkáda), pričom každá obsahuje blok s fotografiou, prekryvný text a tlačidlo s nápisom. Žiadne bočné panely, žiadne viacstĺpcové rozloženie obsahu, žiadne asymetrické kompozície – všetko je vycentrované, naskladané a symetrické.
Fotografia je dominantným vizuálnym jazykom. Fotografie produktov sú zhotovené na čisto bielom alebo jemne sivom pozadí, bez akéhokoľvek kontextu – zariadenie JE hviezdou, izolovanou a osvetlenou. Lifestyle fotografie sú zobrazené v banneroch na celú šírku, často s tesne orezanými objektmi. Farebné prechody (pastelovo modrá, ružová, zelená) slúžia ako pozadie pre sekcie produktov, nie ako dekorácia. Ikonografia je minimalistická a založená na čiarach, hrubá 1 – 2 pixely, v rovnakej škále sivej ako text. Žiadne ilustrácie, žiadna abstraktná grafika, žiadne 3D vykreslenia, okrem samotných fotografií produktov.
Paleta
Značka
- Apple Blue
#0071e3— Vyplnené akčné tlačidlá, vybrané stavy – jediná interaktívna chromatická farba používaná striedmo, aby každý vzhľad mal význam. - Link Blue
#0066cc— Zvýraznené orámovanie akcií, vložené odkazy – tam, kde by vyplnený tablet pôsobil príliš krikľavo, sa používa sýtejšia farba ako Apple Blue. - Signal Blue
#2997ff— Dekoratívne rámy, obrysy obrázkov, okraje ikon - najsvetlejšia modrá farba v systéme, používaná skôr na atmosféru než na interakciu s používateľom.
Neutrálny
- Carbon
#1d1d1f— Hlavný text, orámovanie nadpisov, navigačné riadky, orámovanie kariet - prevládajúca farba atramentu je takmer čierna s miernym náznakom tepla. - Frost
#f5f5f7— Plátno stránky, pozadie hlavného textu a povrch päty sú v typickej svetlosivej farbe Apple, ktorá je o niečo chladnejšia ako čisto biela. - Ice
#f4f8fb— Výrazné výplne povrchov, jemné odtiene, text tlačidiel na tmavom pozadí – jemný modrý odtieň, ktorý oživí sekciu bez toho, aby ju zvýraznil. - Smoke
#333333— Sekundárny text, výplň navigácie, orámovanie tlačidiel – Všestranná neutrálna farba pre orámovanie a ikony, ktoré potrebujú viac výrazu ako stredne sivá. - Graphite
#474747— Navigačný text, navigačné orámovanie, orámovanie odkazov - zaujíma medziľahlú pozíciu medzi uhlíkom a dymom v hierarchii prvkov. - Ash
#707070— Text päty, orámovanie zoznamu, orámovanie navigácie, stlmený text tela – stredne sivá farba pre obsah, ktorý má byť prítomný, ale nie výrazný.
Typografia
od 12 do 56px · 8 krokov
- SF Pro Display — náhrada: Inter · obrysy 400, 600, 700 · Nadpisy a veľký text – veľkosti 40px a viac používajú formát zobrazenia pre užšiu clonu a silnejšie negatívne sledovanie; 700 je vyhradených pre reklamné rozloženia a 400 je pre názvy produktov v redakčnom obsahu.
- SF Pro Text — náhrada: Inter · obrysy 300, 400, 600 · Text tela, navigácia, tlačidlá, podnadpisy – pracovné písmo; 400 pre text tela, 300 pre podnadpisy a kvalifikované popisky, 600 pre navigačné prvky a text tlačidiel; záporné rozstupy medzi písmenami sa úmerne zmenšujú s veľkosťou (z -0,022 em na 12px na -0,01 em na 44px).
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | priemerný |
| Základný krok | 12px |
| Polomer tlačidla | 980px |
| Polomer karty | 8px |
| Tiene | nie - okraje namiesto tieňov |
| Medzi sekciami | 64px |
| Šírka stránky | 1440px |
Umelá inteligencia vytvorí vašu webovú stránku v štýle Apple a naplní ju
- Doplňte produktmi a príspevkami cez odkaz - Instagram, TikTok, Facebook.
- Preneste obsah zo svojej starej stránky – stačí zadať adresu.
- Moderný dizajn na najlepšom engine: React ( Next.js) s vykresľovaním servera a SEO optimalizáciou hneď po vybalení.
- Plne automatizovaná SEO optimalizácia pre výsledky vyhľadávania a odporúčania neurónových sietí.
Podobné štýly
- Studio — Galériová stena v pohybe. Každá obrazovka predstavuje tichú, sivú výstavnú plochu, kde typografické materiály a prekrývajúce sa kreatívne diela súperia o pozornosť.
- Mollie — Kašmírový pult, tmavá účtovná kniha. Okolo čierneho textu nechajte dostatok bieleho priestoru na redakčný dizajn a potom zdôraznite body súvisiace s produktom teplými krémovými, espresso hnedými odtieňmi a hmatovými fotografiami skutočných spôsobov platby.
- Basis Theory — Platobné terminály v dizajnérskom štúdiu. Vizuálny smer definuje biely technický papier, prekrývajúce sa priesvitné transakčné vrstvy a jeden tyrkysový ovládací prvok.
- CleanShot X — Štúdio s modro osvetlenou pracovnou plochou. Vytvorte pokojný biely priestor okolo kompaktného čierneho textu a potom nechajte sýte modré ovládacie prvky a vrstvené obrázky produktov Mac dostať sa do centra pozornosti.
- Modern Treasury — Účtovná kniha pokladnice na milimetrovom papieri. Vytvorte stránky, ktoré pripomínajú tichý biely operačný hárok, kde sú peňažné toky zobrazené tenkými čiarami, označenými uzlami a presnými, skrytými ovládacími prvkami.
- Basha-Franklin — Mriežka galérie pod bielym prekladom. Použite teplý odtieň #f4ede6, jemnú čiernu štruktúru a asymetrické stĺpy podľa fotografií, ktoré vyzerajú ako vytlačené architektonické portfólio.
- Bajgart Office — Stena s editorskou galériou. Použite veľký biely priestor, kde jemné pätkové písma a fragmenty portfólia majú väčšiu vizuálnu váhu ako chrómované prvky rozhrania.
- Heptabase — Slnečný stôl. Teplé povrchy pripomínajúce papier, ovládacie prvky farby uhľa a plávajúce okná na výskum vytvárajú skôr pocit organizovaného pracovného priestoru než softvérového ovládacieho panela.
- Bejamas — Pyžamo – kyselinovo-limetková farba cez čierne sklo. Vytvorte pokojné, svetlosivé redakčné stránky prerušované podmanivými čiernymi panelmi, kde sa s povrchom pretínajú rozmazané zelené pruhy svetla.
- Baba — Starostlivosť o poznámky v červenom slnečnom svetle. Vytvorte široké červené naratívne pruhy okolo intímnych bielych, ružových a krémových informačných povrchov s použitím fotografií ľudí ako emocionálneho centra.
- Grafana Labs — Riadiaca miestnosť signálnej stanice Sunrise. Tiché sivobiele pracovné prostredie sa spája so širokým štvorfarebným horizontálnym gradientom a presnými modrými signálmi rozhrania.
- Kagi — Samostatná čitáreň. Vytvorte otvorený biely priestor okolo výrazného grafitového textu pomocou jemných fialových akcentov a teplých pastelových povrchov, ktoré narušia pokojnú atmosféru.