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
- Ui — klinický plán na matnom papieri
- ElevenLabs — Fotoesej v teplých krémových tónoch s jemnými nadpismi. Zápisník v štýle Bauhaus – papier farby vaječnej škrupiny, čierny atrament a jeden fialovo-oranžový akcent na vystavenie produktov.
- monopo saigon — Tekutá, dúhová žiara za redakčným tichom – monochromatická redakčná galéria vznášajúca sa na roztavenom svetle
- Awesomic — Redakčná zinková sieťovina s oranžovými interpunkčnými znamienkami pripomínajúcimi konfety
- Monad — redakčný technický časopis na teplom pergamene
- Dub — Ovládací panel z matného ryžového papiera Link
- Seline Analytics — Tichý analytický stôl na teplom papieri
- Ventriloc — Redakčné observatórium údajov na teplom papieri – jediný oranžový uhlík zvýrazňujúci monochromatickú presnosť
- Duolingo — Hravý maskot triedy na bielom papieri
- Stripe — Účtovná kniha napísaná indigovým atramentom na matnom skle
- Notion — Teplý papierový zápisník na poludňajšom slnku
- Hyer Aviation — Súmrak v kokpite nad pergamenom. Bledá úsvitná obloha sa stretáva s patkovým logom veľkosti trupu a jediný teplý hlinený akcent prelamuje monochromatickú zdržanlivosť.