Apple
In wite keamer mei in inkele blauwe skeakel
It ûntwerp fan Apple is in foarbyld fan beheining: in hast wyt doek, in soad wite romte, en in inkele, libbene blauwe aksint dy't elke aksje bewust makket. De primêre fokus leit op typografy - SF Pro, mei negative letterôfstân dy't ôfnimt mei tanimmende grutte, wêrtroch koppen in arsjitektoanyske dúdlikens krije sûnder al te swier te wêzen. It produkt IS it ûntwerp: grutte produktfoto's en libbensstylôfbyldings dominearje, wylst chrome eleminten weromlûke yn tinne frames, trochsichtige navigaasje en subtile linen. Seksjes wikselje ôf tsjin in ljochtgrize eftergrûn mei full-colour blokken foar promoasjemateriaal, wêrtroch ritme ûntstiet troch feroaringen yn skaal ynstee fan dekorative eleminten.
De side-yndieling is in side mei folsleine breedte sûnder fêste maksimale kontenerbreedte - seksjes útrekkenje fan râne oant râne, mei tekstblokken sintraal binnen op sawat 980px. De navigaasje is in inkele, fêste globale balke mei in ekstra submap foar elk produkt dat ferskynt by it scrollen. De haadyndieling is altyd sintraal: in grutte produktnamme, in slogan fan ien rigel, twa pilknoppen, en dan in produktôfbylding dy't de oerbleaune viewport follet. Seksjes binne fertikaal steapele mei in royaal fertikaal ritme (64px+ tusken seksjes), ôfwikseljend #f5f5f7 en kleurde eftergrûnen. De ûnderste side is in inkele horizontale rige fan tsjinstkaarten mei folsleine breedte (Apple TV+, Fitness+, Muzyk, Arcade), elk in fotoblok mei overlay-tekst en in pilknop. Gjin sydbalken, gjin ynhâldslayouts mei meardere kolommen, gjin asymmetryske komposysjes - alles is sintraal, steapele en symmetrysk.
Fotografie is de dominante fisuele taal. Produktfoto's wurde makke tsjin in suver wite of sêftgrize eftergrûn, sûnder kontekst - it apparaat IS de stjer, isolearre en ferljochte. Lifestylefoto's wurde werjûn yn banners oer folsleine breedte, faak mei strak bysniene objekten. Kleurgradiënten (pastelblau, rôze, grien) tsjinje as eftergrûn foar de produktseksjes, net as dekoraasje. De ikonografy is minimalistysk en line-basearre, 1-2px dik, yn deselde griisskaal as de tekst. Gjin yllustraasjes, gjin abstrakte grafiken, gjin 3D-renderings, útsein de produktfoto's sels.
Palet
Merk
- Apple Blue
#0071e3— Folde aksjeknoppen, selektearre steaten - de ienige ynteraktive chromatyske kleur dy't sparsam brûkt wurdt om elke uterlik betsjuttingsfol te meitsjen. - Link Blue
#0066cc— Markearre aksjegrinzen, ynbêde keppelings - in mear verzadigde kleur as Apple Blue wurdt brûkt wêr't in fol tablet te flitsend wêze soe. - Signal Blue
#2997ff— Dekorative frames, ôfbyldingsomtrekken, ikoanrânen - de ljochtste blauwe kleur yn it systeem, brûkt foar sfear ynstee fan foar brûkersynteraksje.
Neutraal
- Carbon
#1d1d1f— De haadtekst, koptekstgrinzen, navigaasjelinen, kaartrânen - de oerhearskjende inketkleur is hast swart mei in lichte hint fan waarmte. - Frost
#f5f5f7— It sidedoek, de eftergrûn fan 'e haadtekst en it fuottekstoerflak binne Apple's hantekening ljochtgriis, in bytsje koeler as suver wyt. - Ice
#f4f8fb— Ekspressive oerflakopvullingen, subtile kleuren, knoptekst op in donkere eftergrûn - in subtile blauwe tint dy't de seksje oplibbet sûnder it op te fallen. - Smoke
#333333— Sekundêre tekst, navigaasje-opfoling, knopgrinzen - In alsidige neutrale kleur foar rânen en ikoanen dy't mear krêft nedich binne as in middelgriis. - Graphite
#474747— Navigaasjetekst, navigaasjegrinzen, keppelingsgrinzen - nimt in tuskenposysje yn tusken Koalstof en Reek yn 'e eleminthiërargy. - Ash
#707070— Fuottekst, listgrinzen, navigaasjegrinzen, gedempte lichemstekst - In middelgriis foar ynhâld dy't oanwêzich wêze moat, mar net prominent.
Typografy
fan 12 oant 56px · 8 stappen
- SF Pro Display — ferfanging: Inter · sketsen 400, 600, 700 · Koppen en grutte tekst - grutte fan 40px+ brûke in werjefteformaat foar in smelle diafragma en sterkere negative tracking; 700 is reservearre foar reklame-layouts, en 400 is foar produktnammen yn redaksjonele ynhâld.
- SF Pro Text — ferfanging: Inter · sketsen 300, 400, 600 · Lidtekst, navigaasje, knoppen, subkopteksten - wurkjend lettertype; 400 foar lidtekst, 300 foar subkopteksten en kwalifisearre labels, 600 foar navigaasje-eleminten en knoptekst; negative letterôfstân nimt evenredich ôf mei de grutte (fan -0.022em nei 12px nei -0.01em nei 44px).
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | trochsneed |
| Basisstap | 12px |
| Knopradius | 980px |
| Kaartradius | 8px |
| Skaden | gjin grinzen ynstee fan skaden |
| Tusken seksjes | 64px |
| Sidebreedte | 1440px |
AI sil jo webside bouwe yn Apple -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- Ui — klinysk plan op mat papier
- ElevenLabs — In foto-essay yn waarme crèmekleurige toanen mei subtile koppen. In notebook yn Bauhaus-styl - aai-skulpkleurich papier, swarte inket, en in inkele pearse en oranje aksint foar produktwerjefte.
- monopo saigon — In floeibere, iriserende gloed efter de redaksjonele stilte - in monochrome redaksjonele galery dy't driuwt op smeltend ljocht
- Awesomic — Redaksjoneel sinkgaas mei oranje leestekens dy't tinken dogge oan konfetti
- Monad — redaksjoneel technysk tydskrift op waarm perkament
- Dub — Link's matte ryspapier kontrôlepaniel
- Seline Analytics — In rêstige analytyske tafel op waarm papier
- Ventriloc — In redaksjoneel observatoarium fan gegevens op waarm papier - in inkele oranje gloei dy't de monochrome presyzje markearret
- Duolingo — Boartlike klassemaskotte op wyt papier
- Stripe — In rekkenboek skreaun yn indigo-inkt op matglês
- Notion — In waarm papieren notebook yn 'e middeis sinne
- Hyer Aviation — Skimer yn 'e cockpit oer perkament. De bleke moarnsloft treft it rompgrutte serif-logo, en in inkele waarme klaai-aksint ûnderbrekt de monochrome beheining.