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
- Studio — In galerymuorre yn beweging. Elk skerm fertsjintwurdiget in rêstich, griis tentoanstellingsoerflak dêr't typografyske materialen en oerlappende kreative wurken stride om oandacht.
- Mollie — In kasjmier teller, in tsjuster grutboek. Lit genôch wite romte oer foar redaksjoneel ûntwerp om 'e swarte tekst hinne, en fersterkje dan produktrelatearre punten mei waarme crèmes, espressobrowns en taktile foto's fan werklike betelmethoden.
- Basis Theory — Betellingsterminals yn 'e ûntwerpstudio. Wyt technysk papier, oerlappende trochsichtige transaksjelagen en in inkele turkooizen kontrôle-elemint definiearje de fisuele rjochting.
- CleanShot X — In studio mei in blau-ferljochte buroblêd. Meitsje in rêstige wite romte om kompakte swarte tekst hinne, en lit dan de rike blauwe kontrôles en laachfoarmige Mac-produktôfbyldings sintraal stean.
- Modern Treasury — In skatkisteboek op grafiekpapier. Meitsje siden dy't lykje op in rêstich, wyt wurkblêd, dêr't cashflows werjûn wurde mei tinne linen, labelde knooppunten en krekte, ferburgen kontrôles.
- Basha-Franklin — In galeryraster ûnder in wite latei. Brûk in waarme #f4ede6-tint, in subtile swarte struktuer, en asymmetryske kolommen basearre op foto's dy't lykje op in printe arsjitektoanyske portfolio.
- Bajgart Office — Redaksjonele galerymuorre. Brûk in grutte wite romte dêr't subtile serif-lettertypen en portfoliofragminten mear fisueel gewicht drage as ferchromde ynterface-eleminten.
- Heptabase — In sinneljochte buro. Waarme, papiereftige oerflakken, houtskoalkleurige kontrôles en driuwende finsters foar ûndersyk skeppe it gefoel fan in organisearre wurkromte ynstee fan in softwarekontrôlepaniel.
- Bejamas — Pyjama's - soere kalk troch swart glês. Meitsje rêstige, ljochtgrize redaksjepagina's ûnderbrutsen troch boeiende swarte panielen dêr't wazige griene ljochtstrepen it oerflak krúse.
- Baba — Soarchnotysjes yn read sinneljocht. Meitsje brede reade ferhalende strepen om yntime wite, rôze en crèmekleurige ynformaasjeflakken, mei foto's fan minsken as it emosjonele sintrum.
- Grafana Labs — De kontrôlekeamer fan it Sunrise Signal Station. In rêstige griis-wyt wurkromte kombinearret mei in brede, fjouwerkleurige hoarizongradiënt en presys blauwe ynterfacesignalen.
- Kagi — In aparte lêskeamer. Meitsje in iepen wite romte om fetdrukte grafyttekst hinne, mei subtile pearse aksinten en waarme pastelkleurige oerflakken om de rêst te ûnderbrekken.