Apple
Une pièce blanche avec un seul interrupteur bleu
Le design d'Apple est un modèle de sobriété: une toile presque blanche, de larges espaces blancs et une unique touche de bleu vif qui confère à chaque élément une impression de maîtrise. L'accent est mis sur la typographie – SF Pro, avec un espacement négatif des lettres qui diminue avec la taille, ce qui donne aux titres une clarté architecturale sans les alourdir. Le produit est au cœur du design: de grandes photos de produits et des images de style de vie dominent, tandis que les éléments chromés se fondent dans de fins cadres, une navigation translucide et des lignes subtiles. Sur un fond gris clair, des sections alternent avec des blocs de couleur pour les supports promotionnels, créant un rythme par les variations d'échelle plutôt que par des éléments décoratifs.
La mise en page est une page pleine largeur sans limite de largeur fixe pour les conteneurs: les sections s’étendent d’un bord à l’autre, avec des blocs de texte centrés à environ 980 px. La navigation se compose d’une barre globale fixe unique, avec un sous-dossier supplémentaire pour chaque produit apparaissant au défilement. La mise en page principale est toujours centrée: un nom de produit en grand format, un slogan concis, deux boutons (type pilule), puis une image du produit occupant tout l’espace restant. Les sections sont empilées verticalement avec un espacement généreux (plus de 64 px entre elles), alternant les fonds #f5f5f7 et des fonds colorés. Le bas de page présente une unique rangée horizontale de fiches de service pleine largeur (Apple TV+, Fitness+, Musique, Arcade), chacune étant un bloc photo avec du texte superposé et un bouton (type pilule). Pas de barres latérales, pas de mise en page à plusieurs colonnes, pas de compositions asymétriques: tout est centré, empilé et symétrique.
La photographie est le langage visuel dominant. Les photos de produits sont prises sur un fond blanc pur ou gris clair, sans aucun contexte: l’appareil est la vedette, isolé et mis en valeur. Les photos de mise en scène sont affichées dans des bannières pleine largeur, souvent avec des objets cadrés serrés. Les dégradés de couleurs (bleu pastel, rose, vert) servent de toile de fond aux sections produits, et non d’élément décoratif. L’iconographie est minimaliste et linéaire, d’une épaisseur de 1 à 2 pixels, dans la même gamme de gris que le texte. Aucune illustration, aucun graphisme abstrait, aucun rendu 3D, à l’exception des photos de produits elles-mêmes.
Palette
Marque
- Apple Blue
#0071e3— Boutons d'action remplis, états sélectionnés - la seule couleur chromatique interactive utilisée avec parcimonie pour donner du sens à chaque apparition. - Link Blue
#0066cc— Bordures d'action mises en évidence, liens intégrés: une couleur plus saturée que le bleu Apple est utilisée là où une tablette entièrement colorée serait trop voyante. - Signal Blue
#2997ff— Cadres décoratifs, contours d'images, bordures d'icônes: la couleur bleu clair la plus claire du système, utilisée pour l'ambiance plutôt que pour l'interaction avec l'utilisateur.
Neutre
- Carbon
#1d1d1f— Le texte principal, les bordures des titres, les lignes de navigation, les bordures des cartes – la couleur d'encre prédominante est presque noire avec une légère nuance chaude. - Frost
#f5f5f7— La surface de la page, le fond du texte principal et le pied de page sont de couleur gris clair, signature d'Apple, légèrement plus froide que le blanc pur. - Ice
#f4f8fb— Des aplats de couleur expressifs, des teintes subtiles, du texte de boutons sur un fond sombre — une subtile nuance de bleu qui dynamise la section sans la faire ressortir. - Smoke
#333333— Texte secondaire, remplissage de la navigation, bordures des boutons: une couleur neutre et polyvalente pour les bordures et les icônes qui ont besoin de plus de relief qu’un gris moyen. - Graphite
#474747— Le texte de navigation, les bordures de navigation et les bordures des liens occupent une position intermédiaire entre Carbon et Smoke dans la hiérarchie des éléments. - Ash
#707070— Texte de pied de page, bordures de listes, bordures de navigation, texte courant discret: un gris moyen pour le contenu qui doit être présent mais pas mis en évidence.
Typographie
de 12 à 56 px · 8 étapes
- SF Pro Display — remplacement: Inter · grandes lignes 400, 600, 700 · Les titres et les textes de grande taille (40 px et plus) utilisent un format d'affichage avec une ouverture plus étroite et un crénage négatif plus marqué; la taille 700 est réservée aux mises en page publicitaires et la taille 400 aux noms de produits dans le contenu éditorial.
- SF Pro Text — remplacement: Inter · grandes lignes 300, 400, 600 · Texte principal, navigation, boutons, sous-titres — police de travail; 400 pour le texte principal, 300 pour les sous-titres et les étiquettes qualifiées, 600 pour les éléments de navigation et le texte des boutons; l’espacement négatif des lettres diminue proportionnellement à la taille (de -0,022em à 12px à -0,01em à 44px).
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 12px |
| Rayon du bouton | 980px |
| Rayon de la carte | 8px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 64px |
| Largeur de la page | 1440px |
L'IA construira votre site web dans le style Apple et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Ui — Plan clinique sur papier mat
- ElevenLabs — Un reportage photo aux tons crème chauds, avec des titres discrets. Un carnet de style Bauhaus: papier couleur coquille d’œuf, encre noire et une touche de violet et d’orange pour la présentation du produit.
- monopo saigon — Une lueur liquide et irisée derrière le silence éditorial — une galerie éditoriale monochrome flottant sur une lumière en fusion
- Awesomic — Grille éditoriale en zinc avec des signes de ponctuation orange évoquant des confettis
- Monad — revue technique éditoriale sur parchemin chaud
- Dub — Panneau de commande en papier de riz mat de Link
- Seline Analytics — Un tableau analytique silencieux sur du papier chaud
- Ventriloc — Un observatoire éditorial de données sur papier chaud – une simple braise orange soulignant la précision monochrome
- Duolingo — Mascotte de classe ludique sur papier blanc
- Stripe — Un livre de comptes écrit à l'encre indigo sur du verre dépoli
- Notion — Un carnet en papier chaud sous le soleil de midi
- Hyer Aviation — Au crépuscule, le ciel pâle de l'aube se fond dans le cockpit, tandis que le logo à empattements, de la taille du fuselage, se mêle à la pâleur du ciel. Une unique touche de couleur argile chaude vient rompre la monotonie monochrome.