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
- Studio — Galerijní stěna v pohybu. Každá obrazovka představuje tichou, šedou výstavní plochu, kde typografické materiály a překrývající se kreativní díla soupeří o pozornost.
- Mollie — Kašmírový pult, tmavá účetní kniha. Kolem černého textu nechte dostatek bílého prostoru pro redakční design a poté zdůrazněte body související s produktem teplými krémovými, espresso hnědými odstíny a hmatovými fotografiemi skutečných platebních metod.
- Basis Theory — Platební terminály v designovém studiu. Vizuální směr definuje bílý technický papír, překrývající se průsvitné transakční vrstvy a jeden tyrkysový ovládací prvek.
- CleanShot X — Studio s modře podsvícenou pracovní plochou. Vytvořte klidný bílý prostor kolem kompaktního černého textu a poté nechte sytě modré ovládací prvky a vrstvené obrázky produktů Mac dostat se do centra pozornosti.
- Modern Treasury — Účetní kniha pokladny na milimetrovém papíře. Vytvořte stránky, které připomínají tichý bílý operační list, kde jsou peněžní toky zobrazeny tenkými čarami, označenými uzly a přesnými, skrytými ovládacími prvky.
- Basha-Franklin — Galerijní mřížka pod bílým překladem. Použijte teplý odstín #f4ede6, jemnou černou strukturu a asymetrické sloupy inspirované fotografiemi, které vypadají jako vytištěné architektonické portfolio.
- Bajgart Office — Nástěnka redakční galerie. Použijte velký bílý prostor, kde jemné patkové fonty a fragmenty portfolia nesou větší vizuální váhu než chromované prvky rozhraní.
- Heptabase — Sluncem zalitý stůl. Teplé povrchy připomínající papír, uhlově zbarvené ovládací prvky a plovoucí okna pro výzkum vytvářejí spíše dojem organizovaného pracovního prostoru než softwarového ovládacího panelu.
- Bejamas — Pyžamo – kyselé vápno skrz černé sklo. Vytvořte klidné, světle šedé redakční stránky přerušované podmanivými černými panely, kde se s povrchem protínají rozmazané zelené pruhy světla.
- Baba — Poznámky s pečlivostí v červeném slunečním světle. Vytvořte široké červené narativní pruhy kolem intimních bílých, růžových a krémových informačních povrchů s fotografiemi lidí jako emocionálním centrem.
- Grafana Labs — Řídicí místnost signální stanice Sunrise. Tiché šedobílé pracovní prostředí se kombinuje se širokým čtyřbarevným horizontálním gradientem a přesnými modrými signály rozhraní.
- Kagi — Samostatná čítárna. Vytvořte otevřený bílý prostor kolem výrazného grafitového textu s použitím jemných fialových akcentů a teplých pastelových povrchů, které naruší klid.