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
- Studio — Un mur de galerie en mouvement. Chaque écran représente une surface d'exposition grise et silencieuse où des éléments typographiques et des œuvres créatives superposées rivalisent d'attraits.
- Mollie — Un comptoir en cachemire, un registre sombre. Prévoyez un large espace blanc autour du texte noir pour la mise en page, puis mettez en valeur les produits avec des tons crème chauds, des bruns expresso et des photos illustrant les moyens de paiement.
- Basis Theory — Terminaux de paiement dans le studio de design. Du papier technique blanc, des couches de transaction translucides superposées et un unique élément de contrôle turquoise définissent l'orientation visuelle.
- CleanShot X — Un studio avec un bureau éclairé en bleu. Créez un espace blanc apaisant autour d'un texte noir compact, puis laissez les commandes d'un bleu profond et les images superposées des produits Mac occuper le devant de la scène.
- Modern Treasury — Un grand livre de trésorerie sur papier millimétré. Créez des pages ressemblant à une feuille de calcul blanche et épurée, où les flux de trésorerie sont représentés par des traits fins, des nœuds étiquetés et des contrôles précis et discrets.
- Basha-Franklin — Une grille de galerie sous un linteau blanc. Utilisez une teinte chaude #f4ede6, une structure noire subtile et des colonnes asymétriques inspirées de photographies évoquant un portfolio d'architecture imprimé.
- Bajgart Office — Mur de galerie éditoriale. Utilisez un grand espace blanc où les polices à empattement discrètes et les extraits de portfolio ont plus d'impact visuel que les éléments d'interface chromés.
- Heptabase — Un bureau baigné de soleil. Des surfaces chaudes, semblables à du papier, des commandes couleur anthracite et des fenêtres flottantes pour la recherche créent l'impression d'un espace de travail organisé plutôt que d'un panneau de contrôle logiciel.
- Bejamas — Pyjamas — vert citron acide à travers du verre noir. Créez des pages éditoriales apaisantes, aux tons gris clair, ponctuées de panneaux noirs captivants où des traînées de lumière verte floues sillonnent la surface.
- Baba — Notes de soin baignées d'une lumière rougeoyante. Créez de larges bandes narratives rouges autour de surfaces d'information intimes blanches, roses et crème, en utilisant des photographies de personnes comme centre émotionnel.
- Grafana Labs — La salle de contrôle de la station de signalisation Sunrise. Un espace de travail calme, aux tons gris et blancs, se marie à un large dégradé d'horizon à quatre couleurs et à des signaux d'interface bleus précis.
- Kagi — Une salle de lecture séparée. Créer un espace blanc ouvert autour d'un texte en gras couleur graphite, en utilisant de subtiles touches de violet et des surfaces aux tons pastel chauds pour rompre la tranquillité.