Apple
Bílá místnost s jediným modrým vypínačem
Design Applu je vzorem zdrženlivosti: téměř bílé plátno, dostatek bílého prostoru a jediný, zářivě modrý akcent, díky kterému každá akce působí promyšleně. Hlavním zaměřením je typografie – SF Pro s negativním rozestupem písmen, který se s rostoucí velikostí zmenšuje, což titulkům dodává architektonickou jasnost, aniž by byly příliš těžké. Produkt JE design: dominují velké fotografie produktů a lifestylové obrázky, zatímco chromové prvky ustupují do tenkých rámečků, průsvitné navigace a jemných linií. Sekce se střídají na světle šedém pozadí s plnobarevnými bloky pro propagační materiály, čímž se vytváří rytmus spíše změnami měřítka než dekorativními prvky.
Rozvržení stránky je plnošířkové bez pevně stanovené maximální šířky kontejneru – sekce se roztahují od okraje k okraji a textové bloky jsou vycentrovány na přibližně 980 pixelů. Navigace je tvořena jedním pevným globálním panelem s další podsložkou pro každý produkt, která se zobrazí při posouvání. Hlavní rozvržení je vždy vycentrováno: velký název produktu, jednořádkový slogan, dvě tlačítka s lamelami a poté obrázek produktu, který vyplňuje zbývající zobrazovanou oblast. Sekce jsou svisle naskládané s velkorysým vertikálním rytmem (64 pixelů a více mezi sekcemi), střídají se #f5f5f7 a barevné pozadí. Spodní stránka je tvořena jednou vodorovnou řadou karet služeb na celou šířku (Apple TV+, Fitness+, Hudba, Arkáda), každá s blokem fotografie s překryvným textem a tlačítkem s lamelami. Žádné postranní panely, žádné vícesloupcové rozvržení obsahu, žádné asymetrické kompozice – vše je vycentrované, naskládané a symetrické.
Fotografie je dominantním vizuálním jazykem. Produktové fotografie jsou pořízeny na čistě bílém nebo měkkém šedém pozadí, bez jakéhokoli kontextu – zařízení JE hvězdou, izolovanou a osvětlenou. Lifestyle fotografie jsou zobrazeny v bannerech na celou šířku, často s těsně oříznutými objekty. Barevné přechody (pastelově modrá, růžová, zelená) slouží jako pozadí pro produktové sekce, nikoli jako dekorace. Ikonografie je minimalistická a založená na čarach, o tloušťce 1–2 pixely, ve stejné stupnici šedi jako text. Žádné ilustrace, žádná abstraktní grafika, žádné 3D renderingy, s výjimkou samotných produktových fotografií.
Paleta
Značka
- Apple Blue
#0071e3— Vyplněná akční tlačítka, vybrané stavy – jediná interaktivní chromatická barva používaná střídmě, aby každý vzhled měl smysl. - Link Blue
#0066cc— Zvýrazněné okraje akcí, vložené odkazy – tam, kde by vyplněný tablet působil příliš křiklavě, se používá sytější barva než Apple Blue. - Signal Blue
#2997ff— Dekorativní rámečky, obrysy obrázků, ohraničení ikon - nejsvětlejší modrá barva v systému, použitá spíše pro atmosféru než pro interakci s uživatelem.
Neutrální
- Carbon
#1d1d1f— Hlavní text, ohraničení nadpisů, navigační řádky, ohraničení karet - převládající barva inkoustu je téměř černá s lehkým nádechem tepla. - Frost
#f5f5f7— Plátno stránky, pozadí hlavního textu a povrch zápatí jsou v typické světle šedé barvě Apple, která je o něco chladnější než čistě bílá. - Ice
#f4f8fb— Výrazné výplně povrchů, jemné odstíny, text tlačítek na tmavém pozadí – jemný modrý odstín, který oživí sekci, aniž by ji zbytečně zvýraznil. - Smoke
#333333— Sekundární text, výplň navigace, ohraničení tlačítek – Všestranná neutrální barva pro ohraničení a ikony, které potřebují více výrazu než středně šedá. - Graphite
#474747— Navigační text, navigační ohraničení, ohraničení odkazů - v hierarchii prvků zaujímá mezilehlou pozici mezi uhlíkem a kouřem. - Ash
#707070— Text zápatí, ohraničení seznamu, ohraničení navigace, tlumený text v hlavním textu – Středně šedá pro obsah, který má být přítomen, ale ne výrazný.
Typografie
od 12 do 56 pixelů · 8 kroků
- SF Pro Display — nahrazení: Inter · obrysy 400, 600, 700 · Nadpisy a velký text – velikosti 40px a více používají formát zobrazení pro užší clonu a silnější negativní sledování; velikost 700 je vyhrazena pro reklamní sady a 400 pro názvy produktů v redakčním obsahu.
- SF Pro Text — nahrazení: Inter · obrysy 300, 400, 600 · Text, navigace, tlačítka, podnadpisy – pracovní písmo; 400 pro text, 300 pro podnadpisy a kvalifikované popisky, 600 pro navigační prvky a text tlačítek; záporné rozteče písmen se úměrně zmenšují s velikostí (z -0,022 em na 12px na -0,01 em na 44px).
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | průměrný |
| Základní krok | 12px |
| Poloměr tlačítka | 980px |
| Poloměr karty | 8px |
| Stíny | ne - okraje místo stínů |
| Mezi sekcemi | 64px |
| Šířka stránky | 1440px |
Umělá inteligence vám vytvoří web ve stylu Apple a naplní ho
- Doplňujte produkty a příspěvky přes odkaz - Instagram, TikTok, Facebook.
- Přeneste obsah ze starého webu – stačí zadat adresu.
- Moderní design na nejlepším enginu: React ( Next.js) s renderováním na serveru a SEO optimalizací ihned po vybalení.
- Plně automatizovaná SEO optimalizace pro výsledky vyhledávání a doporučení neuronových sítí.
Podobné styly
- Ui — klinický plán na matném papíře
- ElevenLabs — Fotoesej v teplých krémových tónech s decentními nadpisy. Zápisník ve stylu Bauhausu – papír barvy vaječné skořápky, černý inkoust a jeden fialovooranžový akcent pro vystavení produktů.
- monopo saigon — Tekutá, duhová záře za redakčním tichem – monochromatická redakční galerie vznášející se na roztaveném světle
- Awesomic — Redakční zinková síťovina s oranžovými interpunkčními znaménky připomínajícími konfety
- Monad — redakční technický časopis na teplém pergamenu
- Dub — Ovládací panel Link z matného rýžového papíru
- Seline Analytics — Tichý analytický stůl na teplém papíře
- Ventriloc — Redakční observatoř dat na teplém papíře - jediný oranžový uhlík zdůrazňující monochromatickou preciznost
- Duolingo — Hravý maskot třídy na bílém papíře
- Stripe — Účetní kniha psaná indigovým inkoustem na matném skle
- Notion — Teplý papírový zápisník v polední slunci
- Hyer Aviation — Soumrak v kokpitu nad pergamenem. Bledá ranní obloha se setkává s patkovým logem velikosti trupu a jediný teplý hliněný akcent prolamuje monochromatickou zdrženlivost.