Apple
Ein weißes Zimmer mit einem einzelnen blauen Schalter
Apples Design ist ein Musterbeispiel an Zurückhaltung: eine nahezu weiße Fläche, viel Weißraum und ein einzelner, leuchtend blauer Akzent, der jede Aktion bewusst wirken lässt. Der Fokus liegt auf der Typografie – SF Pro mit negativem Buchstabenabstand, der sich mit zunehmender Größe verringert und Überschriften so eine architektonische Klarheit verleiht, ohne dabei zu wuchtig zu wirken. Das Produkt selbst ist das Design: Große Produktfotos und Lifestyle-Bilder dominieren, während Chrom-Elemente in schmalen Rahmen, transparenter Navigation und dezenten Linien zurücktreten. Abschnitte wechseln sich vor hellgrauem Hintergrund mit farbigen Blöcken für Werbematerialien ab und erzeugen so Rhythmus durch Skalierungsunterschiede statt durch dekorative Elemente.
Das Seitenlayout ist eine Vollbildseite ohne festgelegte maximale Containerbreite – Abschnitte erstrecken sich über die gesamte Breite, wobei Textblöcke mittig bei ca. 980 Pixeln angeordnet sind. Die Navigation besteht aus einer einzigen, festen globalen Leiste mit einem zusätzlichen Unterordner für jedes Produkt, der beim Scrollen erscheint. Das Hauptlayout ist stets zentriert: ein großer Produktname, ein einzeiliger Slogan, zwei Pill-Buttons und ein Produktbild, das den restlichen Viewport ausfüllt. Die Abschnitte sind vertikal gestapelt mit einem großzügigen vertikalen Abstand (mindestens 64 Pixel zwischen den Abschnitten) und wechseln sich mit #f5f5f7- und farbigen Hintergründen ab. Die untere Seite besteht aus einer einzigen horizontalen Reihe von Servicekarten in voller Breite (Apple TV+, Fitness+, Music, Arcade), die jeweils aus einem Fotoblock mit darüberliegendem Text und einem Pill-Button bestehen. Keine Sidebars, keine mehrspaltigen Inhaltslayouts, keine asymmetrischen Kompositionen – alles ist zentriert, gestapelt und symmetrisch.
Fotografie ist die dominierende Bildsprache. Produktfotos werden vor reinweißem oder hellgrauem Hintergrund aufgenommen, ohne jeglichen Kontext – das Produkt steht im Mittelpunkt, isoliert und optimal ausgeleuchtet. Lifestyle-Fotos werden in vollflächigen Bannern präsentiert, oft mit eng beschnittenen Objekten. Farbverläufe (Pastellblau, Rosa, Grün) dienen als Hintergrund für die Produktbereiche, nicht als Dekoration. Die Ikonografie ist minimalistisch und linienbasiert, 1–2 Pixel dick, im gleichen Graustufenton wie der Text. Keine Illustrationen, keine abstrakten Grafiken, keine 3D-Renderings – außer den Produktfotos selbst.
Palette
Marke
- Apple Blue
#0071e3— Ausgefüllte Aktionsschaltflächen, ausgewählte Zustände – die einzige interaktive Farbanzeige wird sparsam eingesetzt, um jedem Erscheinungsbild Bedeutung zu verleihen. - Link Blue
#0066cc— Hervorgehobene Aktionsrahmen, eingebettete Links – eine gesättigtere Farbe als Apple Blue wird verwendet, wo ein vollständig ausgefülltes Tablet zu grell wirken würde. - Signal Blue
#2997ff— Dekorative Rahmen, Bildumrisse, Symbolränder – die hellste blaue Farbe im System, die eher für die Atmosphäre als für die Benutzerinteraktion verwendet wird.
Neutral
- Carbon
#1d1d1f— Der Haupttext, die Überschriftenränder, die Navigationslinien, die Kartenränder – die vorherrschende Tintenfarbe ist fast schwarz mit einem leichten Hauch von Wärme. - Frost
#f5f5f7— Die Seitenfläche, der Haupttexthintergrund und die Fußzeilenoberfläche sind in Apples charakteristischem Hellgrau gehalten, etwas kühler als reines Weiß. - Ice
#f4f8fb— Ausdrucksstarke Oberflächenfüllungen, subtile Farbtöne, Schaltflächentext auf dunklem Hintergrund – ein dezenter Blauton, der den Abschnitt belebt, ohne ihn hervorzuheben. - Smoke
#333333— Sekundärtext, Navigationsfüllung, Schaltflächenrahmen – Eine vielseitige neutrale Farbe für Rahmen und Symbole, die mehr Ausdruckskraft benötigen als ein mittleres Grau. - Graphite
#474747— Navigationstext, Navigationsrahmen, Linkrahmen - nimmt in der Elementhierarchie eine Zwischenstellung zwischen Carbon und Smoke ein. - Ash
#707070— Fußzeilentext, Listenrahmen, Navigationsrahmen, dezenter Fließtext – Ein mittleres Grau für Inhalte, die vorhanden, aber nicht prominent sein sollen.
Typografie
von 12 auf 56 Pixel · 8 Schritte
- SF Pro Display — Ersatz: Inter · Umrisse 400, 600, 700 · Überschriften und große Texte – Größen ab 40px verwenden ein Display-Format für eine engere Öffnung und stärkeres negatives Tracking; 700 ist für Werbelayouts reserviert, und 400 ist für Produktnamen in redaktionellen Inhalten vorgesehen.
- SF Pro Text — Ersatz: Inter · Umrisse 300, 400, 600 · Fließtext, Navigation, Schaltflächen, Unterüberschriften – Arbeitsschriftart; 400 für Fließtext, 300 für Unterüberschriften und qualifizierte Beschriftungen, 600 für Navigationselemente und Schaltflächentext; negativer Buchstabenabstand verringert sich proportional zur Größe (von -0,022em bis 12px auf -0,01em bis 44px).
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | Durchschnitt |
| Grundlegender Schritt | 12px |
| Radius der Schaltfläche | 980px |
| Kartenradius | 8px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 64px |
| Seitenbreite | 1440px |
KI erstellt Ihre Website im Apple -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- Ui — Klinischer Plan auf mattem Papier
- ElevenLabs — Eine Fotostrecke in warmen Cremetönen mit dezenten Überschriften. Ein Notizbuch im Bauhaus-Stil – eierschalenfarbenes Papier, schwarze Tinte und ein einzelner violetter und orangefarbener Akzent zur Produktpräsentation.
- monopo saigon — Ein flüssiges, irisierendes Leuchten hinter der redaktionellen Stille – eine monochrome Bildergalerie, die auf geschmolzenem Licht schwebt
- Awesomic — Redaktionelles Zinkgewebe mit orangefarbenen Satzzeichen, die an Konfetti erinnern
- Monad — redaktionelles Fachjournal auf warmem Pergament
- Dub — Link's mattes Reispapier-Bedienfeld
- Seline Analytics — Ein ruhiger analytischer Tisch auf warmem Papier
- Ventriloc — Ein redaktionelles Observatorium von Daten auf warmem Papier – eine einzelne orangefarbene Glut, die die monochrome Präzision hervorhebt.
- Duolingo — Verspieltes Klassenmaskottchen auf weißem Papier
- Stripe — Ein mit indigoblauer Tinte auf mattiertem Glas geschriebenes Kassenbuch
- Notion — Ein warmes Notizbuch aus Papier in der Mittagssonne
- Hyer Aviation — Dämmerung im Cockpit über Pergament. Der blasse Morgenhimmel trifft auf das rumpfgroße Serifenlogo, und ein einzelner warmer Tonakzent durchbricht die monochrome Zurückhaltung.